[ifp_html_css_study] Orange

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;
}