Day3: CSS 입문
HTML에 CSS(styles.css) 파일을 연결하는 방법
<link rel="stylesheet" href="styles.css"/>
<style> @import "styles.css"; </ style>- 타입 선택자(type selector)
태그의 이름을 작성하여, 해당 태그와 일치하면 다른 조건은 고려하지 않고 적용
출력:
- 아이디 선택자(id selector)
태그의 이름과는 관계없이 특정 태그에 부여된 id만 고려하여 적용
→ id는 문서 내부에 하나만 존재해야함 - 위의 title과 content라는 id는 한번 사용했기 때문에 더 이상 작성될 수 없음
id는 해시태그(#)를 사용해 작성
출력:
- 클래스 선택자(class selector)
id 선택자와 같이 특정 태그에 부여된 class를 고려하여 작성되나, 두개 이상 작성되어도 됨
→ .클래스명 {css 요소명} 으로 작성
출력:
- 전체 선택자(all selector)
*을 작성해 내부의 모든 태그에 적용
출력:
- 자식 선택자(children selector)
부모 태그 > 자식 태그 방식으로 작성하며, 맞닿아 있는 (부모 - 자식) 관계가 아니라면 적용 안됨
→ ul > li > p 처럼 두 개 이상의 계층도 지정이 가능하지만, ul > p 는 맞닿아있는 관계가 아니기 때문에 적용되지 않음
출력:
- 인접(형제) 선택자(near selector)
인접해 있는 태그라면 적용이 가능하지만, 형제 태그이기 때문에 (부모-자식) 관계에서는 사용할 수 없음
→ h1과 인접한 p태그에는 모두 적용이 되지만, h1 기준으로 다음코드(.second)외에 이전코드(.first)에는 적용되지 않음
출력:
- 속성 선택자(property selector)
해당 속성이 작성된 태그에 적용
→ class 가 작성되어있는 모든 태그에 적용
출력:
- 가상 선택자(pseudo selector)
현재는 적용되어 있지 않지만, 추후에는 적용(규칙에 따라 상태가 변경됨)
:hover
→ 마우스를 올리는 순간 적용되는 변화
:active
→ 마우스를 클릭하는 순간 적용되는 변화
:link
→ 방문 기록이 없는 홈페이지의 a태그에 적용
:visited
→ 방문 기록이 있는 홈페이지의 a태그에 적용
출력:
구글: link
구글: visited
홈페이지 주소 모음: hover
- 가상 요소(pseudo element)
어떤 선택자에 추가하는 키워드로 선택자에서 일부분의 요소만 적용
:after
→ 모든 요소가 끝난 다음에 나오는 내용
box 클래스가 끝난 다음 나올 내용은 green color 에 "항목을 골라주세요"
:first-letter
→ 해당 태그에서 첫번째 글자의 요소를 적용
:last-child
→ 자식 태그들 중에서 가장 마지막 자식 태그에 요소를 적용
출력:
- 종속 선택자(dependent selector)
태그.클래스명 혹은 태그#아이디명과 같은 방식으로 조합해서 적용
출력:
- 하위 선택자
해당 태그의 하위 요소이기만 하면 적용
→ 기존의 > 선택자와는 다르게 부모-자식 관계 뿐만 아니라, 부모-자손 관계와 중간의 일부 계층을 생략해도 적용이 됨
출력:
- 그룹 선택자(group selector)
여러 태그에 적용할 내용을 한번에 작성
→ 태그 , 태그 로 작성
출력:
