CSS Box Model
생활코딩에서 다음과 같이 앞 전 HTML 강의에서 작성하였던 페이지들을 다음과 같은 레이아웃에 따라 배치하고자 한다.
그전에 앞 서, Box Model에 대한 이해를 확실히 짚고 넘어가는 것이 좋다.
2.html 페이지, 그 중 <a>태그와 <h1>태그에 적용을 하여 Box Model에 대해서 알아 보았다.
다음과 같이 <h1>의 CSS에 border에 5px, red 컬러에 solid를 주었고 <a> 태그에도 같은 css 속성을 넣어 Box 영역에 대해서 시각적으로 확인하였다.
<h1> 과 같은 제목 태그는 block level element로 해당 영역의 전체를 보유하고 <a> 태그는 inline element로 자신이 가진 크기만큼의 영역을 기본값으로 가지는 태그이다.
다음과 같은 영역을 css에서 변경해주기 위해서 display라는 효과를 넣는데 display: inline, block, none을 주로 활용하고 inline은 자신의 크기만큼의 영역, block은 화면에서 자신의 크기가 자치한 높이만큼의 한 블럭, none은 사라지게 한다.
즉, display: block 은 위 사진의 <h1>을 둘러싼 border의 영역을 가지게 되고
display: inline은 위 사진의 <a>를 둘러싼 border 만큼의 영역을 가지게 된다.
<a> 태그에 display: block을 <h1>태그에 display: inline을 주면 다음과 같다.
그리고 사진과 같은 border에 대한 속성 값이 세번 출력되고 a와 h1 내의 속성에 중복이 있는데, 이는 다음과 같이 줄일 수 있다.
해당 border로 표현되는 영역의 크기는 width와 height, margin과 padding으로 조절할 수 있는데
- width - 너비
- height - 높이
- margin - 바깥여백
- padding - 안쪽여백
을 조절한다.
실제 이용하고 있는 웹페이지나 제작하고 있는 프로젝트에 대한 Style sheets 에 대한 값과 그 적용 범위에 대해서 확인할 수 있다.
웹페이지에서 F12를 눌렀을 때에 나오는 정보창(개발자 도구)를 확인할 수 있는데, 이때에 하나의 태그를 선택하고 Styles를 살펴 보면, 어떤 영향을 받고 있는지에 대해서 그 영역을 보여준다.
맨 위에서 보여준 그림(레이아웃)을 적용해보면 다음과 같이 적용하였는데,
이때에 <ol> 태그에 대해서 padding 값을 보면 4개의 값을 지정하였다.
padding : 10px 10px 10px 20px; 로
작성이 되었는데 이 값은
상단, 우측, 하단, 좌측의 값을 개별로
지정하는 것으로 margin또한 동일하게 적용이 가능하다.
다음의 값을 적용하면 영역은 우측의 사진과 같다.
ol의 숫자는 padding에 포함되는 것을 확인할 수 있으며,
위에서 언급했던 px값이 상단부터 시계방향으로 적용되었다.
다음에는 ol과 본문의 영역을 분리하는 그리드에 대해서 강의를 들을 예정이다.