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


  • 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;
}

*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)


  • 배경색을 지정하거나 이미지 삽입, 이미지 위치 변경 시 사용
*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 문서 용량이 줄어 웹 사이트 로딩 속도가 빨라진다.