Web Frontend/HTML_CSS
[ifp_html_css_study] Orange
홍유진
2022. 6. 2. 03:08
Visual Studio Code 확장 프로그램 설치
- Korean Language Pack for Visual Studio Code
- Live Server
- Material Icon Theme
- Material Theme
- Prettier - Code formatter
- Color Highlight
- Bracket Pair Colorizer
- IntelliSense for CSS class names in HTML
- Visual Studio IntelliCode
- Auto Rename Tag
- HTML Snippets
Orange
[HTML만 완성]
[소스 코드]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="orange.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruit</title>
<style>
body {
background-image: url(images/orange-bg.jpg);
}
</style>
</head>
<body>
<div>
<img src = 'images/orange.png'>
<h1>Orange</h1>
<ul>
<li><a href = "orange.html" target = "_blank">Orange</a></li>
<li><a href = "kiwi.html" target = "_blank">Kiwi</a></li>
<li><a href = "strawberry.html" target = "_blank">Strawberry</a></li>
</ul>
</div>
</body>
</html>
[태그, 속성]
- div : 사이트의 레이아웃(전체적인 틀)을 만들 때 주로 사용
- h : 구획 제목 요소 h1이 가장 높고 h6은 가장 낮다
- ol : 순서가 있는
- ul : 검정 동그라미 (순서가 없는 리스트)
- li : 리스트를 달겠다
- 속성 = target = "_blank” : 현재 브라우저에서 열림
[최종]
div {
background-color: white;
width: 400px;
padding: 30px;
/*margin-left:auto;
margin-right:auto;
margin-top:130px; */
margin: 150px auto;
/* 상하 좌우
margin: 130px auto 130px;
상 좌우 하
margin: 130px auto 130px auto;
상 우 하 좌 */
border: 10px orange solid;
border-radius: 30px;
}
h1 {
color: orange;
width: 120px;
margin: 20px auto;
border-bottom: 5px orange solid;
}
ul {
width: 100px;
margin: 0 auto;
}
a{
color: black;
text-decoration: none;
}
a:hover {
color: orange;
}