반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연결 선택자</title>
<style>
/*
하위 선택자(descendant selector)
- 부모 요소에 포함된 하위 요소를 모두 선택
- 자손 선택자라고도 함
기본형 - 상위요소 하위요소
ex) section p {...}
자식 선택자(child selector)
- 자식 요소에만 스타일을 적용하는 선택자
기본형 - 부모요소 > 자식요소
ex) section > p {...}
*/
section p {
color: blue;
}
section>p {
color: blue;
}
</style>
</head>
<body>
<section>
<h1>예약 방법 & 사용 요금</h1>
<p>아직 온라인 예약 신청이 준비되지 않았습니다.</p>
<div>
<p>가족실(2~4인) : 60,000원/일</p>
<p>도미토리(4인 공용) : 25,000원/일</p>
</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 클래스</title>
<style>
/*
1. :link {} - 방문하지 않았던 곳
(텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시 되는데
이 때 링크의 밑줄을 없애거나 색을 바꿀 때 사용.)
2. :visited {} - 방문 했던 곳
(한 번 이상 방문한 링크는 기본이 보라색 값인데 사용자가 방문한
텍스트와 색상이 달라지지 않게 할 때 사용)
3. :hover {} - 마우스가 올라온 순간
(마우스 포인터를 올려놨을 때 다른 이미지로 바꾸거나
서브메뉴가 나타나는 효과를 만들 수 있음)
4. :active {} - 클릭하는 순간
(클릭하는 순간의 스타일을 지정 가능)
5. :focus {} - 초점이 맞춰졌을때
( ex)아이디 입력후 탭키로 패스워드로 이동할때 스타일 변화 )
1~4의 가상클래스 선택자는 순서대로 정의해야함.
순서가 바뀌면 스타일을 정의해도 제대로 적용되지 않음.
*/
#container {
width: 960px;
margin: 0 auto;
}
.navi {
width: 960px;
height: 60px;
padding-bottom: 10px;
border-bottom: 1px 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;
}
</style>
</head>
<body>
<div id="container">
<nav class="navi">
<ul>
<li><a href="#">이용 안내</a></li>
<li><a href="#">객실 소개</a></li>
<li><a href="#">예약 방법 및 요금</a></li>
<li><a href="#">예약하기</a></li>
</ul>
</nav>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 클래스 수식 사용</title>
<style>
#container {
text-align: center;
color: #2b2b2b;
}
table, td th {
border: 1px solid #ccc;
}
table {
width: 200px;
margin: 0 auto;
border-collapse: collapse;
}
td {
text-align: left;
padding: 10px;
padding-left: 20px;
}
/*
div p:nth-child(odd) or div p:nth-child(2n+1)
div p:nth-child(even) or div p:nth-child(2n)
*/
table tr:nth-of-type(2n+1) {
background: lightgray;
color: black;
}
</style>
</head>
<body>
<div id="container">
<h1>웹 개발</h1>
<table>
<tr>
<td>HTML</td>
</tr>
<tr>
<td>CSS</td>
</tr>
<tr>
<td>Javascript</td>
</tr>
<tr>
<td>React</td>
</tr>
<tr>
<td>node.js</td>
</tr>
</table>
</div>
</body>
</html>
반응형
'IT > CSS' 카테고리의 다른 글
| CSS - 4일차 transition (0) | 2023.05.17 |
|---|---|
| CSS - 4일차 애니메이션 (0) | 2023.05.17 |
| CSS - 3일차 속성선택자 (0) | 2023.05.15 |
| CSS - 3일차 background (0) | 2023.05.15 |
| CSS - 2일차 box-width, border-radius, box-shadow (0) | 2023.05.11 |