속성선택자 7 *= 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 기초-15(속성선택자-7)</title>
<style type="text/css">
ul {
list-style-type: none;
}
a {
font-size: 16px;
color: blue;
text-decoration: none;
}
/* w3라는 값이 포함 되어있다면, a태그에만 별도로 스타일을 적용시킴.*/
[href *="w3"] {
background: blue;
color: white;
}
</style>
</head>
<body>
<h2>HTML5 참고 사이트</h2>
<p>아래 링크 중에 파란색 배경의 링크는 W3C사이트로 연결됩니다.</p>
<ul>
<li><a href="http://www.w3c.org/TR/html">HTML 표준안 사이트</a></li>
<li><a href="http://www.webplatform.org">튜토리얼과 아티클</a></li>
<li><a href="http://www.caniuse.com">HTML 지원 여부 체크</a></li>
</ul>
</body>
<!-- 정리
[속성] - 지정한 '속성'일때 스타일을 적용함.
[속성=값] - '값'에 일치할때 스타일을 적용함.
[속성~=값] - 여러값들 중에 값이 포함되어 있는데 정확하게 포함된 것에만
스타일을 적용함(필드)
[속성|=값] - 값이 포함되어 있을 때(하이폰(-) 포함 단어도 됨)만 스타일 적용함.
[속성^=값] - 값으로 시작할 때 스타일을 적용함(캐럿)
[속성$=값] - 값으로 끝날때 스타일을 적용함
[속성*=값] - 값이 어디에 있든 포함만 되면 스타일을 적용함
-->
</html>
속성 선택자[] 총정리
[속성] - 지정한 '속성'일때 스타일을 적용함.
[속성=값] - '값'에 일치할때 스타일을 적용함.
[속성~=값] - 여러값들 중에 값이 포함되어 있는데 정확하게 포함된 것에만 스타일을 적용함(필드)
[속성|=값] - 값이 포함되어 있을 때(하이폰(-) 포함 단어도 됨)만 스타일 적용함.
[속성^=값] - 값으로 시작할 때 스타일을 적용함(캐럿)
[속성$=값] - 값으로 끝날때 스타일을 적용함
[속성*=값] - 값이 어디에 있든 포함만 되면 스타일을 적용함
하위 선택자
<!-- 후손 선택자, 자손 선택자 => 하위 선택자라고 포괄적으로 명명. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>하위 선택자</title>
<style type="text/css">
/* section의 하위요소 중 ul태그 포함 ul의 하위태그까지 스타일을 적용 */
#container ul {
border: 1px dotted;
color: blue;
}
</style>
</head>
<body>
<section id="container">
<header><h1>예약 방법 및 요금</h1></header>
<p>객실을 예약하려면?</p>
<ul>
<li>예약방법
<ul>
<li>직접통화 : 000-0000-0000</li>
<li>문자 메시지 : 000-0000-0000</li>
</ul>
</li>
<li>상세 요금
<ul>
<li>1인실 : 40,000원</li>
<li>2인실 : 60,000원</li>
<li>3인실 : 80,000원</li>
<li>4인실 : 100,000원</li>
</ul>
</li>
</ul>
</section>
</body>
</html>
원하는 하위 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>원하는 하위 선택자</title>
<style type="text/css">
/* 상위요소 > 하위요소로 스타일을 주면 원하는 하위요소만 스타일을 적용할수 있음. */
#container > ul > li {
border: 1px dotted red;
}
/* p태그만 적용 */
#container > p {
color: blue;
}
</style>
</head>
<body>
<section id="container">
<header><h1>예약 방법 및 요금</h1></header>
<p>객실을 예약하려면?</p>
<ul>
<li>예약방법
<ul>
<li>직접통화 : 000-0000-0000</li>
<li>문자 메시지 : 000-0000-0000</li>
</ul>
</li>
<li>상세 요금
<ul>
<li>1인실 : 40,000원</li>
<li>2인실 : 60,000원</li>
<li>3인실 : 80,000원</li>
<li>4인실 : 100,000원</li>
</ul>
</li>
</ul>
</section>
</body>
</html>
인접 형제 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인접 형제 선택자</title>
<style type="text/css">
/* + : 같은 형제(레벨)에 있으면서 같은 부모를 가지며,
바로 인접해있는 요소에다가 스타일을 적용시킬때 사용함. */
h1+p {
text-decoration: underline;
}
h1+ul {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<section id="container">
<h1>예약 방법 및 요금</h1>
<!-- <p>객실을 예약하려면?</p> -->
<ul>
<li>직접통화 : 000-0000-0000</li>
<li>문자 메시지 : 000-0000-0000</li>
</ul>
<ul>
<li>1인실 : 40,000원</li>
<li>2인실 : 60,000원</li>
<li>3인실 : 80,000원</li>
<li>4인실 : 100,000원</li>
</ul>
</section>
</body>
</html>
형제 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>형제 선택자</title>
<style type="text/css">
/* ~(필드) : 같은 형제(레벨)에 있으면서 같은 부모를 가지며,
형제 요소에다가 범위 지정을 하면 해당 범위내에 있는 형제 요소들은
전부 스타일이 적용됨. */
h1 ~ ul {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<section id="container">
<h1>예약 방법 및 요금</h1>
<!-- <p>객실을 예약하려면?</p> -->
<ul>
<li>직접통화 : 000-0000-0000</li>
<li>문자 메시지 : 000-0000-0000</li>
</ul>
<ul>
<li>1인실 : 40,000원</li>
<li>2인실 : 60,000원</li>
<li>3인실 : 80,000원</li>
<li>4인실 : 100,000원</li>
</ul>
</section>
</body>
</html>
테이블에서 하위선택자 사용 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>테이블에서 하위선택자 사용 방법</title>
<style type="text/css">
/* table에서는 하위선택자를 사용하고자 할때 >를 사용하면 안됨. */
table > tr > th {
background: blue;
color: white;
}
/* 테이블 태그에서는 tbody 자동으로 추가를 해주기 때문에 스타일이
적용되지 않음ㄴ*/
table tr th {
background: blue;
color: white;
}
table tr td {
background: black;
color: yellow;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>이름</th>
<th>나이</th>
<th>지역</th>
</tr>
<tr>
<td>이순신</td>
<td>40</td>
<td>대구광역시</td>
</tr>
</table>
</body>
</html>
반응 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>반응 선택자</title>
<style type="text/css">
.container {
width: 960px;
margin: 0 auto;
background-color: white;
border: 1px solid white;
}
header {
height: 200px;
margin: 0;
background-image: url("images/header-bg.png");
background-position: left top;
}
.navi {
background: black;
margin-top: -17px;
width: 960px;
height: 60px;
text-align:center; /* 인라인 네비 중앙정렬하기 */
}
.navi ul {
list-style-type: none;
height: 40px;
padding-top: 10px;
padding-bottom: 5px;
}
.navi ul li {
display: inline;
float: left;
}
/* link라는 반응 선택자 : 방문을 하지 않은 링크에다가 스타일 적용
visited라는 반응 선택자 : 방문한 링크의 스타일을 적용*/
.navi a:link, .navi a:visited { /* 네비게이션 각각의 공백 | 방문을 했을경우 스타일*/
padding: 10px;
display: block;
color: #fff;
width: 150px;
text-decoration: none;
}
/* hover반응선택자 : 마우스 커서를 올려놓았을 때의 스타일 적용 */
.navi a:hover {
text-decoration: 0px 2px 2px #000;
color: #FC0;
}
.navi a:active {
color: red;
}
</style>
</head>
<body>
<div class="container">
<header></header>
<nav class="navi" >
<ul>
<li><a href="#"><b>이용 안내</b></a></li>
<li><a href="#"><b>이용 요금</b></a></li>
<li><a href="#"><b>객실 배경</b></a></li>
<li><a href="#"><b>객실 안내</b></a></li>
</ul>
</nav>
</div>
</body>
</html>
가상선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>가상선택자</title>
<style type="text/css">
body {
background-color: #a8b1f7;
}
form fieldset {
margin-bottom: 25px;
}
form fieldset legend {
font-size: 15px;
font-weight: 800;
}
input:disabled {
background: #ddd;
border: 1px #f4e9f5 solid;
}
/* 마우스가 input태그 위에 있을 때 */
input:hover {
background: #fcfad7;
border: 1px #3181f7 solid;
}
/* checked 속성 : 라디오 버튼 체크박스 체크했을 때 스타일이 적용됨 */
input:checked + span {
color: red;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>사용자 정보</legend>
<label for="name">이름 : <input type="text" disabled></label>
</fieldset>
<fieldset>
<legend>신청 과목</legend>
<p>이 달에 신청할 과목을 선택하세요.</p>
<label> <input type="radio" name="subject" value="speaking"><span>회화</span></label>
<label> <input type="radio" name="subject" value="gramer"><span>문법</span></label>
<label> <input type="radio" name="subject" value="writing"><span>작문</span></label>
</fieldset>
</form>
</body>
</html>
가상 클래스 - 홀수 행에만 적용되는 스타일
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>가상클래스</title>
<style type="text/css">
#container {
text-align: center;
color: #2b2b2b;
}
table {
width: 200px;
margin: 0 auto;
/* 중복되는 테두리를 한줄로 표식을 한것 */
border-collapse: collapse;
}
td {
text-align: left;
padding: 10px;
padding-left: 20px;
}
/* 홀수 행에만 적용되는 스타일 */
table tr:nth-child(2n+1) {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div id="container">
<h1>건강에 좋은 식품</h1>
<table border="1">
<tr>
<td>블루베리</td>
</tr>
<tr>
<td>귀리</td>
</tr>
<tr>
<td>토마토</td>
</tr>
<tr>
<td>시금치</td>
</tr>
<tr>
<td>견과류</td>
</tr>
<tr>
<td>포도주</td>
</tr>
<tr>
<td>브로컬리</td>
</tr>
<tr>
<td>마늘</td>
</tr>
<tr>
<td>녹차</td>
</tr>
<tr>
<td>주스</td>
</tr>
<tr>
<td>사과</td>
</tr>
</table>
</div>
</body>
</html>
단위 em
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>단위</title>
<style type="text/css">
/* 1em = 100% = 16px */
/* em이라는 단위 : 발음을 따서 em이라는 단위를 사용함 */
h1 {
font-size: 3em;
}
p {
font-size: 2em;
}
</style>
</head>
<body>
<h1>3em의 크기를 가진 제목</h1>
<p>1em 크기를 가진 단락</p>
</body>
</html>
백분율 단위 - 기본으로 설정된 크기를 기준으로 상대적인 크기를 지정할 때 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>백분율 단위</title>
<style type="text/css">
p:nth-child(1) {}
p:nth-child(2) {font-size: 100%;}
p:nth-child(3) {font-size: 150%;}
p:nth-child(4) {font-size: 200%;}
#first {
/* background-color: rgb(255,222,100); */
background-color: rgba(0,0,0,0.5)/* alpa값은 0.0(완전투명)
1.0(완전불투명)*/
}
</style>
</head>
<body>
<!-- %단위 : 기본으로 설정된 크기를 기준으로 상대적인 크기를 지정할 때 사용하면 유용함. -->
<p id="first">Hello world</p>
<p>Hello world</p>
<p>Hello world</p>
<p>Hello world</p>
</body>
</html>
