꿈꾸는 개발자, Front-end Developer

Trust that the dots will connect in your future.

#CSS #Dev #EJS #HTML #Hexo #JavaScript #dev #jQuery #smallTalk #번역 #삽질 #신세계 #이론 #정보처리기사

웹페이지 Layout을 잡아봅시다 2.


어떤 문서 프로그램이던 글을 정렬하는 기능은 있기 마련입니다. ‘왼쪽 정렬’, ‘가운데 정렬’, ‘오른쪽 정렬’.

그리고 그 기능 하나면 글, 그림, 표 등 모든 정렬을 ‘뚝딱!’ 해낼 수 있지요.

하지만 웹 브라우저는 그렇지 않더군요…

이 사실을 모르고 어찌나 헤매었던지…

오늘은 이에 대한 기록을 남겨 봅니다.


HTML의 element(이하 요소)들은 layout 측면에서 크게 두 가지로 나눌 수 있습니다.

한 가지는 In-line(인라인), 그리고 다른 한 가지는 Block(블럭) level 요소입니다.

Layout에서 이 둘의 가장 큰 차이는 해당 요소가 가로 화면 끝까지의 공간을 차지하느냐 그렇지 않느냐 하는 것입니다.

예컨대, In-line 요소 중 하나인 <span>에 “안녕하세요.”라는 짧은 글을 입력했을 때,

웹브라우저는 “안녕하세요.”라는 글씨 만큼의 공간을 <span>요소에 할당합니다.

즉, 글씨가 짧아지면 <span>의 공간은 그 만큼 줄어들고, 반대로 글씨가 길어지면 공간은 그 만큼 늘어납니다.

반면, Block 요소 중 하나인 <p>에 “안녕하세요.”라는 글을 입력했을 때는 글씨의 길이와는 상관없이 가로 화면 끝까지의 공간을 기본 값으로 차지합니다.

(물론, CSS로 width 속성 값을 주면 길이를 조절할 수 있습니다.)


See the Pen xPwGqM by zzolain (@zzolain) on CodePen.

똑같은 길이의 글, 코드 구조이지만 차지하는 공간이 다름에 주목하세요!


저는 In-line을 ‘글씨’, Block을 ‘글을 담는 상자’ 정도로 이해하고 사용하고 있습니다.

왜냐하면 Block 요소는 다른 Block요소 또는 In-line 요소를 자식(하위) 요소로 가질 수 있거든요.

반면, In-line 요소는 자식 요소를 가질 수 없고 오직 text, 즉 글자만을 내용으로 담습니다.

마치 상자 안에 또 다른 상자나 공책을 담을 수 있지만, 공책 안에는 글씨 외에 다른 것을 담을 수 없는 것과 같습니다.

<html>
<body>
<div class="boxNo1">
<div class="boxNo2">
<span class="note">"안녕하세요 저는 '글'입니다."</span>
</div>
</div>
</body>
</html>

See the Pen correctStructure by zzolain (@zzolain) on CodePen.

가능한 형태입니다. 상자(Block) 안에 상자를, 그 상자 안에는 노트(In-line)를, 마지막으로 노트에는 글을 담았습니다.


<html>
<body>
<span class="note">"안녕하세요 저는 '글'입니다."
<div class="boxNo1">boxNo1
<div class="boxNo2">boxNo2
</div>
</div>
</span>

See the Pen IncorrectStructure by zzolain (@zzolain) on CodePen.

불가능한 형태입니다. 노트(In-line) 안에 상자(Block)를 담을 수가 없군요.

<span> 밖으로 <div>가 튀어 나왔습니다.


이 둘의 성격이 다르다 보니, 정렬하는 방법도 다릅니다.

  1. In-line 요소를 정렬하는 CSS 속성은 text-align입니다.

    • text-align은 가로 정렬에 대한 속성이며, 속성 값으로 left, center, right를 갖습니다.

    • CSS 속성은 부모(상위) 요소에 정의하면 됩니다.

      <html>
      <body>
      <div>
      <span>"안녕하세요"</span>
      </div>
      </body>
      </html>

      위 코드와 같이 <span>의 부모 요소로 Block요소인 <div>가 존재한다면 <span> 요소의 정렬 기준은 부모 요소인 <div>가 됩니다.


      <html>
      <body>
      <span>"안녕하세요"</span>
      </body>
      </html>

      위 코드와 같이 In-line요소인 <span>의 부모(상위) 요소로(<span>을 감싸고 있는) <body> 외에 아무런 Block level 요소가 없다면 기준은 <body>가 됩니다(<body>를 가장 큰, 기본 Block 요소로 생각하시면 됩니다.).


      See the Pen RjWWxj by zzolain (@zzolain) on CodePen.


  2. Block 요소를 정렬하는 CSS 속성은 Flex 입니다.

    • 이에 대한 설명은 이전 글을 참고해 주세요 :)
  3. In-line요소의 정렬 속성으로 Block 요소를 정렬시킬 수 없습니다.

    • 다만, Block 요소 안에 존재하는 In-line 요소는 정렬시킬 수 있습니다.

      See the Pen in-line text in block element by zzolain (@zzolain) on CodePen.

      <p> 내부의 text는 text-align: center;로 가운데 정렬이 되었지만 Block 요소인 <p> 요소 전체는 기본 정렬 상태인 왼쪽 정렬로 남아있습니다.

      (기본 정렬 상태임을 강조하기 위해 width: 70%를 정의하였습니다. 기억하시지요? Block은 기본 값으로 가로 화면 끝까지 차지한다는 것을, 꽉 채워져 있으면 좌,우, 가운데 정렬 의미가 없으니까요.)



많은 분들이 알고 계실, 어쩌면 CSS 공부를 시작하실 때 DOM Model과 함께 가장 먼저 기초로 배우실 내용일지도 모를 In-lineBlock 요소 간의 차이에 대해 다루어 보았습니다.

전 이걸 몰라서 재부팅까지 해 본 기억이 나네요…만능 재부팅느님

요약하자면, HTML의 Layout 요소에는 크게 In-line, Block이 있으며, 이 들은 각각 다른 정렬 속성을 갖고 있습니다.

Layout을 잡으실 때, 기본 적으로 Block 요소들을 사용하셔서 큰 틀을 잡으시고,

그 안에 존재하는, 혹은 독립적으로 존재하는 In-line 요소들의 위치를 세부적으로 잡으시면 좋지 않을까 합니다.

이번 기록은 여기까지 입니다.

읽어 주셔서 고맙습니다 :)

Happy November!

#CSS #HTML #dev