CSS3로 웹 페이지 스타일링하기 - 2

키워드(Keyword)

- W3C에서 미리 정의한 단어

- 키워드를 스타일 값으로 지정하면 키워드에 해당하는 스타일이 자동으로 적용

- 예: 색상 키워드

 

url

- 이미지, 글꼴 파일 등 네트워크상에 있는 리소스를 불러올 때 사용

...
<style>
  body {
  background-image: url('Landscape.jpg');
  }
</style>
...

 

크기

- CSS3에서 가장 많이 사용하게 되는 단위
- %, em, px, cm, mm, inch 등 종류도 다양
- 글꼴, 위치, 크기 등을 지정할 때 널리 사용

 

px 단위

- 브라우저의 기본 font-size 속성은 16px이며 절대값으로 지정

<style>
  li:nth-child(1) {}
  li:nth-child(2) { font-size: 16px; }
  li:nth-child(3) { font-size: 24px; }
  li:nth-child(4) { font-size: 32px; }
</style>

 

색상

키워드로 지정하기 : CSS3 색상 키워드를 이용

<color> - CSS: Cascading Style Sheets | MDN (mozilla.org)

- CSS: Cascading Style Sheets | MDN

Red, Green, Blue 색상의 조합
- alpha 값은 0.0(완전 투명) ~ 1.0(완전 불투명)

형태	설명
rgb(red, green, blue)	red, green, blue 색상을 조합
rgba(red, green, blue, alpha)	red, green, blue 색상을 조합, alpha로 투명도 조정
#000000	16진수 표기법. red, green, blue 각각 2자리를 차지

 

rgb, rgba, HEX 코드를 이용한 색상의 변경

<style>
  div#rgb {
  	background-color: rgb(255, 127, 0);
  }
  div#rgba {
  	background-color: rgba(255, 127, 0, 0.5);
  }
  div#hex {
  	background-color: #FF7F00;
  }
</style>
...
<div id="rgb">Using RGB</div>
<div id="rgba">Using RGBA</div>
<div id="hex">Using HEX</div>

 

글자

font-family 속성 : 글꼴을 지정하는 속성
- 한 단어로 된 글꼴은 따옴표를 사용하지 않지만, 두 단어 이상의 글꼴 이름은 따옴표 사용을 추천
- 사용자의 환경에 따라 개발시 사용한 글꼴이 사용자의 컴퓨터에 설치되어 있지 않을 가능성
     -> 복수 개의 글꼴(비슷한 형태의 글꼴)을 콤마(,)를 이용하여 명시(대체 글꼴)
- 다양한 사용자의 글꼴 상황을 개발자가 알 수 없으므로 font-family 속성의 맨 마지막에는 대부분의 컴퓨터에 탑재되어 있는 일반 글꼴(generic-family) 글꼴을 명시

font-size 속성 : 글꼴의 크기
- 브라우저의 기본 글꼴 크기는 16px
- 크기 단위(px, em, %) 혹은 키워드(small, medium, large 등)로 지정 가능

font-style 속성 : 글꼴의 기울기 조정
- normal, italic, oblique 등의 키워드

font-weight 속성 : 글꼴의 두께
- 수치로 입력 : 400 = 일반 글자의 두께로 출력, 700 = 두껍게 출력. 두께를 지원하지 않는 글꼴은 지정할 수 없음
- 키워드로 입력 : normal, lighter, bold, bolder 등

text-align 속성 : 글자의 정렬을 지정
- 키워드로 입력 : left, right, center 등

text-decoration 속성 : 선으로 글자를 꾸미는 속성
- 키워드로 입력 : none, line-through, underline, overline 등

 

 

CSS3 박스 모델

웹 문서를 이루는 요소들은 페이지에 배치될 때 박스 형태의 구조를 이름
- 박스 모델을 잘 이해해야 요소들을 원하는 위치에 적절하게 배치할 수 있음

padding 영역 : 요소의 콘텐트와 테두리 사이의 영역 (내부 공간 지정)
margin 영역 : 요소의 테두리와 외부 요소 사이의 영역 (외부 공간 지정)

전체 너비 = width + 2 * (margin + border + padding)
전체 높이 = width + 2 * (margin + border + padding)

 

margin, padding

margin, padding에 값을 1개 입력할 경우
- 4방향 모두 적용

<style>
div {
  background-color: red;
  padding: 20px;
  margin: 20px;
  text-align: center;
}
</style>

특정 방향의 margin과 padding 지정

접미어	설명
-left	왼쪽
-right	오른쪽
-top	위
-bottom	아래

border

border : 테두리를 결정하는 속성
- border를 결정하는 기본 스타일 3가지

속성	설명
border-width	테두리 두께
border-style	테두리 형태
border-color	테두리 색상

border-width, border-style, border-color 속성을 한꺼번에 입력할 수 있음

