css 선언방법

웹개발/부스트코스(웹프로그래밍) / / 2018. 12. 14. 21:23
반응형
CSS 선언방법

CSS의 구성


1
2
3
span {
  color : red;
  }
cs
  • span : selector(선택자)
  • color : property
  • red : value


style을 HTML페이지에 적용하는 3가지 방법


1. inline

HTML태그 안에다가 적용합니다.

다른 CSS파일에 적용한 것 보다 가장 먼저 적용합니다.


1
<p style="border:1px solid gray;color:red;font-size:2em;">​
cs

 

2. internal

style 태그로 지정합니다.

구조와 스타일이 섞이게 되므로 유지보수가 어렵습니다.

별도의 CSS파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
    <style>
    p  {
      font-size : 2em;
    border    :1px solid gray;
    color : red;
    }
    </style>
</head>
 
<body>
    <div>...</div>
</body>​
cs

3. external

외부파일(.css)로 지정하는 방식입니다.

CSS 코드가 아주 짧지 않다면 가급적 이 방법으로 구현하는 것이 가장 좋습니다.

현업에서는 여러개의 CSS 파일로 분리하고 이를 합쳐서 서비스에서 사용하기도 합니다.

internal 코드와 같은 css코드를 구현하고, style.css와 같은 별도 파일로 만듭니다. 

이후에 아래처럼 link태그로 추가하면 됩니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div>
            <p>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </p>
        </div>
    </body>
</html>​​
cs




4. 우선순위 

inline은 별도의 우선순위를 갖지만, internal 과 external은 우선순위가 동등합니다. 따라서 겹치는 선언이 있을 경우 나중에 선언된 속성이 반영됩니다.


반응형

'웹개발 > 부스트코스(웹프로그래밍)' 카테고리의 다른 글

CSS Selector  (0) 2018.12.15
HTML  (0) 2018.12.14
Class와 id 속성  (0) 2018.12.14
HTML 구조설계  (0) 2018.12.14
HTML 레이아웃 태그(Layout tag)  (0) 2018.12.14
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기
웹개발/부스트코스(웹프로그래밍) 관련 글
글 더보기

티스토리툴바