Practice makes perfect

그림자 속성

- 태그에 그림자를 부여해주는 스타일 속성.

- 종류

. text-shadow 속성 : 글자에 그림자를 부여하는 스타일 속성.

. box-shadow 속성 : 박스에 그림자를 부여하는 스타일 속성.

- http://css3generator.com/

원하는 그림자의 형태를 출력해 올 수 있습니다. 

변형 속성

- 애니메이션을 적용할 때 사용하는 기능.

- 종류

. transition : 모든 transition 속성을 한 번에 적용.

. transition-delay : 이벤트 발생 후 몇 초 후에 재생할 지 지정.

. transition-property : 어떤 속성을 변형할 지 지정.

. transition-timing-function : 수치 변형 함수를 지정.

위의 그림에 애니메이션 효과를 적용하겠습니다. 

커서를 이미지에 넣었을 때 크기가 변경하도록 하였다. 이러한 효과를 조금 더 꾸며보도록 하겠다.

. transition-duration : 몇 초 동안 재생할 지 지정.

커서를 넣었을 때 커지고 작아지는데 2초의 시간이 걸리도록 속성을 넣어주엇습니다. 

예제를 통해서 자세히 보도록 하겠습니다. 

최종 형태 입니다. 코드를 보면서 확인하겠습니다. 

http://cubic-bezier.com

홈페이지에서 효과를 지정할 수 있습니다. 

Linear : 애니메이션의 효과 , x값이 증가할 때 y 값도 일정하게 진행

Ease : 애니메이션 효과 , 처음엔 일정하게 가다가 급격히 y값의 효과를 빠르게 진행하다가 다시 천천히 진행

Ease – in : 천천히 진행하다가 정상 속도로 진행

Ease- out: 천천히 진행하다가 빨리 진행

Ease-in-out : 천천히 진행하다가  빨리 진행

진행도를 내가 정할 수 있습니다. 

위치 속성

- 프로그램 개발시 요소의 위치를 2가지 방법으로 설정.

. 절대적 위치 좌표 : 요소의 x좌표와 y좌표를 설정해 절대적 위치를 지정합니다.

. 상대적 위치 좌표 : 요소를 입력한 순서대로 상대적으로 위치를 지정합니다. .

* position 속성 : 웹 문서 안의 요소들을 자유자재로 배치해 주는 속성( 양/음수 모두 사용 가능).

- HTML 태그의 위치 설정 방법을 변경할 때 사용.

- 상대적 위치 좌표 사용시 키워드

1) static : 요소를 문서의 흐름에 맞추어 배치(top / right / bottom / left 이용 배치 변경 불가).

float 속성을 이용해 좌우로 배치합니다. - 브라우저가 알아서 배치

- boby를 기준으로 출력

2) relative : 현재 위치를 기준으로 위치를 지정. 이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있습니다. -이전의 출력되어진 태그를 기준으로 배치 (상대자표)

Position 값에 음수를 넣어주면 겹치게 표현 할 수 있습니다.

- 절대적 위치 좌표 사용시 키워드

1) absolute : body 또는 컨테이닝 박스를 기준으로 위치를 지정할 수 있으며, 원하는 위치를 지정해 배치하고, 요소를 감싸는 태그를 만들고 position을 relative로 지정해 놓고 사용합니다.

2) fixed : 스크린을 기준으로 위치 고정. 지정한 위치에 고정해 배치. 화면에서 요소가 잘릴 수 있습니다.

스크롤을 움직이면 절대적 위치 좌표로 그 자리에 위치하기 위해 움직입니다.

-

코드를 적용시 2가지 문제점 발생

1. h1 태그 두 개가 붙어 있습니다(div 태그가 영역을 차지하지 않음).

2. 색상이 적용된 상자가 자신의 부모를 기준으로 위치를 잡지 않습니다.

즉, position 속성에 absolute 키워드를 적용하면 부모 태그가 영역을 차지하지 않습니다.

