잇뉴얼 (IT_Manual)

[CSS] CSS 작성방법 (인라인 스타일, 내부 스타일 시트, 외부 스타일 시트) 본문

Coding/CSS

[CSS] CSS 작성방법 (인라인 스타일, 내부 스타일 시트, 외부 스타일 시트)

잇뉴얼 2022. 6. 3. 13:39
728x90
반응형

[CSS] CSS 작성방법 (인라인 스타일, 내부 스타일 시트, 외부 스타일 시트)

▶ 인라인 스타일
<p style="color:red;">인라인 스타일</p>
<p style="color:red; font-size: 20px;">인라인 스타일</p>

'인라인 스타일'은 태그안에 CSS코드를 바로 작성할수 있습니다. 태그안에 style="CSS코드;"를 작성하면되며, CSS 여러코드를 적용하길 원하신다면, 'style = "CSS코드; CSS코드;" 형식으로 코드가 끝나는곳에 세미콜론 ';'을 작성하시고 추가로 작성하시면 됩니다.

▶ 내부 스타일 시트

 

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>인라인 스타일</p>
</body>

코드 내부에 <style>이라는 태그를 작성해준 다음, <style>태그안에 CSS를 작성하는 방식입니다. CSS 작성방법은 다음과 같습니다.

코드 작성 방법 설명
태그명 { CSS 코드 } 해당되는 태그 전부 CSS 코드 적용
#id명 { CSS 코드 } id가 작성되어있는 태그에만 CSS 적용
.class명 { CSS 코드 } class가 작성되어있는 태그에만 CSS 적용 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            color: green;
        }
        #id_tag {
            font-size: 20px;
        }
        .class_tag {
            color: black;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>일반 p태그</p>
    <p id="id_tag">id가 적용된 p태그</p>
    <p class="class_tag">class가 적용된 p태그</p>
</body>

코드를 보면, <p>태그인 모든 태그에 글자색이 'green'으로 적용이 되었으며, 'id'가 적용된 <p>태그에만 'font-size'가 '20px'적용된 모습을 확인할 수 있습니다. 그리고 마지막으로 'class'가 적용된 <p>태그에만 'font-size : 20px','color:black'으로 적용되었는데요. 앞에서 p태그에 글자색을 'green'으로 적용했지만, 이걸 무시하고, 글자색이 'black'으로 적용된 모습을 확인할 수 있습니다.

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

CSS코드가 HTML 내부에 있는것이 아닌, 별도의 CSS파일을 생성해 그 안에 작성을 해준 다음, 해당 HTML에 코드를 불러오는 방식입니다. CSS 코드 작성방법은 '내부 스타일 시트'와 똑같은 방법으로 작성을 해주시면 됩니다.

반응형
Comments