figure 태그로 만드는 css목록 스타일
HTML, CSS 2021. 1. 13. 22:00반응형
www.youtube.com/watch?v=8rRykjDSRl8&list=PLv_UUi9AVBVsziY1nF_9LxA6c_oaUdQ99&index=9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>figure태그로 만드는 CSS목록 스타일</title>
<style>
figure {
width: 800px;
/* border: 1px solid red; */
}
figure div {
text-align: center;
}
figure div img {
border-radius: 5px;
}
figure h1 {
background-color: #000000;
color: #ffffff;
border-radius: 5px;
text-align: center;
}
figure ul {
list-style: circle;
padding-left: 18px;
line-height: 1.6em;
}
figure ul li span {
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<figure>
<div>
<img src="./images/bridge.jpg" />
</div>
<figcaption>
<h1>Lorem ipsum dolor sit amet consectetur</h1>
<ul>
<li>
<span>Lorem, ipsum dolor</span> sit amet consectetur adipisicing
elit. Rerum ad ullam voluptates. Doloremque, quasi necessitatibus?
</li>
<li>
<span>Aut nesciunt hic aliquid porro</span> sequi quo nobis
voluptatum fugiat!
</li>
<li>
<span>Lorem ipsum dolor sit</span> amet consectetur adipisicing
elit. Numquam beatae, nisi accusantium eos illo laborum rem
reprehenderit nihil ducimus error?
</li>
</ul>
</figcaption>
</figure>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://kit.fontawesome.com/c8f7448c20.js"
crossorigin="anonymous"
></script>
<title>Document</title>
<style>
figure {
width: 600px;
/* border: 1px solid red; */
}
figure figcaption h1 {
background: #222222;
color: #ffffff;
}
figure div {
text-align: center;
}
figure ul {
line-height: 1.8em;
list-style: none;
padding: 0;
margin: 10px;
/* list-style-image: url('./images/hashtag.png'); */
}
figure ul li {
margin: 10px;
/* border: 1px solid red; */
}
</style>
</head>
<body>
<figure>
<figcaption>
<div>
<h1>아이유, '메리 핑크마스' 화보 공개</h1>
<img src="./images/iu.jpg" />
<a href="https://1boon.daum.net/actorlovers/iuhyunwoo"
>Challenge song festival</a
>
</div>
</figcaption>
<ul>
<li>
<i class="fas fa-hashtag"></i>
공개 된 광고 컷 속 아이유는 컨셉에 맞춰 상큼 발랄한 표정부터
차분하면서도 시크한 분위기까지 팔색조 같은 매력을 뽐냈다.
</li>
<li>
<i class="fas fa-hashtag"></i>
블랙 드레스에 핑크 컬러를 배경으로 아이유는 잔잔한 미소를 띄며
홀리데이 파티룩을 선보였으며, 또 다른 컷에서는 리본 끈을 머리에 얹은
채 눈을 감고 사랑스러운 표정을 짓기도 했다.
</li>
<li>
<i class="fas fa-hashtag"></i>
또한 화이트 원피스를 착용한 컷에서 아이유는 강렬한 레드립으로 180도
다른 성숙한 매력을 발산했다.
</li>
</ul>
</figure>
</body>
</html>
Download 158k Free Icons + Illustrations, Photos, and Music
Download design elements for free: icons, photos, vector illustrations, and music for your videos. All the assets made by designers → consistent quality ⚡️
icons8.com
반응형
'HTML, CSS' 카테고리의 다른 글
| 방콕코딩 CSS필수 (0) | 2021.01.13 |
|---|---|
| 링크 태그로 외부 css파일 링크하기 (파비콘, 폰트어썸) (0) | 2021.01.13 |
| [CSS 기초이론] - CSS 목록 스타일(ol, ul) (0) | 2021.01.13 |
| [CSS 기초이론] - CSS 텍스트 그림자 효과, 구글 웹 폰트 활용하기 (0) | 2021.01.13 |
| [CSS 기초이론] - CSS 텍스트 관련 스타일 (0) | 2021.01.13 |