[CSS] Display: Block

안녕하세요 동기 여러분! 오늘은 디스플레이 프로퍼티의 값인 블록에 대해 알아봅시다!

 

Display: Block

어제는 필요한 만큼만 가로의 공간을 차지하고 그 옆에 다른 요소들이 올 수 있게 하는 HTML의 요소들을 알아보았는데 오늘은 오면 바로 가로의 공간을 다 차지하는 블록 레벨 요소(Block-level element)들을 표로 정해보았습니다.

 

태그	설명
<address>	연락처
<article>	글, 기사 내용
<aside>	어사이드 내용 (설명이나 따로 추가할 내용에 주로 씀)
<blockquote>	긴 블록 형태의 인용문 (CSS로 설정해줘야 효과가 들어감)
<details>	사용자의 행동에 의해 보이거나 숨길 수 있는 정보를 담음 ( <slot>태그와 기능은 비슷 ) 눌러줘 숨은 정보 등장
<dialog>	대화 상자 - Firefox, Internet Explorer
<dd>	디스크립션 리스트에 있는 용어 설명
<div>	문서 나누기 (제일 많이 쓰는 태그가 아닐까 클래스나 아이디 묶을 때 많이 씀)
<dl>	디스크립션 리스트
<dt>	디스크립션 리스트 용어
<fieldset>	<label>이랑 같은 기능 (label은 인라인 요소이다.)
<figcaption>	캡션이나 범례 표현을 부모인 <figure>요소의 내용으로 박아 넣을 수 있음
<footer>	푸터 자세한 내용은 여기
<form>	<input> 쓸 때 사용함 자세한 내용은 여기
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>	제목 (1~6) 숫자가 클 수록 부제목
<header>	웹 페이지의 서두 부분
<hgroup>	<hgroup>의 사용은 권장하지 않는다고 합니다. 도움 되는 기술 서포트가 없다고 함.
<hr>	The Thematic Break (Horizontal Rule) element / 구분선
<li>	리스트
<main>	현재 작성하고 있는 HTML 문서에서 가장 중요한 내용을 넣으면 됨
<nav>	네비게이션 링크를 담는 요소 - 길잡이 목차 만들 때 쓰는 요소
<ol>	순서가 정해진 리스트 만들 때 쓰는 요소
<p>	문단
<pre>	여기에 문서를 작성하면 fixed-width font와 여백 줄바꿈이 모두 개발자가 작성하는 그대로 나타남
<section>	섹션 나눌 때 사용 - 주제를 나눌 때
<table>	테이블 만들 때 사용 - 자세한 내용은 여기
<ul>	순서 없는 리스트 만들 때 사용

 

---

 

이제 어제 알아본 인라인 요소들을 위 표에 있는 블럭 레벨 요소들처럼 바꾸는 마법을 부려봅시다.

 

<!-- HTML -->
<h2>아무리 아름다운 꽃도 열흘 넘기지 못하고 아무리 강한 권력도 10년을 넘기지 못한다.</h2>
<p><ruby>花無十日紅<rt>화무십일홍</rt></ruby> <ruby>權不十年<rt>권불십년</rt></ruby></p>

/* CSS */
p {
  font-size: 30px;
}

• <ruby>는 인라인 요소(inline element)입니다. 저렇게 옆으로 쭉 써놓아도 자기가 필요한 만큼만 가로 크기를 차지하고 다른 요소를 옆에 올 수 있게 합니다. 
• 코드에서 <ruby>가 두개가 쓰였는데 어떻게 되는지 봅시다.

화무십일홍 권불십년이 한줄에 쫙 오게 되었습니다.

 

그럼 어떻게 해야 블럭 레벨 요소들처럼 가로방향을 다 차지하게 할까요?

/* CSS */
p {
  font-size: 30px;
}

ruby {
  display: block;
}

• 바로 display: block; 코드를 사용하면 됩니다. 

어때요 정말 쉽죠?

 

---

 

오늘의 느낌

아까 헬스장과 마지막 인사를 하고 왔다. 온타리오주는 21일 동안 실내 체육관을 모두 닫는다. 슬프다 슬퍼...