- 문제 해결 방안 -

자손의 position 속성에 absolute 키워드를 적용할 경우는 부모 태그에 몇 가지 처리를 해야합니다.

1. 자손에게 position 속성을 absolute 키워드로 적용하면 부모에게 height 속성을 입력합니다.

2. 자손의 position 속성을 absolute 키워드로 적용하면 부모의 position 속성을 relative 키워드로 적용합니다.

밑의 그림과 같은 상황에서 위치 좌표 1과 위치 2 사이의 간격을 100px로 고정하고 그림과 글자가 겹치니 않도록 하고 싶을 때!

overflow 속성

- 내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할 지 지정하는 속성.

- 키워드

. hidden : 영역을 벗어나는 부분을 보이지 않게 만듦.

. scroll : 영역을 벗어나는 부분을 스크롤로 만듦.

. auto : 영역을 벗어날 때 스크롤바 생기고, 벗어나지 않을 때 스크롤바 숨겨짐.

영역을 벗어나는 것은 hidden을 이용하여 자릅니다.

Overflow : 자신의 영역 안에서 scroll 을 통해서 내용을 볼 수 있도록 합니다.

* z-index 속성 : default 값 : auto

- HTML 페이지의 뒤에 입력한 태그가 상위에 위치하는 순서를 변경 시 사용.

- position 속성인 relative, absolute가 적용된 상태에서 적용해야 됨.

위의 사진의 모양을 입체적으로 변경해보겠습니다.

z-index 속성을 통해서 숫자가 클수록 앞으로 나오도록 하여 입체감에 있어서 활용할 수 있습니다.

폰트 속성 : 글자와 관련된 스타일 속성.

 font-size 속성

- 글자의 크기를 지정하는 스타일 속성.

참고) h1태그의 기본크기: 32px, p태그의 기본크기: 16px

키워드와 값을 통해서 변경이 가능합니다.

- em : 배수 이므로, p태그의 기본 사이즈는 16px 이므로 a와 같은 크기

font-family 속성

- 폰트를 지정하는 스타일 속성.

- 일반적으로 한 단어로 이루어진 폰트는 따옴표를 사용하지 않습니다.  

  하지만 두 단어 이상으로 이루어진 단어는 따옴표를 반드시 적용합니다.

원하는 글꼴을 넣어주고, 마지막에는 브라우저가 설정해주는 이름인 serif 또는 sans-serif를 넣어주는 것이 기본 형식입니다.

font-style 속성

- 폰트의 기울기 지정하는 스타일 속성.

- 키워드 : italic

font-weight 속성

- 폰트의 두께를 지정하는 스타일 속성.

- 키워드:700/800/900/bold...

- 일반 폰트 두께:400, 두꺼운 폰트 두께:700

- 두께를 지원하지 않는 폰트는 font-weight 속성을 사용해 두께를 조절할 수 없습니다.

line-height 속성

- 글자의 높이를 지정.

- 글자를 수직 중앙 정렬할 때 사용(수직 정렬하는 태그 없음)

 text-align 속성

- 글자의 정렬과 관련된 스타일 속성.

text-decoration 속성

float 속성 1

- 웹 페이지를 만들 때 가장 많이 사용하는 스타일 속성.

- 키워드

  left :태그를 왼쪽에 붙임.

  right : 태그를 오른쪽에 붙임.

  img 태그: Inline 형식의 태그. -

  p 태그: block 형식의 속성 태그.

→ 그림과 글자가 분리되어 출력.

위의 형태를 가지고 실행. - img 태그: Inline 형식의 태그, p 태그: block 형식의 속성 태그 이므로 각각 나뉘어서 출력 됩니다.

float : left 를 이용하여 사진을 왼쪽으로 붙임으로 함께 같은 줄에 출력 될 수 있도록 만들었습니다.

float 속성2

: float 속성을 사용한 수평 정렬

- float 속성을 사용하면 태그를 수평으로 정렬할 수 있습니다.

