---
title: "190411-TIL"
date: 2019-04-11
tags: ["HTML, CSS", "TIL"]
url: https://sub2n.github.io/2019/04/11/190411-TIL/
---

# 190411-TIL

## Today I Learned

### 오늘 한 일

-   Web Cafe의 새소식 영역을 `<section>`과 `<article>`을 이용해 Markup 했다.

![새소식](https://user-images.githubusercontent.com/48080762/55950492-06c30180-5c90-11e9-929d-0bc80b3c8f8a.jpg)

\[Web Cafe 새소식 영역\]

![디자인](https://user-images.githubusercontent.com/48080762/55950705-79cc7800-5c90-11e9-806e-0d8d3fa840bf.jpg)

\[Markup Design\]

```html
<!-- news section HTML Code -->
<section class="news">
	<h2 class="news-heading">새소식</h2>
	<article class="news-item">
		<a href="#">
			<h3 class="news-item-subject">W3C 사이트가 리뉴얼 되었습니다.</h3>
			<time class="news-item-date" datetime="2019-04-11T11:19:37">2019.04.11</time>
			<p class="news-item-brief">
				디자인 및 다양한 view 환경을 고려하여 구성되어 있으며, 기존보다 최신 정보 및 개발자를 위한 기술 가이드도 찾기 쉽도록 구성되어 있습니다. 
			</p>
			<figure class="news-item-thumbnail">
				<img src="images/news.gif" alt="">
				<figcaption>W3C 리뉴얼</figcaption>
			</figure>
		</a>
	</article>
	<a href="#" class="news-more icon-plus" target="_blank">더보기</a>
</section>
```

: 처음으로 `<article>`과 `<figure>` tag를 써봤다.

`<section>` 내에 `<article>`을 nesting하는 것은 신문의 스포츠 섹션에 단일 기사를 싣는 것과 같다는 글을 읽어 이해가 쉬웠다.

Semantic HTML을 접하고 처음 `<div>` 범벅이던 코드를 만났을 때보다 훨씬 이해가 쉽고 직관적으로 구조를 짤 수 있게 된 기분이 든다.

> HTML5부터 inline인 `<a>` 안에 block 요소등을 넣을 수 있게 됐다. 그러나 focus를 받을 때 다음과 같은 문제가 생길 수 있다.

![](https://user-images.githubusercontent.com/48080762/55951195-9e751f80-5c91-11e9-819a-d4b266881b50.png)

'2019.04.11'이 inline인 time tag라서 그 부분이 들어간 모습

이는 `<a>`의 display를 block으로 바꿔주면 해결할 수 있다.

-   Image Replacing and Sprite

웹 기초 수업 때 instagram 등 Social Media의 로고로 실습을 했던 Image Sprite 기법을 다시 한 번 적용해 Web Cafe 예제를 진행했다.

![Markup Design](https://user-images.githubusercontent.com/48080762/55952063-a03fe280-5c93-11e9-816c-d909930a2baf.png)

\[신규 이벤트 & 관련 사이트 영역\]

![Markup Design](https://user-images.githubusercontent.com/48080762/55951683-c9ac3e80-5c92-11e9-9f97-8095d0bc2fe5.jpg)

\[신규 이벤트 & 관련 사이트 Design\]

#### Image Replacement

: image가 들어갈 영역의 크기를 지정해놓고, 해당 높이나 너비만큼 padding을 주고 overflow: hidden 처리를 한 후 image를 sprite로 처리한다.

#### Image Sprite

: server가 제공하는 image 최소화하기위해 한 image만 준비하고 background 위치 조정해서 보여주는 것

: 단점으로 `<button>`에 focus시 outline이 안 보이는 문제가 있었는데, ARIA를 사용해 role을 주고 button의 textnode를 삭제해 해결했다.

```css
.btn-event{
	position: absolute;
	top: 0;
	right: 0;
	height: 18px;
	padding: 2px;
}
.btn-event-prev, .btn-event-next {
	width: 19px;
	height: 18px;
	padding: 0;
	border: none;
	background-image: url(images/back_forward.png);
	background-position: 0 0;
}
.btn-event-next{
	background-position: 100% 0;
}
```

#### 하루를 마무리 하며

오늘 Semantic HTML과 tag의 효율성 등을 알아보다가 좋은 사이트를 알게 되었다. 많은 도움이 될 것으로 보여 기분이 좋다. 밑에 첨부한다.

HEXO 테마를 바꾸고 싶은데 마땅히 마음에 드는 게 없어 만들어볼까 생각중이다. 이번 주말을 활용해 알아봐야겠다.

---

😊 [INTERNETING IS HARD](https://internetingishard.com/html-and-css/semantic-html) 😊