웹사이트를 구성하는 요소는 어떤게 있을까요. 대표적으로 html을 들 수 있습니다. 해당 언어는 프로그래밍 언어는 아니죠. 단순히 페이지를 구성하는 뼈대와 같은 역할을 수행합니다. html 태그는 단순히 구조를 나타내는 혹은 영역을 구분하고 지정하는 용도이기도 합니다. 여기에 css를 통하여 멋드러진 페이지를 꾸며줄 수 있습니다.
하지만, 익숙하지 않은 사람들의 경우 쉽게 접근하기 어렵게 느껴지기도 합니다. 다른 컴퓨터 언어에 비하면 단순한 구조라 할 수 있지만 처음에는 쉽지 않습니다. css를 가장 기본이 되는 것은 선택자에 대한 이해라고 할 수 있습니다. css의 기본 선택자 3가지 종류와 의미, 그리고 역할에 대해서 이야기를 나눠보겠습니다.
css 기본 선택자 3가지 종류와 역할.
1. css의 기본 원리
우리가 사용하는 웹사이트는 시각적인 디자인이 눈에 띄는 부분이기도 합니다. 과거에 비해 컴퓨터 성능이 발달했기 때문에 보다 직관적이고 역동적인 사이트들이 많습니다. 그저 레이아웃을 잘 정돈하고 블럭과 같이 이어 붙이면 좋겠지만, 기본적인 설계는 프로그램 언어와 같이 코드들로 이루어져 있습니다.
페이지를 구성하는 가장 기본은 'html 문서' 입니다. 웹브라우저는 html로 지정된 문서, 다시 말해 태그로 구성된 텍스트 파일을 읽어 사용자에게 화면을 출력해 주게 됩니다. html 태그만을 이용해도 웹사이트를 운영할 수 있지만 너무나 단순한 구조이기에 디자인적인 요소가 부족하게 느껴질 수 있습니다.
이런 디자인 요소를 첨가해주는 것이 바로 css 명령어들입니다. 즉, html과 css는 별도로 구분하기 보다는 하나의 덩어리로 생각하는 것이 좋습니다. 단지, 그 역할에 차이점이 존재할 뿐이라고 할 수 있는 것이죠. html은 페이지의 영역, 콘텐츠의 영역을 구성하는데 주로 사용하게 됩니다. 대표적으로 <head></head>, <body></body>, 바디 내부에서는 <p>, <div>, <table>등이 존재합니다.
영역을 표시하지 않거나, 콘텐츠(텍스트 혹은 사진)를 입력하지 않으면 시작적으로 표시되진 않습니다. 이제 뼈대를 웹브라우저가 인식하고 표시하게 되는데 내용이 없으니 표시되지 않습니다. 해당 태그들에 디자인(배경, 색상, 애니메이션 등)을 입히면 콘텐츠가 없어도 표시될 수 있습니다.
css는 각각의 영역에 해당되는 태그들에 별도로 지정할 수 있습니다. 만약, 별도의 지정되는 방법이 없다면 어떻게 될까요. 그저 일괄적으로 표시되는 것으로 그칠 수 있습니다. 한번 상상해볼까요. 배경색을 지정하는데, 세부적인 조율이 없다면 모든 페이지의 배경색은 일괄적으로 지정될 수 밖에 없습니다. 그렇게 멋진 모습은 아닐 수 있습니다.
이런 세부적인 적용을 조율할 수 있는 css만의 규칙입니다. 해당 규칙을 인식해 웹브라우저는 각 영역에 css 요소, 명령어를 실행하여 보여주게 됩니다. 우리가 흔히 볼 수 있는 웹사이트의 모습이기도 합니다. 보다 역동적이고 복합적인 모습은 복잡한 css 혹은 자바스크립트가 적용된 모습이기도 합니다.
2. css 기본 선택자 3가지
1번에서 언급한 것과 같이 세부적인 적용 대상이 존재해야 합니다. 존재하는 영역에 css 규칙을 적용해 효과를 넣을 수 있게 됩니다. 만약, 대상이 없다면 어떻게 될까요. 선택자를 지정해도 의미는 없습니다. 따라서, 기본적인 순서는 html 태그를 이용해 대상을 구성하고, 해당되는 대상에게 css 요소가 적용 될 수 있도록 파일을 구성하게 됩니다.
css의 대상을 지정하는 방법은 크게 3가지로 구분할 수 있습니다. 물론, 더 복합적이고 세부적인 내용을 적용하기 위해서는 다양한 요소들에 대한 이해가 필요합니다. 예를 들어, 가상 요소, 부모 자식 요소와 같은 개념이 있습니다. 해당 내용은 기본을 익힌 후 확장하여 파악하는 것을 추천합니다. 한번에 모든 것을 알고자 한다면 혼란이 생길 수도 있습니다. 저는 그랬거든요.
가장 기본이 되는 선택자는 [태그]입니다. html 태그 자체를 지정하여, 해당 태그의 영역에 css 요소를 지정하고 적용할 수 있습니다. 다음으로 class와 id를 이용하는 방법입니다. class와 id의 경우 태그에 지정하여 사용할 수 있습니다. 일반적으로 페이지를 만들때 사용되는 규칙에 따라 활용하면 도움이 될 수 있습니다.
css 기본 선택자 3가지 활용 방법.
css를 적용하는 방법은 3가지가 존재합니다. 여기서는 외부 스타일 시트를 활용하는 방법으로 진행합니다. css를 적용하는 방법은 인라인 스타일, 내부 시트, 외부 시트로 구분할 수 있습니다.
① 태그 선택자 사용 방법
태그명{
css 명령어
}/*div 태그에 css를 적용한 예시*/
div{
border : 1px solid black;
}
② id를 이용한 방법
div태그에 id 값을 지정합니다. 예를 들어 다음과 같습니다.
- <div id="idx"></div>
#아이디값{
css 명령어
}#idx{
border:1px solid black;
}
③ class를 이용한 방법
div태그에 class 값을 지정합니다. 예를 들어 다음과 같습니다.
- <div class="excs"></div>
.클래스명{
css 속성값
}.excs{
border:1px solid black;
}
마치며.
css 명령어는 다양하게 있습니다. 테두리, 배경, 그림자등을 잘 이용하면 충분히 멋진 디자인을 만들 수도 있습니다. 이렇게 적용하기 위해서 기본 선택자를 활용하면 도움이 되긴하는데, 여전히 처음에는 쉽지 않을 수 있습니다. 기본적인 내용을 토대로 css 효과를 적용하여 활용하는 연습을 한다면, css를 익히는데 충분히 효과적인 방법이 될 수 있을 것입니다. css 요소를 확인하고 연습하는 방법으로 개발자도구를 활용하는 방법을 추천합니다.
댓글