새소식
마크업
내 마크업1
2
3
4
5
6
7
8
9
10section.news
h2.news-header
a.news-link
article.news-item
h3.news-item-subject
time
p.news-item-brief
span
img
a.news-more
강사님 마크업
1 | section.news |
figure
caption을 달기 위한 마크업
적절한 예
부적절한 예
html
1 | <section class="news clearfix"> |
css
내 css1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45/* news */
.news{
position: relative;
}
.news-heading{
padding: 15px 0;
color: #e25d2d;
font-weight: 700;
}
.news-item{
position: relative;
margin: 35px 0;
}
.news-item-subject{
float: right;
width: 245px;
font-weight: 700;
}
.news-item-date{
float: right;
width: 245px;
margin-bottom: 10px;
}
.news-item-brief{
float: right;
width: 245px;
}
.news-item-thumbnail{
float: left;
position: absolute;
top: 0;
text-align: center;
}
.news-item-thumbnail>figcaption{
margin-top: 10px;
}
.news>a{
position: absolute;
right: 0;
top: 15px;
}
.news>a::before{
color: darkgreen;
}
강사님 css1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54.news{
margin-top: 20px;
position: relative;
}
.news::before{
content: "";
position: absolute;
top: 35px;
left: 0;
width: 80%;
height: 1px;
background: #aaa linear-gradient(to right, #aaa, #fff);
}
.news-heading{
font-size: 1.5rem;
font-weight: 700;
color:#e25d2d;
}
.news-item{
margin-top: 35px;
position: relative;
}
.news-item a{
display: block;
padding-left: 130px;
}
.news-item-subject{
font-size: 1.5rem;
}
.news-item-brief{
margin-top: 10px;
line-height: 1.5;
}
.news-item-thumbnail{
position: absolute;
top: 3px;
left: 0;
text-align: center;
}
.news-item-thumbnail img{
margin-bottom: 15px;
box-shadow: 0 10px 15px 5px #aaa ;
}
.news-more{
position: absolute;
padding: 8px;
top: -8px;
right: -8px;;
}
.news-more::before{
color: hsla(110, 90%, 30%, 1);
}
a tag에 여러 요소가 있을 때 a tag를 block으로 하면 선택 촛점 영역이 반듯해짐
이벤트 & 사이트
마크업
내 마크업1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17div
section.event
h2.event-heading
span
div.event-content
p
img.event-thumbnail
p.event-brief
div.event-buttons
button.event-pre
button.event-next
section.relation
h2.relation-heading
span
ul.relation-site-list
li.relation-site-item
a.relation-site-item-text
IR
1 | <!DOCTYPE html> |
1 | .btn-wrapper span{ |
1 | .btn-wrapper span{ |
위 css는 .btn-wrapper span의 background를 대표속성을 사용하여 background-position이 자동으로 지정됨
.btn-next의 선택자 우선순위가 더 낮아서 .btn-wrapper .btn-next로 선택해야 지정이 됨
아래 css는 대표속성을 사용하지 않아 .btn-next로 선택해도 동작
https://windtale.net/blog/css-image-sprite-automation-with-grunt-spritesmith/