HTML, CSS로 간단한 웹 사이트를 만들어보자.
(1) 환경설정
1) vscode 설치
2) 확장키 선택
3) korean 언어팩 설치
4) Prettier 설치
5) material theme 설치
6) material icon theme 설치
7) 설치한 요소들에 대한 설정
- command + shift + p 입력
- settings.json [enter]
- "editor.formatOnSave": true,
"editor.showUnused":true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
입력
- command + s 로 저장
(2) HTML, CSS 파일 생성
1) index.html, index.css 파일 생성
2) 화면 분할하기
3) 어떻게 짤지 구상해보기
- 생각 생각 생각
4) 소스 짜보기(기본구성)
<!DOCTYPE html><!--index.html--> <html lang="ko"> <head> <meta charset="UTF-8" /> </head> <body></body> </html>
*{ /*index.css*/ margin:0; padding:0; }
5) 소스 짜보기(HTML)
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="index.css" /> <title>Hello Market</title> </head> <body> <div id="header"> <p id="icon"></p> <div id="header-area"> <img src="images/esc-icon.jpeg" /> </div> </div> <div id="body"> <div id="banner"> <img src="images/esc.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"> <div class="product-card"> <div><img class="product-img" src="images/soju.png" /></div> <div class="product-contents"> <span class="product-name"> 소주 </span> <span class="product-price"> 4000원 </span> <div class="product-seller"> <img class="product-avatar" src="images/esc-icon.jpeg" /> <span>충희</span> </div> </div> </div> </div> </div> <div id="footer"></div> </body> </html>
(6)소스 짜보기(CSS)
* { margin: 0; padding: 0; } header { height: 64px; display: flex; justify-content: center; border-bottom: 1px solid gray; } #body { height: 100%; width: 1024px; margin: 0 auto; padding-bottom: 24px; } #footer { height: 200px; background-color: red; } #banner { height: 300px; background-color: yellow; } #header-area { width: 1024px; height: 100%; display: flex; align-items: center; } #header-area > img { width: 128px; height: 36px; } #banner > img { width: 100%; height: 300px; } #body > h1 { margin-top: 16px; } #product-list { display: flex; flex-wrap: wrap; margin-top: 12px; } .product-card { width: 100px; height: 300px; background-color: gray; margin-right: 12px; margin-bottom: 12px; border: 1px solid rgb(230, 230, 230); border-radius: 12px; } .product-contents { display: flex; flex-direction: column; padding: 8px; } .product-name { font-size: 14px; } .product-price { font-size: 16px; font-weight: 600; } .product-seller { display: flex; align-items: center; margin-top: 12px; } .product-avatar { width: 24px; }
(3)완성
- 조잡한(?)사이트 완성
응애