왼쪽 정렬을 통해서 한 라인에 같이 출력되도록 만들었습니다.

오른쪽 정렬 방식의 순서를 유념 - 오른쪽부터 1번 2번으로 출력 된다.

float 속성 - layout 활용

자손에 float 속성을 적용하면 부모의 overflow 속성에 hidden 키워드를 적용합니다.

< 중앙 정렬 >

상하 영역 = 0 , 좌우 영역 = auto , 브라우저의 현재 폭을 계산해 width:960px; 은 고정시키고 전체 크기를 계산해서 항상 중앙 정렬합니다.

Section과 rooter는 항상 붙어 다니기 때문에 붙어서 올라옵니다.

(수평 정렬의 효과가 footer까지 적용)

이러한 상황에서 footer는 적용되지 않아야 합니다.

- Float 속성 배제 방법

1) 부모 태그인 wrap영역에 overflow:hidden; 을 사용

2) footer의 속성인 clear:both; 을 활용

박스 속성

- 웹페이지의 레이아웃을 구성할 때 가장 중요한 스타일 속성

- width/height 속성

글자를 감싸는 영역의 크기를 지정하는 속성

div 태그는 원래 block형식으로 전체 폭을 사용하지만 width, height속성을 추가함으로써 영역을 조정하여 할당 할 수 있습니다.

- margin/padding 속성

. margin:마진의 너비를 지정하는 속성.

Margin : 경계선 밖의 간격 (위, 오른쪽, 아래, 외쪽 - 시계방향)

홍길동과 이순신의 간격은 15 + 5 = 20이 아니라 가장 큰 간격인 15로 간격을 가집니다.

순서와 상관없이 속성의 이름을 각각 부여해서 값을 넣을 수 있습니다.

padding: 패딩의 너비를 지정하는 속성.

Padding : 테두리와 텍스트 사이의 간격 (위, 오른쪽, 아래, 외쪽 – 시계 방향)

padding: 0px 10px; - 두개의 값을 넣으면 앞의 값은 상하, 뒤의 값은 좌우의 간격을 조정합니다.

순서와 상관없이 속성의 이름을 각각 부여해서 값을 넣을 수 있습니다.

- border 속성

- box-sizing 속성

. width 속성과 height 속성이 차지하는 범위를 지정.

Border – 테두리 (굵기, 모양, 색)

. 종 류

- content-box:기본으로 적용되는 키워드.

- border-box:width/height 속성이 테두리를 포함한 영역의 크기를 지정.

box-sizing: content-box; : default 값 입니다.

box-sizing: border-box; : margin 만 동일하게 가져가고, 가로를 width 로 세로를 height 로 영역을 구성하게 들어 줍니다.  (width : 100px, height : 100px)

border(테두리) 속성

- border-width 속성

. 테두리의 너비를 지정하는 스타일 속성.

. 크기단위:border-left[top/right/bottom]-width

. 키워드:medium/thick/thin...

테두리를 굵기를 px를 입력하여 넣을 수 있지만, 속성을 넣어서 선택할 수 있습니다.

이렇게 width를 넣기만 하면 테두리가 생기지 않습니다.

기본적으로 테두리의 색, 스타일, 크기를 지정해야 테두리가 출력됩니다.

border-width: thick; - 상하좌우 같은 값으로 출력.

border-style: dotted; - 상하좌우 같은 값으로 출력.

border-color: red; - 상하좌우 같은 값으로 출력.

각각의 위치에 맞춰서 조정해줄 수 있습니다.

border-left-width: thick;

border-right-width:thin;

border-top-width:medium;

border-bottom-width: 20px;

- border-style 속성

. 테두리의 형태를 지정하는 스타일 속성.

. border-left[top/right/bottom]-style

각각의 위치에 맞춰서 조정해줄 수 있습니다.  

border-left-style:dotted;

border-right-style:dashed;

border-top-style:solid;

