[CSS3] CSS Visual Rules - basic

이 글에서는 CSS 기본 문법 및 구조에 대해서 살펴보도록 하자.

 

 

 

CSS Structure

 

HTML 요소를 CSS로 스타일 하기 위해선, CSS Selector로 요소를 지정해야 한다고 이전 글에서 배웠다.

h1 {
  color: blue;
}

결과: 파란글씨

curly brace( { } )로 감싸진 부분을 Selector의 body라고 하자. 위의 코드는 <h1> 태그의 body에 color 속성을 blue로 설정해 주었다.  "color: blue" 라인을 CSS declation이라고 하는데, CSS declation은 하나의 property와 그에 해당하는 value를 가진다.

 

Property - 선택한 요소에 대해 스타일링하고자 하는 속성(i.e., size, color, etc.)

 

Value - 해당 속성에 대한 값(i.e., 20px for size, blue for color, etc.)

 

위의 코드에서, property는 color이고 value는 blue이다. property와 value는 colon( : )으로 구분된다. Semicolon( ; )이 반드시 declation 뒤에 위치해야 한다는 것을 주의하자.

 

마지막으로, 위의 코드 자체를 CSS Rule 또는 Rule set이라고 한다. 하나의 CSS Rule은 Selector와( 여기선 h1 ) 그 안의 여러 declation들을( 여기선 color: blue ) 포함한다.

 

 

 

Font Family

 

CSS로 텍스트의 폰트를 바꿔줄 수 있다. 폰트를 바꾸기 위해선, font-family property를 설정해 주면 된다.

h1 {
  font-family: Garamond;
}

결과: Garamond

위의 코드는 폰트를 Garamond로 설정해 주고 있다. 웹 상에서 폰트를 지정할 때 몇 가지 기억해야 할 것들이 있다:

 

1. 지정한 폰트가 올바르게 보이기 위해서 Stylesheet에서 지정한 폰트는 반드시 사용자의 컴퓨터에 설치되어야 한다. 

2. 모든 HTML 요소들의 기본 폰트는 Times New Roman이다. font-family가 별도로 지정되지 않으면, 모든 글자는 Times New Roman로 나타난다.

3. 웹 페이지에서 사용하는 폰트는 2 ~ 3개로 제한하는 것이 디자인 측면뿐만 아니라 속도 면에서도 좋다.

4. 만약 폰트 이름이 공백을 포함한다면(i.e., Courier New) quotes( " " )로 감싸준다.

 

여러 가지 web safe 폰트들을 여기에서 확인할 수 있다.

 

 

 

Font Size

 

폰트를 변경하는 것뿐만 아니라 텍스트의 크기를 조절할 수도 있다. 텍스트의 크기를 조절하는 것만으로도 텍스트를 highlight 하는 효과를 줄 수 있다. 텍스트의 크기를 조절하기 위해선 font-size property를 사용한다.

p {
  font-size: 18px;
}

결과: 18px의 글자

위의 코드는 모든 paragraph들을 18px로 설정한다. 여기서 px란 폰트의 크기를 측정하는 단위 중 하나이다.

 

 

 

Font Weight

 

CSS에서 font-weight property를 사용하여 텍스트의 굵기를 조절할 수 있다.

p {
  font-weight: bold;
}

결과: 굵은 글씨

위의 코드는 모든 paragraph들의 굵기를 bold(굵은 글씨)로 설정한다. font-weight property의 value로는 normal 도 존재한다. 만약 이 property를 따로 설정해 주지 않으면 default로 normal 이 부여된다.

 

 

 

Text Align

 

Text-Align property를 활용하여 텍스트를 왼쪽, 오른쪽 또는 가운데 정렬을 할 수 있다.

h1 {
  text-align: right;
}

결과: 오른쪽정렬

tesxt-align property의 value로는 left, right, center가 올 수 있다. 각각 왼쪽, 오른쪽, 가운데 정렬을 의미한다. 한 가지 기억해야 할 것은 정렬의 왼쪽, 오른쪽의 상한 및 하한은 선택된 요소의 parent에 의해 결정된다.

 

 

 

Color

 

Color에 대한 자세한 설명에 앞서, 먼저 짚고 넘어가야 할 것이 있다. Color는 다음과 같은 두 가지 디자인적 양상을 띤다.

 

• Foreground color

• Background color

Foreground color는 각 요소가 드러내는 색깔을 의미한다. 예를 들어, 어떤 게시글의 제목이 초록색을 띤다면, foreground color 가 green으로 설정된 것이다.

 

반대로, 어떤 게시글의 배경색이 노란색을 띈다면, background color 가 yellow로 설정된 것이다.

 

CSS에서는 이 두 가지 디자인적 측면을 다음과 같은 property를 사용하여 지정할 수 있다.

• color - 요소의 foreground color를 지정한다

• background-color - 요소의 background color를 지정한다

h1 {
  color: green;			// 글자 색은 초록색
  background-color: yellow;	// 배경 색은 노란색
}

결과: 초록글씨노란배경

위의 코드는 <h1> 태그들이 글자색은 초록색을, 배경색은 노란색을 띄게 만든다.

 

 

 

Opacity

 

Opacity는 요소의 투명도를 지정하는 property이다. 0부터 1 사이의 값을 value로 가지며, 0에 가까울수록 투명해지고, 1이 되면 완전히 visible 하게 된다.

 

Opacity는 overlay effect를 만드는데 효과적으로 사용된다. Opacity를 조절하기 위해 다음과 같이 코드를 작성할 수 있다.

.overlay {
  opacity: 0.5;
}

결과: 투명한글씨

위 예제는 overlay 클래스를 보유한 요소들이 50% 정도로 visible 하게 만든다.

 

 

 

Background Image

 

CSS는 요소의 배경을 바꿔주는 기능을 제공하는데, 그중 한 가지 방법은 배경 이미지를 변경해주는 것이다. background-image property를 활용한 방법은 다음과 같다.

.img-banner {
  background-image: url("https://cms-assets.tutsplus.com/uploads/users/127/posts/31341/image/1_10.png");
}

결과: 파인애플배경

Background-image property는 요소의 배경 이미지를 지정할 수 있다. 위의 예제에선 URL이 주어졌는데, URL의 값으로는 외부 사이트 혹은 내부 파일 경로가 될 수 있다. 만약 내부 파일 경로로 지정해준다면 반드시 상대 경로를 사용해야 한다. 

 

 

 

지금까지 CSS에서 사용하는 기본적인 Visual Rule 들에 대해 간단히 알아보았다. 이들은 가장 기본이 되는 것들이니 잘 기억해 두도록 하자. 다음 글에서는 CSS Box Model에 대해 살펴보도록 하자.