이미지 보기

[CSS] CSS 주요 속성

21.07.06 작성

22.02.07 수정

읽는 데 4분

CSS의 여러 속성들

CSS의 여러 속성들을 알아보자.

witdth와 height

HTML 태그는 배경색의 기본값이 투명이라 공간의 파악이 어렵다.
때문에 background-color 속성을 이용해 배경색을 설정해보자.

*html 파일

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>속성 예제 1</title>
    <link ref="stylesheet" href="CSS문서명.css" />
  </head>

  <body>
    <div class="place"></div>
  </body>
</html>

* css 파일 .place {
  width: 500px;
  height: 500px;
  background-color: yellow;
}

font- 속성

*html 파일

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>font 속성</title>
    <link ref="stylesheet" href="CSS문서명.css" />
  </head>

  <body>
    <p class="font">Hello World</p>
  </body>
</html>

* css 파일 .font {
  font-size: 50px;
  font-family: Arial, Times, sans-serif;
  font-style: italic;
  font-weight: bold;
}

font-size : 글자 크기 지정. px(픽셀) 단위를 가장 많이 사용
font-family : 글꼴 지정. 브라우저마다 지원하는 글꼴이 달라 여러 개 입력
sans-serif 글꼴은 거의 모든 브라우저에서 지원하므로 font-family의 마지막 값으로 지정하는 것이 좋다.
font-style : 글자 모양 지정.

normal : 기본 글꼴
italic : 이탤릭 모양
oblique : 글꼴을 비스듬하게

font-weight : 글자 굵기 지정.

lighter : 얇게
normal : 보통
bold : 굵게
bolder : 더 굵게
100, 200,..., 800, 900 : 숫자가 클수록 굵어진다.
(※ 400은 normal, 700은 bold)

background 속성

배경색을 지정하거나 이미지 삽입, 이미지 위치 변경 시 사용

*html 파일

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>background 속성</title>
    <link ref="stylesheet" href="CSS문서명.css" />
  </head>

  <body>
    <div class="background"></div>
  </body>
</html>

* css 파일 .background {
  width: 500px;
  height: 500px;
  background-color: yellow;
  background-image: url(ABC.png);
  background-repeat: no-repeat;
  background-position: left;
}

background-repeat 속성은 삽입된 배경 이미지의 반복 효과

repeat : x축/y축 모두 반복 효과
repeat-x : x축으로 반복 효과 적용
repeat-y : y축으로 반복 효과 적용
no-repeat : 반복효과 적용 X

background-position 속성은 이미지의 좌푯값 지정.
영어표현인 top, left, bottom, right, center 또는
구체적인 좌푯값을 넣을 수 있다.

* css 파일 .background {
  /* x축으로 40px, y축으로 100px 이동 */
  background-postion: 40px 100px;
}

이 모든 걸 한 줄로 줄일 수도 있을까?

* css 파일 .background {
  background: yellow url(ABC.png) no-repeat left;
}

코드를 한 줄로 줄이면 CSS 문서 용량이 줄어 웹 사이트 로딩 속도가 빨라진다.

FE Developer 박승훈

노력하는 자는 즐기는 자를 이길 수 없다

Github

[CSS] CSS 주요 속성

TOC

CSS의 여러 속성들

witdth와 height

font- 속성

background 속성