border-bottom-style:groove;

- border-color 속성

. border-left[top/right/bottom]-color

각각의 위치에 맞춰서 조정해줄 수 있습니다.

border-left-color:aqua;

border-right-color:lime;

border-top-color:orange;

border-bottom-color:red;

키워드를 한번에 입력하는 방법 (순서는 상관없이 자동적용)

- 가장 보편적으로 사용하는 방법입니다.

- border-radius 속성

. CSS3에서 추가된 속성.

. 테두리가 둥근 사각형 또는 원을 만들 수 있습니다.

border-radius: 10px 20px 30px 40px 값이 커질수록 원에 가까워집니다.

배경속성

- 특정 태그의 배경이미지 또는 색상을 지정하는 스타일 속성.

위글에 추가적으로 배경속성을 넣어보겠습니다.

테두리의 개수가 여러 개인 이유는 전체 영역을 선택하였기 때문에 각각의 태그의 개수만큼 생성 된 것입니다.

1) background-image 속성

- 배경에 넣을 그림을 지정하는 스타일 속성.

- 속성에는 URL 단위 또는 그레이디언트를 입력.

배경으로 넣을 이미지 / 사진 : 4753 x 634 

배경으로 사진으로 넣었더니 반도 안나왔습니다.

2) background-size 속성

- 그림 크기를 조절할 때 사용하는 스타일 속성.

- CSS3에서 추가된 기능.

- 키워드 : contain/cover

. contain:너비를 100%로 지정한 것과 같은 효과.

. cover: 높이를 100%로 지정한 것과 같은 효과.

background-size: 100%; 를 넣어주면 사진의 전체를 넣어주고 반복해서 배경에 넣어줍니다.

3) background-repeat 속성

- repeat:이미지가 패턴을 이룸.

- 키워드:no-repeat/repeat/repeat-x/repeat-y/round/space

- repeat-x : x축 방향으로 이미지가 반복.

- repeat-y : y축 방향으로 이미지가 반복.

반복되는 것을 막는 방법

background-repeat: no-repeat; 를 넣어 반복되지 않도록 합니다.

4) background-attachment 속성

- 배경 이미지를 어떠한 방식으로 화면에 붙일 것인지를 지정하는 스타일 속성.

- 키워드:fixed/scroll

- 속성의 기본 키워드 : scroll

- fixed : 스크롤을 이동해도 배경이미지 고정.

이미지의 위치를 고정하는 방법

background-repeat: no-repeat;

Scroll 을 내려도 배경사진의 위치는 그대로 입니다.

5) background-position 속성

- background-position:x축크기;

- background-position: x축크기 y축크기;

이미지의 좌표( x축, y축)

background-position: 10px 100px;

X축과 y축을 정의해준 자리에 배경 사진을 출력합니다.

색상단위

- 키워드를 사용한 색상 적용(red, orange, ...)

- RGB 색상단위

. rgb(red, green, blue) → 0 ~ 255(0x00~0xFF)

. rgba(... , alpha) → alpha(투명도:0.0(완전투명)~1.0(완전불투명))

- Hex코드 색상 단위 : #000000

- HSL 색상단위:hsl(hue(색상), saturation(채도), lightness(명도))

- hsla(... , alpha)

활용 사이트

http://www.workwithcolor.com/hsl-color-picker-01.htm

http://www.colorpicker.com

기본 색의 이름을 통해서 간편하게 색을 적용할 수 있지만, 한정적인 색상만 선택이 가능합니다.

그래서 RGB 또는 Hex 단위로 색을 넣어주는 것이 일반적입니다.

http://www.workwithcolor.com/hsl-color-picker-01.htm 에 들어가서

RGB 를 선택한 이후, 출력 된 값을 복사합니다.

색상의 이름을 넣는 자리에 rgb 코드를 복사해주면 색상이 출력됩니다.

+) rgba 활용해서 투명도를 속성으로 넣을 수 있습니다(10진수 표현)

