인터넷이 발달하고 많은 사람들이 인터넷을 이용하고 있습니다. 이들 중에는 단순히 콘텐츠를 소비하는 사람들도 있지만, 자신만의 고유한 콘텐츠를 생산하는 모습이 많아지고 있습니다. 최근에는 동영상 플랫폼인 유튜브를 많이 이용하기도 합니다.
과거에는 웹사이트를 이용하여 인터넷의 정보를 공유하는 모습이 가장 흔한 모습이었습니다. 여전히 웹사이트를 이용하여 텍스트기반의 정보를 활용합니다. 이는 html이라는 문서의 구조를 활용하고, 웹브라우저를 이용해 타인과 공유하게 됩니다.
단순히 html 태그만을 이용하는 방법은 간단합니다. 대표적으로 ‘위키피디아’, ‘나무위키’등의 사이트는 별도의 꾸밈이 없이 html 태그를 골격으로 합니다. 다만, 심심하고 재미없는 모습이기도 합니다. 여기에 CSS 요소를 사용해 보다 화려하게 꾸밀 수 있습니다. 웹사이트의 기본 구조를 html이 이루게 되며, 외관의 디자인을 꾸미는 용도로 CSS, JAVASCRIPT를 활용하게 됩니다.
CSS는 html태그에 어떤 효과를 부여하게 됩니다. 다시 말해, 원하는 위치의 태그를 확인하고 그 태그에 필요한 효과를 넣을 수 있는 CSS 문법을 이용하게 됩니다. CSS를 태그에 적용하기 위해서는 가장 기본적인 선택자 3개를 알아야 합니다.
선택자에는 요소 선택자 / 클래스 선택자 / ID 선택자의 3가지로 구분할 수 있습니다.
- 요소 선택자 : 일반적인 html 태그를 지정하여 css 요소를 넣습니다.
- 클래스 선택자 : 태그에 지정되어 있는 클래스 이름을 이용하여 css를 넣게 됩니다.
- ID 선택자 : 태그에 지정되어 있는 id 이름을 이용하여 css를 넣게 됩니다.
- 클래스, 아이디에 대한 개념은 추후 자세하게 살펴보도록 합니다.
아래에는 각 css를 적용하는 예시를 보여줍니다.
/* 요소 선택자 */
p {
color: red;
}
/* 클래스 선택자 */
.button {
background-color: blue;
color: white;
}
/* 아이디 선택자 */
#header {
font-size: 24px;
font-weight: bold;
}
위 3가지 선택자에 대한 개념을 잘 잡고 있으면, 자신의 웹페이지에서 원하는 태그에 적절한 효과를 넣는데 도움이 될 수 있습니다.