TIL

블록 레벨 요소 vs 인라인 레벨 요소

block

부모 요소의 전체 공간을 차지하여 블록을 만든다.

언제나 새로운 줄에서 시작, 좌 우 양측으로 최대한 늘어나 가능한 모든 너비를 차지한다.

앞 뒤 요소 사이에 새로운 줄을 만들고, 이전 이후 요소 사이에 줄 바꿈이 일어난다.

블록 요소는 인라인 요소안에 중첩 될 수 없지만, 인라인 요소는 블록 요소 안에 중첩 될 수 있다.

a 태그 안에는 블록 요소 중첩 가능!

• width, height 크기를 지정할 수 있으며
• padding, border, margin 속성을 사용할 수 있다.
• div, p, li, nav, footer 등이 있다.

inline

항상 블록 레벨 요소 내에 포함된다.

컨텐츠의 흐름을 끊지 않으며, 컨텐츠에 따라 할당된 공간만 차지한다.

문장, 단어 같은 작은 부분에 대해서 적용된다.

새로운 줄을 만들지 않는다.

width, height 크기를 지정할 수 없으며
padding, border, margin 속성을 사용할 수 있지만, 상하 margin 속성은 사용할 수 없다.

• span, a, em, strong 등이 있다.

CSS Box Model

기본 요소

CSS Box Model은 HTML 요소를 감싸는 상자로 요소, 패딩, 테두리, 마진으로 구성되어 있다.

• 요소 : 텍스트, 사진 등 보여줄 대상이다.
• 패딩 : 요소 주변 영역을 감싼다.
• 테두리 : 요소와 패딩을 감싸는 테두리이다.
• 마진 : 테두리 밖의 영역을 감싼다.

width

요소의 너비를 설정한다.

기본 값은 컨텐츠 영역의 너비이지만, box-sizing 속성을 사용하여 테두리 영역의 너비를 설정한다.

• auto : 기본값으로 브라우저가 계산하여 지정 (요소의 부모 크기 기준으로 가득 채우기)
• min-content : 최소 너비
• max-content : 컨텐츠 내용의 선호 너비

height

요소의 높이를 설정한다.

• auto : 기본값으로 브라우저가 계산하여 지정 (요소의 자식 기준으로 조절)

padding

단축 속성이다.

4가지를 모두 설정할 경우에는 padding-top, padding-right, padding-bottom, padding-left 순으로 작성한다.

p {
	padding: 10px; /* top, right, bottom, left 모두 10px */
	padding: 10px 20px; /* top, bottom :10px,  left, right:20px */
	padding: 10px 20px 30px; /* top:10px, left,right:20px, bottom:30px */
	padding: 10px 20px 30px 40px;
}

margin

단축 속성이다.

4가지를 모두 설정할 경우에는 margin-top, margin-right, margin-bottom, margin-left 순으로 작성한다.

가운데 배치

p {
	width: 400px;
	margin: auto; 
}

오른쪽 배치

p{
	width: 400px;
	margin: auto 0 auto auto;
}

margin auto는 수평 정렬을 할 수 있지만, 세로 정렬을 적용할 수는 없다!

마진 병합 현상 (Margin Collapsing)

요소와 요소 사이에 마진 탑(margin-top) 혹은 마진 바텀(margin-bottom)의 공간이 있을 경우 더 높은 값의 마진 값이 적용되는 현상

부모 요소와 자식 요소가 존재할 때, 자식 요소의 마진 탑 혹은 마진 바텀 값이 부모의 높이에 영향을 미치지 않는 현상

마진 병합 현상 해결방법

• 부모 요소에 overflow 속성 값을 적용해준다.
• 부모 요소에 display: inline-block 값을 적용해준다.
• 부모 요소에 border 값을 적용해준다.

border

테두리를 지정한다.

테두리는 요소가 차지하는 전체 너비, 높이의 일부이다.

선의 두께, 스타일, 색상을 지정할 수 있다.

box-sizing

content-box : 기본값.width, height에 border과 padding을 포함하지 않는다.

border-box : width, height에 border과 padding을 포함한다.

예를 들어, width = 컨텐츠 너비 + border + padding

overflow, overflow-x, overflow-y

박스보다 컨텐츠가 더 커서 컨텐츠가 넘칠 경우, 어떻게 처리할지를 지정한다.

• visible : 기본값, 박스를 넘는 컨텐츠를 자르지 않는다.

• hidden : 요소의 크기만큼 맞추기 위해 잘라낸다.
  [스크롤바를 제공하지 않는다.]

• scroll : 요소의 크기만큼 잘라낸다.
  [스크롤을 제공한다.]

border-radius

상자의 모서리를 둥글게 처리한다.

background

background-attachment

1. fixed : 뷰포트에 고정
2. local : 요소 컨텐츠에 대해 고정, 스크롤이 존재하면 배경은 컨텐츠와 함께 스크롤이 된다.
3. scroll : 배경 요소 자체에 대해 고정, 스크롤이 존재해도 배경은 함께 스크롤 되지 않는다.

• background-color : 배경 색상 설정
• background-image : 배경 이미지 설정
• background-position : 배경 위치 설정

background-repeat : 배경 이미지를 어떻게 반복할 것인지 설정한다.

1. repeat : 반복
2. no-repeat : 반복하지 않음
3. repeat-x : x축으로만 반복
4. repeat-y : y축으로만 반복

background-size

• contain : 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정한다. [다만, 여백 발생 가능]
• cover : 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정한다.

이미지의 가로세로비가 요소와 다르다면, 이미지를 세로 방향 또는 가로 방향으로 잘라내어 여백이 생기지 않도록 설정합니다.

div {
	...생략
	background-size: 100%;
	background-size: 100px 400px;
}

웹페이지에 이미지를 넣는 방법에는 주로 img 태그나 CSS background 속성을 사용한다.

하지만, 가급적이면 img 태그를 사용하자!

box-shadow

그림자 효과를 추가한다.

offset-x, offset-y, blur-radius, spread-radius, color 등이 있다.

opacity

불투명도를 설정한다.

0 ~ 1 사이의 숫자를 지정할 수 있다. (0: 투명, -1 : 불투명)

display 속성

• block : 요소 전후에 줄 바꿈을 생성한다.

• inline : 요소 전후에 줄 바꿈을 생성하지 않는 인라인 요소 상자를 생성하며, 정상적인 흐름에서 공간이 있으면 다음 요소는 같은 줄에 있다.

• inline-block : inline 줄 바꿈 없이 한 줄에 놓이지만, block처럼 box-model의 width, height, margin, padding 값을 모두 설정할 수 있다.

• flex : 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 단방향(1차원적)으로 설정한다.

• grid : 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 모두 이용해(2차원적) 설정한다.

• none : 해당 속성은 접근성 트리에서 해당 요소가 제거된다.
  이렇게 되면 해당 요소 및 해당 하위 요소가 사라지고, 스크린리더에도 읽히지 않는다.