HTML & CSS5 5/7~8 생활코딩 < CSS 完 > 오늘의 진도: WEB2 - CSS 그리드 +5/8 ~수업을 마치며 1. 그리드의 기본 사용법 목록과 본문이 나란히 위치하는 디자인하기 그 여러가지 방법 중 최신의 방법 - 그리드 디자인만을 위해 사용하는 태그 div block level element다. 같은 목적으로 만들어진 또 하나의 태그 span 이것은 inline element다. → 목적에 따라서 둘 중 하나를 사용한다. 오늘은 div를 사용할 것이다. 부피감을 알기 위해 선을 그려준다. sytle 태그 안에 다음을 추가한다. div{ border:5px solid gray; } 이 두개의 태그를 나란히 놓기 위해서 이 두개의 태그를 감싸는 부모가 필요하다. 그리고 부모 태그에 id를 준다. (id 값은 아무거나 해도 된다.) grid 태그는 .. 2020. 5. 7. 5/6 생활코딩 오늘의 진도: WEB2 - CSS 박스모델 1. CSS box model 소개 박스모델: HTML 태그 하나하나를 일종의 네모난 박스로 취급해서 그것의 부피감을 결정하는 것 즉, 디자인에서 핵심적인 요소 h1 태그는 자동 줄바꿈이 되지만 a 태그는 그렇지 않다. 그것이 더 편하기 때문. 각각의 태그가 차지하고 있는 공간이 얼마인지 알 수 있게 선을 그려보자. h1{ border-width:5px; border-color: red; border-style: solid; } a{ border-width:5px; border-color: red; border-style: solid; } ※ 주석 만들기 /* (내용) */ h1은 화면 전체를 사용하고 - 이런 태그를 block level element라고 한다.. 2020. 5. 7. 5/5 생활코딩 < CSS 시작 > 오늘의 진도: WEB2 - CSS 커버 페이지~CSS 선택자를 스스로 알아내는 방법 Atom에서 특정 부분 코드를 무시하게 하기: 괄호!-- (무시할 부분) --괄호 CSS는 html과 완전히 다른 언어이다. 따라서 웹브라우저에게 그것이 CSS라는 사실을 알려줘야 한다. = head 안에 style 태그 안에 담는다. 모든 a에 대해서: a 하나만 쓰면 된다. 대괄호 열고 폰트색 바꾸기: color:red; ex) 생활코딩 WEB1 웹사이트 中 현재 2. 태그라는 페이지에 있다는 것을 표시하기 위해서 2. 태그를 빨간색으로 하고 싶다. -> 해당 a 링크의 주소 옆에 style="color: red"를 추가해준다. a href="02.html" style="col.. 2020. 5. 5. 5/4~5 생활코딩 < HTML 完 > 오늘의 진도: WEB1 - HTML & Internet HTML이 중요한 이유~웹호스팅 * HTML이 중요한 이유 (1) 비즈니스적인 측면 ① 일반인이 제목을 쓸 때: strong & 글씨 크기 크게 ② 지식인이 제목을 쓸 때: h3 태그 → 차이는? 검색엔진에 해당 단어로 검색했을 때, 검색엔진은 ②을 더 먼저 보여줄 것이다. ∵ 'h3'는 제목을 의미하지만, 'strong & 글씨 크기 크게'는 시각적인 장식이기 때문 (2) 휴머니즘적인 측면 웹페이지를 예쁘기 하기 위해서 HTML을 사용하지 않고 웹페이지 전체를 이미지로 만든다면 시각 장애인이 스크린리더로 읽기 힘들다. img 이미지 넣기 * 이미지 태그에 속성을 적용해보자 (1) 이미지의 source(줄여서 src.. 2020. 5. 5. 5/3 생활코딩 - HTML 시작 오늘의 진도: WEB1 - HTML & Internet 커버 페이지~줄바꿈 * html editor로 검색해서 자신에게 맞는 에디터 찾기 생활코딩에서는 Atom 사용 brackets도 추천 * 자동 줄바꿈 - 설정에서 Soft wrap에 체크 * 한글이 깨지면 괄호 meta charset="utf-8" 괄호를 입력해라. strong 진하게 u 밑줄 h1~h6 제목+글자크기 br 줄바꿈 (닫지 않음) p 단락 단락을 표현할 때는 p가 더 좋다. ∵ 웹페이지를 정보로서 보다 가치있게 해주기 때문 but p의 단점 - 단락과 단락 간격이 고정되어 시각적 자유도↓ (cf) br은 쓰는만큼 줄바꿈이 되므로 원하는 만큼 간격을 줄 수 있다.) → CSS로 이 한계를 극복: p style="margin-.. 2020. 5. 4. 이전 1 다음
