CSS 기초 강의 - 블록과 박스모델

블록(block)

   - 블록은 한 줄에 하나의 요소만 배치되는 태그를 의미한다. 대표적인 블록 요소로는 div, h1~h6, p, ul, li 등이 있다.

예시:

<div style = "background-color : yellow; padding : 10px;">        <h2>블록</h2>        <p>한 줄에 하나의 요소만 배치됩니다.</p> </div>

 

인라인(inline)요소와 인라인 블록(inline-block)

   - 한 줄에 여러 요소가 배치될 수 있는 태그를 의미한다. 이런 인라인 요소는 HTML 문서에서 span, a, img, input 등과 같은 태그들이 해당된다. 기본적으로 태그가 필요한 영역만 차지하기 때문에 높이와 너비를 임의로 조정할 수 없다.

예시:

<span style = "display: inline-block; background-color : yellow; padding: 10px;">인라인블록</span> <a href = "#" style="display: inline-block; background-color: red; color: white; padding: 10px:">링크</a>

 

display 및 border 속성

 

1) display 속성

   - display 속성은 요소를 블록과 인라인 요소 중 어떤 형태로 처리할지를 정의한다. 요소별로 기정의된 속성값을 변경할 때에는 미리 정의되어 있는 키워드를 속성값으로 지정해야 한다.

 

1. inline: 인라인 속성으로 변경
2. block: 블록 속성으로 변경
3. inline-block: 인라인으로 배치하되, 블록 요소의 속성을 추가할 수 있다.
4. none: 디스플레이(표시)하지 않음.(요소에서 사라지진 않고, 화면에서 표시되지만 않음)

 

2) border 속성

   - border 속성을 사용하면 요소가 차지하고 있는 영역에 테두리를 그릴 수 있다. 이때 속성값으로 테두리의 두께, 모양, 크기 등을 함께 지정 할 수 있으며 이를 단축속성이라고도 한다. 지정하는 값을 한 번에 지정하지 않고, 따로 지정할 수도 있다.

.a {    border: 1px solid blue; } .b {    border-width: 1px;    border-style: solid;    border-color: blue; }

 

박스 모델(box model)

 

   - 박스 모델은 CSS에서 요소의 크기와 위치를 결정하는 핵심 개념 중 하나이다. 박스 모델은 각 요소가 사각형의 박스로 처리된다고 가정하며, 이 박스는 content, padding, border, margin의 4가지 요소로 구성된다. content는 요소의 실제 내용, padding은 content와 border 사이의 여백, border는 요소의 경계선, margin은 요소와 주변 요소 사이의 여백을 의미한다.

 

예시:

<div style="background-color: yellow; padding: 10px; border: 2px solid black; margin 20px;">     <h2>박스 모델</h2>     <p>이 박스는 content, padding, border, margin의 4가지 요소로 구성됩니다.</p> </div>

   - 위의 예시에서는 div 태그를 이용해 요소를 만들고, 배경색, 패딩, 테두리, 여백 등을 지정하여 박스 모델을 나타내었다. 이처럼 박스 모델을 이용하면 요소의 크기와 위치를 자세하게 조절할 수 있어, 콘텐츠의 디자인과 레이아웃을 더욱 세밀하게 조정할 수 있다.

   - 브라우저에서 HTML 파일을 렌더링하는 과정에서, HTML 요소에 인라인 CSS로 들어가있는 내용이 HTML의 head 요소에서 link한 CSS 파 일의 내용을 덮어쓰는 경우가 있을 수 있다. 스타일은 브라우저의 자체 스타일, 사용자 정의 스타일 HTML 요소의 스타일 순서로 처리되기 때문이다. 이렇듯 CSS를 다룰 때에는 우선순위를 고려해서 작성해야 한다.

 

자주 사용하는 속성

 

1) box-sizing

padding이나 테두리때문에 요소의 크기가 덩달아 커지는 경우 화면을 구성하는 UI가 깨지는 경우가 있다. box-sizing은 이를 대처하기 위 해 사용하는 속성이다.

• content-box: 기본값, 너비와 높이가 콘텐츠 영역만을 포함
• border-box(자주 사용): 너비와 높이가 안쪽 여백과 테두리까지 포함

2) float: 부동 요소(떠있는 요소)

float은 문서의 일반적인 흐름에서 요소를 제외하여 자신을 포함하고 있는 컨테이너(상위 요소)의 왼쪽이나 오른쪽에 배치되게 한다.

• none: 기본값, 원래 상태
• left: 자신을 포함하고 있는 박스의 왼 편에 요소를 위치
• right: 자신을 포함하고 있는 박스의 오른편에 요소를 위치

3) clear

• float 요소 이후에 표시되는 요소가 float 속성을 상속받지 않게 하여 float 요소의 아래로 내려가게 할 수 있다.
• none: 기본값, 아래로 이동되지 않습니다.
• left: float이 left인 요소의 아래로 이동
• right: float이 right인 요소의 아래로 이동
• both: float이 left 또는 right인 요소의 아래로 이동

4) position

문서 상에서 요소를 배치하는 방법을 정의합니다. position의 속성 top/bottom/left/right 으로 최종 위치를 결정할 수 있다.

• position의 속 성값은 다음과 같다.
• static: 기준이 없음. 배치가 불가능. 기본
• relative: 문서의 흐름에 따라 상대적인 오프셋(x, y 값을 적용)을 적용한다.
• absolute: 일반적인 문서의 흐름에서 벗어나 상위 요소 중 가장 가까운 position 지정 요소에 대해 상대적으로 오프셋을 적용한다. 이때 position 지정 요소는 position 속성에 값이 정의되어있는 요소를 말한다.
• fixed: 일반적인 문서의 흐름에서 벗어나 지정된 위치에 고정시킨다. (top 버튼을 생성할 때 종종 쓰입니다.)
• sticky: 일반적인 문서의 흐름대로 배치하되, 스크롤되어 해당 요소를 벗어날 때 스크롤을 이동하더라도 가장 가까운 상위 요소에 대해 오프셋을 적용한다. (스크롤을 내리더라도 헤더가 붙어있는 경우가 해당합니다.) 

 

#출처 엘리스 AI 트랙 웹 표준, 웹 접근성, 크로스 브라우징 (박규하 코치)