Section 8. CSS 박스 모델(2)

06. 디스플레이 속성

몇몇 요소들은 본질적으로 '인라인_inline 요소' 또는 '블록_block 요소'이다.

 

인라인 요소 = 다른 요소들과 같은 라인에 배치

블록 요소 = 다른 요소들과 다른 라인에 단독으로 배치

 

인라인 요소와 블록 요소 간에는 같은/다른 라인에 배치된다는 차이점뿐만 아니라

margin, padding, width, height에 있어서도 차이점을 보인다.

 

inline	block	inline-block
width, height 무시됨. margin, padding은 다른 요소를 좌우 양쪽으로 밀어내지만, 상하 양쪽으로는 밀어내지 않음.	웹 문서의 흐름을 끊어내고 혼자 그 줄을 다 차지함. 다른 요소가 이들의 width, height, margin, padding을 침범할 수 없음.	inline 요소와 동일하게 간주되나, 다른 요소가 width, height, margin, padding을 침범할 수는 없음.

 

이외에도 많은 것들이 display라는 속성의 속성값으로 사용될 수 있다고 MDN 홈페이지에는 되어있지만,

많은 것들이 제대로 쓰이지 않거나 일부 브라우저에서 지원되지 않는다. (MDN 하단 표 참조)

 

 

display: block;

<h1>I am h1.</h1>
<h1>I am also h1.</h1>

<h1>과 같은 heading 요소(h1 ~ h6), 단락 요소인 <p>는 기본적으로 블록 요소이다.

여기에 배경색과 테두리를 적용하게 되면,

h1 {
  background-color: palegoldenrod;
  border: 1px solid black;
}

↓

요소가 차지하는 범위가 그 줄 전체라서, 다른 요소를 다른 줄로 밀어냄을 알 수 있다.

 

이런 블록 요소를 display 속성을 사용해 인라인 요소로 만들 수 있다.

h1 {
  background-color: palegoldenrod;
  border: 1px solid black;
  display: inline;
}

↓

요소를 가운데정렬 하지 않아서 한쪽으로 쏠려보이는 것이다.

이렇게 한 줄 전체를 다 차지하지 않음을 확인할 수 있다.

 

 

 

 

display: inline;

반면,

span은 기본적으로 inline 요소에 해당해서 다른 요소나 내용을 다른 줄로 밀어내지 않는다.

<span>I am Span.</span>
<span>I am also Span.</span>

여기에 배경색과 테두리를 입히게 되면

span {
  background-color: paleturquoise;
  border: 1px solid black;
}

↓

가운데 정렬 하지 않아서 한쪽으로 쏠려 보이는 거다.

 

이걸 반대로 블록 요소로 만들 수도 있다.

span {
  background-color: paleturquoise;
  border: 1px solid black;
  display: block;
}

↓

 

 

 

 

inline 요소 & block 요소의 width, height, margin, padding

그러면 이런 인라인 요소와 블록 요소에 margin이나 padding을 적용하면 어떻게 될까?

VSCode에 lorem을 쓰고  Tab  또는  Enter 를 누르면 의미 없는 줄글이 쭈욱 입력된다.

그 텍스트 중간에 <span> tag를 다음과 같이 끼워 넣었다.

! cf, Lorem ipsum: 디자인 또는 개발을 하다 보면 정확한 의미의 텍스트 대신 의미 없는 임의의 텍스트를 사용하여 작업을 많이 하곤 한다.

이는 텍스트의 내용에 집중하기보다 디자인(배열 등)에 집중하기 위해서이다.

이런 용도로 사용할 때 Lorem ipsum을 그리킹_greeking이라고도 부르며, 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다.

키케로의 《최고선악론》(De finibus bonorum et malorum)이라는 작품에서 임의의 문장을 발췌해 왔다고 하는데, 내용상으로 아무런 의미가 없는 문장이다.

