e:I[86069,["6841","static/chunks/app/p/%5Bid%5D/page-4bec94ee790807ae.js"],"default"] f:T7b0,$$config title: css 기초/ selecter란? keywords: - IT - 코딩기초 - selecter란? $$ # selecter란? - 스타일을 적용하려면 적용 대상이 필요한대 셀렉터가 바로 그 대상이 된다. - 기본적으로 태그, 아이디, 클래스 를 사용한다. - HTML 문서에서 스타일의 적용 대상을 의미한다. - 디자인을 적용하기 원하는 부분의 선택이 쉽도록 해준다. - id 속성은 부모가 id인 경우 자식은 class로 지정해주는게 좋다. (class의 경우 여러번 사용해도 상관 없음) ## 태그 셀렉터 예시(문서내 임의의 태그를 선택자로 사용한다) ### HTML ```html

``` ### CSS ```css div/* div에게만 스타일을 줄 수 있음 */ { 원하는 스타일 값을 적어준다. } a/* a에게만 스타일을 줄 수 있음 */ { 원하는 스타일 값을 적어준다. } span/* span에게만 스타일을 줄 수 있음 */ { 원하는 스타일 값을 적어준다. } ``` ## id 셀렉터 예시(HTML 요소의 id 속성을 사용하여 특정 요소를 선택한다.) *페이지 내에서 유일한 값으로 사용 ### HTML ```html ``` ### CSS ```css #header/* css에서 id를 선택할때는 #을 붙이고 이름을 적어준다. */ { 원하는 스타일 값을 적어준다. } ``` ## class 셀렉터 예시(HTML 요소의 class 속성을 사용하여 특정 요소를 선택한다.) *여러번 사용가능 ### HTML ```html ``` ### CSS ```css .header/* css에서 class를 선택할때는 .(점)을 붙이고 이름을 적어준다. */ { 원하는 스타일 값을 적어준다. } ``` ### 코드펜 활용(연습해보세요) $$codepen https://codepen.io/tldkwnstn/embed/bGRNLYK?default-tab=html%2Cresult&editable=true $$ ### 추천영상 $$youtube https://www.youtube.com/watch?v=gG