프론트엔드/CSS

01. CSS

짱구를왜말려? 2020. 9. 1. 19:49
반응형
SMALL

# What? 이게 뭔데?

Cascading Style Sheets의 약자로, html 문서를 꾸밀 때 사용함.

 

# How? 어떻게 쓰는데?

<!DOCTYPE html> <!-- 이 문서가 HTML5 문서라는 뜻 -->
<html lang="ko"> <!-- 웹 문서의 시작 --> 
<head> <!-- 웹 문서에 대한 정보를 담는 태그 -->
    <meta charset="UTF-8"> <!-- 문자 인코딩을 UTF-8로 하라는 뜻 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 초기엔 1배율로 페이지를 보여주라는 뜻 -->
    <title>Document</title> <!-- 문서 제목 -->
    <link rel="stylesheet" href="./style.css"> <!-- css를 연결하는 태그 -->
    <script src="./common.js"></script> <!-- js를 연결하는 태그 -->
</head>
<body>
    <header>
        헤더 영역
        <nav>
            <a href="#">메뉴1</a>
            <a href="#">메뉴2</a>
            <a href="#">메뉴3</a>
        </nav>
    </header>

    <div id="container">
        내용 영역
    </div>

    <footer>
        푸터 영역
    </footer>
</body>
</html>

1. css 파일 만들기

@ style.css

/* 태그 자체를 선택해서 꾸미고 싶을 때(아래처럼 쓰면 모든 p 태그에 green색이 적용됨 */
p {color:green;}

/* text라는 class를 가진 태그를 꾸미고 싶을 때 */
.text {color:red;}

/* text라는 id를 가진 태그를 꾸미고 싶을 때 */
#text {color:blue;}

 

2. html 파일에 연결하기

<!DOCTYPE html> <!-- 이 문서가 HTML5 문서라는 뜻 -->
<html lang="ko"> <!-- 웹 문서의 시작 --> 
<head> <!-- 웹 문서에 대한 정보를 담는 태그 -->
    <meta charset="UTF-8"> <!-- 문자 인코딩을 UTF-8로 하라는 뜻 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 초기엔 1배율로 페이지를 보여주라는 뜻 -->
    <title>Document</title> <!-- 문서 제목 -->
    <link rel="stylesheet" href="./style.css"> <!-- css를 연결하는 태그 -->
    <script src="./common.js"></script> <!-- js를 연결하는 태그 -->
</head>
<body>
    <p>일반 태그</p>
    <p class="text">class명이 text</p>
    <p id="text">id명이 text</p>
</body>
</html>

 

* 코드 참고 : https://github.com/ShinHyungJune/publishing-course/tree/css-01-init

LIST