1. 연결 선택자
1) 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자
- 하위 요소(descendant selector): 특정 요소를 기준으로 그 안에 포함된 요소를 말한다.
- 자식 요소: 현재 요소를 기준으로 바로 한 단계 아래 요소는 자식 요소라고 한다.
- 손자 요소: 자식 요소의 한 단계 아래에 있는 요소를 말한다.
- 기본형: 상위요소 하위요소
Ex) 하위 선택자를 사용하여 글자색 지정하기
- 자식 선택자(child selector)라고도 한다. 자식 요소 뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다.
- selection 요소의 모든 하위 p요소를 파란색 글자로 지정한다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>고급 선택자</title>
<style>
body {
background-color:#eee;
}
section {
width:600px;
margin:20px auto;
}
p {
width:500px;
padding:10px;
background-color:#fff;
border:1px solid #ccc;
line-height:2;
}
section p { /* section 요소의 모든 하위 p 요소에 적용 */
color:blue; /* 글자색을 파란색으로 */
}
</style>
</head>
<body>
<section>
<h1>예약 방법 & 사용 요금</h1>
<p>아직 온라인 예약 신청이 준비되어 있지 않습니다. <br>전화(xxx-xxxx-xxxx)로 문의 바랍니다.</p>
<div>
<p>가족실(2~4인) : 60,000원/일</p>
<p>도미토리(4인 공용) : 25,000원/일</p>
</section>
</body>
</html>Note) 실행 결과
Ex) 자식 선택자를 사용하여 글자색 지정하기
- 자식 선택자(child selector)는 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자이다.
- 기본형: 부모 요소 > 자식 요소
- 아래와 같이 selection요소에 포함된 p요소 중에서 자식 요소만 선택할 수 있다.
Note) 실행 결과
2. 형제 요소에 스타일을 적용하는 인접 형제 선택자와 형제 선택자
Def) 인접 형제 선택자(adjacent selector): 형제 요소 중에서 첫 번째 동생 요소만 선택하는 것을 말한다.
- 기본형: 요소 1 + 요소 2
-> 요소1과 요소2는 같은 같은 레벨이면서 요소1 이후에 가장 먼저 오는 요소2를 선택한다.
Ex) 인접 형제 선택자 스타일 적용하기
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>고급 선택자</title>
<style>
body {
background-color:#eee;
}
section {
width:600px;
margin:20px auto;
}
p {
width:500px;
padding:10px;
background-color:#fff;
border:1px solid #ccc;
line-height:2;
}
h1 + p { /* h1 요소의 형제 요소 중 첫번째 p 요소에 적용 */
background-color:#222; /* 배경은 검은색으로 */
color:#fff; /* 글자는 흰색으로 */
}
</style>
</head>
<body>
<section>
<h1>예약 방법 & 이용 요금</h1>
<p>아직 온라인 예약 신청이 준비되어 있지 않습니다. <br>전화(xxx-xxxx-xxxx)로 문의 바랍니다.</p>
<p>가족실(2~4인) : 60,000원/일</p>
<p>도미토리(4인 공용) : 25,000원/일</p>
</section>
</body>
</html>Note) 실행 결과
Def) 형제 선택자(sibling selector)는 형제 요소의 스타일을 적용하는데 인접 형제 선택자와 다르게 모든 형제 요소에 적용된다.
- 기본형: 요소1 ~ 요소2
Ex) 모든 형제 요소의 스타일 지정하기
- h1요소의 형제인 p요소를 모두 선택해서 배경색은 검은색, 글자색은 흰색으로 바꾼다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>고급 선택자</title>
<style>
body {
background-color:#eee;
}
section {
width:600px;
margin:20px auto;
}
p {
width:500px;
padding:10px;
background-color:#fff;
border:1px solid #ccc;
line-height:2;
}
h1 ~ p { /* h1 요소와 형제인 모든 p 요소에 적용 */
background-color:#222; /* 배경은 검은색으로 */
color:#fff; /* 글자는 흰색으로 */
}
</style>
</head>
<body>
<section>
<h1>예약 방법 & 이용 요금</h1>
<p>아직 온라인 예약 신청이 준비되어 있지 않습니다. <br>전화(xxx-xxxx-xxxx)로 문의 바랍니다.</p>
<p>가족실(2~4인) : 60,000원/일</p>
<p>도미토리(4인 공용) : 25,000원/일</p>
</section>
</body>
</html>Note) 실행 결과
Ex) 폼에서 레이블 요소 정렬하기
- 레이블을 깔끔하게 정리한다.
- id = "signup"인 <form> 태그 안에 있는 <label>태그에 적용할 것이므로 하위 선택자를 사용해서 지정한다.
- float을 사용해서 왼쪽에 배치하고 width 속성을 이용해서 레이블이 차지할 너비를 지정한다.
<hide/>
* {
margin: 0;
padding: 0;
}
body {
background: #ccc;
padding: 20px;
}
#signup {
background:#fff;
border:1px solid #222;
border-radius: 5px;
padding: 20px;
width: 400px;
margin:30px auto;
}
#signup fieldset {
border: 1px solid #ccc;
margin-bottom: 30px;
}
#signup legend {
font-size: 16px;
font-weight: bold;
padding-left:5px;
padding-bottom: 10px;
}
#signup ul li {
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
#signup button {
border: 1px solid #222;
border-radius: 20px;
display: block;
font-size: 16px 맑은고딕,굴림,돋움;
letter-spacing: 1px;
margin: auto;
padding: 7px 25px;
}
#signup label{
float: left;
font-size: 13px;
width: 110px;
}Note) 실행 결과
2. 속성 선택자
Def) 속성 선택자: 태그 안에서 사용하는 속성값에 따라 요소를 선태갛는 역할을 한다.
1) 특정 속성이 있는 요소를 선택하는 [속성] 선택자
- 속성값에 따라 원하는 요소를 선택할 수 있다.
- 대괄호 안에 원하는 값을 입력한다.
ex) "a"요소 중에서 "href" 속성이 있는 요소만 선택하려면?
=> a[href] { ... }
Ex) 요소 중에서 링크가 있는 요소만 스타일 적용하기
- a 요소 5개 중에서 href 속성이 있는 요소를 찾아내서 배경색을 지정한다.
- 첫 번째 a요소에는 href 속성이 없으므로 스타일이 적용되지 않는다.
Note) 실행 결과
2) 특정 속성값이 있는 요소를 선택하는 [ 속성 = 속성값 ] 선택자
- [ 속성 = 속성값 ] 선택자는 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정할 때, 사용한다.
- 대괄호 안헤 속성과 속성값을 넣고 그 사이에 '='기호를 표시한다.
Ex) 새 탭으로 열리는 링크에만 아이콘 추가하기
- target이 속성값이 '_blank'인 링크를 찾아서 "newwindow.png"라는 배경 이미지를 추가한다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<style>
ul {
list-style:none;
}
li {
padding: 5px 30px;
}
li a {
font-size: 16px;
text-decoration: none;
color:#000;
}
a[target="_blank"] {
padding-right:30px;
background:url(images/newwindow.png) no-repeat center right;
}
</style>
</head>
<body>
<ul>
<li><a href="hhttps://html.spec.whatwg.org" target="_blank">HTML</a></li>
<li><a href="https://www.w3.org/TR/selectors">CSS Selector Level 3</a></li>
<li><a href="https://www.w3.org/TR/css3-mediaqueries">미디어쿼리</a></li>
</ul>
</body>
</html>Note) 실행 결과
3) 여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택하는 [속성~=값] 선택자
- 속성값이 하나면서 속성값이 여러 개일 때, 특정 속성값을 찾는데 편리하다.
Ex) 특정 속성값이 포함된 요소에 스타일 적용하기
- class 값 중에서 button이 있는 요소에 스타일을 적용한다.
- button이라는 값과 정확하게 일치하는 요소를 선택한다.
- 아래 예제는 메뉴 항목에 그림자가 나타나는 예제이다.
- 메뉴4 버튼은 정확히 "button"과 일치하지 않기 때문에 적용되지 않는다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<style>
ul { list-style:none; }
li {
display:inline-block;
margin:10px;
}
li a {
padding: 5px 20px;
font-size: 14px;
color: blue;
text-decoration: none;
}
.flat {
background:#eee;
border:1px solid #222;
}
a[class ~="button"] {
box-shadow:rgba(0,0,0,0.5) 4px 4px; /* 그림자 지정 */
border-radius: 5px; /* 테두리를 둥글게 */
border:1px solid #222;
}
</style>
</head>
<body>
<ul>
<li><a href="#" class="flat">메뉴 1</a></li>
<li><a href="#" class="flat">메뉴 2</a></li>
<li><a href="#" class="button">메뉴 3</a></li>
<li><a href="#" class="flat button" >메뉴 4</a></li>
</ul>
</body>
</html>Note) 실행 결과
4) 특정 속성값이 포함된 속성 요소를 선택하는 [ 속성 |= 값 ] 선택자
- 속성값은 한 단어로 일치해야한다.
- 지정한 값과 정확히 일치하거나 지정한 값을 포함해서 하이픈(-)으로 연결된 단어도 선택한다.
Ex) title 속성 값에 따라 아이콘 다르게 표시하기
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<style>
ul { list-style:none; }
li {
display:inline-block;
margin:10px;
}
li a {
padding: 5px 20px;
font-size: 14px;
color: blue;
text-decoration: none;
}
a[title |= "us"] { /* 속성값이 "us"이거나 "us-"로 시작하는 요소를 찾는 선택자 */
background: url(images/us.png) no-repeat left center;
}
a[title |= "jap"] { /* 속성값이 "jap"이거나 "jap-"로 시작하는 요소를 찾는 선택자 */
background: url(images/jp.png) no-repeat left center;
}
a[title |= "chn"] { /* 속성값이 "chn"이거나 "chn-"로 시작하는 요소를 찾는 선택자 */
background: url(images/ch.png) no-repeat left center;
}
</style>
</head>
<body>
<ul>
<li>외국어 서비스 : </li>
<li><a href="#" title="us-english">영어</a></li>
<li><a href="#" title="ja">일본어</a></li>
<li><a href="#" title="chn">중국어</a></li>
</ul>
</body>
</html>Note) 실행 결과
5) 특정 속성값으로 시작하는 속성 요소를 선택하는 [속성 ^= 값]
Ex) 속성값의 시작 부분이 일치하는 요소에 스타일 적용하기
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<style>
ul {
list-style:none;
}
li {
display:inline-block;
margin:10px;
}
li a {
padding: 5px 20px;
font-size: 14px;
color: blue;
text-decoration: none;
}
a[title ^="eng"] { /* 속성값이 "eng"로 시작하는 요소를 찾는 선택자 */
background: url(images/us.png) no-repeat left center;
padding: 5px 25px;
}
a[title ^="jap"] { /* 속성값이 "jap"로 시작하는 요소를 찾는 선택자 */
background: url(images/jp.png) no-repeat left center;
padding: 5px 25px;
}
a[title ^="chin"] { /* 속성값이 "chn"로 시작하는 요소를 찾는 선택자 */
background: url(images/ch.png) no-repeat left center;
padding: 5px 25px;
}
</style>
</head>
<body>
<ul>
<li>외국어 서비스 : </li>
<li><a href="#" title="english">영어</a></li>
<li><a href="#" title="japanese">일본어</a></li>
<li><a href="#" title="chinese">중국어</a></li>
</ul>
</body>
</html>Note) 실행 결과
6) 특정한 값으로 끝나는 속성의 요소를 선택하는 [ 속성 $= 값 ] 선택자
- [속성 ^= 값]과 반대로 끝나는 속성의 요소를 선택한다.
- 속성값이 "hwp"로 끝나는 a요소를 찾는 선택자, "xls"로 끝나는 a요소를 찾는 선택자 각각 다르게 스타일을 적용한다.
Ex)파일 확장자에 따라 아이콘 다르게 표시하기
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<style>
ul {
list-style:square;
}
li a {
line-height:30px;
font-size: 14px;
color: blue;
text-decoration: none;
}
a[href$=hwp] { /* 연결한 파일의 확장자가 hwp인 링크 */
background: url(images/hwp_icon.gif) center right no-repeat; /* 배경으로 hwp 아이콘 표시 */
padding-right: 25px; /* 아이콘을 표시할 수 있도록 오른쪽에 25px 여백 */
}
a[href$=xls] { /* 연결한 파일의 확장자가 hwp인 링크 */
background: url(images/excel_icon.gif) center right no-repeat; /* 배경으로 hwp 아이콘 표시 */
padding-right: 25px; /* 아이콘을 표시할 수 있도록 오른쪽에 25px 여백 */
}
</style>
</head>
<body>
<h3>회사 소개 파일 다운 받기</h3>
<ul>
<li><a href="intro.hwp">hwp 파일</a></li>
<li><a href="intro.xls">엑셀 파일</a></li>
</ul>
</body>
</html>Note) 실행 결과
6) 일부 속성값이 일치하는 요소를 선택하는 [ 속성 *= 값 ]선택자
- 속성값이 어느 위치에 있든지 지정한 속성값이 포함되어 있다면 해당 요소를 선택한다.
Ex) 속성값의 일부가 일치하는 요소에 스타일 적용하기
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<style>
ul {
list-style:circle;
}
li {
padding: 5px 30px;
}
li a {
font-size: 16px;
color: black;
text-decoration: none;
}
a[href *= "w3"] { /* href 속성값 중에 w3가 있는 a 요소를 찾는 선택자 */
background:blue;
color:white;
}
</style>
</head>
<body>
<h1>HTML5 참고 사이트 </h1>
<p>(아래 링크 중 파란색 배경의 링크는 W3C 사이트로 연결됩니다.)</p>
<ul>
<li><a href="https://html.spec.whatwg.org/">HTML 표준안 사이트</a></li>
<li><a href="https://caniuse.com/">HTML 지원 여부 체크</a></li>
<li><a href="https://www.w3.org/TR/css3-mediaqueries">미디어쿼리</a></li>
</ul>
</body>
</html>Note) 실행 결과
Ex) 폼 요소에 스타일 적용하기
- 필수 입력 필드에 빨간 테두리를 지정한다.
- 읽기 전용 필드인 회원 등급 칸에 테두리를 제거한다.
- 텍스트 입력 필드를 넓게 바꾼다.
- 나중에 작성한 스타일이 먼저 지정되므로 필수
- 입력 필드 스타일을 지정했던 소스 앞에 코드를 추가한다.
- 우선순위를 따지며 코드를 추가한다.
- border-radius: 3px를 추가해서 테두리 모서리를 둥글게 지정한다.
<hide/>
* {
margin: 0;
padding: 0;
}
body {
background: #ccc;
padding: 20px;
}
#signup {
background:#fff;
border:1px solid #222;
border-radius: 5px;
padding: 20px;
width: 400px;
margin:30px auto;
}
#signup fieldset {
border: 1px solid #ccc;
margin-bottom: 30px;
}
#signup legend {
font-size: 16px;
font-weight: bold;
padding-left:5px;
padding-bottom: 10px;
}
#signup ul li {
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
#signup button {
border: 1px solid #222;
border-radius: 20px;
display: block;
font-size: 16px;
letter-spacing: 1px;
margin: auto;
padding: 7px 25px;
}
#signup label {
float: left; /* 왼쪽으로 배치 */
font-size: 13px; /* 글자 크기 - 13px */
width: 110px; /* 너비 - 110px */
}
#signup input[type = text],
#signup input[type = password],
#signup input[type = tel],
#signup input[type = email] {
border: 1px solid #ccc;
border-radius: 3px;
font-size: 13px;
padding: 5px;
width: 200px;
}
#signup input[required]{
border: 1px red solid;
}
#signup input[readonly]{
border: none;
}<hide/>
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>회원 가입</title>
<link rel="stylesheet" href="css/register1.css">
</head>
<body>
<form id="signup">
<fieldset>
<legend>로그인 정보</legend>
<ul>
<li>
<label for="userid">아이디</label>
<input id="userid" name="userid" type="text" required autofocus>
</li>
<li>
<label for="pwd1">비밀번호</label>
<input id="pwd1" name="pwd1" type="password" required>
</li>
<li>
<label for="pwd2">비밀번호 확인</label>
<input id="pwd2" name="pwd2" type="password" required>
</li>
<li>
<label for="level">회원 등급</label>
<input id="level" name="level" type="text" readonly value="준회원">
</li>
</ul>
</fieldset>
<fieldset>
<legend>개인 정보</legend>
<ul>
<li>
<label for="fullname">이름</label>
<input id="fullname" name="fullname" type="text" placeholder="5자미만 공백없이" required>
</li>
<li>
<label for="email">메일 주소</label>
<input id="email" name="email" type="email" placeholder="abcd@domain.com" required autocomplete="off">
</li>
<li>
<label for="tel">연락처</label>
<input id="tel" name="tel" type="tel" autocomplete="off">
</li>
</ul>
</fieldset>
<fieldset>
<button type="submit"> 제출 </button>
</fieldset>
</form>
</body>
</html>Note) 실행 결과
3. 가상 클래스와 가상 요소
1) 사용자 동작에 반응하는 가상 클래스
- 순서: (1) -> (2) -> (3) -> (4) (Lo Ve HAte) .... 반드시 순서대로 정의해야한다.
(1) 방문하지 않은 링크에 스타일을 적용하는 ':link 가상 클래스 선택자': 기본적으로 파란색 글자와 밑줄로 표시한다.
(2) 방문한 링트에 스타일을 적용하는 ':visited 가상 클래스 선택자': 보라색이 기본값이다.
(3) 특정 요소에 마우스 포인터를 올려 놓으면 스타일을 적용하는 ':hover 가상 클래스 선택자'
(4) 웹 요소를 활성화했을 때 스타일을 적용하는 ':active 가상 클래스 선택자'
- 웹 요소의 링크나 이미지를 클릭(활성화)하는 순간의 스타일을 지정한다.
(5) 웹 요소에 초점이 맞춰졌을 때 스타일을 적용하는 ':focus 가상 클래스 선택자'
- 텍스트 필드 안에 마우스 필터를 올려 놓거나 웹 문서에서 Tab을 눌러 입력 커서를 이동했을 때, 스타일을 지정한다.
Ex) 가상 클래스 선택자를 사용해 링크 스타일 적용하기
- 가상 클래스 선택자를 사용해서 메뉴의 텍스트를 상황에 따라 다르게 표현한다.
- 링크(a:link)와 방문했던 링크의 텍스트(a:visited)는 밑줄을 없앤다.
- 마우스를 올려 놓으면(a:hover) 짙은 회색 배경에 회색 배경에 흰색 글자로 바뀌고 클리하는 순간(a:active) 배경이 빨간색으로 바뀐다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>link 스타일</title>
<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; /* 배경 색 */
}
</style>
</head>
<body>
<div class="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>Note) 실행 결과
- 마우스 포인터를 댔을 때
- 클릭했을 때
2) 요소 상태에 따른 가상 클래스
(1) 앵커 대상에 스타일을 적용하는 ':target 가상 클래스 선택자'
- 앵커: 페이지가 긴 웹 문서가 특정 요소를 클릭하면 그 위치로 한 번에 이동하도록 도와준다.
- 문서에 같은 사이트나 다른 사이트의 페이지로 이동할 때에는 링크를 이용하고 같은 문서 안에서 다른 위치로 이동할 때는 앵커(anchor)를 이용한다.
- 이때 앵커를 이용하면 앵커의 목적지가 되는 부분의 스타일을 쉽게 적용 가능하다.
Ex) 앵커 대상에 스타일 적용하기
- 이용 안내 버튼을 클릭하면 이용 안내 파트가 파란색으로 변한다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 선택자</title>
<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 {
display:inline-block;
width:150px;
padding:10px;
}
.navi a:link, .navi a:visited {
font-size:14px;
padding: 10px;
text-decoration: none; /* 밑줄 없음 */
}
.navi a:hover, .navi a:focus {
background-color:#222; /* 배경색 */
color:#fff; /* 글자색 */
}
.navi a:active {
background-color:#f00; /* 배경색 */
}
.contents {
margin:30px auto;
width:400px;
padding:20px;
border:1px solid #222;
border-radius:5px;
}
#intro:target {
background-color:#0069e0; /* 배경색 - 파란색 */
color:#fff; /* 글자색 - 흰색 */
}
#room:target {
background-color:#ff9844; /* 배경색 - 주황색 */
}
#reservation:target{
background-color:#fff8dc; /* 배경색 - 베이지색 */
}
</style>
</head>
<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 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>
</div>
</body>
</html>Note) 실행 결과
(2) 요소의 사용 여부에 따라 스타일을 적용하는 ':enabled와 :disabled 가상 클래스 선택자'
- 해당 요소가 사용할 수 있는 상태일 때 스타일을 지정하려면 :enabled 선택자를 사용
- 사용할 수 없을 때 스타일을 지정하려면 :disabled 선택자를 사용한다.
ex) 텍스트 영역 필드(textarea)를 사용해서 회원약관을 보여줄 때, 사용자가 사용할 수 없도록 ':disabled'선택자를 사용
(3) 선택된 항목의 스타일을 적용하는 ':checked 가상 클래스 선택자'
- 폼의 라디오 박스나 체크 박스에서 선택된 항목에는 checked하는 속성이 추가된다.
- checked 속성이 있는 요소의 스타일을 지정할 때, 사용한다.
Ex) 선택된 라디오 버튼의 스타일 적용하기
- 라디오 버튼을 클릭했을 때, 레이블이 빨간색 굵은 글자로 바뀐다.
- #signup input:checked + label
-> input 요소에 checked 속성이 추가되었을 때 label 요소의 스타일
-> <input>과 <lable>태그가 형제 관계이므로 + 선택자를 사용한다.
<hide/>
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>회원 가입</title>
<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 {
display:inline-block;
width:150px;
padding:10px;
}
.navi a:link, .navi a:visited {
font-size:14px;
padding: 10px;
text-decoration: none; /* 밑줄 없음 */
}
.navi a:hover, .navi a:focus {
background-color:#222; /* 배경색 */
color:#fff; /* 글자색 */
}
.navi a:active {
background-color:#f00; /* 배경색 */
}
#signup {
background:#fff;
border:1px solid #222;
border-radius: 5px;
padding: 20px;
width: 400px;
margin:30px auto;
}
#signup fieldset {
border: 1px solid #ccc;
margin-bottom: 30px;
}
#signup legend {
font-size: 16px;
font-weight: bold;
padding-left:5px;
padding-bottom: 10px;
}
#signup ul li {
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
#signup fieldset:first-of-type label {
float: left;
font-size: 13px;
width: 60px;
}
/* #signup input[type=text], input[type=tel] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
width: 200px;
} */
#signup input:not([type=radio]) {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
width: 200px;
}
#signup input:not([type=radio]):hover {
border-color: #f00;
}
#signup input:checked + label { /* input 요소에 checked 속성이 추가되었을 때 label 요소의 스타일 */
color:red; /* 글자색 */
font-weight:bold; /* 글자 굵게 */
}
#signup button {
border: 1px solid #222;
border-radius: 20px;
display: block;
font: 16px 맑은고딕,굴림,돋움;
letter-spacing: 1px;
margin: auto;
padding: 7px 25px;
}
#signup b {
float: left;
font-size: 13px;
width: 110px;
}
</style>
</head>
<body>
<div class="container">
<nav class="navi">
<ul>
<li><a href="ps-1.html#intro">이용 안내</a></li>
<li><a href="ps-1.html#room">객실 소개</a></li>
<li><a href="ps-1.html#reservation">예약 방법 및 요금</a></li>
<li><a href="ps-2.html">예약하기</a></li>
</ul>
</nav>
<form id="signup">
<fieldset>
<legend>개인 정보</legend>
<ul>
<li>
<label for="fullname">이름</label>
<input id="fullname" name="fullname" type="text" required>
</li>
<li>
<label for="tel">연락처</label>
<input id="tel" name="tel" type="tel">
</li>
</ul>
</fieldset>
<fieldset>
<legend>객실 형태</legend>
<ul>
<li>
<input type="radio" name="room" id="basic">
<label for="basic">기본형(최대 2인)</label>
<li>
<li>
<input type="radio" name="room" id="family">
<label for="family">가족형(최대 8인)</label>
</li>
</ul>
</fieldset>
<button type="submit"> 제출 </button>
</form>
</div>
</body>
</html>Note) 실행 결과
(4) 특정 요소를 제외하고 스타일을 적용하는 ':not 가상 클래스 선택자'
Ex) 텍스트 필드 선택하기
- 괄호안에 있는 요소를 제외한다.
- 텍스트와 전화번호 필드에 스타일을 적용한다.
- <input>태그의 type 속성값이 text인 것과 tel인 것을 찾아서 스타일 규칙을 지정한다.
<hide/>
/* #signup input[type=text], input[type=tel] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
width: 200px;
} */
#signup input:not([type=radio]) {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
width: 200px;
}Note) 실행 결과
(5) 구조 가상 클래스
- 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때, 사용하는 가상 클래스 선택자이다.
Ex) 위치에 따라 자식 요소 선택하기
- .contents : nth-child(3) : contents의 세 번째 자식 요소에 스타일 적용 (노랑)
- .contents p: nth-of-type(3): .contents의 p요소 중에서 세번째 자식 요소에 스타일 적용 (초록)
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 선택자</title>
<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 {
display:inline-block;
width:150px;
padding:10px;
}
.navi a:link, .navi a:visited {
font-size:14px;
padding: 10px;
text-decoration: none; /* 밑줄 없음 */
}
.navi a:hover, .navi a:focus {
background-color:#222; /* 배경 색 */
color:#fff; /* 글자 색 */
}
.navi a:active {
background-color:#f00; /* 배경 색 */
}
.contents {
margin:30px auto;
width:400px;
padding:20px;
border:1px solid #222;
border-radius:5px;
}
.contents :nth-child(3) {
background-color:#ffff00;
}
.contents p:nth-of-type(3) {
background-color:#00b900;
}
</style>
</head>
<body>
<div class="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 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>
<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>
<h2>객실 소개</h2>
<p>Irure incididunt duis ut cupidatat laborum adipisicing veniam irure.</p>
<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>
</div>
</body>
</html>Note) 실행 결과
Ex) 열에 번갈아 가며 배경색 적용하기
- 수식을 사용해 위치를 지정할 수도 있다.
-> 홀수 번째: ":nth-child(odd)"
-> 짝수 번째: "nth-child(even)"
Note) 실행 결과
6) 가상 요소
- 문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가한다.
(1) 첫 번째 줄, 첫 번째 글자에 스타일을 적용하는 '::first-line 요소', '::first-letter 요소'
(2) 내용 앞뒤에 컨텐츠를 추가하는 ':before 요소:', '::after 요소'
Ex) 가상요소를 사용해서 스타일 적용하기
- ::after요소를 사용해서 제품목록에 'NEW!!'라는 텍스트를 추가한다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 요소</title>
<style>
.container {
width: 960px;
margin : 0 auto;
}
ul li {
margin:15px;
}
li.new::after {
content:"NEW!!";
font-size:x-small;
padding:2px 4px;
margin: 0 10px;
border-radius:2px;
background:#f00;
color:#fff;
}
</style>
</head>
<body>
<div class="container">
<h1>제품 목록</h1>
<ul>
<li class="new">제품 A</li>
<li>제품 B</li>
<li>제품 C</li>
<li class="new">제품 D</li>
</ul>
</div>
</body>
</html>Note) 실행 결과
Ex) 가상 선택자를 이용해 폼 꾸미기
- CSS파일에 소스를 추가해서 제출 버튼의 어색한 부분을 깔끔하게 처리한다.
-> border: none; margin-bottom: 0;
- 제출 버튼에 마우스를 올리면 검은색으로 바뀌도록 하낟.
-> signup button:hover
- 텍스트 필드, 비밀번호 필드, 전화번호 필드, 이메일 필드의 스타일을 지정한 부분의 소스를 줄인다.
-> #signup input: not([type=radio])
<hide/>
* {
margin: 0;
padding: 0;
}
body {
background: #ccc;
padding: 20px;
}
#signup {
background:#fff;
border:1px solid #222;
border-radius: 5px;
padding: 20px;
width: 400px;
margin:30px auto;
}
#signup fieldset {
border: 1px solid #ccc;
margin-bottom: 30px;
}
#signup legend {
font-size: 16px;
font-weight: bold;
padding-left:5px;
padding-bottom: 10px;
}
#signup ul li {
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
#signup button {
border: 1px solid #222;
border-radius: 20px;
display: block;
font-size: 16px;
letter-spacing: 1px;
margin: auto;
padding: 7px 25px;
}
#signup label {
float: left; /* 왼쪽으로 배치 */
font-size: 13px; /* 글자 크기 - 13px */
width: 110px; /* 너비 - 110px */
}
#signup input:not([type=radio]) { /* 속성 선택자 사용 */
border: 1px solid #ccc; /* 텍스트 필드 테두리 지정 */
border-radius: 3px; /* 텍스트 필드 모서리를 둥글게 지정 */
font-size: 13px; /* 텍스트 필드 안의 글자 크기 지정 */
padding: 5px; /* 텍스트 필드와 내용 사이의 패딩 지정 */
width: 200px; /* 텍스트 필드 너비 지정 */
}
#signup input[required] { /* 필수 입력 필드의 스타일 */
border:1px red solid;
}
#signup input[readonly] { /* 읽기 전용 필드의 스타일 */
border:none;
}
#signup fieldset:last-of-type{
border: none;
margin-bottom: 0;
}
#signup button:hover{
background-color: #222;
color: #fff;
}<hide/>
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>회원 가입</title>
<link rel="stylesheet" href="css/register2.css">
</head>
<body>
<form id="signup">
<fieldset>
<legend>로그인 정보</legend>
<ul>
<li>
<label for="userid">아이디</label>
<input id="userid" name="userid" type="text" required autofocus>
</li>
<li>
<label for="pwd1">비밀번호</label>
<input id="pwd1" name="pwd1" type="password" required>
</li>
<li>
<label for="pwd2">비밀번호 확인</label>
<input id="pwd2" name="pwd2" type="password" required>
</li>
<li>
<label for="level">회원 등급</label>
<input id="level" name="level" type="text" readonly value="준회원">
</li>
</ul>
</fieldset>
<fieldset>
<legend>개인 정보</legend>
<ul>
<li>
<label for="fullname">이름</label>
<input id="fullname" name="fullname" type="text" placeholder="5자미만 공백없이" required>
</li>
<li>
<label for="email">메일 주소</label>
<input id="email" name="email" type="email" placeholder="abcd@domain.com" required autocomplete="off">
</li>
<li>
<label for="tel">연락처</label>
<input id="tel" name="tel" type="tel" autocomplete="off">
</li>
</ul>
</fieldset>
<fieldset>
<button type="submit"> 제출 </button>
</fieldset>
</form>
</body>
</html>Note) 실행 결과
Ex) 마무리 문제 1)
- 가상클래스를 이용해서 첫 번째 이미지를 선택
- 테두리 색상은 빨간색, 두께는 2px로 지정한다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 1</title>
<style>
img {
margin-right:50px;
border:1px solid #ccc;
box-shadow: 2px 2px 5px #ccc;
}
img:first-of-type{
border:2px solid red ;
}
</style>
</head>
<body>
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
</body>
</html>Note) 실행 결과
Ex) 마무리 문제 2)
- 메뉴 1~5까지는 검은 바탕에 흰 글씨
- 메뉴 6은 빨간 바탕에 흰 글씨
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 2</title>
<style>
* {
box-sizing: border-box;
}
.top-menu {
margin:50px auto;
padding:0;
list-style:none;
width:610px;
height:35px;
box-shadow:0 3px 4px #8b8b8b;
background-color:#dadada;
}
.top-menu li {
float:left;
border-right:1px solid #929292;
}
.top-menu li a:link{
color:black;
text-decoration:none;
text-align:center;
display:block;
width:100px;
height:35px;
line-height: 35px;
}
.top-menu li a:visited {
color:black;
}
.top-menu li:last-child{
border: none;
}
.top-menu li:last-child a:hover{
background-color: red;
color: #fff;
}
.top-menu li:not(:last-child) a:hover {
background-color: black;
color: #fff;
}
</style>
</head>
<body>
<nav>
<ul class="top-menu">
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
<li><a href="#">메뉴5</a></li>
<li><a href="#">메뉴6</a></li>
</ul>
</nav>
</body>
</html>Note) 실행 결과
'FrontEnd' 카테고리의 다른 글
| Chapter 11. 트랜지션과 애니메이션 (0) | 2022.04.26 |
|---|---|
| Chapter 09. 이미지와 그라데이션 효과로 배경 꾸미기 (0) | 2022.04.25 |
| Chapter 08. 레이아웃을 구성하는 CSS 박스 모델 (0) | 2022.04.23 |
| Chapter 07. 텍스트를 표현하는 다양한 스타일 (0) | 2022.04.20 |
| Chapter 06. CSS의 기본 (0) | 2022.04.20 |