특정 태그를 선택하여 속성을 변경하기 위해서 선택자 사용.
만약 같은 태그에 여러개 적용하면 맨 마지막에 넣은 것이 적용됨.
style
<head>
<style> /* html 안에 같이 코딩 */
div { /* div로 감싸진 모든 것에 적용됨. */
background: yellow;
}
p, h1, h2 {
/* 여러개 선택도 가능. */
font-size: 1em; /* em : 원래 크기. 2em : 2배 */
}
</style>
</head>
* { /* 전체 선택. 초기값 설정할 때 많이 사용. */ }
tag에 id, class 를 설정할 수 있다.
<div id="wrap"> <div id="content"> <!-- id는 css에서 #content --> <h1 class="heading1">CONTENT</h1> <!-- class는 css에서 .heading1 --> </div> </div>
clear : both (float : left 이런걸 위에서 쓰면 아래까지 적용될 수도 있어서 준다.)
input[type=text] { /* text type 에만 속성을 줄 수 있다. */ } img[src] { /* 이미지가 나올 때만 이 속성이 생김. */ }
div li { /* 후손 : div 안에 있는 모든 li 선택 */ } div > h1 { /* 자손 : div 바로 밑에 있는 h1만 선택 */ }
h3~div { /* h3와 동등한 위치에 있는 모든 div 선택 */ } h3+div { /* h3와 동등한 위치에 있는 바로 밑에 있는 딱 하나만 선택 */ }
마우스를 올렸을 때 색상이 변하는 반응을 보여준다던가 하는 상황에 사용.
li:hover { /* over : 마우스가 올라갔을 때 */ color: blue; } p::selection { /* 긁었을 때 (선택) */ }
margin: 10px 10px 20px 15px /* 상 하 좌 우 */
margin: 0 auto /* 상 0 좌 우 같아짐. (중앙정렬) */
선택을 했을 때 바뀌는 것!
input:focus { /* focus 되면 커진다던가 하는 효과를 줄 수 있음 */ } input:enabled { } input:disabled { /* disable면 color 회색으로 바꾼다던지... */ }
짝수에 있는 것은 빨강, 홀수에 있는 것은 노랑 이런식으로 구조를 준다.
nth-child, first-child, last-child ...
ul li a { /* ul 안의 li 안의 모든 a 에 적용. */ } ul li:first-child { /* ul 안의 li 중 첫번째 item에 적용. */ border-radius: 10px 10px 0 0; /* 좌 상단 우 상단을 10px씩 둥글게 */ } ul li:nth-child(2n+1) { /* ul 안의 li 중 홀수번째 item에 적용. */ }
다른 페이지를 볼 때는 가로로 큰 덩어리를 쪼개고, 작은 덩어리, 세로 덩어리를 쪼개가면서 분석하자.
몰라도 다른 방법으로 구현할 수 있지만 알면 편한 것들!
특정 문자 or 문자열을 선택하여 CSS 속성 설정
#history::first-letter { /* 첫 번째 글자 */ } #history::first-line { /* 첫 번째 줄 */ }
#content a::after { content: ' - ' attr(href); /* content id를 가지는 a 태그 뒤에 해당 링크를 - 주소 형태로 붙여라. */ }
나를 제외한 모든 태그에 속성 붙이기.
#content li:not(.fa) { /* content 라는 id를 가진 li 중 class가 fa가 아닌 것에 적용. */ }
출처