<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>앵커 대상에 스타일 적용하기 </title>
</head>
<style>
.container {
width:960px;
margin: 0 auto;
}
.navi {
width:960px;
height:60px;
padding-bottom:10px;
border-bottom:2px solid #ccc;
}
.navi ul{
list-style:none;
padding-top:10px;
padding-bottom:5px;
}
.navi ul li {
float:left; /*요소를 문서의 왼쪽에 배치*/
width:150px;
padding:10px;
}
.navi a:link, .navi a:visited {
/*방문한 링크와 방문하지 않은 링크 설정*/
display:block;
font-size:14px;
color:#000;
padding:10px;
text-decoration:none; /*밑줄을 없앰*/
text-align:center;
}
.navi a:hover, .navi a:focus {
/*마우스 포인터를 올렸을 때와 초점을 맞췄을 때 설정 */
background-color:#222; /*배경색을 짙은 회색으로 변경*/
color:#fff;
}
.navi a:active {
/*마우스 포인터로 클릭했을 때 지정*/
background-color:#f00; /*배경색을 빨간색으로 변경 */
}
#intro:target {
background-color:#0069e0; /*배경색을 파란색으로 지정*/
color:#fff; /*글자색을 흰색으로 지정 */
}
#room:target {
background-color:#ff9844;
/*배경색 - 주황색 */
}
#reservation:target {
background-color:#fff8dc;
}
.contents {
margin:30px auto;
width:400px;
padding:20px;
border:1px solid #222;
border-radius:5px;
}
</style>
<body>
<div class="container">
<nav class="navi">
<ul>
<li><a href="#intro">이용 안내</a></li>
<li><a href="#room">객실 소개</a></li>
<li><a href="#reservation">예약 방법 및 요금</a></li>
<li><a href="#ps-2.html">예약하기 </a></li>
</ul>
</nav>
<div id="intro" class="contents">
<h2>이용 안내</h2>
<p>Excepteur do est eiusmod nulla et veniam. Labore officia officia ex aliqua exercitation aliqua laborum Lorem deserunt ut ullamco labore anim. Officia eu duis aliquip incididunt. Do laborum et consequat aliqua sint consectetur.</p>
</div>
</div>
<div id="room" class="contents">
<h2>객실 소개</h2>
<p>Qui magna culpa minim reprehenderit magna in nisi ipsum. Ad cillum tempor minim fugiat est dolor. Cillum sit qui minim sint officia nostrud cillum cupidatat pariatur ipsum eiusmod velit labore. Sit in non fugiat minim sit.</p>
</div>
<div id="reservation" class="contents">
<h2>예약 방법 및 요금</h2>
<p>Fugiat aliquip mollit proident velit magna esse ea officia eu. Esse do aliqua proident culpa eiusmod duis minim deserunt eu reprehenderit ut tempor. </p>
</div>
</body>
</html>
'css' 카테고리의 다른 글
| 10장 예제 - not 선택자로 라디오 필드를 제외한 텍스트 필드 선택하기 (0) | 2023.04.01 |
|---|---|
| 10장 예제 - 선택된 라디오 버튼의 스타일 적용하기 (0) | 2023.04.01 |
| 10장 예제 - 가상 클래스를 사용해 링크 스타일 적용하기 (0) | 2023.04.01 |
| 10장 실습 2 (0) | 2023.04.01 |
| 10장 예제 - [속성^=값]연산자 / [속성$=값]연산자 /[속성*=값]연산자 (0) | 2023.04.01 |
