## CSS선택자2
-선택자 : 어떤 요소에 스타일을 적용할것인가에 대한 정보이다.
선택자{
속성명: 속성값;
}
-기본 선택자
-그룹 선택자
-특성(속성) 선택자
-결합 선택자
-의사 클래스
-기본 요소
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
# 특성(속성) 선택자
-특성 선택자(속성 선택자)는 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택할 수 있다.
-html태그에 클래스라는 속성이 어떤 값을 갖고 있더라도 클래스가 존재하기만 하면 선택된다.
-기존에 class는 .class로 선택자1에서 배웠었다.
[class]{
속성명: 속성값;
}
<body>
<h1>선택자2를 공부합니다.</h1>
<p>첫번째 문단입니다.</p>
<p id="id1" class="text1">두번째 문단입니다.</p>
<p id="id2" class="text2">세번째 문단입니다.</p>
<p id="it1" class="texas1">네번째 문단입니다.</p>
<p id="it2" class="texas2">다섯번째 문단입니다.</p>
<p>여섯번째 <span>문단입니다.</span></p>
</body>[class]{
border: 2px solid;
}
-[id]도 동일하게 적용이 된다.
-클래스 속성이 있으면서 그 값이 item인 지정된 요소를 선택한다.
[class="item"]{
속성명: 속성값;
}
[class="text1"]{
color: red;
}
[class="text2"]{
color: blue;
}
-기호를 부호화 하여 요소를 선택하는 방식을 다양화 할 수 있다.
[class *= "it"] { 속성명: 속성값; } = 클래스 값에 "it"가 포함되면 있으면 선택된다.
[class ^= "it"] { 속성명: 속성값; } = 클래스 값이 "it"로 시작하면 선택된다. (OK = it1, itit)
[class $= "it"] { 속성명: 속성값; } = 클래스 값에 "it"로 끝나면 선택된다. (OK = 2it, mitit)
[class$="1"]{
color: red;
}
[class$="2"]{
color: blue;
}
# 결합 선택자
-결합 선택자는 두 개 이상의 선택자를 결합시켜 결합된 조건을 만족하는 요소를 선택한다.
# 자손 결합자
# 형제 결합자
# 자식 선택자
-두 개의 선택자 중 첫 번째 선택자 요소의 자식 요소를 선택할 수 있다.
# 자손 선택자
-두 개의 선택자 중 첫 번째 선택자 요소의 자손 요소를 선택할 수 있다.
# div 요소 안에 위치하는 모든 p요소를 선택한다.
div p{
속성명: 속성값;
}
# div 요소의 바로 아래에 위치하는 모든 p요소를 선택한다.
div > p{
속성명: 속성값;
}
div p{} 적용
<body>
<h1>결합 선택자 시간입니다.</h1>
<p>오늘은 결합 선택자를 공부합니다.</p>
<div class="java">
<p>java클래스 안의 첫번째 p태그입니다.</p>
<p>java클래스 안의 두번째 p태그입니다.</p>
</div>
<div class="script">
<p>script클래스 안의 첫번째 p태그입니다.</p>
<p>script클래스 안의 두번째 p태그입니다.</p>
<div class="javaScript">
<p>javaScript클래스 안의 첫번째 p태그입니다.</p>
<p>javaScript클래스 안의 두번째 p태그입니다.</p>
</div>
</div>
<div class="frameWork">
<p>framWork클래스 안의 첫번째 p태그입니다.</p>
<p>frameWork클래스 안의 두번째 p태그입니다.</p>
</div>
<p>결합 선택자 시간을 마칩니다.</p>
</body>div p{
color: blue;
}
<div class="java">
<p>java클래스 안의 첫번째 p태그입니다.</p>
<p>java클래스 안의 두번째 p태그입니다.</p>
</div>
<div class="script">
<p>script클래스 안의 첫번째 p태그입니다.</p>
<p>script클래스 안의 두번째 p태그입니다.</p>
<div class="javaScript">
<p>javaScript클래스 안의 첫번째 p태그입니다.</p>
<p>javaScript클래스 안의 두번째 p태그입니다.</p>
</div>
</div>.java p{
color: red;
}
.script p{
color: blue;
}
div>p{} 적용
<div class="java">
<p>java클래스 안의 첫번째 p태그입니다.</p>
<p>java클래스 안의 두번째 p태그입니다.</p>
</div>
<div class="script">
<p>script클래스 안의 첫번째 p태그입니다.</p>
<p>script클래스 안의 두번째 p태그입니다.</p>
<div class="javaScript">
<p>javaScript클래스 안의 첫번째 p태그입니다.</p>
<p>javaScript클래스 안의 두번째 p태그입니다.</p>
</div>
</div>.script>p{
color: blue;
}
.javaScript>p{
color: red;
}
# 형제 선택자
-두 개의 선택자중 첫 번째 선택자 요소의 형제를 선택할 수 있다.
-부모 아래에 같은 선상에 있는 선택자
-h1 요소의 뒤에 오는 형제 중 모든 p 요소를 선택
h1 ~ p{
속성명: 속성값;
}
-h1 요소의 바로 뒤에 오는 형제 p 요소를 선택
h1 + p{
속성명: 속성값;
}
## 가상 클래스 (의사 클래스)
-가상 클래스 (의사 클래스)는 선택자에 추가하는 키워드로
요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미이다.
-형식
선택자: 의사클래스{
속성명: 속성값;
}
-hover : 요소에 마우스를 올려놓은 상태를 의미한다.
-즉 h1요소에 마우스를 올려놓은 상태가 되면 빨간색으로 변경하겠다는 의미이다.
============================================================
| 의사 클래스 | 의미 |
============================================================
| hover | 마우스 포인터가 요소에 올라가있는 상태 |
input:hover{
width: 100px;
height: 30px;
background-color: dodgerblue;
border: none;
border-radius: 10px;
}
-마우스에 버튼을 올려놓으면,
<body>
<input type="button" value="버튼"><br><br>
<a href="#none">사이트 이동하기</a>
</body>
-text-decoration: none = a에 기본적으로 <u>태그가 적용되있는 것을 지우기 (밑줄)
-transition: 0.5s = 버튼 은은하게 불들어오게 하기
a{
color: black;
text-decoration: none;
transition: 0.5s;
}
a:hover{
color: green;
text-decoration: none;
}
-여러 버튼 활용하기
@font-face {
font-family: "배달의민족";
src: url(/font/BMDOHYEON_ttf.ttf);
}
#naver{
color: green;
text-decoration: none;
border: 1px solid green;
display: inline-block;
width: 120px;
height: 50px;
line-height: 50px;
text-align: center;
transition: 1.0s;
font-family: 배달의민족;
}
#naver:hover{
background-color: green;
color: white;
}
#kakao{
color: black;
text-decoration: none;
border: 1px solid yellow;
display: inline-block;
width: 120px;
height: 50px;
line-height: 50px;
text-align: center;
transition: 1.0s;
font-family: 배달의민족;
}
#kakao:hover{
background-color: yellow;
color: black;
}
#toss{
color: blue;
text-decoration: none;
border: 1px solid blue;
display: inline-block;
width: 120px;
height: 50px;
line-height: 50px;
text-align: center;
transition: 1.0s;
font-family: 배달의민족;
}
#toss:hover{
background-color: blue;
color: white;
}
------------------------------------------------------------------------------------------------------
| active | 사용자가 요소를 활성화 했다.(EX 마우스 클릭) |
-버튼을 눌렀을 때 활성화 되는 기능
-hover가 마우스를 올려놓을 때 변화되는 기능이라면, active는 눌렀을 때 변화되는 기능이다.
#naver:active{
background-color: white;
color: green;
}
------------------------------------------------------------------------------------------------------
| focus | 요소가 포커스 받고 있다. |
input{
width: 250px;
height: 50px;
}
input:focus{
background-color: skyblue;
transition: 1.0s;
}
------------------------------------------------------------------------------------------------------
| disabled | 비활성화 사태의 요소 |
<input type="text" placeholder="입력하시면 됩니다" disabled>
-disabled는 로그인을 성공했을시 데이터로 파악을해서 비활성화 시켰을 때 어떤 기능으로 처리를 할지 정할 수 있다.
------------------------------------------------------------------------------------------------------
| nth-child() | 형제 사이의 순서에 따라 요소를 선택 |
<body>
<div id="flex">
<div class="box">1번 box</div>
<div class="box">2번 box</div>
<div class="box">3번 box</div>
<div class="box">4번 box</div>
<div class="box">5번 box</div>
</div>
</body>#flex{
display: flex;
justify-content: space-between;
}
.box{
width: 50px;
height: 50px;
background-color: orange;
border: 1px solid;
box-sizing: border-box;
text-align: center;
}
-:ntn-child(지정할 객체){}로 하나의 객체만 움직이고 색을 변하게 할 수 있다.
.box:nth-child(3){
background-color: skyblue;
position:relative;
top: 50px;
}
-(2n)이라는 숫자를 넣어서 짝수 번호에 있는 객체만 지정해줄 수 있다.
.box:nth-child(2n){
background-color: skyblue;
position:relative;
top: 50px;
}
## 의사 요소 (pseudo-elements)
-의사요소(pseudo-elements)는 선택자에 추가하는 키워드로 이를 이용하면
선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있다.
기본 형식
선택자::의사요소{
속성명: 속성값;
}
Example)
li::first-letter{
font-size: 20px;
}
-li요소의 첫 번째 글자만 크기를 20px;로 변경하겠다는 의미이다. (기본은 16px)
============================================================
| 의사 요소 | 의미 |
============================================================
| after | 요소의 뒤에 의사 요소를 생성 및 추가 한다. |
-----------------------------------------------------------------------------------------------------
| before | 요소의 앞에 의사 요소를 생성 및 추가 한다. |
-----------------------------------------------------------------------------------------------------
| first-line | 블록 레벨 요소의 첫 번째 선에 스타일을 적용한다. |
-----------------------------------------------------------------------------------------------------
| marker | 목록 기호의 스타일을 정의한다. |
-----------------------------------------------------------------------------------------------------
| placeholder | 입력 요소의 플레이스홀더(자리표시자) 스타일을 적용한다. |
============================================================
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
# first-line
-first-line : 블록 레벨 요소의 첫 번째 선에 스타일을 적용한다.
p::first-line{
color: red;
}
p::first-letter{
color: yellow;
}
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
# marker
-marker : 목록(ul, ol)의 구분점을 의미한다.
<body>
<ul>
<li>햄버거</li>
<li>피자</li>
<li>샌드위치</li>
<li>파스타</li>
</ul>
</body>li::marker{
color: red;
font-size: 30px;
}
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
# placeholder
-placeholder : 입력 요소의 플레이스홀더(자리표시자) 스타일을 적용한다.
<body>
<input type="text" placeholder="입력하세요">
</body>input::placeholder{
color: green;
font-size: 20px;
font-family: 배달의민족;
}
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
# before, after
-before : 요소의 앞에 의사 요소를 생성 및 추가 한다.
-전에 리스트 모양 custom 해서 사용할 때 처럼 .(해당클래스명) li::before{content: '♥'} 사용법이 같다.
-after : 요소의 뒤에 의사 요소를 생성 및 추가 한다.
<body>
<p>이것이 원본 문단입니다.</p>
</body>p::before{
content: "p태그 앞에 추가합니다.";
color: orange;
}
p::after{
content: "p태그 뒤에 추가합니다.";
color: green;
}
'CSS↗' 카테고리의 다른 글
| 오류해결)CSS 변경 후 적용안되는 오류 (0) | 2024.06.09 |
|---|---|
| CSS 언어 정리 (0) | 2024.06.04 |
| CSS float / Position / Flexbox (0) | 2024.04.08 |
| CSS 요소의 배경 설정(background) (0) | 2024.04.08 |
| CSS padding, margin / 박스 크기 계산 (0) | 2024.04.08 |