<style>
  div.box {
    border: 5px dashed yellow;
  }
</style>

border-radius : 모서리를 둥글게 만드는 스타일

<style>
  img.round { border-radius: 20px; }
</style>
...
<img class="round" src="Penguins.jpg">

모서리별 다른 둥글기를 적용할 수 있음

<style>
  img.round {
  border-radius: 10px 20px 30px 40px;
}
</style>

 

display

-  HTML 요소가 공간을 점유하는 방식을 결정 (HTML 공간 분할 태그 항목 참조)

display 속성의 키워드

키워드	설명
none	요소를 화면에서 감추기
block	요소를 블록 형식으로 표시
inline	요소를 인라인 형식으로 표시
inline-block	요소를 인라인 블록으로 표시

inline vs inline-block

	inline	inline-block
width, height 속성	X	O
margin 속성	좌우만 적용	상하좌우 적용

display vs visibility

- display는 공간 점유 방식을 결정하는 속성
- visibility는 시각적으로 표시 여부를 결정하는 속성 (visible, hidde

background

배경을 지정하는 CSS 속성

속성	설명
background-image	배경 이미지 지정
background-size	배경 이미지의 크기 지정
background-repeat	배경 이미지의 무한 반복 형태 지정
background-attachment	배경 이미지의 부착 형태 지정
background-position	배경 이미지의 위치 지정
background-color	배경 이미지의 색상 지정

<style>
  body {
  background-image: url("Landscape.jpg");
  }
</style>

 

 

- background-size : 배경 이미지의 크기

<style>
  body {
    background-image: url("image/Landscape.jpg");
    background-size: 100%;
  }
</style>

background-repeat : 배경 이미지 반복 설정 (기본값 : repeat)

<style>
  body {
    background-image: url("image/Landscape.jpg");
    background-repeat: no-repeat;
  }
</style>

repeat-x, repeat-y로 값을 설정하면 x축 방향, y축 방향으로의 반복 여부만 지정도 가능

<style>
  body {
    background-image: url("image/Landscape.jpg");
    background-repeat: repeat-y;
  }
</style>

 

background-position

배경 이미지가 표시될 이미지의 위치

<style>
  body {
    background-image: url("image/Landscape.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom;
  }
</style>

background: 배경 관련 속성을 일괄 지정

<style>
  body {
    background: url("image/Landscape.jpg") bottom / 100% no-repeat fixed lightgray;
  }
</style>

위치(position) 속성

웹 프론트엔드 개발시 요소의 위치를 결정
- 절대 위치 좌표 : 요소의 x 좌표와 y 좌표를 설정, 절대 위치를 지정
- 상대 위치 좌표 : 요소를 입력한 순서 혹은 요소의 포함 관계에 의해 위치가 지정
- 기본적으로 웹 브라우저는 상대 위치 좌표로 요소의 위치를 결정, 렌더링.

 

position 속성 : HTML 요소의 위치 설정 방법을 변경하는 속성

키워드	설명
static	상대 위치/좌표 설정
relative	초기 위치에서 상하좌우로 이동
absolute	절대 위치/좌표 설정
fixed	화면을 기준으로 절대 위치/좌표 설정

absolute 좌표계

- left
- top
- right
- bottom

<style>
  .box {
    width: 100px; height: 100px;
    position: absolute;
  }
  .box:nth-child(1) {
    background-color: red;
    left: 10px; top: 10px;
  }
  .box:nth-child(2) {
    background-color: green;
    left: 50px; top: 50px;
  }
  .box:nth-child(3) {
    background-color: blue;
    left: 100px; top: 100px;
  }
</style>
...
<div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

absolute 좌표계 설정 팁

 

 

 

- 자손의 position 속성에 absolute 키워드를 적용하려면 조상 요소에 height 속성을 부여
- 자손의 position 속성에 absolute 키워드를 적용하려면 조상의 position 속성에 relative 키워드를 적용

<style>
  .container {
    position: relative;
    border: 2px solid;
    margin-top: 30px;
    height: 100px;
  }
  .box {
    width: 100px; height: 100px;
    position: absolute;
  }
</style>
...
  <div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

overflow 속성 : 내부의 요소가 조상의 범위를 벗어날 때 처리하는 방법을 지정

- hidden : 조상 영역을 벗어나는 부분 감춤

- scroll : 조상 영역을 벗어나는 부분 스크롤 처리

 

float 속성

- '부유'라는 의미로 박스 모델을 물에 띄워 보낸다는 의미
- 현대 웹 프론트엔드 작업에서는 레이아웃을 잡을 때 유용하게 사용

키워드	설명
left	요소를 띄워 왼쪽으로 보내기
right	요소를 띄워 오른쪽으로 보내기

이미지와 본문이 자연스럽게 녹아 드는 레이아웃 구성 예제