728x90
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8" />
<title>스즈몰</title>
<link rel="stylesheet" href=".idea/index.css" />
</head>
<body>
<header>어서오세요! 스즈몰입니다 :)</header>
<div class="container">
<nav>
<h4>오늘의 특가 상품</h4>
<ul>
<li>Apple Watch</li>
<li>Mac</li>
<li>iPhone</li>
<li>iPad</li>
</ul>
</nav>
<main>
<h1>특가 구매 놓치지마세요!!</h1>
<p>...</p>
</main>
<aside>
<h4>광고배너란</h4>
<p>...</p>
</aside>
</div>
<footer>
<ul>
<li>개인정보 처리방침</li>
<li>이용 약관</li>
<li>법적 고지</li>
</ul>
</footer>
</body>
</html>웹사이트 스즈몰의 HTML 코드
link
<link rel="stylesheet" href=".idea/index.css" />link 문법을 통해 index.css라는 css파일과 연결할 수 있다.
link에서 rel은 현재문서와 외부 리소스 간의 연간관계를 명시하며, stylesheet는 속성값으로 stylesheet로 사용할 외부 리소스 값을 불러온다는 뜻이다.
body {
margin: 0;
padding: 0;
background: #fff;
color: #4a4a4a;
}
header, footer {
font-size: large;
text-align: center;
padding: 1em 0;
background-color: orange;
color: #f9f9f9;
}
nav {
background: #FF6C9C ;
main {
background: #f9f9f9;
}
aside {
background: #eee;
}웹사이트 스즈몰의 CSS 코드
HTML에 CSS 스타일을 적용하는 방법 3가지
외부 스타일 시트
외부의 스타일 시트를 따로 만들어 link 문법으로 연결시키는 방법(위의 link 설명 참고)
내부 스타일 시트
CSS 파일을 별도로 만들지 않고, HTML의 Style 태그에 직접 추가하는 방법
<style>
h1 {
color : red;
}
</style>
인라인 스타일
HTML 내의 같은 줄에 스타일을 바로 적용하는 방법
<nav style="background : red; color : white">...내용...<nav>728x90
'[FrontEnd] > CSS' 카테고리의 다른 글
| Flexbox (0) | 2022.08.24 |
|---|---|
| 페이지 레이아웃 (0) | 2022.08.24 |
| CSS 박스 모델 (0) | 2022.08.23 |
| CSS의 셀렉터 정리 (0) | 2022.08.23 |
| CSS란? (0) | 2022.08.23 |
