엘리스 AI

[1주차] CSS 레이아웃

욘아리 2023. 3. 3. 01:00

웹사이트의 레이아웃에 영향을 미치는 요소에 대해 정리해 보았습니다.📝

블록(block) 요소

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

<div style="background-color: yellow; padding: 10px;">
	<h2>블록</h2>
	<p>한 줄에 하나의 요소만 배치됩니다.</p>
</div>
  • 줄바꿈 현상이 나타남
  • width, height 값 사용 가능
  • margin, padding 값 사용 가능

인라인(Inline) 요소

블록(block) 요소와 다르게 한 줄에 여러 요소가 배치될 수 있는 태그를 의미합니다. 인라인 요소는 span, a, img, input 등과 같은 태그들이 해당됩니다.

  • 줄바꿈 현상이 나타나지 않음
  • width, height 값 적용 불가능
  • margin, padding 값 적용 불가능

display 및 border 속성

display 속성

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

  • inline : 인라인 속성으로 변경
  • block : 블록 속성으로 변경
  • inline-block : 인라인으로 배치하되, 블록 요소의 속성 추가 (두 요소의 성격을 모두 가짐)
  • none : 요소에서 사라지진 않고, 화면에서 표시되지만 않음
<span style="display: inline-block; background-color: yellow; padding: 10px;">인라인블록</span>

인라인 요소인 span 태그를 inline-block으로 지정하면서 배경색, 글자색, 패딩(padding) 등을 적용

인라인블록을 이용하면 한 줄에 여러 요소들이 자연스럽게 배치될 수 있어 텍스트와 함께 사용할 수 있는 효과적인 방법

border 속성

border 속성을 사용하면 요소가 차지하고 있는 영역에 테두리를 그릴 수 있습니다.

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

속성값을 한 번에 지정할 수도 있고, 따로 지정할 수도 있습니다.

박스 모델(box model)

박스 모델은 각 요소가 사각형의 박스로 처리된다고 가정하며, 이 박스는 content, padding, border, margin의 4가지 요소로 구성됩니다.

  • content : 요소의 실제 내용
  • padding : content와 border 사이의 여백
  • border : 요소의 경계
  • margin : 요소와 주변 요소 사이의 여백

margin 과 padding은 (top) (right) (bottom) (left) 순서로 한 줄에 작성이 가능합니다.

마진병합 현상

형제지간의 마진병합

margin-bottom과 margin-top 중 숫자가 큰 값으로 적용됩니다.

<div class="box1">Hello World</div>
<div class="box2">Hello World</div>

.box1 { margin-bottom: 150px; } /* 적용값 */
.box2 { margin-top: 100px; }

부모자식간의 마진병합

자식 뿐만 아니라 부모에도 영향을 미칩니다.

<main role="main">
	<article>
	</article>
</main>

article { width: 200px; height: 200px; margin-top: 100px; }

자식인 <article> 뿐만 아니라 부모인 <main>에도 영향을 미침

자주 사용하는 속성

box-sizing

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

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

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

float은 문서의 일반적인 흐름에서 요소를 제외하여 자신을 포함하고 있는 컨테이닝(상위 요소)의 왼쪽이나 오른쪽에 배치되게 합니다. 이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것입니다.

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

Clear

float 요소 이후에 표시되는 요소가 float 속성을 상속받지 않게 하여 float 요소의 아래로 내려가게 할 수 있습니다.

  • none : 기본값, 아래로 이동되지 않습니다.
  • left : float이 left인 요소의 아래로 이동
  • right : float이 right인 요소의 아래로 이동
  • both : float이 left 또는 right인 요소의 아래로 이동

position

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

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

브라우저와 공간 사이의 공백 제거

<html>, <body> 태그는 margin과 padding 값을 가지므로 초기화를 해주어야 합니다.

html, body { margin: 0; padding: 0; }

* { margin: 0; padding: 0; }