CSS3로 웹 페이지 스타일링하기

CSS3로 웹 페이지 스타일링하기

Cascading이 의미하는 것

- '계단형'의 의미로 스타일 적용시 규칙에 따라 우선 순위가 있고, 우선 순위에 따라 최종 렌더링 될 스타일이 정해짐

CSS가 필요한 이유

HTML에 직접 스타일을 적용함으로써 생기는 HTML 문서 자체의 무거움을 줄일 수 있다. 하나의 스타일 시트로 다수의 페이지에 같은 속성을 적용함으로써 작업 시간을 단축 웹 표준의 원칙 : HTML 마크업은 구조를 잡는데 사용, CSS로 디자인을 결정

1. 가장 기본적인 스타일의 적용

- HTML 태그에 style 속성으로 지정

Welcome to the Lounge

- 가장 쉬운 방법이지만, 웹 표준 준수에는 가장 좋지 않은 방법

2. 내부 스타일 시트

- HTML의 head 영역 안쪽에

Bit Lounge h1{ color : yellow; background-color: black; }

3. 외부 스타일 시트

- 여러 사람이 협업하거나 프로젝트의 규모가 클 때는 스타일시트를 별도 외부 파일로 분리하는 것이 효율적

- 웹 표준의 측면에서 가장 추천하는 방식

Welcome to the Lounge

style.css

@charset "UTF-8 "; /* 외부 CSS를 불러들인다*/ @import "main.css"; h1{ color : red ; background-color: greenyellow; }

CSS3 선택자

CSS 선택자(Selector) : 특정한 HTML 태그를 선택할 때 사용

- 선택자를 사용, 특정 HTML 태그를 선택하면 조건에 맞는 태그에 스타일이나 스크립트를 적용할 수 있음

- 선택자의 활용은 스타일시트 뿐 아니라 JavaScript에서도 사용하므로 웹 프론트엔드 개발시 꼭 이해해야 함

기본 선택자

기본 선택자의 종류

종류 선택자 설명 전체선택자 * HTML문서 내 모든 태그 선택 태그 선택자 태그명 HTML문서 내 모든 지정 태그 선택 아이디 선택자 #아이디 지정한 아이디를id속성값으로 가지고 있는 태그 클래스 선택자 .클래스 지정한 클래스를 class속성에 포함하고 있는 태그

* 전체 선택자

- HTML 문서 내 모든 태그를 선택하므로 페이지 전체에 공통적인 특성 값을 부여할 수 있다

*{ margin: 0; padding: 0; color: grey; }

- 페이지 내 모든 태그를 찾아

- 공백을 모두 제거

- 기본 콘텐츠 색상을 회색으로

* 태그 선택자

- HTML 페이지 내 모든 지정 태그

h1 { font-weight: bold; color: red; } Heading 1

- 페이지 내 모든 h1 태그를 찾아

- 글꼴을 볼드(bold)체로

- 색상을 빨간색(red)로

참고: 여러 개의 선택자를 동시에 지정할 때는 ,로 연결

h1, h2, h3, h4, h5, h6 { font-weight: bold; color: red; }

* 아이디 선택자

- 지정한 아이디를 id 속성값으로 가지고 있는 태그

- 선택하고자 하는 아이디는 # 기호를 부여

#apple { color: red; } #banana { color: yellow; } #orange { color: orange; } .selected { text-decoration: underline; } ... 사과 바나나 오렌지 포도

클래스 선택자

- 지정한 클래스를 class 속성에 포함하고 있는 태그

- 선택하고자 하는 클래스는 . 기호를 부여

자식 선택자와 후손 선택자

- DOM Tree의 포함 관계를 이용한 하위 요소의 선택

종류 선택자 설명 후손 선택자 선택자A 선택자D 선택자A(조상)의 내부에 포함된 선택자D(후손)를 선택 자식 선택자 선택자P > 선택자C 선택자P(부모)의 바로 아래 노드들 중 선택자C(자식)만 선택

... #d-sel h1 { color: red; } #c-sel > h1 { color: red; } ... d-sel > h1 d-sel > d-sel-child > h1 c-sel > h1 c-sel > c-sel-child > h1 ...

가상 클래스(Pseudo Class)

구조 선택자 : 특정 위치에 있는 태그를 선택할 때 사용

형태 설명 :first-child 형제 관계에서 첫 번째로 등장하는 태그 선택 :last-child 형제 관계에서 마지막 등장하는 태그 선택 :nth-child(수열) 형제 관계에서 앞에서 수열 번째로 등장하는 태그 선택 :nth-last-child(수열) 형제 관계에서 뒤에서 수열 번째로 등장하는 태그 선택

... li:nth-child(2n) { color: green; } li:nth-child(2n+1) { color: lightgreen; } li:first-child { color: red; } li:last-child { color: blue; } ... 1번째 2번째 3번째 4번째 5번째 6번째 ...

from http://jaemin-lim.tistory.com/58 by ccl(A) rewrite - 2021-08-23 18:00:40