<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat officiis facere, eum mollitia sit quam laboriosam reprehenderit possimus, dicta laudantium perspiciatis, obcaecati rem ducimus? Dolorum quidem explicabo praesentium eius eaque.
<span>I AM SPAN!!!</span>
Nobis, quae eaque temporibus totam ad veniam perferendis excepturi eveniet atque repellendus enim, possimus officiis quo ullam? Distinctio quod velit, modi ipsam, sapiente atque rem dolorum molestias hic dolorem omnis?
</p>

그리고 <span>에만 아래와 같이 스타일을 넣어주었다.

span {
  background-color: palevioletred;
  border: 1px solid black;
}

↓

 

그런데 여기서 <span>의 margin이나 padding, width, height를 바꾸게 된다면 어떻게 될까?

 

먼저, width와 height 속성을 아래처럼 추가했다.

span {
  background-color: palevioletred;
  border: 1px solid black;
  width: 500px;
  height: 500px;
}

↓

결과는 똑같다..ㅎㅎ;;

<span>이 인라인 요소여서 width와 height는 무시되기 때문이다!

 

그렇다면 이번에는 margin과 padding을 바꾼다면?

span {
  background-color: palevioletred;
  border: 1px solid black;
  padding: 50px;
}

↓

padding이 적용되어 요소의 크기가 커졌지만, 그렇다고 다른 요소를 밀어내지는 않는다.

 

여기에 margin을 더하게 되면,

span {
  background-color: palevioletred;
  border: 1px solid black;
  padding: 50px;
  margin: 50px;
}

↓

margin 때문에 주변의 요소들이 좌우로는 (그것도 그 한 줄에 대해서만) 밀려났지만 상하로는 밀려나지 않은 걸 확인할 수 있다. 공간을 차지하는 것도 아니다.

 

 

반면, 블록 요소를 추가해서 width와 height를 적용하게 되면,

<h1>I am h1.</h1>
<h1>I am h1.</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat officiis facere, eum mollitia sit quam laboriosam reprehenderit possimus, dicta laudantium perspiciatis, obcaecati rem ducimus? Dolorum quidem explicabo praesentium eius eaque.
<span>I AM SPAN!!!</span>
Nobis, quae eaque temporibus totam ad veniam perferendis excepturi eveniet atque repellendus enim, possimus officiis quo ullam? Distinctio quod velit, modi ipsam, sapiente atque rem dolorum molestias hic dolorem omnis?
</p>

h1 {
  background-color: palegoldenrod;
  border: 1px solid black;
  width: 200px;
  height: 40px;
}
span {
  background-color: palevioletred;
  border: 1px solid black;
  padding: 50px;
  margin: 50px;
}

↓

블록 요소에는 width, height가 적용된다는 것을 확인할 수 있다. 유효하다!

 

여기에 padding 값을  50px 주게 되면,

h1 {
  background-color: palegoldenrod;
  border: 1px solid black;
  width: 200px;
  height: 40px;
  padding: 50px;
}
span {
  background-color: palevioletred;
  border: 1px solid black;
  padding: 50px;
  margin: 50px;
}

↓

블록 요소의 padding은 다른 요소가 침범할 수 없다.

 

거기다 margin을 50px 또 적용하게 되면,

h1 {
  background-color: palegoldenrod;
  border: 1px solid black;
  width: 200px;
  height: 40px;
  padding: 50px;
  margin: 50px;
}
span {
  background-color: palevioletred;
  border: 1px solid black;
  padding: 50px;
  margin: 50px;
}

↓

padding과 마찬가지로 블록 요소의 margin도 다른 요소의 침범을 받지 않는다!

 

 

 

 

display: inline-block;

인라인-블록 요소는 인라인 요소처럼 작동하지만, width, height, margin, padding이 제대로 적용된다.

 

<div></div>
<div></div>
<div></div>

div {
  width: 200px;
  height: 200px;
  background-color: olivedrab;
  border: 5px solid black;
}

↓

div가 기본적으로 블록 요소라서 이렇게 줄이 나뉜다.

 

하지만 이것을 inline 요소로 바꾸게 되면,

div {
  width: 200px;
  height: 200px;
  background-color: olivedrab;
  border: 5px solid black;
  display: inline;
}

↓

이상해진다..

왜냐하면 inline은 width, height를 무시하기 때문!!!!!

 

그래서 얘를 inline 대신에 inline-block으로 바꾸고 50px의 margin을 주었더니

이렇게 한 줄에 나왔다..ㅎㅎ

 

이게 바로 inline과 inline-block의 차이점!!!

 

 

 

display: none;

display 값을 none으로 설정하게 되면, 요소가 있긴 있는데 삭제된 것도 아니면서

공간을 전혀 차지하지 않는 것으로 보인다.

(즉, 그 요소가 사용자의 눈에는 보이지 않는다.)

 

나중에 Javascript를 공부할 때 유용하게 쓰인다고 한다!

     ex, 처음에는 웹 페이지 내 요소를 보이지 않게 설정했다가 나중에는 보이게 하는 등.

 

 

 

 

 

07. CSS 단위 복습

https://from-ms-to-developer.tistory.com/entry/Section-6-CSS-%EA%B8%B0%EC%B4%882

Section 6. CSS 기초(2)

앞에서 px 이외에도 CSS에서 사용하는 크기 단위에 상대적인 단위가 있고, 절대적인 단위가 있다는 것은 언급한 바가 있다. (위 포스팅 11. 픽셀로 글꼴 크기 지정하기 참조.)

 

절대적인 단위로 언급했던 px, pt, cm, mm, in 중에서 px 말고는 실제로 사용하는 일이 거의 없지만,

상대적인 단위로 언급했던 em, rem, vh, vw, %는 모두 꽤나 자주 사용되는 것들이다.

 

cf, 절대적 단위 중 가장 흔히 쓰이는 px은 반응형 웹 사이트를 만들 때 사용하는 건 비추!

 

 

percentage(%)

퍼센티지는 항상 다른 값에 대해 상대적이다.

   ex 1, width를 50%로 설정 = 부모 요소 너비 × ¹/₂

   ex 2, line-height를 50%로 설정 = 요소 자체 폰트 크기 × ¹/₂

 

매번 요소의 크기를 설정할 때 정확한 px값을 계산하는 번거로움을 어느 정도 해소해 줄 수 있다.

 

width, height와 같은 속성은 그 속성이 쓰인 요소의 부모 요소의 크기를 기준으로 퍼센티지가 적용되지만,

속성이 쓰인 요소 자체의 폰트 크기를 기준으로 삼거나,

요소 자체의 다른 값을 기준으로 삼는 경우도 있다.

 

 

 

 

 

08. CSS 단위: ems

em은 '엠'이라고 발음한다..ㅎㅎ

 

CSS 등장 이전부터 쓰이던 오래된 단위로, 대문자 M의 너비, 높이, *타이포그래피와 연관이 있다.

* 타이포그래피(typography): 활자의 시각적인 측면, 즉 활자의 모양과 배열 등을 구성하고 표현하는 일.

 

em 역시 앞에서 다룬 %처럼 상대적인 단위이며, 다른 값에 영향을 받는다. 

font-size: 1em;

1em은 부모 요소와 똑같은 크기를 의미한다.

2em으로 쓰면 부모 요소보다 2배 큰 사이즈를 의미하는 것이다.

 

em은 글 크기에만 사용되는 것은 아니다.

padding, margin에도 사용될 수 있다.

하지만 그렇다고 해서, 2em이 여백 크기의 2배로 설정된다는 뜻이라고 생각한다면 크나큰 오해이다!

 

왜냐하면 em이라는 단위 자체가 요소 자체의 정확한 '글꼴 크기'를 기준으로 하는 단위이기 때문에,

<article>
   <h2>I am h2.</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi a magnam ipsa quaerat animi, in labore soluta. Rerum, possimus? Itaque illo laborum quidem facere assumenda, unde consequatur ducimus rem quam.</p>
</article>

