catbook C:haevivin Front-end Developer

2. CSS 기본 구조

May 12, 2022 » CSS

기본 문법

  • 기본 구조
선택자 {
    속성: 값;
    속성: 값;
}


  • 선택자 (Selector) : 속성과 값을 적용할 대상 선택
...
<div>CodeLion</div>
...
div {
    color: yellow;
}


  • 속성과 값 (Property and Value) : 선택된 대상에 CSS 문법 적용
<div>CodeLion</div>
div {
    color: yellow;
    font-size: 20px;
    font-weight: bold;
}




선언 방식

  • 인라인 방식 (in-line) : HTML 요소의 ‘style’ 속성에 직접 작성하는 방식
<div style="color:yellow;">CodeLion</div>


  • 내장 방식 (embedded) : HTML ‘style’ 태그 안에 작성하는 방식, head 태그 범위 안
<head>
    <style>
        div {
            color: yellow;
        }
    </style>
</head>
<body>
    <div>CodeLion</div>
</body>


  • 링크 방식 (link) : HTML ‘link’ 태그를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식 ✨권장✨
<head>
    <link rel="stylesheet" href="main.css(css 문서)">
</head>
<body>
    <div>CodeLion</div>
</body>
div {
    color: yellow;
}


  • @import 방식 : CSS @import를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식
<head>
    <link rel="stylesheet" href="main1.css">
</head>
<body>
    <div>CodeLion</div>
</body>
/* main.css */
@import url("main2.css");
/* main2.css */
div {
    color: yellow;
}
  • 3번 링크 태그 방식은 한꺼번에 호출하면 거의 동시에 호출되는데 (병렬 - 시간이 빠름), @import는 1개가 도착하면 다른 걸 호출하고 도착하면 또 다른 걸 호출하는 방식이다. (직렬 - 시간이 느림)
  • @import는 만약 2번째를 호출하기 전에 1번째가 미리 세팅 되어야 할 때 유용하다.