Dog foot print

[ css ] css를 적용 하는 방법 본문

CSS

[ css ] css를 적용 하는 방법

개 발자국 2019. 7. 4. 00:10

html 에 css를 연결하는 적용 방법으로는 3가지가 있다. 

 

어트리뷰트를 사용하기

 

 

<div style="border : 1px solid green;"></div>

 

 

<div style="border : 1px solid green; width: 100px; height: 100px;"></div>

 

html 에 style 태그 작성하기 

태그에 일일히 어트리뷰트를 작성하여 스타일을 적용시키는 것은 굉장히 불편하다. 그렇기에 html은 style태그를 제공하여 html 내부에 css문법을 사용할 수 있게 한다. 

 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            color: black;
            border: 1px solid gray;
            width:  100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>

 

head 내부에 style 태그를 작성하고 태그 내부에 css 문법에 맞게 작성하면 된다. 

 

외부 css 파일을 링크 시키기 

html에 style태그를 열고 css를 작성하면 html의 코드가 굉장히 길어지고 한 곳에 css가 몰려있어 굉장히 보기 불편하다. 

 

그렇기에 외부에서 css파일을 작성한 후 html에 링크태그를 사용하여 사용할 수 있다. 

 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
        <link rel="stylesheet" href="./test.css">
</head>

 

 

div{
    color: gray;
    width: 100px;
    height: 100px;
}

 

 

반응형

'CSS' 카테고리의 다른 글

[css]반응형 웹을 만들기 위한 media-query  (0) 2019.07.08
[css] 세로 중앙에 아이템 배치하기  (0) 2019.07.07
[css] flex-box  (1) 2019.07.06
[css] box의 구성 padding 과 margin .  (0) 2019.07.05
[css] width 와 height 단위  (0) 2019.07.03
'CSS' Related Articles more
Comments