웹코딩은 기본 메모장으로도 할 수 있지만,
요새 가장 많이 쓰는 Vscode로 .css 파일을 만들어 봅시다.
1. Vscode 다운로드 사이트로 이동해서 다운받습니다.
https://code.visualstudio.com/download
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.
code.visualstudio.com
2. 상단의 File > New File 을 클릭해봅시다.
3. style.css 이라 타이핑하고 바탕화면에 저장합시다.
*이름은 바꿔도 되는데, 확장자명(.css)은 바꾸지 맙시다
4. 바탕화면에 style이라는 이름의 파일이 생성된걸 확인해봅시다.
더블클릭하면 VsCode가 켜질거에요.
*아이콘은 컴퓨터마다 다를수 있습니다.
5. style.css파일을 vscode로 키고 아래 코드를 작성해봅시다.
/* style.css */
body {
background: orange;
}
6. index.html 파일을 만들어서, style.css파일을 연결해줍니다.
*index.html과 style.css를 같은 폴더에 두세요.(같은 바탕화면, 같은 폴더)
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="./style.css" rel="stylesheet" />
</head>
<body>
</body>
</html>
이제 .css 파일을 작성하기 위한 준비는 끝났습니다.
Css를 작성한다는 것은, 이 css 파일을 규칙에 맞게 글을 써내려간다고 할 수 있습니다.
웹사이트를 편리하게 만들 수 있는 웹프로그램을 만들었습니다. 한번 구경해보세요.
https://zabefofoon.github.io/mm-guide/
로또 번호 생성기도 만들었습니다. 한번 구경해보세요.
https://zabefofoon.github.io/simple-lotto/?lotto=lottoKoea
'Coding > Css' 카테고리의 다른 글
| Css 단위 알아보기(px, %, vw, vh, etc) (58) | 2024.01.01 |
|---|---|
| 주요 Css 속성(Property) 알아보기 (68) | 2023.12.28 |
| Css Selector(선택자)알아보기 with id(이름), class(별명) (88) | 2023.12.27 |
| Css 란? (73) | 2023.12.26 |
