브리의 성장기

문서의 레이아웃을 계산할 때, CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다. CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정한다. 박스모델을 보기 위해 개발자도구로 들어가보자. 하나의 박스는 네 부분(영역)으로 이루어진다. 각 영역을 콘텐츠 영역, 안쪽 여백(패딩) 영역, 테두리 영역, 그리고 바깥 여백(마진) 영역이라고 부른다. 박스모델을 참고하여 HTML 문서에 그리드(grid) 를 적용해보자. 아래 새로 배운 태그 를 이용해여, class 와 id 선택자를 여러개 만들었다. 여러 태그들을 하나의 class 로 묶고 그 class 에다가 효과를 주면 마치 그 태그들이 하나인 마냥 디자인이 적용된다. 태그 태그란 무색, 무취의 오직 디자인만을 위한 태그다..

HTML 으로만 구현된 무미건조한 문서에 CSS 는 디자인 효과를 입혀준다. HTML // 위 내용이 style 태그 추가로 하나의 속성에 대해서 여러개의 style 효과를 넣을 수 있는데, 이런 경우에는 세미콜론(;) 을 사용한다. 세미콜론이 각각의 구역을 구분해주는 역할을 한다. (ex) a {color:red; background-color:black;} How to find CSS property? HTML 에서 배웠던것과 동일하게 우리는 CSS 의 모든 속성을 외울 수 없다. 우리에게는 구글이 있다. 'css text size property', 'css text center property', 'css text align property' 등 키워드 입력하면 어떤 속성을 사용해야 하는지 알려준..