티스토리 뷰

HTML_CSS

HTML/CSS -3 (2021.03.08)

LHOIKTN 2021. 3. 8. 12:52

main.css
0.00MB
main.html
0.00MB

<!DOCTYPE html>
<html lang="en">

<head>
    
    <meta charset="UTF-8">
    
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div id = "wrap"> 
        <div id = "header"> 
            <h1 class ="logo">
                <a href=#>
                    <img src = "./image/logo.png">
                </a>
            </h1>
            <div class = "gnb">
            <ul>
                <li><a herf = #>학교소개</a></li>
                <li><a herf = #>교육과정</a></li>
                <li><a herf = #>취업정보</a></li>
                <li><a herf = #>커뮤니티</a></li>
                <li><a herf = #>상담신청</a></li>
            </ul>
        </div>
        </div>
        <div id = "container">
            <div id = "visual">
                main flash
            </div>
            <div id = "contents">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>
        </div>
        <div id = "footer"> 
            copyright &copy; All reserved
        </div>
    </div>

</body>

</html>

 

*{margin: 0;padding: 0;}
#wrap { 
    width: 100%;
}
ul,li{list-style: none;}

#header{ 
    width: 1000px;
    margin: 0 auto;
    height: 106px;
    
    
}

a{  
    text-decoration: none;
    color:#004385;
}

a:hover{
   text-decoration: underline;    
}

.logo{
    margin-top: 20px;
    display: inline-block;
}
.gnb{
    float: right;
} 
.gnb>ul>li{ 
    float: left;
    display:inline-block;
    padding: 40px 0;
    width: 120px;
}
.gnb>ul>li>a{
    font-size: 19px;
    color:#004385;
    font-weight: bold;
}
#container{
    width: 1000px;
    margin: 0 auto;
    background: cyan;
}
#footer{
    width: 1000px;
    margin: 0 auto;
    background: yellowgreen;
    
}

●인라인과 블록의 차이 정리 

 

+)인라인 스타일은  CSS가 잘 안 적용됨. 넓이가 지정이 안됨. 

 

●margin: 0 auto; 

→ 위아래 마진은 0, 양옆 마진은 자동으로 

 

●padding 오개념 정리 

→가로 100, 세로 100 크기의 박스에 패딩을 10주면 박스 안으로 파고 들어가는 줄 알았음.  가로 90 세로 90  

   그게 아니라 패딩이 추가되어 가로 110, 세로 110 이 되는 거임. 

 

●<link rel = "stylesheet" href = "main.css"> 

→  html  과 scc 연결 

 

●.gnb>ul>li>a{

    font-size: 19px;

    color:#004385;

    font-weight: bold;

}                                                →  히위 요소에 접근할 때 > 를 사용.     (-> 가 아님.) 

 

 

●<img src="image/logo.png">   이미지 첨부하는 방법. 

 

♥이해 안되는 부분 

 float,  inline-block  

 

 

728x90

'HTML_CSS' 카테고리의 다른 글

HTML / CSS - 5 (2021.03.10)  (0) 2021.03.10
HTML / CSS - 4 (2021.03.09)  (0) 2021.03.10
html/css 과제 - 회원가입 화면 css적용. (2021.03.07)  (0) 2021.03.05
HTML - 2 (2021.03.05)  (0) 2021.03.05
HTML - 1 (2021.03.05)  (0) 2021.03.05
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함