HTML&CSS (3) 기본선택자 ~ 조합선택자

※ CSS의 필요성

- 문서작성(HTML)과 디자인(CSS) 분리

- 디자인 분리 시 장점

1) 내용과 디자인 수정 용이

2) 다양한 기능으로 확장 가능

3) 통일된 문서 양식 제공

4) 전송 및 로딩 시간 단축

 

 

※ CSS 문법

- 선택자 { 속성 : 속성값; }

ex) div { width : 100px; }

 

 

※ CSS 사용 위치

1) 인라인 스타일 시트 : HTML 내 위치 (ex <div css> <div css> ····)

2) 내부 스타일 시트 : HTML 내 위에 생성

3) 외부 스타일 시트 : 별도 파일 생성(호출식으로)

 

 

※ CSS 기본 선택자

1) 전체 선택자 : * { 속성 선언; }

- 모든 태그에 스타일 적용

2) 타입 선택자 : 태그 { 속성 선언; }

- 지정한 태그에 스타일 적용

3) 클래스 선택자 : .클래스 이름 { 속성 선언; }

- 지정한 클래스에 스타일 적용

4) 아이디 선택자 : #아이디 { 속성 선언; }

- 지정한 아이디에 스타일 적용

5) 속성 선택자 :

[속성] { 속성 선언; }

[속성 = 값] { 속성 선언; }

- 지정한 속성 또는 속성값이 있는 태그에 스타일 적용

 

 

※ 속성 선택자 형식

1) [속성] : 해당 속성이 정의된 모든 태그 선택, 속성 값과 무관

ex) p[text]

2) [속성 = 값] : 정의된 속성과 속성값이 동일한 태그 선택

ex) p[text="blue"]

3) [속성 ~= 값] : 공백으로 구분된 속성값 목록 중 하나가 주어진 값과 동일한 태그 선택

ex) p[text~="purple blue"]

4) [속성 != 값] : 속성값이 해당 값과 동일하거나, 또는 주어진 값으로 시작하고

'-'기호로 이어지는 값을 가진 태그 선택

ex) p[text != "blue"]

5) [속성 ^= 값] : 속성값이 주어진 값으로 시작하는 태그 선택

ex) p[text ^= "img"]

6) [속성 $= 값] : 속성값이 주어진 값으로 끝나는 태그를 선택

ex) p[text $= ".png"]

7) [속성 *= 값] : 속성값이 주어진 값을 부분 문자열로 가지는 태그 선택

ex) p[text *= "ong"]

 

 

※ 의사 선택자(Pseudo-class)

- 웹 문서에는 보이지 않지만 동작에 영향을 주는 속성을 의사 선택자로 이용

 

 

※ 의사 선택자 형식

1) :link 선택자 : 사용자가 방문하지 않았던 곳 표시

ex) a:link { color : blue; }

2) :visited 선택자 : 사용자가 방문한 곳 표시

ex) a:visited { color : green; }

3) :active 선택자 : 사용자가 링크를 클릭하는 순간

ex) a:active { color : pink; }

4) :hover 선택자 : 사용자가 링크에 마우스 포인터를 올리는 순간

ex) a:hover { color : green;}

5) :focus 선택자 : 해당 요소에 초점이 맞춰졌을 때 적용

ex) a:hover { color : black; }

 

 

※ 조합 선택자

- 기존의 여러 선택자를 복합적으로 조합하는 방법 제공

 

 

※ 조합 선택자 종류

1) 후손 선택자 : 선택자 Z 선택자 Y

- 선택자 Y가 선택자 Z에 반드시 포함되어 있는 경우

2) 자손 선택자 : 선택자 Z > 선택자 Y

- 부모 서낵자 Z의 직계 자손인 선택자 Y를 선택

3) 인접 형제 서낵자 : 선택자 Z + 선택자 Y

- 선택자 Z 바로 다음에 위치한 선택자 Y 선택

4) 일반 형제 선택자 : 선택자 Z ~ 선택자 Y

- 선택자 Z 뒤에 인접하여 나타나는 모든 선택자 Y를 선택

5) 그룹 선택자 : 선택자 Z, 선택자 Y

- 선택자 Z와 선택자 Y 모두 선택

 

 

※ 박스 모델

- content : 실제 내용이 표현되는 곳

- padding : 콘텐츠와 테두리 사이에 있는 여백(안쪽 여백)

