html과 css는 떼어놓고 생각할 수 있는 것은 아닐 것입니다. html은 웹페이지의 뼈대를 구성하고, 그 위에 디자인을 꾸미는 것은 css이기 때문이죠. 이런 css를 잘 사용하기 위해서는 속성도 중요하지만, 기본적으로 선택자 3가지를 안다면 도움이 될 수 있습니다.
css 선택자 3가지
1. 태그 선택자
html은 태그로 구성된 텍스트입니다. 해당 텍스트의 규칙을 웹브라우저가 읽고, 우리에게 정적이거나 역동적인 페이지를 보여주게 됩니다. 각각의 태그를 지정해 디자인 요소를 입히는 css 방법이 바로 태그 선택자를 이용하는 방법입니다.
- 태그이름{css 속성값;}
- 예시 - p{border : 1px solid;}
2. 클래스 선택자
html에 사용된 태그에 특정 이름값을 줄 수 있습니다. class 값을 추가로 입력한 후, 해당 class로 묶여있는 태그 부분들에 css를 입히는 방법입니다.
- .클래스이름{css 속성값;}
- 예시 - .pin{border : 1px solid;}
3. 아이디 선택자
2에서 소개한 클래스 선택자와 비슷합니다. id값을 태그에 넣어주어, 해당 id값이 부여된 태그 부분에 css 디자인을 입히게 됩니다.
- #아이디이름{css 속성값;}
- 예시 - #pin{border : 1px solid;}
마치며.
위에서 언급한 css 선택자 3가지를 적절히 이용한다면, 멋진 페이지를 디자인하는데 도움이 될 수 있을 것입니다. html, css 적용이 가능한 블로그라면 본 게시글의 내용을 활용하여, 자신의 취향에 맞는 페이지를 만드는데 도움이 될 수 있을 것입니다.