link 태그 : 외부에 있는 파일과 연결하는 태그
link 태그 이용하여 css 파일 연결하기
html 파일 안 head 태그에 link 태그로 연결
rel="stylesheet" href="폴더명"
<head>
<link href="../2_CSS/css/selector2.css" rel="stylesheet">
</head>CSS파일 파일명 .css
파일 전체가 style 태그 내부라고 생각하면 됨
기본 속성 선택자
태그에 작성된 특정 속성을 선택하는 선택자
작성법 : 선택자[속성명="속성값"] { css 코드; }
- 선택자는 생략할 수 있음
- "속성값" 양쪽에 쌍따옴표("")는 홑따옴표('')로 변결할 수 있음
html 코드
<div name="name-1">div1</div>
<div name="name-1">div2</div>
<div name="name-2">div3</div>
<div name="name-2">div4</div>
<p name="name-1">p1</p>
<p name="name-1">p2</p>
<p name="name-2">p3</p>
<p name="name-2">p4</p>css 코드
div[name="name-1"] {
background-color: pink;
}
p[name="name-1"] {
background-color: yellowgreen;
}
[name="name-2"] {
background-color: skyblue;
}자식 선택자
지정된 요소 바로 하위에 존재하는 요소를 선택하는 선택자
작성법 : 선택자1 > 선택자2 { css 코드 ;}
- 선택자1 : 부모 요소 선택(반드시 필요)
- 선택자2 : 자식 요소 선택(반드시 필요)
html 코드
<ul id="parent-ul"> 부모
<li>자식1</li>
<li>
<span>자식2</span>
</li>
<li>자식3</li>
<li>
<span>자식4</span>
</li>
</ul>css 코드
#parent-ul > li {
background-color: orange;
}
#parent-ul > li > span {
background-color:tomato;
}ul 태그 바로 아래 자식 li 태그 모두 orange 색으로 바뀌고 span 태그에 준 스타일 때문에 span 태그만 다른 색으로 보임
후손(자손) 선택자
지정된 요소의 모든 하위에 존재하는 요소를 선택하는 선택자
작성법 : 선택자1 선택자2 { css 코드 ; }
- 선택자1 : 부모(조상) 요소 선택자
- 선택자2 : 후손 요소 선택자
<div id="test-div">
<p>test-div의 자식 요소입니다</p>
<p>test-div의 후손 요소입니다</p>
<div>
<p>나도 후손일까?</p>
</div>
</div>
<div id="test2-div">
<p>test-div의 자식 요소입니다</p>
<p>test-div의 후손 요소입니다</p>
<div>
<p>나도 후손일까?</p>
</div>
</div>
<div id="test3-div">
<p>test-div의 자식 요소입니다</p>
<p>test-div의 후손 요소입니다</p>
<div>
<p>나도 후손일까?</p>
</div>
</div>css 코드
#test-div p {
background-color: darkseagreen;
}
#test2-div p {
background-color: blueviolet;
}
#test3-div > p {
background-color: yellowgreen;
}후손 선택자, 자식 선택자 비교
반응 선택자
사용자의 움직임에 따라 반응하여 스타일이 달라지는 선택자 (마우스 오버, 클릭 유지 등등)
- 요소를 클릭하고 있는 경우(:active)
- 요소에 마우스가 올라가는 경우(:hover)
:active -> 클릭하고 있을 때만 변함
html code
<div id="active-test">:active 테스트</div>css code
#active-test:active {
background-color: yellow;
}
:hover -> 오버 또는 호버 마우스를 올려놓기만 하면 변함
html code
<div id="hover-test">:hover 테스트</div>css code
#hover-test:hover {
background-color: pink;
width: 230px;
height: 230px;
}
상태 선택자
입력 양식(input, input 관련 태그)의 상태에 따라 선택되는 선택자
:focus -> 요소에 초점이 맞춰졌을 때 (커서 깜빡일 때)
html code
:focus
<input id="focus-test">css code
#focus-test:focus {
background-color: red;
}
:checked -> 요소가 체크 되었을 때(radio, checkbox)
html code
<label>사과
<input type="checkbox" name="fruits">
</label>
<br>
<label>바나나
<input type="checkbox" name="fruits">
</label>
<br>
<label>멜론
<input type="checkbox" name="fruits">
</label>css code
input[name="fruits"]:checked {
width: 30px;
height: 30px;
background-color: red;
}radio, checkbox는 크기를 제외한 스타일 적용되지 않음 (background-color 바뀌지 않음)
:enabled /disabled
-> 요소가 사용 가능한/불가능한 상태일 때
(disabled 작성 안됨)html code
<div id="test-div2">
사용 가능 : <input enabled>
<br>
사용 불가능 : <input disabled>
</div>css code
#test-div2 > input:enabled {
background-color: lightgreen;
}
#test-div2 > input:disabled {
background-color: lightcoral;
}
동위 선택자
동위 관계(동등한 위치 == 형제 관계)
뒤에 위치한 요소를 선택하는 선택자
- A선택자 + B선택자 { css 코드 ;}
A 바로 뒤(다음)에 있는 B요소 하나를 선택 (+) - A선택자 ~ B선택자 { css 코드 ; }
A 뒤에 있는 모든 B요소를 선택 (~ 틸드(Tilde))
html code
<div id="div1">1번 입니다.</div>
<div>2번 입니다.</div>
<div id="div3">3번 입니다.</div>
<div id="div4">4번 입니다.</div>
<p>관련 없는 태그입니다!</p>
<div id="div5">5번 입니다</div>css code
#div1 + div {
background-color: olive;
}
#div3 ~ div {
background-color: darkcyan;
}
css 다른 속성들
margin-bottom : 50px 아래쪽 요소와의 간격 50픽셀
cursor: pointer; 요소에 마우스 커서가 올라오면 손가락 모양으로 변경
transition-duration: 0.5s; 요소가 변화를 일으키면 0.5초에 걸쳐 변해라
