디자인 모든 것/CSS

[CSS기초]CSS3 선택자 기본 개념알기

Do_Do!! 2017. 8. 16. 11:24

[CSS기초] CSS3 선택자 기본 개념

 

안녕하세요? 오늘은 CSS3 선택자 기본개념과 어떻게 적용하는 것인지에 대해 알아보도록 하겠습니다.^^

 

 

HTML이라고 하면 웹 페이지를 만들때 기본레이아웃, 뼈대를 구성하기 위한 것으로 CSS스타일을 적용시키지 않으면 일반적인 텍스트에 일렬로 보여질 뿐 입니다. 따라서 기본적인 레이아웃 구성이 완료되었으면 CSS스타일을 적용시켜 디자인적으로 갖춰진 모습을 보여줄 수 있습니다.

 

 

CSS스타일을 매기게 되면 위와 같은 이미지로 매기는 것인데 처음 접하시는 분들은 어렵고 헷갈리실 것이라 생각합니다. (저도 처음 배웠을 때는 뭐가 뭔지도 몰랐으니까요..^^;;) 이제 저렇게 CSS스타일을 매기는 방법과 선택자에 대해 알아보도록 하겠습니다.

 

◈ CSS3 선택자 기본 개념 알기

 

CSS3 선택자는 특정한 HTML 태그를 선택할 때 사용하는 기능입니다. 선택자를 사용해 특정한 HTML 태그를 선택하면 해당 태그에 원하는 스타일 또는 기능을 적용할 수 있는 것입니다.

 

 

위의 이미지를 참고로 h1 {color:gray;} 로 되어있는 부분이 <h1>태그의 color속성에 red키워드를 적용합니다. 로 해석할 수 있습니다.

 

h1 {color:gray;}

 

h1 : 선택자

color : 스타일 속성

gray : 스타일 값

 

CSS3 선택자는 디자인 할 때 뿐만 아니라 jquery에서도 사용합니다. 굉장히 많이 활용되는 중요한 내용이기 때문에 이 장의 내용을 꼭 기억해 두시기 바랍니다.^^

 

누구나 파워지식인이 되는 그날까지, 늘보지식인

#Copyleft(C)는 저작권의 반대개념으로, "모든것을 공유한다" 는 뜻입니다#

#사진과 이미지의 일부는 퍼온것도 있음을 밝힘니다#