-
우아한테크캠프 Day13우아한테크캠프 2018. 7. 18. 23:12
나무보다 전체적인 숲을 보면서 먼저 틀을 잡는 연습을 할 것 (문제를 단순화 시켜서 연습할것)
ex. 페이스북을 만들겠다라고하면 div를 여러개 만들어서 이것을 어떻게 배치할지 큰 틀을 먼저 잡아야 한다.
중요하고 어려운건 색깔 같은 것이 아니라 배치를 어떻게 할 것인가다. (배치, 위치, 간격 etc...)
by. 크롱
head 태그
웹페이지의 메타 데이터 (웹페이지에 대한 정보)
class
CSS의 스타일을 만들고 이를 부르는 용도
클래스 명을 지을 때는 명사를 쓴다. 그리고 '-' 또는 '_'를 통해 부연설명을 해주면 된다. ex. member-two
CSS 파일을 html페이지에 적용하는 3가지 방법
inline
internal
external
id
보통 id는 레이아웃을 잡는 바깥쪽 영역의 태그에 주로 부여한다.(여러 가지 태그를 감싸는 태그들에 사용)
block 태그와 inline 태그
block 태그는 새로운 줄부터 배치되고, inline 태그는 옆으로 배치된다.
기본적으로 block 태그 : div, h1, p, ul, ol, li, dl, dt, dd, blockquote, form, fieldset
기본적으로 inline 태그 : span, a, em, img, strong, abbr, acronym, input, label, select, textarea
Day13 학습 내용
<!DOCTYPE html>
해당 페이지에 대한 정보를 브라우저에 알려준다.
예전에는 파일에 대한 종류가 많았는데, 지금은 html에 밖에 없어서 큰 의미가 없어졌다.
CSS 레이아웃
레이아웃 작업 (Rendering)
엘리먼트를 화면에 배치하는 것
웹사이트 내에서 배치를 할 때, 다양한 방식으로 배치할 수 있도록 CSS에는 추가적인 속성을 제공한다.
중요하게 이해해야 할 속성은 다음과 같다.
display(block, inline, inline-block)
position(static, absolute, relative, fixed)
float(left, right)
margin
이 속성을 중심으로 엘리먼트의 배치를 이해하는 것이 중요하다.
float
블록 요소(세로 방향으로 위치하는 요소)를 나란하게 배치하게 하는 속성
ex. 신문 지면에서 사진 옆에 텍스트가 표시되도록 하는 것
margin
간격을 조절하는 속성
하나의 블록엘리먼트는 box형태임. (box-model)
CSS 학습법
1. CSS의 대표적인 속성을 한번 훑어보기 (우리가 상상하는 모든것이 이미 존재한다.)
2. 유명 사이트를 방문해서 이건 어떻게 구현했을까? 간격은 어떻게 준 것일까?를 벤치마킹하면서 배울것
반응형 웹사이트
만들기 어렵지만, 생각보다 많이 쓰이지 않는다.
구현하는 방법은 '% 비율'에 따라서 브라우저가 재 계산을해서 화면을 구성한다
전 국민을 대상으로 하는 웹사이트는 거의 고정형 웹사이트다.
'우아한테크캠프' 카테고리의 다른 글
우아한테크캠프 Day15 (0) 2018.07.23 우아한테크캠프 Day14 (0) 2018.07.20 우아한테크캠프 Day12 (0) 2018.07.17 우아한테크캠프 Day11 (0) 2018.07.17 enum (열거형) (0) 2018.07.15
