728x90
선택자
연결선택자
둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정.
선택자를 둘 이상 조합하므로 '조합 선택자','콤비네이션 선택자','콤비네이션 셀렉터'등으로 부름.
*하위선택자와 자식선택자
특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 함.
현재 요소를 기준으로 바로 한 단계 아래 요소는 자식 요소, 그 자식 요소의 한 단계 아래는 손자 요소라고 함
하위선택자를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택하여 자손 선택자라고도 함.
즉, 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용.
ex)
section p {.....}section 상위 요소, p 하위 요소
자식선택자는 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자로, 다음과 같이 두 요소 사이에 '>'기호를 표시해 부모 요소와 자식 요소를 구분
ex)
section < p {.....}section 부모 요소, p 자식요소
*형제선택자
웹 문서에서 부모 요소가 같을 경우 형제 관계라고 하고, 형제 관계인 요소에서 먼저 나오는 요소를 형 요소, 나중에 나오는 요소를 동생 요소
인접형제 선택자
형제 요소 중 첫 번째 동생 요소만선택하는 것을 인접 선택자(adjacent selector).
인접 형제 선택자를 정의할 때 다음 기본형과 같이 요소1과 요소2 사이에 + 기호로 표시.
요소1과 요소2는 같은 선택 레벨이면서 요소 1 이후 가장 먼저 오는 요소2를 선택
ex)
h1+p{color:blue;}h1의 형제인 p 요소 중 첫 번째 p
형제선택자
형제 선택자(sibling selector)는 형제 요소의 스타일을 정의하는 데 인접 형제 선택자와 달리 모든 형제 요소에 적용.
형제 선택자를 정의할 때 첫 번째 요소와 두 번째 요소 사이에 ~ 기호를 표시
ex)
h1 ~ p {color:blue;}
속성 선택자
태그 안에서 사용하는 속성값에 따라 요소를 선택 하는 역할. 특정한 조건 선택자
*특정 속성이 있는 요소를 선택하는 [속성]선택자
속성값에 따라 원하는 요소를 선택할 수 있음. 이 때 사용하는 것이 [속성]선택자.
대괄호 사이에 원하는 속성을 입력하면 됨.
예를 들어 a 요소 중 href 속성이 있는 요소를 선택
a[href] {...}
*특정 속성값이 있는 요소를 선택하는 [속성=속성값] 선택자
주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정할 때 사용
a [target=_blank] {...}
*여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택하는 [속성 ~=값] 선택자
여러 속성값 중에서 해당 속성값이 포함된 요소를 선택.
이 선택자는 속성이 하나면서 속성값이 여러 개 일 때 특정 속성값을 찾는데 편리
[class ~=button]{...}
*특정 속성값이 포함된 속성 요소를 선택하는 [속성 |= 값] 선택자
특정 속성값이 포함된 속성에 스타일을 적용.
이 때 속성값은 한 단어로 일치.
a[title|= us]{...}
*특정 속성값으로 시작하는 속성 요소를 선택하는 [속성 ^=값]
속성값이 정확하게 일치하지 않더라도 지정한 속성값으로 시작하는 요소를 찾으려면 사용.
a[title ^=eng]{...}
*특정한 값으로 끝나는 속성의 요소를 선택하는 [속성 $=값] 선택자
지정한 속성값으로 긑나는 요소
*일부 속성값이 일치하는 요소를 선택하는 [속성 *= 값] 선택자
속성값이 어느 위치에 있든지 지정한 속성값이 포함되어 있다면 해당 요소를 선택
클래스
가상 클래스
*방문하지 않은 링크에 스타일을 적용하는 :link
링크의 밑줄을 없애거나 색상을 바꾸기 위해 사용
*방문한 링크에 스타일을 적용하는 :visited
사용자가 방문한 텍스트 링크와 색상이 달라지지 않게 하기 위해 사용
*특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용하는 :hover
웹 요소 위로 마우스 포인터를 올려놓을 때 스타일을 적용
*웹 요소를 활성화 했을 때 스타일을 적용하는 :active
웹 요소의 링크나 이미지 등을 활성화 했을 때 스타일을 지정
*웹 요소에 초점이 맞추어졌을 때 스타일을 적용하는 :focus
<style>
/* 하위(자손)선택자 => 상위태그 하위태그 { } */
#contents p{
color: blue;
}
/* 자식선택자 => 상위태그 > 하위태그 */
#contents > p{
color: red;
}
/*형제선택자 => 태그 ~ 태그 => 같은레벨 태그*/
h2 ~ h3 {
color: green;
}
/*인접 형제선택자 => 태그 + 태그 => 같은레벨 인접 태그*/
h2 + h3{
color: purple;
}
</style>
</head>
<body>
<div id="contents">
<h1>제목1</h1>
<p>본문 내용</p>
<div>
<p>div안에 있는 본문 내용1</p>
<p>div안에 있는 본문 내용2</p>
</div>
<h2>제목2</h2>
<h3>제목3</h3>
<h3>제목3</h3>
<h3>제목3</h3>
</div>
</body>
속성 선택자 (특정한 조건 선택자)
- 태그[찾는속성] 속성있는것 찾기
- 태그[찾는속성=찾는값] 일치하는 값
- 태그[속성 ~= 값] 값을 포함(독립적 단어)
- 태그[속성 |= 값] 값을 포함(모든 포함하는 단어)
- 태그[속성 ^= 값] 시작하는 값
- 태그[속성 $= 값] 끝나는 값
- 태그[속성 *= 값] 일부 속성값이 일치하는 (포함하는 값)-->
<style>
a[href]{
color: blue;
}
a[target=_blank]{
color: purple;
}
a[class~=button]{
color: green;
}
a[class|=us]{
color: red;
}
a[class^=eng]{
color: yellow;
}
a[href$=jpg]{
background-color: pink;
}
a[href*=w3]{
background-color: skyblue;
}
</style>
</head>
<body>
<ul>
<li><a>메인메뉴</a></li>
<li><a href="ex1.html" target="_blank">메뉴1</a></li>
<li><a href="ex1.html" class="button">메뉴2</a></li>
<li><a href="ex1.html" class="flat button">메뉴3</a></li>
<li><a href="ex1.html" class="us-english">메뉴4</a></li>
<li><a href="ex1.html" class="english">메뉴5</a></li>
<li><a href="../css1/cat.jpg">메뉴6</a></li>
<li><a href="http://www.w3.org">메뉴7</a></li>
</li>
</body>
가상 클래스 (:hover, 순서) 사용자 동작에 반응
가상요소(::요소 추가)-->
<style>
.navi ul li{
list-style: none;
float: left;
width: 150px;
padding: 10px;
}
/* 방문하지 않은 링크, 방문한 링크 */
.navi a:link, .navi a:visited{
/*글자크기 14px, 글자색 #000, 안여백 10px, 밑줄 없앰
작은영역 큰영역으로 변경 */
font-size: 14px;
color: #000;
padding: 10px;
text-decoration: none;
display: block;
text-align: center;
}
.navi a:hover{
/* 배경색 #222 글자색 #fff */
background-color: #222;
color: #fff;
}
.navi a:active{
background-color: red;
}
#intro{
clear: left;
width: 300px;
border: 1px solid black;
}
#room{
clear: left;
width: 300px;
border: 1px solid black;
}
/* 대상에 스타일 적용하는 :target 가상클래스 선택자 */
#intro:target{
background-color: blue;
color: white;
}
/* #room 클릭하면 연결되어있는 곳 스타일 변경
배경색 yellow, 글자색 green */
#room:target{
background-color: yellow;
color: green;
}
/* 라디오 클릭(체크) :checked 인접형제태그 label
글자색 빨간색 , 글자굵기 진하게 */
input:checked + label{
color: red;
font-weight: bold;
}
/* input type radio 찾아서 제외 하고 나머지 스타일
input[type=text],input[type=tel]
=> 변경 input:not([type=radio])
:not([조건]) */
input:not([type=radio]){
border: 1px solid blue;
border-radius: 3px;
padding: 5px;
width: 200px;
}
</style>
</head>
<body>
<fieldset>
<legend>개인정보</legend>
<label>이름</label>
<input type="text" name="name">
<br>
<label>연락처</label>
<input type="tel" name="tel">
</fieldset>
<fieldset>
<legend>객실형태</legend>
<input type="radio" name="room">
<label>기본형</label>
<br>
<input type="radio" name="room">
<label>가족형</label>
</fieldset>
<div class="navi">
<ul>
<li><a href="#intro">이용 안내</a></li>
<li><a href="#room">객실 소개</a></li>
<li><a href="test1.html">예약 방법</a></li>
<li><a href="test1.html">예약 하기</a></li>
</ul>
</div>
<div id="intro">
<h2>이용안내</h2>
<p>이용안내내용</p>
</div>
<div id="room">
<h2>객실 소개</h2>
<p>객실 소개 내용</p>
</div>
연습)
<style>
/* 전체 영역 안여백, 밖여백 0px */
*{
margin: 0px;
padding: 0px;
}
/* body 태그 배경색 #ccc, 안여백 20픽셀*/
body{
background-color: #ccc;
padding: 20px;
}
/* id="signup" 배경색 #fff, 테두리선 1px 실선 #222,
모서리 둥글게 5px, 안여백 20px, 너비 400px, 밖여백 30px 자동(가운데정렬)*/
#signup{
background-color: #fff;
border: 1px solid #222;
border-radius: 5px;
padding: 20px;
width: 400px;
margin: 30px auto;
}
/* id="signup" 자손 fieldset 테두리선 1px 실선 #ccc, 아래밖여백 30px*/
#signup fieldset{
border: 1px solid #ccc;
margin-bottom: 30px;
}
/* id="signup" 자손 legend 글자크기 16px, 글자굵기 진하게, 왼쪽안여백 5px
아래안여백 10px*/
#signup legend{
font-size: 16px;
font-weight: bold;
padding-left: 5px;
padding-bottom: 10px;
}
/* id="signup" 자손 ul 자손 li 줄간격 30px, 목록스타일 없음,
안여백 5px 10px 아래밖여백 2px*/
#signup ul li{
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
/* id="signup" 자손 button 테두리선 1px 실선 #222 ,
모서리 둥글게 20px, 글자크기 16px, 글자간격 1px, 밖여백 자동, 안여백 7px 25px
배치(display) block*/
#signup button{
border: 1px solid #222;
border-radius: 20px;
font-size: 16px;
letter-spacing: 1px;
margin: auto;
padding: 7px 25px;
display: block;
}
/* id="signup" 자손 label 어울림 left, 글자크기 13px, 너비 110px*/
#signup label{
font-size: 13px;
width: 110px;
float: left;
}
/* p335 id="signup" 자손 input태그 type 속성 text 찾기,
id="signup" 자손 input태그 type 속성 password 찾기,
id="signup" 자손 input태그 type 속성 tel 찾기,
id="signup" 자손 input태그 type 속성 email 찾기,
#signup input[type=text],#signup input[type=password],
#signup input[type=tel], #signup input[type=email]
테두리선 1px 실선 #ccc
모서리둥글게 3px
글자크기 13px
안여백 5px
너비 200px
p350 input type=radio 제외하고 적용 */
#signup input:not([type=radio]) {
border: 1px solid #ccc;
border-radius: 3px;
font-size: 13px;
padding: 5px;
width: 200px;
}
/* p334 id="signup" 자손 input태그 required 속성 찾기
테두리선 1px 실선 빨간색 */
#signup input[required]{
border: 1px solid red;
}
/* p334 id="signup" 자손 input태그 readonly 속성 찾기
테두리선 없음 */
#signup input[readonly]{
border: none;
}
/* p348 #signup fieldset:last-of-type 마지막
#signup fieldset:nth-of-type(3)
#signup fieldset:last-of-type
테두리선 none, 밖아래여백 0 */
#signup fieldset:last-of-type{
border: none;
margin-bottom: 0px;
}
/* p349 #signup button:hover
배경색 #222, 글자색 #fff */
#signup button:hover{
background-color: #222;
color: #fff;
}
</style>
</head>
<body>
<form id="signup">
<fieldset>
<legend>로그인 정보</legend>
<ul>
<li>
<label>아이디</label>
<input name="userid" type="text" required autofocus>
</li>
<li>
<label>비밀번호</label>
<input name="pwd1" type="password" required>
</li>
<li>
<label>비밀번호 확인</label>
<input name="pwd2" type="password" required>
</li>
<li>
<label>회원 등급</label>
<input name="level" type="text" readonly value="준회원">
</li>
</ul>
</fieldset>
<fieldset>
<legend>개인 정보</legend>
<ul>
<li>
<label>이름</label>
<input name="fullname" type="text" placeholder="5자미만 공백없이" required>
</li>
<li>
<label>메일 주소</label>
<input name="email" type="email" placeholder="abcd@domain.com" required autocomplete="off">
</li>
<li>
<label>연락처</label>
<input name="tel" type="tel" autocomplete="off">
</li>
</ul>
</fieldset>
<fieldset>
<button type="submit"> 제출 </button>
</fieldset>
</form>
</body>
<title>css2/test4.html</title>
<!--p343 3)구조 가상 클래스 (순서) -->
<style>
.contents :nth-child(3){
background-color: yellow;
}
.contents p:nth-of-type(3){
background-color: green;
}
/* 홀수 odd , 2n+1
짝수 even , 2n
홀수번째 배경색 lightgary */
table tr:nth-of-type(2n+1){
background-color: lightgray;
}
/* 짝수번째 배경색 skyblue */
table tr:nth-of-type(2n){
background-color: skyblue;
}
</style>
</head>
<body>
<h1>웹개발</h1>
<table>
<tr><td>HTML</td></tr>
<tr><td>CSS</td></tr>
<tr><td>Java</td></tr>
<tr><td>db</td></tr>
<tr><td>aws</td></tr>
</table>
<div class="contents">
<h2>이용안내</h2>
<p>1내용내용내용내용내용내용내용내용내용내용내용내용</p>
<p>2내용내용내용내용내용내용내용내용내용내용내용내용</p>
<h2>객실소개</h2>
<p>3내용내용내용내용내용내용내용내용내용내용내용내용</p>
<h2>예약방법</h2>
<p>4내용내용내용내용내용내용내용내용내용내용내용내용</p>
</div>
</body>
</html>
<title>css2/test5.html</title>
<!-- p346 가상요소(::요소 추가)
::first-line 첫째줄, ::first-letter 첫번째 글자,
::before 앞, ::after 뒤 -->
<style>
li.new::after{
content: "NEW!!";
font-size: x-small;
padding: 2px 4px;
margin: 0px 10px;
border-radius: 2px;
background-color: red;
color: white;
}
</style>
</head>
<body>
<h1>제목 목록</h1>
<ul>
<li class="new">제품 A </li>
<li>제품 B </li>
<li>제품 C </li>
<li class="new">제품 D </li>
</ul>
</body>
728x90
'KDT > WEB' 카테고리의 다른 글
| 231120 WEB - CSS8 (0) | 2023.11.20 |
|---|---|
| 231117 WEB - CSS7 (0) | 2023.11.17 |
| 231114 WEB - CSS5 위치 (0) | 2023.11.17 |
| 231113 WEB - CSS4 (0) | 2023.11.13 |
| 231110 WEB - CSS3 (0) | 2023.11.10 |