-
(D-28) Prep Self Study Day3: CSS 1-2Boot Camp/Coding_Prep 2021. 2. 4. 15:58
@ 오늘의 목표
CSS Section 1~2
CSS Section 1: Syntex
- CSS: Cascading Style Sheets.
- 구조화된 문서를 어떻게 렌더링할지 정의하기 위한 언어이다. define the style.
- Selector, property, property value
- h1 {color:blue; font-size:12px;}
- 여기서 h1 부분을 selector라고 부른다. 모든 h1이 declaration block 에 적힌 내용의 영향을 받는다.
- ':' 왼쪽= property, ';'오른쪽=property value.
- h1 {color:blue; font-size:12px;}
- CSS & HTML, 연결시키기
- Link style
- <head>
- <link rel="stylesheet" href="css/style.css">
- </head>
- 외부에 있는 CSS file 을 link해준다. 권장사항.
- <head>
- Embedding style
- HTML의 <head>에 CSS 내용을 그냥 때려적는다. 권장하지 않음.
- Inline style
- HTML의 style property에 줄줄이 적는다.
- javascript 가 동적으로 CSS 를 생성할 때 사용하는 경우가 있다.
- <head>
- <h1 style="color:blue">Hello world!</h1>
- </head>
- Link style
- Reset CSS
- Every web browsers have default styles, so able to work without CSS.
- Reset CSS unify all different default styles.
Section 2: Selector
- Selector
- 여러개의 selector 연속 지정 가능.
- h1,p {color:red;}
- Universal selector
- Use *
- *{color:red;} <- 모든 요소 빨간색.
- Type Selector
- Use p
- p {color:red;} <-p type 만 빨간색.
- ID Selector
- Use #id attribute value.
- #p1 {color:red;}
- <p id="p1">paragraph 1</p> <-id가 p1으로 지정된 것만 영향을 받는다.
- Class Selector
- .class attribute value.
- .container{color:red;}
- <div class="container"> <- div가 걸려있을경우, 이 div class에 속한 애들이 영향받음.
- 맨 처음에 large, center 등등 적어놓고 밑에 요소들의 class에 적용시키면 쉽다.
- Attribute Selector
- a[href] {color:red;}
- a 요소 중에서 href가 들어만 있으면 모두 해당.
- a[target="_blank"]{color:red;}
- a 요소 중에서 target attribute's value is "_blank"
- <a href="http://www.google.com" target="_blank">google.com</a><br>
- selector[attribute~="value"]
- 지정된 attribute include the value. 다만 value는 띄어쓰기로 분리되어있어야함. -, 이런거 ㄴㄴ. 정확하게 그거.
- h1[title="first"]{color:red;}
- <h1 title="heading first">Heading first</h1> <-적용됨
- Heading-first 이런건 안됨.
- selector[attribute|="value"]
- 지정된 attribute의 값과 일치하거나 뒤에 연이은 하이픈 "value-"로 시작하는 요소 선택.
- p[lang|="en"]{color:red;}
- <p lang="en">Hello!</p> <-선택됨
- <p lang="en-gb">Ello!</p> <-얘도 선택됨
- selector[attribute^="value"]
- value로 시작하는 요소를 선택.
- a[href^="https://"]{color:red;} <-홈피 주소들로 시작하면 다 선택
- <a href="https://www.costco.com">Costco.com</a><br>
- selector[attribute$="value"]
- value로 끝나는 요소 선택.
- a[href$=".com"]{color:red;}
- selector[attribute*="value"]
- 지정된 어트리뷰트 값을 포함하는 요소를 선택한다.
- div[class*="test"]{color:red;}
- 이 경우 "first_test" 이런거 다 ㅇㅋ.
- a[href] {color:red;}
- Combinator
- Descendant Combinator
- div p {color:red;}
- div 중에서 p만 해당.
- div p {color:red;}
- Child Combinator
- A > B {}
- A의 자식요소 중 B 선택.
- div > p {color:red;}
- Sibling Combinator
- Adjacent Sibling Cmbinator
- A + B
- 단, A와 B가 바로 붙어있어야함. (형제임)
- p+ul{color:red;}
- General Sibling Combinator
- A ~ B
- p ~ul {color:red;}
- 이 경우, p가 한 번 나왔으면 그 뒤에있는 모든 ul 이 죄다 선택.
- Adjacent Sibling Cmbinator
- Descendant Combinator
- Pseudo-class Selector( : 사용.)
- 가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용
- 마우스가 올라왔을 때
- a:hover{color:red} <-a 요소가 hover 일 때만 적용.
- <a href="naver.com">Hover me!</a><br>
- 링크 관련
- :link -> 셀렉터가 방문하지 않은 링크일때
- :visited -> 방문함
- :active -> 셀렉터가 클릭된 상태일 때
- 포커스가 들어와있을 때
- input:focus{background-color:yellow}
- <input type="text" placeholder="focus me"> <- input type="text"에 커서가 살아있을 때 해당.
- 마우스가 올라왔을 때
- UI element states pseudo-classes
- :checked <-셀렉터가 체크 상태일 때
- input:enabled+span{color:blue;}
- input에 체크되면 바로뒤에 위치한 span 요소가 파랑으로 바뀜.
- <input type="radio" checked="checked" value="male" name="gender"><span>Male</span><br>
- input:enabled+span{color:blue;}
- :enabled <-셀렉터가 사용 가능한 상태일 때
- :disabled <-셀렉터가 사용 불가능한 상태일 때
- input:disabled+span{color:gray; text-decoration:line-through;}
- <input type="checkbox" value="apple" disabled> <span> apple </span><br>
- :checked <-셀렉터가 체크 상태일 때
- Structural pseudo-classes
- :first-child <-selector에 해당되는 모든 요소 중 첫번째 자식들만 선택
- :last-child <- selector에 해당되는 모든 요소 중 막내만 선택.
- p:last-child {color:blue;} <-이러고 p가 겁나 많다면 맨 마지막 p만 선택.
- :nth-child(n) <-앞에서 n 번째 자식 선택
- :nth-last-child(n) <-뒤에서 n 번째 자식 선택.
- 이 때 n 은 0부터 시작한다.
- ol>li:nth-child(2n) {color:red;} <-ol 요소의 자식 요소인 li에서 짝수번째만 선택. -> li는 1부터 시작.
- :first-of-type <-셀렉터의 부모요소의 자식 요소 중 첫번 째
- :last-of-type <- 셀렉터의 부모요소의 자식 요소 중 마지막
- :nth-of-type(n) <-셀렉터의 부모 요소의 자식요소 중 앞에서 n번째
- :nth-last-of-type(n) <-셀렉터의 부모 요소의 자식요소중 뒤에서 n번째
- Negation pseudo-class
- except the selector
- :not(selector)
- input:not([type=password]){bankground:yellow} <-모든 input에서 pw 빼고 다 노란색 배경
- Validity pseudo-class (정합성 체크 셀렉터)
- :valid() <-정합성 검증이 성공한 input 요소 혹은 form 요소를 선택한다.
- :invalid()
- input[type="text"]:invalid{background-color:red;}
- <input type="text" value="ab1!" pattern="[a-zA-Z0-9]{4}" required> <-특수문자를 포함하지 않는 4자리 문자 혹은 숫자를 pattern으로 입력시켜줌.
- <input type="text" pattern="^\d{3}-\d{3,4}-\d{4}$" required> <-전화번호 대박
- 가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용
- Pseudo-Element Selector (가상 요소 셀렉터)
- 가상 요소에는 :: 사용.
- ::first-letter <-첫글자 선택
- ::first-line
- ::after <-콘텐츠의 뒤에 위치하는 공간을 선택한다. 일반적으로 content property와 사용.
- ::before
- ::selection <-drag selection. ios safari 등 일부에서 동작 안함.
- 가상 요소에는 :: 사용.
- 여러개의 selector 연속 지정 가능.
'Boot Camp > Coding_Prep' 카테고리의 다른 글
After Prep Project: Need to be improved (0) 2021.03.02 (D-17) Prep Self Study (Day 5) CSS: 7-10 (0) 2021.02.09 (D-22) Prep Self Study Day 4: CSS 3~6 (0) 2021.02.07 (D-29) Prep Self study Day2: HTML 6-10 (0) 2021.02.03 (D-30) Prep Self Study Day 1: HTML 1-5 (0) 2021.02.02 - CSS: Cascading Style Sheets.