티스토리 뷰

CSS

CSS 기초문법

오이연우오 2022. 1. 20. 18:27

CSS란?

CSS(Cascading Style Sheets)은 HTML을 꾸며주는 디자인 언어입니다.

사용예시

<style>
*{
    padding: 0;
    margin: 0;
}

body {
    background-color: #E5E5E5;
}
#wrap {
    width: 1200px;
    margin: 0 auto;
}
#wrap #header {
    width: 1200px;
    height: 100px;
    background-color: #BDE3F9;
}
#wrap #nav {
    width: 1200px;
    display: flex;
}
#wrap #nav .leftnav {
    width: 600px;
    height: 100px;
    background-color: #94D2F6;
}
#wrap #nav .rightnav{
    width: 600px;
    height: 100px;
    background-color: #90B9CE;
}
#wrap #content {
    width: 1200px;
    background-color: #5AB3F0;
    display: flex;
}
#wrap #content .aside{
    width: 290px;
    height: 520px;
    background-color: #70C0F2;
}
#wrap #content .article .article1{
    width: 910px;
    height: 260px;
    background-color: #5AB3F0;
}
#wrap #content .article .article2{
    width: 910px;
    height: 260px;
    background-color: #4BA6EE;
}
#wrap .articlebottom{
    width: 1200px;
    height: 260px;
    background-color: #4599DF;
}
#wrap #footer {
    width: 1200px;
    height: 100px;
    background-color: #3B86CB;
}
</style>

결과화면

 

CSS 주석 표시

주석 표시는 프로그램에 영향을 미치지 않으며, 설명이나 메모를 목적으로 사용합니다.

{/* CSS 주석 */}

CSS 선언 방법

HTML 문서에 스타일을 선언하는 방법은 여러가지가 있습니다.

내부 스타일

내부 스타일 : head 태그 안에 설정하는 방법입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>타이틀</title>
    <!-- 내부 스타일 -->
    <style>
        h1 {color: #fff}
    </style>
</head>

외부 스타일

외부 스타일 : 외부 파일을 연결하는 방법입니다.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>타이틀</title>
        
        <!-- 외부 스타일 -->
        <link href="경로" rel="stylesheet">
    </head>

인라인 스타일

인라인 스타일 : 요소에 직접 설정하는 방법입니다.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>타이틀</title>
        
    </head>
    <body>
        <!-- 내부 스타일 -->
        <h1 style="color: #fff"></h1>
    </body>
    </html>

'CSS' 카테고리의 다른 글

CSS - float  (0) 2022.02.07
CSS - 선택자 연습  (0) 2022.02.04
CSS - 선택자(selector)  (0) 2022.01.26
CSS - 단위와 색상  (0) 2022.01.25
CSS - inline과 block 속성  (0) 2022.01.25

UP NEXT : CSS

댓글
© 2018 webstoryboy