[HTML/CSS] HTML5와 CSS3에서 추가된 기능

HTML5에서는 새로운 폼 요소, 콘텐츠 모델 등이 추가되어 웹 문서의 레이아웃을 만들 때 주요 태그들이 표준화되어 유지보수 및 가독성에 용이해졌습니다.

또한 CSS3에서는 그리드 레이아웃, 변환과 전환, 그림자와 경계선 등의 기능이 추가되어 기존보다 풍부한 시각적인 효과를 줄 수 있게 되었습니다.

HTML5

시맨틱 태그

HTML5에서는 시맨틱 태그(semantic tag)가 새롭게 추가되었습니다. 시맨틱 태그는 의미론적인 구조를 가진 태그로, 기존의 div와 span 태그 대신 사용될 수 있습니다. 시맨틱 태그를 사용하면 웹 페이지의 구조를 더욱 명확하고 의미 있는 구조로 작성할 수 있습니다.

예를 들면, header, nav, section, article, aside, footer 등의 태그는 각각 문서의 머리말, 네비게이션, 섹션, 기사, 사이드바, 푸터 등의 구조를 나타내는 데 사용됩니다.

 

<header>
  <h1>웹사이트 제목</h1>
</header>
<nav>
  <ul>
    <li><a href="#">메뉴1</a></li>
    <li><a href="#">메뉴2</a></li>
    <li><a href="#">메뉴3</a></li>
  </ul>
</nav>
<section>
  <h2>섹션 제목</h2>
  <p>섹션 내용</p>
</section>
<article>
  <h3>기사 제목</h3>
  <p>기사 내용</p>
</article>
<aside>
  <h4>사이드바 제목</h4>
  <p>사이드바 내용</p>
</aside>
<footer>
  <p>저작권 정보</p>
</footer>

입력 타입

HTML5에서는 입력 타입(input type)이 추가되었습니다. 기존에는 텍스트, 비밀번호, 체크박스, 라디오 버튼, 파일 등의 타입만 지원했지만, HTML5에서는 다양한 입력 타입을 사용할 수 있습니다.

예를 들면, email, url, tel, date, time, range, color 등의 입력 타입을 사용할 수 있습니다. 이를 사용하면 사용자가 입력하는 내용에 따라 자동으로 입력 양식의 형식이나 유효성 검사 등을 수행할 수 있습니다.

<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>

<label for="url">웹사이트:</label>
<input type="url" id="url" name="url">

<label for="tel">전화번호:</label>
<input type="tel" id="tel" name="tel">

<label for="date">날짜:</label>
<input type="date" id="date" name="date">

<label for="time">시간:</label>
<input type="time" id="time" name="time">

<label for="range">범위:</label>
<input type="range" id="range" name="range" min="0" max="100">

<label for="color">색상:</label>
<input type="color" id="color" name="color">

콘텐츠 모델

HTML5에서는 요소의 콘텐츠 모델(content model)이 확장되었습니다. 콘텐츠 모델은 요소가 포함할 수 있는 콘텐츠의 종류를 나타내는 규칙입니다.

예를 들면, div 요소는 인라인 요소와 블록 요소를 모두 포함할 수 있지만 section 요소는 블록 요소만 포함할 수 있습니다. HTML5에서는 이러한 콘텐츠 모델을 보다 엄격하게 지키도록 요구합니다. 이를 통해 브라우저가 콘텐츠를 더욱 잘 이해하고 구조화된 문서를 생성할 수 있습니다.

<section>
  <h2>섹션 제목</h2>
  <p>섹션 내용</p>
  <ul>
    <li>항목 1</li>
    <li>항목 2</li>
  </ul>
</section>

---

CSS3

그리드 레이아웃

CSS3에서는 그리드 레이아웃(grid layout)이 새롭게 추가되었습니다. 그리드 레이아웃을 사용하면 더욱 복잡한 레이아웃을 쉽게 구현할 수 있습니다. 그리드 레이아웃은 열과 행으로 구성된 그리드를 만들어 각 셀에 요소를 배치하는 방식입니다.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

변환과 전환

CSS3에서는 요소의 변환(transform)과 전환(transition)을 지원합니다. 변환은 요소의 위치, 크기, 회전 등을 변경하는 것이고, 전환은 변화가 일어나는 과정을 부드럽게 처리하는 것입니다.

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 1s;
}

.box:hover {
  transform: rotate(45deg);
  background-color: blue;
}

그림자와 경계선

CSS3에서는 그림자(box shadow)와 경계선(border)에 새로운 기능이 추가되었습니다. 그림자와 경계선은 요소의 시각적인 효과를 강화하는 데 사용됩니다.

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  border: 1px solid black;
}

미디어 쿼리

CSS3에서는 미디어 쿼리(media query)를 사용하여 미디어 타입에 따라 다른 스타일을 적용할 수 있습니다. 예를 들어, 스마트폰과 PC에서 다르게 보이도록 스타일을 지정할 수 있습니다.

@media screen and (max-width: 480px) {
  /* 스마트폰 화면에 대한 스타일 */
}

@media screen and (min-width: 481px) {
  /* PC 화면에 대한 스타일 */
}