Rgba 로 넣고 0.0을 넣어서 투명하게 보이게 만들 수 있습니다.

0.5 만 넣어서 반투명 상태로 만들 수 있고, 1.0을 넣으면 h1과 같은 색이 출력됩니다.

데이터의 최소 단위를 1byte로 표현하는데 1byte의 최대 수는 2의 8승으로 그 0 ~ 255의 수로

hex코드 16진수 표현합니다.

같은 방법으로 사이트 들어갑니다.

# FF9EC3 / 진수를 16진수로 값을 바꿔서 사용.

HSL 색상 단위(hue(색상), saturation(채도), lightness(명도))

미술에서의 색상의 표현법입니다. 일반적으로 rgb 또는 hex를 사용합니다.

H3 와 H4 표현식은 다르지만 같은 색을 출력합니다.

+) Rgba 와 동일하게 hsla 를 제공하여 투명도를 변경할 수 있도록 합니다.

URL 단위

- CSS에서 이미지파일이나 폰트 파일을 불러올 때 사용하는 단위.

사진의 크기가 default 값으로 채워집니다.

가시 속성 (display)

- 태그가 화면에 보이는 방식을 지정하는 속성.

Div의 default는 전체의 폭을 할당하지만 width 와 height를 활용하여 영역을 지정해줄 수 있습니다.

1) display:none; 영역을 사라지게 하는 방법 (이벤트을 이용하여 활용을 많이 합니다.)

none:태그를 화면에서 보이지 않게 만듭니다.

2) display: block; / display 의 default 값은 block

block:태그를 block 형식으로 지정. width/height/margin 속성을 적용할 수 있습니다.

3) display: inline;

/div 태그는 원래 전체 폭을 할당 받지만, inline을 지정함으로 해서 span 영역만큼만 차지하게 됩니다.

inline:태그를 inline 형식으로 지정. width/height/margin 속성이 적용되지 않음.

4) inline-block: 태그를 inline-block 형식으로 지정. width/height 속성을 적용할 수 있습니다.

   margin 속성이 div 태그의 상하좌우 지정됩니다.

가시 속성

- 태그가 화면에 보이는 방식을 지정하는 속성.

- visibility 속성의 default 값은 visible 입니다.

. visible : 태그를 보이게 만듦.

. hidden : 태그를 보이지 않게 만듦.

. collapse : table 태그를 보이지 않게 만듦.

display: none; - 태그가 화면에서 완전히 제거합니다.

visibility:hidden; - 태그가 화면에서 보이지 않을 뿐 그 영역은 그대로 존재합니다.

visibility: collapse;

. collapse : table 태그를 보이지 않게 만듭니다.

가시 속성

- 태그가 화면에 보이는 방식을 지정하는 속성.

- opacity

. 태그의 투명도를 조절하는 스타일 속성.

. 0.0(투명한 상태)부터 1.0(불투명한 상태) 사이의 숫자를 입력할 수 있습니다.

형태구조선택자 종류.(동위 관계)

:first-of-type =형제 관계 중에서 첫번째로 등장하는 특정 태그를 선택

:last-of-type =관계 중에서 마지막으로 등장하는 특정 태그를 선택.

:nth-of-type() = ()번째로 등장하는 특정 태그를 선택.

:nth-last-of-type() = 뒤에서 ()번째로 등장하는 특정 태그를 선택.

(*) 활용 형태구조 선택자

Body 태그의 자식 중 첫번째 등장하는 모든 형태의 태그를 선택합니다.

문자선택자

1) 문자 가상요소 선택자 : 태그 내부의 특정한 조건의 문자를 선택하는 선택자

= 첫번쨰 글자 first-letter

= 첫번쨰 줄 first-line

= 기호 표준은 (::) 이지만 (:)으로 작성해도 브라우저가 호환성 있게 제공.

*em : default 값의 배수 크기를 의미하는 단위로 사용

