Webi Blog

웹아이에서 운영되고 있는 블로그입니다.

Web/CSS

CSS의 기초_두번째 (CSS 어디에 쓰지?)

웹아이 2018. 7. 6. 19:13




안녕하세요.

웹아이입니다 :D


스타일의 기본형태

선택자 {속성:값}


p {color:blue;}


여기서 보면

p가 선택자(selector) / color가 속성(attribute) / blue가 속성값(value)

이 되는것입니다.

쉽게 말해 p를 선택해서 color속성에 blue값을 줘라!! 가 되는거에요


한가지 선택자에 여러가지 속성을 적용할 경우,

h2 { font-size:20px; color:purple; }

위와 같이

세미콜론(;)으로 구분하여 나열하면 되요~




그러면 스타일정보를 어디에 기록해두나요?

스타일은 내부스타일시트와 외부스타일시트로 사용할 수 있습니다.

(물론 지난 시간에 말씀드렸듯이 태그 안에 직접 사용도 가능하지만 권장하지 않습니다. )



내부스타일시트

문서안에서 head안에 써 넣는 것입니다. 

(꼭 head안에 넣지 않아도 작동은 합니다;; 권장사항입니다.)

<head>

    <meta charset="utf-8">

    <title>제목</title>

    <style>

        p {color:blue;}

        h2 {

            font-size:20px;

            color:purple;

        }

    </style>

</head>



외부스타일시트

외부스타일시트는 문서안에 있는 스타일정보를

별도의 파일로 저장하는 것인데,

내부스타일시트에서 <style>,</style>태그를 제외하고 그 사이의 내용만 복사해서

확장자를 .css로 저장합니다.

그리고 웹문서에서는 <link>태그를 사용해 스타일 시트를 연결합니다.

<link href="외부 스타일시트 파일 경로" rel="stylesheet" type="text/css">

이것을 <head>태그안에



<head>

    <meta charset="utf-8">

    <title>제목</title>

    <link href="style.css" rel="stylesheet" type="text/css"></link>

</head>


이해가 되셨나요??

잘 안되신다구요??

그렇다면 댓글로 남겨주세요. 함께 해결해 보아요!!

반응형