★ 무조건 외우기 ★

★ reset.css ★

*{margin: 0; padding: 0;}
li {list-style: none;}
a {color: #333; text-decoration: none;}

★ style.css ★

@charset "UTF-8";

 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 

링크 연결하는 방법 두가지

1. html에 연결하기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zinus</title>
    ★ <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/reset.css"> ★
</head>
<body>
    
</body>
</html>

 

2. css 안에 다른 css 불러오기

@charset "UTF-8";
★ @import url(reset.css);
@import url(font.css); ★

 

 

기본 틀

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zinus</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/reset.css">
</head>
<body>
    <header></header>

    <div id="hero"></div>

    <div class="section_box">
        <section id="section1"></section>
        <section id="section2"></section>
        <section id="section3"></section>
    </div>
</body>
</html>
@charset "UTF-8";
@import url(reset.css);
@import url(font.css);

header {}

#hero {}

#section_box{}

#section1 {}
#section2 {}
#section3 {}

footer {}

 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 

header 만들기 

 

 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zinus</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/reset.css">
</head>

<body>
    <header>
        <nav>
            <ul class="gnb">
                <li><a href="">SHOP</a></li>
                <li><a href="">SERVICE</a></li>
                <li><a href="">BRAND</a></li>
                <li><a href="">STORE</a></li>

            </ul>
        </nav>

        <h1> <a href="#"><img src="images/logo.png" alt=""></a></h1>

        <div class="login_box">
            <div class="login">
                <a href="#">SEARCH</a>
                <a href="#">LOGIN</a>
            </div>
            <div class="logout"></div>
                <a href="#">SEARCH</a>
                <a href="#">LOGOUT</a>
        </div>
    </header>

    <div id ="hero"></div>

    <div class="section_box">
        <section id="section1"></section>
        <section id="section2"></section>
        <section id="section3"></section>
    </div>
</body>
</html>
@charset "UTF-8";
@import url(reset.css);
@import url(font.css);

header {max-width: 1650px; height: 104px; position: absolute; width: 100%; 
       ★ left: 50% ; transform: translateX(-50%); ★ → 사각형 중앙으로 옮겨줌.
       top: 30px; border: 1px solid #000;}

#hero {background: pink; height: 100vh;}

#section_box{}

#section1 {}
#section2 {}
#section3 {}

footer {}
reset.css

*{margin: 0; padding: 0;}
li {list-style: none;}
a {color: #333; text-decoration: none;}

html, body {height: 100%;}
img {vertical-align: top;}

 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 

 

 
@charset "UTF-8";
@import url(reset.css);
@import url(font.css);

header {border: 1px solid #000;  max-width: 1650px; height: 104px; position: absolute; width: 100%; 
       left: 50% ; transform: translateX(-50%); top: 30px; 
       ★ display: flex; justify-content: space-between; ★ → 정렬되게}

#hero {background: pink; height: 100vh;}

#section_box{}

#section1 {}
#section2 {}
#section3 {}

footer {}

 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 

 

 
 
저기가 더 큰 이유..? : 쌤이 알아보라고 했는데... 나중에 알아볼 예정. 
 
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
 
 

 

 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 

 

nav, logo, loginbox의 크기가 각각 달라서, align-items:center;를 줘서 아래처럼 만들기!

 

@charset "UTF-8";
@import url(reset.css);
@import url(font.css);

header {border: 1px solid #000;  max-width: 1650px; height: 104px; position: absolute; width: 100%; 
       left: 50% ; transform: translateX(-50%); top: 30px; display: flex; justify-content: space-between; 
        ★ align-items: center; ★ → 중앙으로 정렬}

header nav {border: 1px solid blue;}
header nav .gnb {display: flex;border: 1px solid yellow;}
header nav .gnb li {font-size: 22px; border: 1px solid #000;}
header nav .gnb li a {color: #1E3622; border: 1px solid red; padding: 10px 34px; display: block;}

header h1 {position: absolute; left: 50%; transform: translateX(-50%);}

#hero {background: pink; height: 100vh;}

#section_box{}

#section1 {}
#section2 {}
#section3 {}

footer {}

 

 

 
 

 

'web design' 카테고리의 다른 글

05.06 - html 연습하기  (0) 2026.05.30
05.01 - holo (팀플)  (0) 2026.05.30
04.30 - holo (팀플)  (0) 2026.05.30
04.30 - cresto (개인)  (0) 2026.05.30
04.29 - holo (팀플)  (0) 2026.05.30