-
반응형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'프론트엔드 > CSS' 카테고리의 다른 글
input date 캘린더 꾸미는법 #date #calendar #캘린더 #input (0) 2023.07.20 html css 여러줄 말줄임 처리 (0) 2023.02.02 SVG background로 넣기 (0) 2022.01.24 02. 글자 꾸미기 (0) 2020.09.02