2) 전후문자선택자 : 특정 태그의 전후에 위치하는 공간을 선택하는 선택자.

- content 스타일 속성을 입력할 수 있다(전후문자선택자에서만 사용할 수 있습니다)

*문자 선택자 활용

3) 반응문자선택자

: 사용자가 문자와 반응해서 생기는 영역을 선택하는 선택자(사용자가 드래그한 글자를 선택)

기호 : ( :: ) + selection

링크선택자

- href 속성을 가지고 있는 a태그에 적용되는 선택자.

- 한 번 이상 다녀온 링크를 선택할 수 있는 선택자.

- 사용도(빈도)는 낮습니다.

부정선택자

- 선택자를 모두 반대로 적용할 수 있게 만드는 선택자.

- 지금까지 사용하던 모든 선택자와 함께 사용 가능.

- 기호 = ( :not ) 사용

● 일반적으로 CSS는 또 다른 파일로 만들어서 정리한 이후 import 하는 형태로 사용합니다.

Html 은 html 만 css 는 css 만 입력한 파일을 만들어서 import 시켜 사용하며, 이렇게 했을 때, css의 코드가 노출 되지 않는 추가적인 이점을 가질 수 있습니다.

● 추가적으로 css를 html에 직접 넣어 기능 수행

내용이 적을 때는 편하게 보이지만 내용이 많아지게 되면 각각의 태그에 적용할 때는 좋은 것 같지만 똑같은 요소의 기능을 넣고 싶은 대상이 일반적으로 많이 있습니다. 또한 기능을 수정할 때, 일일이 수정해야하기 때문에 수정 보완의 시간과 노력이 필요합니다. 그러한 이유로 막바지에 이르러 수정포인트가 필요할 때 잠깐 적용할 때만 사용하고, 일반적인 상황에서는 지합니다.  

HTML과 CSS를 분리시키고, 수정 포인트가 생겼을 때 빠른 수행을 할 수 있도록 각자의 파일을 만들어 Import 하는 형태로 사용하는 것이 일반적이며 유용합니다.  

자손 선택자 :  A > B

= 단독으로 쓰여지기 보다는 타 선택자와 함께 사용합니다

후손 선택자 : A ( 여백 ) B

기준이 되어지는 것 안에 포함되는 모든 것

= 단독으로 쓰여지기 보다는 타 선택자와 함께 사용합니다.

동위 선택자 : 같은 태그(대등한 관계)인 태그들

= 단독으로 쓰여지기 보다는 타 선택자와 함께 사용합니다.

인접 선택자 ( 선택자 + 인접태그 { } )

인접하고 있는 바로 뒤에 있는 하나의 선택자 만 선택합니다 .

h1 태그의 바로 뒤에 위치하는 h2 태그의 color 속성에 red 키워들 적용합니다.

형제 선택자 ( 선택자 ~ 인접태그 { } )

기준이 되어지는 선택자의 동의 관계에 있는 바로 따라붙는 h2가 선택이 되어집니다.

h1 태그 뒤에 위치하는 h2 태그 background 속서에 silver 키워드를 적용합니다.

- 하나만 선택 할 때 -> 인접 선택자 사용

- 모두 선택 -> 형제 선택자 사용

반응선택자

- 사용자의 반응으로 생성되는 특정한 상태를 선택하는 선택자.

- 종류

1) :hover -> 특정 태그(h1)에 마우스를 올릴 경우에 반응.

2) :active -> 특정 태그(h1)에 마우스를 클릭할 경우에 반응

= 다른 선택자와 함께 사용하는 것이 일반적입니다.

상태선택자

- 입력 양식의 상태를 선택할 때 사용하는 선택자.

- 종류

1) :enabled = 활성화 태그

2) :disabled = 비활성화 시키는 태그 (이벤트에 의해서 활성화 시키도록 하는 태그)

속성과 입력 값이 같으면 생략해도 문제없이 실행됩니다.

