정신과 시간의 방

1. inline이 아닌 요소 (block, in-line block)의 크기에 적용할 수 있는 것

(1) 너비, 높이

ㄱ. 절대적인 수치 이용 (px)

ㄴ. 부모 요소의 크기에 대한 상대적인 요소 이용(em, %)

ㄷ. 윈도우 창 전체 크기에 대한 상대적인 요소(이를 뷰포트라고 함) 이용

(Xvw- 윈도우 창 너비의 X%, Xvh - 윈도우 창 높이에 대한 X%)

ㄹ. 윈도우 창 너비와 높이 중 큰 것/ 작은 것에대한 상대적인 요소

(Xvmax - 둘 중 큰 것의 X%, Xvmin - 둘 중 작은 것에 대한 X%)

ㅁ. max-width, min-width / max-height, min-height

설정해두면 block이나 inline-block이 해당 너비나 높이 이상으로 커지거나 작아지지 않음.

부모 요소가 없어지거나 해당 기준치 이상 작아져도 미리 기재한 min이나 max 기준은 지킴.

부모 요소의 width가 640px에서 320px가 됨.

그런데 자식 요소의 min-width = 480px이면 부모 요소를 튀어 나와 그대로 유지됨.

(예시)

(**ㄷ,ㄹ은 윈도우 창 줄이거나 늘리면 그에 따라 상대적으로 커지고 작아진다.)

(**ㄷ,ㄹ은 폰트 크기에 대해서도 쓸 수 있다. %도 쓸 수 있지만, 폰트에서는 다른 의미이다. 폰트에서의 %는 부모 요소의폰트 크기에 대한 상대적 요소이다.)

(**vw, vh는 각각 너비, 높이 단위 둘 다에 쓰일 수 있다.)

(** display = none;은 해당 block이나 inline요소를 안 보이게 만든다. )

(2) 바깥 여백, 안 쪽 여백

ㄱ. 바깥쪽 여백 == margin

margin에 쓰일 수 있는 단위도 너비,높이에서 쓰일 수 있는 단위와 동일하다.

margin Xpx; - 동서남북 전부 Xpx만큼 적용

margin Xpx 6vh; - 세로는 Xpx, 가로는 6vh만큼 적용

margin Xpx 6vh Ypx - 위는 Xpx만큼, 가로는 6vh만큼, 아래는 Ypx만큼 적용

margin Xpx 6vh Ypx Zpx - 시계방향으로 위는 Xpx, 오른쪽 6vh, 아래는 Ypx, 왼쪽은 Zpx 만큼 적용

ㄴ. margin의 특징

**margin- top 혹은 margin - left, right, bottom 으로 한 곳만 지정할 수도 있다.

하지만 이렇게 지정하면 지정하지 않은 곳에도 여백이 있을 수 있다. 이는 브라우저가 default로 적용하는 기본 margin 이 있기 때문이다. 따라서 아래만 값을 적용하고 나머지 margin을 0으로 하고 싶다면 margin 0 0 24px 0 과 같이 적어야 한다.

** 자식 요소의 여백이 부모 요소의 여백보다 큰 경우, 부모 요소에 자식 요소의 초과된 여백만큼 여백이 더 적용된다. 만약 자식 요소의 bottom이 24px, 부모 요소의 bottom이 16px이면 부모 요소의 bottom 여백은 24px이 된다.

** 겹치는 block 끼리는 여백을 공유한다.

위의 block과 아래 block이 있다. 위 block의 bottom 여백이 24px, 아래 block의 top 여백이 24px이면 총 48px이 되어야 할 것 같지만 그 사이 여백은 그저 24px이다. 둘이 같은 여백을 공유하기 때문이다.

만약 위 block의 bottom 여백이 48px이고, 아래 block의 top 영역은 24px이면, 그 사이 여백은 48px이다. 여백이 큰 녀석이 적용되고, 작은 녀석은 그걸 공유한다.

ㄷ. auto(오직 block에서만! 사용 가능)

margin의 좌 우 바깥 여백에 대해서만 쓰일 수 있는 keyword로

둘 사이의 공백을 최대치로 맞추어, 요소가 중앙에 있을 수 있게 해준다.

쓰는 예시)

margin: 0 auto;

0 안 적고 그냥 auto만 써도 적용되기는 한다.

만약

margin: 0 24px 0 auto;

이런 식으로 좌 우 다르게 적용한 경우, 오른쪽은 24px의 바깥 여백 쓰고, 왼쪽은 나머지 쓸 수 있는 바깥 여백 다 쓰는 걸로 된다.

ㄹ. 안쪽 여백 == padding

padding도 돌아가는 원리는 margin과 같음.

*inline-block의 경우, auto와 같은 효과가 나게 하려면?

inline block 의 상위 요소에 text-align: center;로 설정하면 된다.

**text-align은 텍스트 정렬 방향

why?

inline-block은 글자 취급을 받기 때문이다.

2.. 스스로 해보기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>실습용 페이지</title>

  <link rel="stylesheet" href="./1_style.css">
</head>
<body>
  <h1>요소의 크기</h1>
  <p> 아다마 트라오레</p>
  <p class="special">
    황희찬
  </p>

  <div>
    div 요소
  </div>

  </body>
</html>

p{
  /* display: none; */
  text-align: center;
  font-size: 5vmax;
  width: 50vw;
  height: 50vh;
  line-height: 50vh;
  background-color: orange;
  color: black;
  margin: 24px;
}

p.special{
  min-width: 320px;
  min-width: 320px;
  margin: 0 auto;
}

저작자표시

[CSS] 박스모델 1

1. inline이 아닌 요소 (block, in-line block)의 크기에 적용할 수 있는 것

(1) 너비, 높이

(2) 바깥 여백, 안 쪽 여백

*inline-block의 경우, auto와 같은 효과가 나게 하려면?

2.. 스스로 해보기

티스토리툴바