HTML, CSS/day26 / 23.10.04(수) / (핀테크) Spring 및 Ai 기반 핀테크 프로젝트 구축
04_display
01_block_level.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
# block 레벨 요소
- 항상 새로운 라인에서 시작
- width, height, margin, padding 속성 지정 가능
- block 레벨 요소 안에 inline 요소를 사용할 수 있음
# inline 레벨 요소
- content의 너비만큼 가로폭을 차지
- inline 요소안에 block 레벨 요소를 포함할 수 없음
-->
<style type="text/css">
h2{
border: 2px solid red;
}
p{
border: 2px solid gold;
background-color: yellow;
font-size: 20px;
padding: 30px;
}
.content{
border: 2px solid blue;
width: 300px;
height: 200px;
text-align: center;
background-color: skyblue;
}
a, img, span{
border: 2px solid green;
/* width: 300px; */
}
span{
font-size: 40px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>block 레벨 요소</h2>
<p>width, height 미지정 -> width: 100%, height: auto;</p>
<div class="content">
<span>width: 300px; height:100px;</span>
</div>
<br>
<h2><span>inline</span> 레벨 요소</h2>
<a href="#">link 1</a>
<a href="#">link 2</a>
<img src="../../image/img/img_submit.gif"/>
<img src="../../image/img/img_submit.gif"/>
</body>
</html>02_display.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
# display 속성
- 태그 영역의 표현 방식을 지정
- none : 해당 요소를 화면에 표시하지 않음
- block : block 특성을 가지는 요소로 지정
- inline : inline 특성을 가지는 요소로 지정
- inline-block : inline-block 특성을 가지는 요소로 지정
-->
<style type="text/css">
.none{
display: none;
}
.inline{
border: 1px solid blue;
display: inline;
margin: 20px;
background-color: skyblue;
}
.block{
border: 1px solid red;
display: block;
}
.inline_block{
border: 1px solid purple;
display: inline-block;
margin: 20px;
}
</style>
</head>
<body>
<h2>display</h2>
<br>
<span> none </span>
<div class="none">
화면에 보이지 않습니다.
</div>
<span> none </span>
<hr>
<div class="inline"> div_1</div>
<div class="inline"> div_2</div>
<div class="inline"> div_3</div>
<hr>
<span> block </span>
<span class="block"> span block</span>
<span> block </span>
<hr>
<div class="inline_block"> div_1 </div>
<div class="inline_block"> div_2 </div>
<div class="inline_block"> div_3 </div>
</body>
</html>03_visibility_opacity.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
# visivility 속성
- 요소를 보이게 할 것인지, 보이지 않게 할 것인지를 결정
- visivle : 해당 요소를 보이게 함
- hidden : 해당 요소를 보이지 않게 함
- collapse : table 요소에 사용하면 행이나 열을 보이지 않게 함
# opacity 속성
- 투명도를 지정
> 0 ~ 1 ( 0.0 : 투명, 1.0 : 불투명)
-->
<style type="text/css">
.visible{visibility: visible;}
.hidden{visibility: hidden;}
.none{visibility: none;}
table, tr, td{
border: 1px solid black;
width: 200px;
height: 100px;
text-align: center;
}
.collapse{
visibility: collapse;
}
div, img{
border: 1px solid gray;
width: 100px;
height: 200px;
color: white;
background-color: skyblue;
opacity: 0.3;
}
div:hover, img:hover{
opacity: 1.0;
}
</style>
</head>
<body>
<h1>visivility</h1>
<h2 class="visible">visible</h2>
<hr>
<h2 class="hidden">hidden</h2>
<hr>
<h2 class="none">none</h2>
<hr>
<br>
<table>
<tr>
<td> A </td><td> B </td>
</tr>
</table>
<br>
<table class="collapse">
<tr>
<td> A </td><td> B </td>
</tr>
</table>
<hr>
<br>
<h1>opacity</h1>
<div>
<span> opacity</span>
</div>
<br>
<img src="../../image/img/라이언_후드.png"/>
</body>
</html>05_background
01_image-repeat.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
-->
<style type="text/css">
.norepeat{
border: 1px solid red;
height: 500px;
background-image: url(../../image/bg_image/flower_bee.jpg);
background-repeat: no-repeat;
}
.repeat-x{
height: 200px;
background-image: url(../../image/bg_image/narrow_bg.png);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>background-image</h1>
<div class="norepeat">
<img src="../../image/bg_image/banner.png"/>
</div>
<hr>
<h1>background-repeat</h1>
<div class="repeat-x">
<img src="../../image/bg_image/bombit_logo.png"/>
</div>
<hr>
</body>
</html>02_position.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
# background-position
- 배경 이미지의 위치를 지정
- background-position : 키워드
- background-position : x좌표
- background-position : x좌표, y좌표
-->
<style type="text/css">
.top{
background-position: top;
}
.left{
background-position: left;
}
.right{
background-position: right;
}
.bottom{
background-position: bottom;
}
.point_x{
background-position: 50px;
}
.point_xy{
background-position: 100px 200px
}
.img_two{
background-image: url(../../image/bg_image/dot.png),url(../../image/bg_image/dot.png), url(../../image/bg_image/dot.png);
background-position: top left, center, top right;
}
div{
width: 300px;
height: 300px;
margin: 0 10px 10px 0;
background-image: url(../../image/bg_image/dot.png);
background-color: coral;
background-repeat: no-repeat;
display: inline-block;
}
</style>
</head>
<body>
<h1>background-position</h1>
<br>
<div class="default">default</div>
<div class="top">top</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="bottom">bottom</div>
<div class="point_x">50px</div>
<div class="point_xy">100px 200px</div>
<div class="img_two">img_two</div>
</body>
</html>03_size_attachment.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
# background-size
- 배경 이미지 크기를 조절
- background-size : width ; -> height auto
- background-size : width height;
# background-attachment
- 배경 이미지를 어떠한 방식으로 화면에 붙일 것인지를 결정
- scroll, fixed, local
-->
<style type="text/css">
body{
margin: 0 auto;
background-image: url(../../image/bg_image/BackgroundFront.png),
url(../../image/bg_image/BackgroundBack.png);
background-size: 100% 500px;
background-repeat: no-repeat;
background-position: center;
background-attachment: scroll;
}
</style>
</head>
<body>
<h1>background-size, attachment</h1>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<br>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<br>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<br>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<br>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<br>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<br>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<br>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<br>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<br>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<p> background background background background background </p>
<br>
</body>
</html>04_quiz_background.html
<!-- 05_background/05-4_Quiz.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05-4_Quiz</title>
<!--
# cosmo.jpg 파일의 내용을 구현하세요
-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
/*
background-color: #FFFFCB;
background-image: url("../../image/bg_image/dream.jpg");
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: fixed;
*/
background: #FFFFCB url("../../image/bg_image/dream.jpg") no-repeat bottom right fixed;
}
.wrap {
width: 1000px;
margin: 20px auto;
}
.header h1 {
background-color: green;
color: white;
border-top: 3px solid red;
border-bottom: 3px solid red;
padding: 10px;
}
.content h2 {
background-color: orange;
border-bottom: 3px solid red;
margin: 10px 0;
}
.content p {
text-align: justify;
margin: 10px 0;
}
.footer {
border-top: 3px solid red;
padding-top: 10px;
margin-bottom: 100px;
}
.address {
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">
<h1>CosmoFarmer.com's Fall Fashion Lineup Ralph</h1>
</div>
<!-- //header -->
<div class="content">
<h2>Ralph Lauren Coveralls</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. </p>
<h2>Yves Saint Laurent Garden Shears</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. </p>
<br>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. </p>
<h2>Isaac Mizrahi Sunhats</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. </p>
<br>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. </p>
</div>
<!-- //content -->
<div class="footer">
<p class="address">Copyright 2006, CosmoFarmer.com</p>
</div>
<!-- //footer -->
</div>
<!-- //wrap -->
</body>
</html>
06_shadow
01_text_shadow.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
# text-shadow
- 글자에 그림자 효과를 지정
- text-shadow : offset-x | offset-y | blur-radius | shadow-color
> offset-x : 그림자의 수평거리(필수)
offset-y : 그림자의 수직거리(필수)
blur-radius : 그림자의 흐림 정도
shadow-color : 그림자의 색상
-->
<style type="text/css">
.s_1{text-shadow: 5px 5px;}
.s_2{text-shadow: 5px 5px 5px;}
.s_3{text-shadow: 5px 5px 5px red;}
.s_4{text-shadow: 0px 0px 2px blue;}
.s_5{
color: white;
text-shadow: 0px 0px 2px chocolate;
}
.s_6{
color: white;
text-shadow: 3px 3px 10px chocolate;
}
.s_7{
font-size: 30px;
color: yellow;
text-shadow: 3px 3px 5px black, 0 0 10px orange;
}
.s_8{
font-size: 30px;
color: white;
text-shadow: 3px 3px 5px black, 0 0 10px orange;
}
.s_9{
font-size: 30px;
color: white;
text-shadow: 3px 3px 5px black, 0 0 10px orange , 0 0 10px aqua;
}
.s_10{
font-size: 30px;
color: white;
text-shadow: 0px 0px 5px black, -5px -5px 10px gray , -10px -10px 10px silver;
}
p{
border: 1px solid red;
width: 500px;
margin: 20px;
padding: 20px 0;
text-align: center;
font-family: "D2Coding", sans-serif;
font-size: 40px;
font-weight: bold;
}
.ps_1{
background-color: silver;
text-shadow: 3px 3px 3px rgba(255, 255, 255, 1);
}
.ps_2{
background-color: orange;
color: white;
text-shadow: 3px 3px 3px silver;
}
</style>
</head>
<body>
<h1>text shadow</h1>
br
<h2 class="s_1"> Text Shadow</h2>
<h2 class="s_2"> Text Shadow</h2>
<h2 class="s_3"> Text Shadow</h2>
<h2 class="s_4"> Text Shadow</h2>
<h2 class="s_5"> Text Shadow</h2>
<h2 class="s_6"> Text Shadow</h2>
<h2 class="s_7"> Text Shadow</h2>
<h2 class="s_8"> Text Shadow</h2>
<h2 class="s_9"> Text Shadow</h2>
<h2 class="s_10"> Text Shadow</h2>
<br>
<p class="ps_1"> Text Shadow</p>
<p class="ps_2"> Text Shadow</p>
</body>
</html>02_box_shadow.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
# box-shadow
- 요소에 그림자 효과를 지정
- box-shadow : offset-x | offset-y | blur-radius | spread-radius | shadow-color | inset
> offset-x : 그림자의 수평거리(필수)
offset-y : 그림자의 수직거리(필수)
blur-radius : 그림자의 흐림 정도
spread-radius : 그림자의 크기 확장
shadow-color : 그림자의 색상
inset : 그림자를 요소의 안쪽에 생성
-->
<style type="text/css">
div{
width: 300px;
height: 50px;
margin: 20px;
padding: 10px;
background-color: coral;
}
.box_1{ box-shadow: 10px 10px;}
.box_2{ box-shadow: 10px 10px 5px;}
.box_3{ box-shadow: 10px 10px 5px 5px;}
.box_4{ box-shadow: 10px 10px 5px 5px red ;}
.box_5{ box-shadow: 10px 10px 5px 5px red inset;}
</style>
</head>
<body>
<h1>box shadow</h1>
<br>
<div class="box_1">box shadow</div>
<div class="box_2">box shadow</div>
<div class="box_3">box shadow</div>
<div class="box_4">box shadow</div>
<div class="box_5">box shadow</div>
</body>
</html>07_list
01_list-style.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width= , initial-scale=1.0">
<title>Document</title>
<!--
# list-style-type
- 목록 앞에 붙는 마커(도형, 문자) 를 지정
# list-style-position
- 목록의 마커 위치를 지정
# list-style-image
- 목록의 마커 이미지를 지정
-->
<style type="text/css">
.inside{list-style-position: inside;}
.none{ list-style-type: none;}
.disc{ list-style-type: disc;}
.circle{ list-style-type: circle;}
.square{ list-style-type: square;}
.outside{list-style-position: outside;}
.lower_A{list-style-type: lower-alpha;}
.upper_R{list-style-type: upper-roman;}
.lower_R{list-style-type: lower-roman;}
.upper_L{list-style-type: upper-latin;}
.leading_zero{list-style-type: decimal-leading-zero;}
.marker_1{list-style-image: url(../image/list_image/marker.gif);}
.marker_2{list-style-image: url(../image/list_image/list_dot.gif);}
.marker_3{list-style-image: url(../image/list_image/li.gif);}
</style>
</head>
<body>
<h1>list style</h1>
<ul class="inside">
<li class="none"> 로그인 </li>
<li class="disc"> 로그인 </li>
<li class="circle"> 로그인 </li>
<li class="square"> 로그인 </li>
</ul>
<br>
<ol class="outside">
<li class="lower_A"> lower_A </li>
<li class="upper_R"> upper_R </li>
<li class="lower_R"> lower_R </li>
<li class="upper_L"> upper_L </li>
<li class="leading_zero"> decimal-leading_zero </li>
</ol>
<br>
<ul class="marker_1">
<li> 로그인 </li>
<li> 회원가입 </li>
<li> 마이페이지 </li>
<li> 사이트 맵 </li>
</ul>
<ul class="marker_2">
<li> 로그인 </li>
<li> 회원가입 </li>
<li> 마이페이지 </li>
<li> 사이트 맵 </li>
</ul>
<ul class="marker_3">
<li> 로그인 </li>
<li> 회원가입 </li>
<li> 마이페이지 </li>
<li> 사이트 맵 </li>
</ul>
<br>
</body>
</html>02_list-style.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
h1{
margin: 20px 0 0 20px;
}
ul{
list-style: none;
width: 200px;
margin: 20px;
}
li{
background: url(../../image/list_image/icon.jpg) no-repeat;
background-size: 1em 1em;
text-indent: 20px;
line-height: 2em;
}
a{
font-size: 1.2em;
color: #333333;
text-decoration: none;
}
a:hover{
font-weight: bold;
}
</style>
</head>
<body>
<h1>list style</h1>
<ul>
<li><a href="#"> 최신 음악 </a></li>
<li><a href="#"> 신나는 음악 </a></li>
<li><a href="#"> 좋아하는 음악 </a></li>
<li><a href="#"> 분위기 있는 음악 </a></li>
<li><a href="#"> 잠자기 좋은 음악 </a></li>
</ul>
</body>
</html>03_quiz.html
<!-- 07_list/07-3_Quiz_품질마크.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>07-3_Quiz_품질마크</title>
<!--
# Quiz_품질마크네비.png 파일의 내용을 구현하세요
-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.lnb {
/* border: 1px solid red; */
width: 200px;
height: 400px;
}
a {
text-decoration: none;
}
.lnb > li {
list-style: none;
background: url("../../image/list_image/icon2.jpg") no-repeat 5px 10px;
text-indent: 20px;
line-height: 30px;
}
#lnb_sel {
background: url("../../image/list_image/icon1.jpg") no-repeat 5px 10px;
font-weight: bold;
}
#lnb_sel > a {
color: #183554;
}
.sub {
border-top: 1px dotted gray;
font-weight: bold;
}
.sub > a {
color: #494949;
}
.sub_ul {
margin: 5px;
}
.dot {
background: url("../../image/list_image/dot.jpg") no-repeat 10px 13px;
background-color: #e7f5fe;
font-weight: normal;
}
.dot a {
color: #183554;
}
.sub_li {
background-color: #e7f5fe;
font-weight: normal;
}
.sub_li > a {
color: gray;
}
</style>
</head>
<body>
<ul class="lnb">
<li id="lnb_sel"><a href="#">품질마크 소개</a>
<ul class="sub_ul">
<li class="dot"><a href="#">품질마크 개요</a></li>
<li class="sub_li"><a href="#">인증 절차</a></li>
</ul>
</li>
<li class="sub"><a href="#">인증위원회</a></li>
<li class="sub"><a href="#">인증심사기준</a></li>
<li class="sub"><a href="#">품질마크 심사 접수</a>
<ul class="sub_ul">
<li class="sub_li"><a href="#">신규심사</a></li>
<li class="sub_li"><a href="#">갱신심사</a></li>
</ul>
</li>
<li class="sub"><a href="#">진행상태 확인</a></li>
<li class="sub"><a href="#">인증사이트 현황</a></li>
<li class="sub"><a href="#">인증사이트 통계</a></li>
</ul>
</body>
</html>
Fintech