- border : 박스의 테두리 두께

- margin : 테두리와 박스의 최종 경계 사이의 여백(바깥쪽 여백)

 

 

※ Content

- 속성 : width(너비), height(높이)

- 속성에 사용되는 속성값

1) value : 실제로 측정한 데이터 값

2) min, max : 데이터가 인식하는 최소값과 최대값

3) low, high : 허용되는 범위의 최소값과 최대값

     항상 min ~ max 값 범위 내에 있음

 

※ Padding, Margin

- 속성에 사용되는 속성값

1) 수치 : 여백을 pixel, point, cm같은 수치 단위로 지정

2) 백분율 : 여백을 부모 요소를 기준으로 하여 백분율로 지정

3) auto : 여백을 웹 브라우저가 자동으로 지정

 

 

※ Padding, Margin 위치

- padding-top: 속성값; = 위쪽 패딩

- padding-bottom: 속성값; = 아래쪽 패딩

- padding-right: 속성값; = 오른쪽 패딩

- padding-left: 속성값; = 왼쪽 패딩

- margin-top: 속성값; = 위쪽 마진

- margin-bottom: 속성값; = 아래쪽 마진

- margin-right: 속성값; = 오른쪽 마진

- margin-left: 속성값; = 왼쪽 마진

 

 

ex) k1 { margin : 5px 10px 7px 11px; } <top, right, bottom, left>

     k2 { margin : 7px; } <top, right, bottom, left 모두 7px 적용>

 

 

※ border-width

- 테두리 두께 설정(top, bottom, left, right 이용)

- 속성에 사용되는 속성값

1) 수치 : 테두리의 두께를 픽셀, 포인트, 센티미터와 같은 단위로 지정

2) thin : 1px 두께의 테두리로 지정

3) medium : 3px 두께의 테두리 지정

4) thick : 5px 두께의 테두리 지정

 

 

※ border-color (색상 참고 사이트 : https://clrs.cc/)

- 테두리 색상 지정

 

 

※ border-style

- 테두리 스타일 지정

1) none : 테두리 나타나지 않음

2) hidden : 테두리를 감춤

3) dotted : 점선 표시

4) dashed : 파선 표시

5) solid : 실선 표시

6) double : 이중선 표시

7) groove : 오목한 선으로 지정

8) ridge : 볼록한 선으로 지정

9) inset : 안쪽이 오목한 선으로 지정

10) outset : 바깥쪽이 오목한 선으로 지정

 

 

※ border-radius (둥근 모서리)

- 테두리 모서리를 둥굴게

1) border-radius: 속성값 = 모서리 네 곳 모두 둥글게

2) border-top-right/left-radius: 속성값 = 상단 오른쪽/왼쪽 모서리 둥글게

3) borfer-bottom-right/left-radius: 속성값 = 하단 오른쪽/왼쪽 모서리 둥글게

 

 

※ box-shadow(그림자 적용)

- 형식

{ box-shadow : 수평그림자(필수) | 수직그림자(필수) | 그림자 흐림 | 그림자 번짐 | 그림자 색상 | 삽입 효과; }

 

 

1) 수평 그림자 : 그림자와 수평거리 지정

2) 수직 그림자 : 그림자와 수직거리 지정

3) 그림자 흐림 : 그림자의 흐림 정도

4) 그림자 번짐 : 그림자 번짐 정도

5) 그림자 색상 : 색상 지정

6) 삽입 효과 : 박스 외부로 표현되는 그림자를 박스 안쪽으로 표현하는 효과

 

 

※ Position

- 텍스트, 이미지, 표 등 요소를 웹 문서에 배치시 사용

- 속성에 사용되는 속성값

1) position: static;(정적 위치) = 각종 요소를 웹 문서 흐름에 따라 배치(블록요소: 위→아래, 인라인 요소: 같은 줄에 순서대로 배치)

2) position: relative; (상대 위치) = 정상적인 위치에서 상대적으로 얼마나 떨어져있는지 표시, 배치

3) position: absolute; (절대 위치) = 첫 번째 조상 요소에서 상대적으로 위치(웹 문서 흐름과 상관x top,left, right, bottom 이용해 배치)

4) position: fixed; (고정 위치) = 브라우저 창의 위치에서 상대적으로 위치(창의 스크롤이 움직여도 사라지지 않고 그대로 있음)