3) :focus = 포커스가 들어가는 순간 기능을 수행

4) :checked = checked에 대한 이벤트는 대부분 checkbox와 연결

체크 박스를 눌렀을 때, 높이가 0px로 바뀌도록(사라지도록) 만듭니다.

* 일반구조선택자

- CSS3부터 지원하는 선택자, 일반적으로 자손선택자와 병행해서 많이 사용.

- 종 류

1) :first-child = 첫번째에 위치하는 자손을 선택(CSS2.1 지원)

2) :last-child = 마지막에 위치하는 자손을 선택.

3) :nth-child(n) = 앞에서 n번째 있는 자손을 선택.

4) :nth-last-child(n) = 뒤에서 n번째 있는 자손을 선택.

* 클래스 선택자

- 특정한 클래스를 가지고 있는 태그를 선택할 때 사용하는 선택자.

- 태그마다 클래스 속성을 부여해서 구별 단위를 구별

- 웹페이지를 개발할 때 가장 많이 사용하는 선택자.

- 여러 개의 클래스 선택자 사용.

- class 속성은 공백으로 구분해서 여러 클래스를 사용할 수 있습니다.

- id 속성은 웹페이지 내부에서 중복되지 않으므로 상관없지만 class 속성은 중복될 수 있습니다.

- class 속성은 서로 다른 태그에 적용된다면 태그선택자와 클래스선택자를 함께 사용해서 더 정확하게

  태그를 선택 수 있습니다.

아이디 선택자 = # , 클래스 선택자 = .

Id 태그는 레이아웃을 구성할 때, 고유 이름을 부여하는 이름으로 사용합니다. 동시에 두개 이상을 선택하고 싶을 때는 id선택자가 적절하지 않습니다. 이럴 때 class 선택자를 사용하는 것이 적절합니다. (여러 개의 클래스 선택자 사용)

Space bar(공백)를 통해서 여러가지 이름을 넣을 수 있습니다. (여러 개 클래스 사용 가능)

- 동시에 중복으로 속성을 적요할 때 많이 사용합니다.

class 속성은 서로 다른 태그에 적용된다면 태그선택자와 클래스선택자를 함께 사용해서

더 정확하게 태그를 선택 수 있습니다.

* 속성선택자

- 특정 속성을 가진 HTML 태그를 선택할 수 있습니다.

- 다른 선택자와 함께 사용하는 선택자.

input (입력) 양식 태그 과 type(속성) 무조건 함께 사용합니다.

Input을 단독으로 사용할 때 type을 지정하지 않으면 default 값으로 text가 지정됩니다.  

하지만 속성선택자는 적용되지 않습니다.

*후손 & 자손 선택자

* 후손선택자 : 특정한 태그 아래에 있는 후손을 선택할 때 사용하는 선택자.

후손선택자 관련 주의 사항 )

위의 사진을 보면 section안에 잇는 h2까지 기능이 적용되었습니다.

부모 태그와 함께 자신 태그를 넣어야 올바르게 동작 되어 집니다.

* 자손선택자

> 기호 사용.

후손과 자손의 차이는 후손은 h1의 내용이 다 선택되지만 , 자손은 부모 태그 바로 밑의 내용만 선택되어 적용됩니다.

* table 태그와 자손선택자 사용시 주의 사항

- 웹브라우저가 자동으로 tbody 태그를 추가함.

- table 선택자에 스타일 적용할 때는 자식선택자를 사용하지 말자.

적용이 되지 않는다. 왜?

옆에 적용된 코드를 보면 tbody 라는 입력하지 않은 코드가 들어가 있습니다. 우리가 생각할 때, 행과 열로 테이블이 구성되어 있다고 생각하고 작성하면 브라우저가 테이블을 처리하는 알고리즘에 의해서 바디에 영역에 해당된다는 의미로 스스로 추가합니다.

가독성이 떨어지기 때문에 테이블에서 자식선택자를 사용하는 것은 지양합니다.