CSS 의 간략한 설명.
css란 cascading style sheets의 줄임말로서 스타일시트라고 말하기도 한다. 계단식(cascading:캐스케이딩)이라고 표시된 이유는 앞선 포스트에서 잠시 언급하였던 수직적인 구조화를 나타내기 때문에 붙은 것으로, html 의 요소에 디자인적(표시상) 디테일하고 다양한 제어를 하기 위하여 별도의 문법적인 구조를 가진 문서이다.
Recap
- div를 이용하여 html 문서를 구조화 한다.
- div를 계층적으로 이용하여 부모 자식 구조를 만든다.
- div 요소 안에 style 속성을 이용하여 해당 요소의 스타일을 제어 한다.
- div 요소를 구분하기 위하여 id 와 class 속성을 사용한다.
- 앞으로 태그라는 용어 대신 요소(element:엘레멘트)를 사용한다. 요소가 보다 알맞은 용어이다.
style 요소
css는 여러 방식 중 하나로서 html 문서안에 위치할 수 있다. 브라우저 또는 해석기에 따라 차이는 있지만 2023년 현재 대부분의 브라우저에서는 어느 위치에 style 요소가 존재 하여도 적용이 되지만, 일반적으로 head 요소의 자식 요소로 사용한다.
<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
<style>
body {
background-color: ghostwhite;
}
</style>
</head>
<body>
<div id="top" style="border: 3px solid red; height:30">top</div>
<div id="logo" style="border: 3px solid blue; height:70">logo</div>
<div id="main">main image</div>
<div id="rec_container">
<div class="rect">rectangle 1</div>
<div class="rect">rectangle 2</div>
<div class="rect">rectangle 3</div>
<div class="rect">rectangle 4</div>
</div>
</body>
</html>결과를 확인해 보면 전체 페이지의 배경색이 바뀌었음 알 수 있다. 추가된 스타일의 작성 규칙은 아래와 같다.
작성규칙
css는 아래의 규칙으로 작성한다. 위의 예시와 같이 각 구성요소의 의미는 아래의 표와 같다.
| 선택자 | 중괄호 | 스타일명:스타일값; | 중괄호 |
|---|---|---|---|
| body | { | back-groud-color: gray; | } |
요소에 적용
위의 예제가 body 요소에 배경색에 대한 스타일을 지정하였다. 다양한 스타일이 있으니 이번 예제에서는 위의 마진(margin)-여백 을 추가하면서 선택자 에서 요소를 선택하여 스타일을 부여하는 방식을 살펴 본다.
<style>
body {
background-color: #ccc;
margin-top: 30px;
}
</style>이러한 요소에 적용하는 방식은 전체에 그 효력이 미치기 때문에 아래와 같이 id와 class를 활용하여 스타일이 적용될 요소를 제한한다. 또한 컬러는 RGB 색상을 16진수로 표현한 것으로, #ccc 는 밝은 회색을 띄게 된다.
id에 적용
정확히 맞는 id를 가지고 있는 요소에 스타일을 적용한다. 이번에는 top 영역에 외곽선을 없앤 후 배경색을 흰색으로 조정할 것이다. 아이디를 선택자로 사용하는 경우 아이디 이름 앞에 #을 사용한다.
<style>
body {
background-color: #ccc;
margin-top: 30px;
}
#top {
background-color: white;
border: none;
}
</style>
</head>
<body>
<div id="top" style="border: 3px solid red; height:30">top</div>결과를 확인 하면 배경색은 바뀌었지만, 외곽선은 빨간색으로 남아있다. 이 예제에서 스타일 안에서 외곽선을 없애도록 선언하였지만, 밑에 요소내에서 다시 외곽선을 표시하도록 선언되므로서 결과적으로 보여지는 것은 외곽선이 있는 상태로 표시되게 된다.
class에 적용
하나의 스타일 적용으로 지정된 여러개의 요소들에 스타일을 공통적으로 지정하는 경우 사용한다. 하단의 4개의 영역에 외곽선을 지정하고, 폭과 높이를 지정할 것이다. 아이디를 선택자로 사용하는 경우 아이디 이름 앞에 . 을 사용한다.
<style>
.rect {
border: 1px solid black;
width: 250px;
height: 250px;
}
</style>
<div id="rec_container">
<div class="rect">rectangle 1</div>
<div class="rect">rectangle 2</div>
<div class="rect">rectangle 3</div>
<div class="rect">rectangle 4</div>
</div>결과를 확인해 보면 의도대로 표현되었음 알 수 있다. 물론 4개의 4각형이 좌측으로 정렬되는 것을 원하였겠지만, 현재 스타일에서 별도로 관련된 스타일 지정이 없었다는 것을 상기하도록 한다.
댓글
댓글 쓰기