<article>
| Image Replace, Sprite 기법논리적 순서
(1) 새소식
(2) 뉴스 제목
(3) 뉴스 날짜
(4) 뉴스 내용
(5) 썸네일 이미지
(6) 더보기
: (3), (4) 순서 바뀌어도 됨
<figure>
: self-contained “figure”, like a diagram, illustration, or even a code snippet.<figcaption>
: it associates a caption with its parent <figure>
element.<a>
로 다른 element를 담는 것을 허용. (권장은 X)<dl>
내에 <dt>
, <dd>
외에 grouping을 위한 <div>
만 들어올 수 있지만, 같은 dt, dd 같이 grouping 해야함
<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>
<a>
요소에 block 요소들을 담았을 경우 block 문제<time>
이 inline 요소이므로 focus가 작게 들어간다.
> 해결: <a>
를 display:block화
: News에 after로 box 하나 만드는trick
.news::before{
content: "";
position: absolute;
top: 35px;
left: 0;
display: block;
width: 80%;
height: 1px;
background: #aaa linear-gradient(to right, #aaa,#fff);
}
<article>
에 min-height를 thumbnail 크기만큼 해놓으면 기사 작아져도 깨질 일 없음논리적 순서
(1) 신규 이벤트
(2) 이벤트 썸네일
(3) 이벤트 내용
(4) 이전 / 다음 버튼
* (1) 관련 사이트
(2) 링크 목록
Semantic markup
image 크기만큼 줄인다음 padding으로 text를 밀어낸다.
<style>
.btn-wrapper{
background: yellow;
}
.btn-wrapper span{
background: pink;
display: inline-block;
width: 20px;
height: 0;
padding-top: 20px;
}
</style>
</head>
<body>
<div class="btn-wrapper">
<span class="btn-prev">이전</span>
<span class="btn-next">다음</span>
</div>
overflow: hidden, background 주면 됨
: server가 제공하는 image 최소화하기위해 한 image만 준비하고 background 위치 조정해서 보여줌
<button>
에 image sprite 잘 안 먹으면 parent <div>
에 적용.btn-event{
position: absolute;
top: 0;
right: 0;
height: 18px;
overflow: hidden;
}
.btn-event-prev, .btn-event-next {
width: 19px;
padding: 18px 0 0 0;
border: none;
background-image: url(images/back_forward.png);
background-position: 0 0;
}
.btn-event-next{
background-position: 100% 0;
}
: overflow hidden으로 하면 outline이 잘려보인다.
<div class="btn-event">
<button class="btn-event-prev" aria-label="이전 이벤트 보기"></button>
<button class="btn-event-next" aria-label="다음 이벤트 보기"></button>
</div>
> 해결 : ARIA 사용해서 text node를 없앰
.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;
}
> overflow:hidden으로 안 가려줘도 됨!