HTML CSS 적용 방법 예제

HTML에서 글과 배경에 또는 사이트 전체를 디자인 하기 위해서는 CSS를 사용합니다.

CSS를 HTML에서 사용 하는 방법을 알아보겠습니다.

 

CSS로 페이지를 꾸며 보기

웹 사이트가 검은색 글씨로만 되어있다면 허전해 보이기도 합니다.

이번에는 CSS를 작성해서 페이지를 꾸며 보도록 하겠습니다.

기본적으로 CSS 코드는 다른 파일에 작성합니다.

 새로운 파일을 열고 다음과 같이 작성합니다.

@charset "UTF-8";

 

이번에도 [UTF-8]로 지정합니다.

CSS 파일은 제일 처음 @기호로 작성합니다.

@charset "UTF-8";
h1 {  }

 

CSS에서 요소를 지정하고, 그 요소에 스타일을 적용해 갑니다.

우선은 h1 요소를 꾸며 가도록 하겠습니다.

요소 뒤에 { 와 }로 감싼 부분에 꾸미고 싶은 내용을 작성합니다.

@charset "UTF-8"; 
h1 {
    color : #cc0033;
}

 

color로 문자의 색을 변경하는 것이 가능합니다.

색을 정할 때는 앞에 #을 붙여서 16진수로 지정합니다.

색 코드는 별도로 기억해 둘 필요는 없고 다음과 같은 사이트에서 찾거나 Photoshop에서 복사하거나 하면 됩니다.

 

컬러 사이트

HTML 컬러 코드
HTML 컬러 코드 웹사이트에서는 홈페이지 제작 시 HTML 컬러를 찾아 볼 수 있는 무료 컬러 툴 기능을 제공해 드리고 있습니다. 최고의 툴 HTML 컬러 차트 및 HTML 컬러 픽커를 사용하면 컬러 선택이 아주 쉽고 간편합니다.
html-color-codes.info

 

흰색(#ffffff)과 검은색(#000000)은 자주 사용하기 때문에 기억해 두면 좋습니다.

#fff와 #000은 생략 가능하면 대문자로도 괜찮습니다.

요소명 { 	프로퍼티명 : 값; 	프로퍼티명 : 값; }

 

요소명에 요소를 지정합니다.

CSS는 프로퍼티명 다음에 콜론(:), 그리고 값을 적습니다.

세미콜론(;)으로 구분해서 나열합니다.

참고로 

요소명 {프로퍼티명 : 값;프로퍼티명 : 값;프로퍼티명 : 값;}

 

이처럼 개행을 안 하고 작성해도 문제없이 표시는 됩니다.

하지만 한 줄로 계속해서 작성하게 되면 작성한 내용을 확인하기가 불편합니다.

개행을 넣어주는 것이 작성한 내용을 확인하기 쉽기 때문에 넣어주도록 합니다.

 

CSS를 HTML에 적용하기

CSS를 HTML에 적용해 보도록 하겠습니다.

좀 전에 작성한 파일을 [style.css]라는 이름으로 저장합니다.

저장 장소는 HTML과 같은 [test] 폴더로 하겠습니다.

메모장을 사용하는 경우에는 문자 코드를 [UTF-8]로 지정합니다.

HTML 파일의 head 안에 방금 작성한 CSS를 읽어오기 위한 코드를 넣어줍니다.

<!DOCTYPE html>
<html lang="kr">
  <head>
    <meta charset="UTF-8">
    <title>테스트</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>웹 사이트</h1>
    <p>
        이 웹 사이트는 테스트를 위한 사이트입니다.
        테스트 내용을 작성해주세요.
        다음과 같이 작성 했습니다.
    </p>
    <!-- 나중에 삭제 예정  -->
  </body>
</html>
@charset "UTF-8";
h1 { 	color : #cc0033; 	font-size : 24px; }

 

html 파일을 저장하고 브라우저를 갱신(F5 또는 Ctrl + R) 해보겠습니다. 

어떤가요? 제목 색깔이 변한 것이 보이나요?

 

표시 예

 

그러면 CSS 파일에 스타일을 계속해서 추가해 보도록 하겠습니다.

@charset "UTF-8";
h1 {
    color : #cc0033;
    font-size : 24px;
}
p {
   color: #666;
   font-size : 18px;
}

 

표시 예

 

font-size로 문자 크기를 변경할 수 있습니다.

CSS로 사용되는 사이즈 단위에는  

  •    px
  •    em
  •    rem
  •   %

 가 있습니다. 여기에서는 px(픽셀)만을 사용하도록 하겠습니다.

 다음은 텍스트의 일부부만 스타일을 적용해 보도록 하겠습니다.

<!DOCTYPE html>
<html lang="kr"> 
  <head>
    <meta charset="UTF-8">
    <title>테스트</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>웹 사이트</h1>
    <p>
       이 <span>웹 사이트</span>는 테스트를 위한 사이트입니다.
       테스트 내용을 작성해주세요.
       다음과 같이 작성 했습니다.
    </p>
    <!-- 나중에 삭제 예정  -->
  </body>
</html>
@charset "UTF-8"; 
h1 {
    color : #cc0033;
    font-size : 24px;
}
p {
   color: #666;
   font-size : 18px;
}
span{
    font-weight : bold;
}

 

<span> 태그를 사용하면 텍스트의 일부분만 스타일을 적용할 수 있습니다.

font-weight에 bold를 지정해 문자를 굵게 표시합니다.

이것으로 내용의 [웹 사이트]만 굵게 표시됩니다.

 

표시 예

댓글