css는 페이지를 이쁘게 혹은 멋지게 만들어주는 언어를 의미합니다. 어떤 언어라고 통칭하기보다는 다양한 명령어와 그 속성들로 이루어진 집단이라 부르는게 맞을지도 모르겠습니다. 어쨌든, 우리가 보는 멋드러진 페이지는 css를 잘 적용한 모습이기도 합니다. 이런 css를 적용하기 위해서는 무엇보다 선택자에 대한 개념을 우선적으로 알아야 합니다.
웹페이지는 기본적으로 html의 뼈대를 이루고 있습니다. 건물로 치면 철근과 연결될 수 있겠네요. 인체로 친다면 골격, 뼈와 연결될 수 있습니다. 여기에 퍼포먼스, 디자인을 추가합니다. 우리 몸으로 치면 근육이고, 건물로 치면 인테리어 요소겠죠.
이렇게 추가된 최종적인 외관으로 방문자를 맞이하게 됩니다. 기본적으로 플랫폼에서 제공하는 블로그는 이런 내부적인 수정이 막혀있는 경우가 많습니다. 대표적으로 네이버 블로그가 그렇죠. 반면 티스토리나 구글 블로그는 사용자의 취향에 맞는 수정이 가능합니다. 그 중, css를 수정 및 적용한다면 가장 눈에 띄는 변화를 볼 수 있습니다.
페이지는 다양한 영역으로 나뉘어져 있습니다. 기본적인 영역 구성을 우리는 레이아웃(layout)이라고 부르게 됩니다. 블로그에서 사이드바, 헤더, 본문, 푸터등의 영역으로 나뉘는 것을 예로 들 수 있겠네요. 포스팅 본문 또한 다양한 영역으로 구분할 수 있습니다. 이 영역은 기본적으로 사각형의 모습을 띄고 있습니다.
여러 요소들이 각자의 위치에서 제 역할을 충분히 할 때, 훌륭한 페이지가 완성된 모습을 보일 수 있습니다. 물론, css는 필수 요소는 아닙니다. 필요에 따라 선택적으로 활용하는 것이기 때문에 정적인 페이지만을 보여주는 사이트라면 복잡한 css는 필요하지 않을 수 있습니다. 대표적으로 구글의 서비스 안내 페이지, 또는 다양한 공식문서들이 그렇습니다.
다만, 우리가 사용하는 블로그의 경우는 예외일 수 있죠. 채널을 운영하는 운영자의 목적과 취향에 따라 필요한 모습은 달라질 수 있습니다. 여기서 한가지 명심할 부분이 있습니다. 복잡하고 다양한 css 요소를 적용시키면, 그만큼 사이트의 속도는 느려질 수 있습니다.
이는 검색엔진의 평가에서 좋지 못한 평가로 이어질 수 있는 부분이기 때문에 반드시 고려해볼 사항일 수 있습니다. 이 부분도 노련함이 생기면 해결할 수 있습니다. 물론, 다양한 시도와 경험을 쌓아야겠죠. 장황한 사설은 그만두고, 본격적으로 css 선택자에 대해서 살펴보겠습니다.
CSS 선택자 이야기.
앞에서도 언급한 것과 같이 css는 여러 명령어와 그에 맞는 속성들로 이루어지게 됩니다. 이렇게 이루어진 명령어는 대상을 분명하게 지정해 줄 필요가 있습니다. 컴퓨터가 아무리 똑똑해도 기본적인 설정은 사람이 지정해줘야 합니다. 자동으로 이루어지는 기능도 기본 설정은 해줘야만 합니다. 아직까지는 말이죠.
태그에는 여러 종류가 있습니다. 꺽쇠모양(<>)으로 감싸져 있는 부분을 기본적으로 태그라 부르게 됩니다. head, body, a, b, u, div, span등의 다양한 태그가 존재합니다. 모두 사용하는 것은 아니며, 필요에 따라 선택적으로 사용합니다. 단, <head></head>와 <body></body>는 필수 요소입니다.
이렇게 지정된 태그에 디자인을 입히게 됩니다. 기본적으로 많이 사용하는 것은 색상, 테두리(box), 글씨(폰트)가 있을 수 있습니다. 물론, 훨씬 다양한 css가 존재하겠죠.
이때, 태그를 지정해 줘야 디자인 속성(css 속성)들이 적용되게 됩니다. 가령 body의 배경색을 바꾸고 싶다면 body를 지정(선택)하고, css 속성값을 설정하게 됩니다. 배경색은 background-color라는 명령어를 사용하게 됩니다. 다음으로 지정될 배경색(color)을 선택하면 끝입니다. 해당 페이지의 body태그 부분의 배경색이 변경되게 됩니다.
- 위 설명을 코드로 표현하면 다음과 같습니다.
body{
background-color:gray;
}- 코드를 살펴보면 이렇습니다.
- body 부분은 적용할 태그의 명칭입니다.
- {} 중괄호는 속성을 적용할 영역을 지정합니다. 기본적인 규칙입니다.
- background-color 부분은 배경색을 지정하겠다는 명령어 입니다.
- gray는 색상을 의미합니다. 기본적으로 색상의 영어표기도 허용되며, rga 색상표를 이용해서 색을 지정할 수 있습니다.
- :, ; 중간에 있는 콜론과 세미콜론은 배경색 명령어와 속성을 지정하는 연결의 의미 콜론(:), 그리고 세미콜론(;)은 명령어의 끝을 의미합니다.
- 위에서 보여주는 코드는 css를 적용하는 3가지 방법 중, 2가지 방법에서 사용하는 형태입니다.
- css를 적용하는 방법은 다음 3가지가 있습니다.
- 인라인 스타일: 태그에 스타일 속성값을 입력합니다.
- 내부 스타일 시트 : head 혹은 body 에 스타일 태그를 이용해 css를 적용합니다.
- 외부 스타일 시트 : 별도의 파일을 불러와 페이지에 css를 적용합니다.
- 위 코드는 내부 스타일 시트 또는 외부 스타일 시트에서 적용시키는 모습입니다.
- 인라인 스타일의 예시는 다음과 같습니다.
- 인라인 스타일 예시 : <body style = 'background-color:gray;'></body>
태그(tag), 클래스(class), 아이디(id)를 찾아가는 CSS.
css 스타일을 적용할 때, 넓게는 태그를 이용할 수도 있고, 좁게는 각 태그에 class, id 값을 지정하여 적용할 수 있습니다. 개발자 도구를 활용해 멋진 페이지를 분석하는 과정에서 html 구조를 살펴보면 class와 id가 지정된 모습을 볼 수 있습니다.
- class와 id가 지정된 예시 모습
- 클래스가 지정된 예시
- <div class="box">
- 아이가 지정된 예시
- <div id="box">
- 클래스가 지정된 예시
- 태그에 아무것도 없다면 지정되지 않은 것입니다.
- css를 적용할 때 선택적으로 지정할 수도 있으며, 단순히 태그를 지정해도 가능합니다. 태그 또는 class, id를 선택자로 지정할 수 있습니다.
html 구조는 위와 같습니다. 이제 css를 적용하기 위한 선택자 지정의 기본 규칙 3가지를 정리해보도록 하겠습니다. 이 부분을 알아두시면 티스토리 블로그 스킨 편집에서도 많은 활용이 가능할 것입니다.
css 선택자 규칙.
① 태그 선택자
div{
border:1px solid black;
}
② 클래스 선택자
.box{
border:1px solid black;
}
③ 아이디 선택자
#box{
border:1px solid black;
}
크게 어렵지 않습니다. 태그는 그냥 태그명만 기입합니다. 클래스는 클래스 이름 앞에 '.'을 찍습니다. 아이디의 경우 '#'을 앞에 붙입니다. 그럼, 페이지의 html에서 해당되는 태그, 클래스 혹은 아이디의 영역에 지정된 css가 적용된 모습을 보실 수 있습니다. 위에서 예시로 사용한 속성은 테두리 선을 그리는 css 명령어 입니다.
번외)
태그, 클래스, 아이디의 활용 상황에 대해 간략하게 언급합니다. 태그는 그 구조의 시작을 알리고 있습니다. 여기에 굳이 클래스와 아이디를 언급하는 것은 css 및 자바스크립트의 적용을 원활하게 하고, 페이지 구조를 확실하게 알리기 위함일 것이라 생각합니다. 클래스는 하나의 그룹일 때 활용하면 도움이 될 수 있습니다. 아이디는 해당 페이지에서 유일한 경우 사용하게 됩니다.
이것으로도 많은 것을 할 수 있습니다. 하지만, 페이지의 html 구조가 복잡해짐에 따라 다양한 태그와 클래스, 아이디를 활용하게 됩니다. 여기서 단순하게 css를 적용시켜도 좋지만, 보다 세밀하게 지정해야하는 경우도 있습니다. 이런 경우에는 css 상속관계를 사용할 수 있습니다. 더불어, hover(마우스가 올려지면 나타나는 css) 또는 after, before등의 css 가상 요소를 활용하는 방법도 있습니다.
마치며.
복잡해 보이지만 이제 css에 대한 기초중의 기초적인 내용을 알게되었습니다. 운영하는 블로그, 페이지 또는 html문서를 만들어 연습해볼 수 있을 것입니다. 디자인은 감각이 중요하고, 이 감각을 키우는 방법은 다양하게 적용하고, 결과를 확인하는 것이라 생각합니다. 조금씩 코드를 적용하면서 감을 익힌다면, 충분히 복잡한 요소들도 분석하고 적용할 수 있을 것입니다.
'It 이야기 > css 이야기' 카테고리의 다른 글
| css 박스 만들기, border 기본과 속성값 정리. (0) | 2022.12.04 |
|---|
댓글