article {
   font-size: 20px;
}
h2 {
   font-size: 2em;
   margin-left: 1em;
}
p {
   font-size: 1em;
}

위와 같은 코드의 경우,

부모 요소인 article의 글 크기 20px을 기준으로,

h2 요소의 글꼴 크기는 그의 2배인 40px이 되는 것이고,

왼쪽 여백 h2 요소의 글 크기를 기준으로 절반이 되는 것이라 20px이 되는 것이다.

 

여기에 버튼을 추가한다고 했을 때, 버튼의 크기를 px로 지정하게 된다면,

<article>
   <h2>I am h2.</h2>
   <button>Click me!</button>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi a magnam ipsa quaerat animi, in labore soluta. Rerum, possimus? Itaque illo laborum quidem facere assumenda, unde consequatur ducimus rem quam.</p>
</article>

button의 font-size가 얼마가 되느냐에 따라 아래처럼 모양이 달라질 것이다. (padding: 0 20px; border-radiu: 10px로 동일하다고 가정.)

폰트의 크기가 커질수록 모서리가 점점 더 각진 듯한 모양을 나타낸다.

 

하지만, 이걸 상대적 단위인 em으로 아래처럼 만든다면,

article {
   font-size: 20px;
}
h2 {
   font-size: 2em;
   margin-left: 1em;
}
p {
   font-size: 1em;
}
button {
  font-size: 1em;
  background-color: #2a9d8f;
  padding: 0 1em;
  border-radius: 0.5em;
}

airticle의 폰트 크기가 달라짐에 따라서

전체적인 크기가 커질지언정, 둥근 모서리가 각진 형태를 띄는 모습은 확인할 수가 없다.

 

그래서 더욱 유용하게 활용할 수 있는 단위이다^^

 

 

 

 

 

09. CSS 단위: rems

em의 한계점 때문에 rem이 등장했다고 앞에서 다루었는데,

그 한계점이라는 것이 도대체 뭘까?

 

<article>
   <ul>
      <li>Pasta
         <ul>
            <li>Ravioli
               <ul>
                  <li>Spinach Ricotta</li>
               </ul>
            </li>
            <li>Pepper Deli</li>
            <li>Penne</li>
         </ul>
      </li>
      <li>Salad</li>
      <li>Gelato</li>
   </ul>
</article>

위와 같은 중첩된 목록에서 article의 글꼴 크기가 15px이라고 하고, ul의 글꼴 크기를 1.5em으로 설정했다고 가정한다면

ul {
   font-size: 1.5em;
}

↓

이렇게 되어버린다...ㅋㅋㅋ 저게 뭐얔ㅋㅋㅋㅋㅋㅋ

 

이로써 알 수 있는 em의 단점은 단계별로 누적이 되어버린다는 것이다.

부모 요소의 1.5배가 지속적으로 이루어지다 보니,

처음의 목록과 그 아래는 1.5배 차이, 그 아래는 2.25배 차이가 나게 되는 것이다.

 

 

rem

rem은 root em의 약자이다. em과 비슷하지만,

em처럼 부모 요소의 크기에 따라 제 크기가 달라지는 것이 아니라

그 파일의 루트(root)라고 할 수 있는 <html> 요소의 글꼴 크기를 기준으로 크기를 달리한다는 것이 차이점이다.

 

즉, 문서 전체의 글꼴 크기가 <html> 글꼴 크기 하나에 의해서 일정하게(?) 좌우된다는 뜻이다.

그래서 보통 em보다는 rem이 작업하기에 훨씬 쉽다.

 

그 html 문서의 나머지 부분에 비례해서 어떻게 보이는지를 결정해주는 단위이기 때문이다.

 

 

그래도 가끔은 em과 rem을 섞어서 쓰는 경우도 존재한다.

버튼처럼 간단한 요소나 재사용할 수 있는 항목을 만드는 경우에는, 모서리 둥글리기와 같은 스타일을 적용할 때 글꼴 크기를 보고서야 거기에 맞춘다던지 하는 경우도 있기 때문!