CSS 기초 실습하기 (1)
박스모델(box model) 개념과 사용법
* 본 포스팅은 이전 글에서 이어집니다.
이제 본격적으로 CSS의 기초 이론을 넘어, 레이아웃을 이해하고 구성할 수 있는 실습을 해보자.
본 포스팅 역시 생활코딩의 강좌를 공부한 내용을 바탕으로 했다.
박스모델
출처 : 생활코딩, WEB2 CSS - 8. 박스 모델실습 수업에서는 위와 같은 간단한 기획서를 토대로 진행되었다.
출처 : 생활코딩, WEB2 CSS - 8. 박스 모델먼저, box.html의 파일을 만들고 위와 같은 코드를 작성하면서 시작해 본다.
본 페이지에서, <h1>태그의 CSS부분이 화면 전체를 차지하고 있는 것을 알 수 있다.
반면 <a>태그를 사용하여 링크가 걸린 (CSS) 에는 화면 전체가 아닌, 링크가 적용된 부분만 해당되있는 것을 알 수 있다.
이는 왜그럴까? <h1> 태그는 헤드라인으로 화면 전체를 사용하는 것이 기본 값이고, <a> 태그는 단지 링크를 거는 것으로 화면 전체를 사용할 필요가 없기에 기본값이 컨텐트 부분만 적용되는 것이다.
출처 : 생활코딩, WEB2 CSS - 8. 박스 모델이를 더욱 시각적으로 확인해보면 각 값에 border를 적용해보면 얼만큼 해당 컨텐트가 차지하고 있는지 확인할 수 있다.
<h1>은 화면 전체를 쓰는 태그로, 'block level element'라 부르며
<a>는 화면 전체가 아닌 위와 같이 자신의 컨텐츠 크기만큼 쓰는 태그로, 'inline element'라 부른다.
출처 : 생활코딩, WEB2 CSS - 8. 박스 모델<h1>을 기본 설정이 아닌, inline으로 적용하려면 display:inline; 을 입력하고
마찬가지로 <a>를 기본 설정이 아닌, 화면을 꽉 채우고 싶다면 display:block; 을 입력하면 된다.
중복 제거하기 : 콤마(,) 사용과 같은 Property 묶기
(,)를 통해 선택자와 선택자를 연결하여 중복을 제거할 수 있다.
또한 같은 border-______가 반복된 부분을 제거하고 한줄에 border: 5px solid red 라고 표기할 수 있다.
이 때 5px, solid, red의 순서는 중요하지 않고 아무 위치에 두면 된다.
박스 모델의 기본 개념
본격적으로 박스모델을 공부해보면, 위와 같은 개념이 중요하다. 구글에 css box model을 검색하면 기본 이미지로 개념을 얻을 수 있다.
막 외우려고 하기보다는, 농담을 섞어서 말씀하시긴 했지만, 겨울에 입는 패딩(padding)이 컨텐트의 바깥을 감싸는 것을 의미하고
장사를 하면 남아야 되는 마진(margin)이 컨텐트와 컨텐트 사이의 간격을 의미하는 것으로 이해하면 좋다.
개발자 도구 'inspect' 활용하기
크롬 브라우저에서 오른쪽 마우스 클릭 - inspect를 클릭하면 정보를 얻을 수 있다.
<h1>부분을 클릭해봤을 때 Style항목을 보면 해당 부분이 어떠한 CSS에 영향을 받고있는지 알 수 있다.
또한 margin, border 등을 선택해보면 어떤 부분이 얼만큼의 값으로 적용됐는지 표시해준다.
이런 개발자 도구들을 적극 활용해야 경외심을 갖지 않고 웹페이지를 효율적으로 분석할 수 있다.
박스 모델 실습하기
헤드라인의 아래 줄 효과 & 간격 조정
출처 : 생활코딩, WEB2 CSS - 9. 박스 모델 써먹기WEB 밑에 밑줄 효과를 주기 위해서는, h1 선택자에 border-bottem:1px solid gray 효과를 선언해준다.
이 때 밑줄과 WEB 텍스트 간의 간격을 조절하려면 어떻게 해야할까.
출처 : 생활코딩, WEB2 CSS - 9. 박스 모델 써먹기당장 margin 이나 border 값을 조절하기 전에 문제의 본질에 가까워지기위해, inspect도구를 사용하여 확인한다.
그러면 현재 margin 값이 저만큼을 차지하고 있는 것을 확인할 수 있다.
출처 : 생활코딩, WEB2 CSS - 9. 박스 모델 써먹기margin 값은 0, padding 값을 20px을 주면, 보기 좋게 간격이 조정된다.
본문에 세로 줄 효과 넣기
<ol> 태그가 적용된 본문 부분에 세로 줄을 넣기 위해, ol 선택자에 border-right : 3px solid gray 효과를 선언한다.
그러면 좌측 사진과 같이 화면의 끝쪽에, 즉 컨텐츠의 오른쪽 끝에 줄이 형성된 것을 확인할 수 있다.
이를 가운데로 옮기고 싶다면? 컨텐츠의 크기 자체를 바꿔주면된다. 이에 우측 사진과 같이 width 값을 100px로 적용해주면 세로 줄이 가운데 즈음으로 위치한 것을 확인할 수 있다.
여백 간격을 조정하기 : padding, margin 이용
출처 : 생활코딩, WEB2 CSS - 9. 박스 모델 써먹기이 때 필요없는 간격을 조절하기 위해, inspect 도구를 사용하여 저 간격이 무엇인지 먼저 확인해 본다.
그러면 margin값이 적용돼있는 것을 알 수 있다.
margin 값을 0으로, padding값을 20px 적용하고 다시 inspect를 통해 확인해보자.
그러면 오른쪽과 같은 결과로, 줄과 컨텐트 사이의 간격이 조정된 것을 확인할 수 있다.
