id 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 기초-5(아이디 선택자)</title>
<style type="text/css">
#header {
width: 800px; /* 너비 800픽셀 */
padding: 0px; /* 안쪽여백 0픽셀 */
background: red;
}
#wrap {
width: 800px; /* 너비 800픽셀 */
padding: 0px; /* 안쪽여백 0픽셀 */
background: yellow;
}
#aside {
width: 300px;
padding: 0;
background: blue;
color: white;
float: left; /* 배치를 하는데 물결흐르듯이 왼쪽으로 붙여서 배치를 시킴. */
}
#contnet {
width: 500px;
padding: 0;
background: yellow;
float: left;
}
</style>
</head>
<body>
<!-- 공간분할을 하면서 id선택자를 4개 부여함 -->
<!-- id선택자 : 항상 유니크하게 존재하는 특징을 가지고 있음 -->
<div id="header">
<h1>header 영역</h1>
</div>
<div id="wrap">
<div id="aside">
<h1>aside 영역</h1>
</div>
<div id="content">
<h1>content 영역</h1>
</div>
</div>
</body>
</html>
id 선택자 중복
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 기초-6(id선택자의 중복)</title>
<style type="text/css">
#select{
color: blue;
}
</style>
</head>
<body>
<!-- id선택자 : 유니크하다고 했는데 아래와 같이
동일한 id사용하는 방법은 권장하지 않음.-->
<h1 id="select">ID선택자-1</h1>
<h1 id="select">ID선택자-2</h1>
<h1 id="select">ID선택자-3</h1>
</body>
</html>class선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 기초-7(class선택자)</title>
<style type="text/css">
/* class선택자 : 다른 태그들도 함깨 그룹을 지어서
스타일을 적용시키기 위해서 사용함. */
.choice {
color: blue;
}
.lang {
color: red;
}
.item {
color: blueviolet;
}
.header {
background: aqua;
}
</style>
</head>
<body>
<!-- 멀티 선택자 사용 -->
<h1 class="item header">종류</h1>
<h2 class="choice">과일</h2>
<ul>
<li class="choice">사과</li>
<li>파인애플</li>
<li>오랜지</li>
<li class="choice">바나나</li>
</ul>
<h2 class="lang">언어의 종류</h2>
<ul>
<li class="lang">C언어</li>
<li>JAVA</li>
<li>HTML</li>
<li class="lang">CSS</li>
</ul>
</body>
</html>
class 선택자 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 기초-8(class선택자)</title>
<style type="text/css">
/* 같은 클래스 선택자를 지닌다 하여도 .클래스선택자명 앞에 태그가
오면 그 태그에만 스타일이 적용됨. */
h2.bluetext {
color: blue;
}
p {
font-size: 20px;
margin: 20px; /* p태그를 기준으로 왼쪽 바깥여백을 20px로함. */
}
.redtext {
color: red;
}
</style>
</head>
<body>
<h1>블루베리에 관한 연구</h1>
<h2 class="bluetext">블루베리의 항산화 효능</h2>
<p class="bluetext">블루베리는 항산화제인 안토시아닌과 폴리페놀을 다량 포함하고 있습니다.</p>
<p>매사츄세츠 보스톤에 있는 <span class="redtext">USDA 노화에 관한 인류 영양 연구센터
(the USDA Human Nutrition Research Center on Aging)</span>의 자료에 의하면
블루베리는 과일 중에서 가장 항산화 작용이 뛰어난 과일이라고 합니다.</p>
<h2>블루베리의 노화</h2>
<p><span class="redtext">USDA 인류 영양 연구센터(the USDA Human Nutrition Research Center)</span>
실험실에서 신경과학자들은 쥐들에게 블루베리를 먹임으로써 노화에 의한 인지능력의
손실을 예방해 준다는 사실을 발견하였습니다.</p>
</body>
</html>
후손 선택자와 자손 선택자
전체 => 후손
직접적인 것 => 자손 '>'표시 - 바로밑
반응, 상태, 구조 선택자
속성 선택자 - 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 기초-9(속성선택자-1)</title>
<style type="text/css">
/* a태그에서 href라는 속성이 있는 곳만 배경색을
yellow로 적용하라. 속성을 지정할때 반드시 []안에 작성해야함. */
a[href] {
background: yellow;
}
ul {
list-style-type: none; /* 블릿 없애기 */
}
li {
width: 100px;
display: inline; /* 블럭형태가 아니라 네비게이션처럼 옆으로 붙게끔 함 */
margin: 10px; /* width를 100px로 기본 폭이 변경됨. */
}
a{
text-decoration: none;
padding: 5px 20px;
font-size: 14px;
}
</style>
</head>
<body>
<ul>
<li><a>메인메뉴 : </a></li>
<li><a href="#">떡볶이</a></li>
<li><a href="#">비빔밥</a></li>
<li><a href="#">떡국</a></li>
</ul>
</body>
</html>
속성 선택자 - 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 기초-10(속성선택자-2)</title>
<style type="text/css">
a[target="_blank"] {
padding-right: 30px;
background: url("images/newwindow.png") no-repeat right;
}
</style>
</head>
<body>
<h1>포털 사이트 종류</h1>
<ul>
<li><a href="https://www.google.com" target="_blank">구글</a></li>
<li><a href="https://www.daum.com">다음</a></li>
<li><a href="https://www.naver.com">네이버</a></li>
</ul>
</body>
</html>
속성 선택자 - 3
~ : 필드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 기초-11(속성선택자-3)</title>
<style type="text/css">
ul {
list-style: none;
}
li {
display: inline;
float: left;
margin: 10px;
}
a {
padding: 5px 20px;
font-size: 14px;
color: blue;
text-decoration: none;
}
.flat {
background: blue;
color: white;
}
/* ~ : 필드라고 부름. */
/* [속성 ~= "값"] 선택자 : 여러 속성 값중에 해당 값이 포함되어 있는 요소들만
스타일을 적용시킴. */
[class ~= "button"]{
border: 2px solid red;
}
</style>
</head>
<body>
<ul>
<li><a href="#">메인 1</a></li>
<li><a href="#">메인 2</a></li>
<li><a href="#" class="button">떡볶이</a></li>
<li><a href="#" class="flat button">비빔밥</a></li>
</ul>
</body>
</html>
속성 선택자 - 4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 기초-12(속성선택자-4)</title>
<style type="text/css">
ul {
list-style: none;
}
li {
display: inline;
float: left;
margin: 10px;
}
a {
padding: 5px 20px;
font-size: 14px;
color: blue;
text-decoration: none;
}
/* |= : 특정값이 포함된 속성에 스타일을 적용시킴.
"값-"로 연결된 다어라도 스타일을 적용시킨다.
단, 하이프(-)만 적용을 시킨다는것에 주목해야함.*/
a[title |= "us"]{
background: url("images/us.png") no-repeat left center;
}
a[title |= "jap"] {
background: url("images/jp.png") no-repeat left center;
}
</style>
</head>
<body>
<ul>
<li><a href="#" title="us">영어</a></li>
<li><a href="#" title="us-english">영어</a></li>
<li><a href="#" title="jap-anese">일본어</a></li>
</ul>
</body>
</html>
속성 선택자 - 5 =^ 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 기초-12(속성선택자-5)</title>
<style type="text/css">
ul {
list-style: none;
}
li {
display: inline;
float: left;
margin: 10px;
}
a {
padding: 5px 20px;
font-size: 14px;
color: blue;
text-decoration: none;
}
/* ^ : 캐럿이라고 명칭함. */
/* ^= : 지정한 문자로 시작하는 속성에 스타일을 적용시킴. */
a[title ^="eng"]{
background: url("images/us.png") no-repeat left center;
}
a[title ^="jap"]{
background: url("images/jp.png") no-repeat left center;
}
a[title ^="chin"]{
background: url("images/ch.png") no-repeat left center;
}
</style>
</head>
<body>
<ul>
<li>외국어 서비스 : </li>
<li><a href="#" title="english">영어</a></li>
<li><a href="#" title="japanese">일본어</a></li>
<li><a href="#" title="chines">중국어</a></li>
</ul>
</body>
</html>
속성 선택자 - 6 $= 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 기초-14(속성선택자-6)</title>
<style type="text/css">
ul {
list-style-type: none;
}
a {
line-height: 30px; /* 블록형태로 display되어 있는 것을 높이를 조절함. */
font-size: 14px;
color: blue;
text-decoration: none;
}
/* $= : 지정한 문자로 끝나는 요소에 스타일을 작동시키는 선택자 */
a[href $="hwp"]{ /* 확장자가 hwp로 끝나는 곳에 스타일 적용 */
background: url("images/hwp_icon.gif") no-repeat right center;
padding-right: 25px;
}
a[href $="xls"]{ /* 확장자가 xls로 끝나는 곳에 스타일 적용 */
background: url("images/excel_icon.gif") no-repeat right center;
padding-right: 25px;
}
</style>
</head>
<body>
<h2>회사소개 파일 다운받기</h2>
<ul>
<li><a href="intro.hwp">hwp파일</a></li>
<li><a href="intro.xls">엑셀파일</a></li>
</ul>
</body>
</html>
