HTML / CSS - 4 (2021.03.09)

<!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="Assignment1.css">
</head>

<body>
    <div id="wrap">
        <div id=header>
            <h1 id="logo">
                <a href="#"><img src="image/logo.png"></a>
            </h1>
            <div id ="gnb">
                <ul>
                    <li><a href="#">학교소개</a></li>
                    <li><a href="#">교육과정</a></li>
                    <li><a href="#">취업현황</a></li>
                    <li><a href="#">커리큘럼</a></li>
                    <li><a href="#">상담신청</a></li>
                </ul>
            </div>
        </div>
    </div>

</body>

</html>

*{  margin: 0;
    padding: 0;
}

ul,li{
    list-style: none;
}

#wrap{ 
    margin-top: 30px;
}

#header{
    width: 1200px;
    height: 102px;
    
    margin: 0 auto;
    
}

#logo{ 
    float: left;
    width: 176px;
    height: 62px;
    margin-top: 20px;
    
    
}

#gnb{ 
    
    width: 900px;
    height: 102px;
    float:right;
}

#gnb>ul>li{ 
    float: left; 
    color: #004385;
    font-weight: bold;
    font-size: 19px;
    padding: 40px 0;
    width: 180px;
    height: 21px;

}

★어려웠던 부분. 1

처음 작성할 때에 wrap에 margin 0 auto를 주었는데 header가 모두 왼쪽에 몰려있었다.

wrap을 중앙으로 정렬되도록 했으니 header와 같은 wrap의 하위 요소 또한 가운데로 정렬되어야 한다고 생각하여 한참 헤맸다. header가 계속 왼쪽으로 쏠려 있어서 그림을 한번 그려봤다.

생각해보니 이 margin은 경계선 안쪽의 콘텐츠가 아니라 경계선 바깥쪽에 관한 명령이다. 경계선을 기준으로 외부에 얼마만큼의 여백을 줄 것인지를 정하는 것이다. wrap은 눈에는 보이지 않지만 나름 중앙에 정렬되어 있던 것이다. wrap이 사이즈도 없고, 안에 들어있는 게 헤더뿐이어서 눈치채는데 오래 걸렸다.

header에 margin 0 auto; 를 주니 해결되었다.

그다음에는 header 안에 있는 logo와 gnb를 배치했다. 각각 float: left; float: right; 를 사용해서 해더 양쪽 끝에 붙였다.

gnb 안에 있는 ul, li는 float: left를 사용하여 gnb 안에서 왼쪽으로 붙어 있게 해 주었다.

대충 와꾸는 잡았다.

★어려웠던 부분. 2

ul li 텍스트에 밑줄을 없애는 명령이 기억이 안 났다..

a{  
    text-decoration: none; /*기본적으로 텍스트에 장식을 하지 않겠다는 의미*/
}

a:hover{ /*hover는 마우스 커서를 올렸을 때 효과를 주겠다는 것을 의미 */
   text-decoration: underline; /*즉 마우스 커서를 올렸을 때 텍스트에 밑줄을 주겠다는 것.*/
}

★어려웠던 부분. 3

main 1과 방금 수행한 assignment1의 차이점은 display: inline=block의 사용 여부다.

인라인과 블록에 대해 다시 한번 더 정리해보면 다음과 같다.

*인라인 엘리먼트

:인라인, 인 라인, in-line, 한 줄에서 계속 진행된다.

:줄 바꿈이 없이 한 줄 내에서 왼쪽에서 오른쪽으로 배치된다.

:넓이 지정이 어렵다.

:대표적으로 <span>

*블록 엘리먼트

:하나의 엘리먼트가 해당 행을 전부 통째로 차지하여 블록을 형성.

:위에서 아래로 배치된다.

:대표적으로 <p>, <div>

그러면 display:inline-block은 뭘까?

아마 블록 엘리먼트를 인라인 엘리먼트처럼 사용해주기 위해 사용하는 명령인 듯하다. 이 명령을 사용하면 인라인처럼 한 줄 안에서 왼쪽에서 오른쪽으로 배치되면서, 인라인에서는 힘들었던 넓이 조정이 가능해진다.

테스트를 해보면

span inline

한 줄 안에서 왼쪽에서 오른쪽으로 배치되며 자리가 없으면 다음 줄로 밀린다. 크기 조절이 진짜 안될지 궁금해서 width, height값을 주었지만 변화가 없어서 결국 폰트 사이즈를 키워서 봤다.

div block

div display:inline-block

div에 display:inline-block을 적용하니까 inline으로 작성할 때와 같이 나타났다. 하지만 inline과 다르게 width와 height를 조절할 수 있다.

float : left; 요소를 왼쪽(벽)에 붙이겠다.

첫 번째 요소는 float: right, 나머지는 float:left;

a, e, h, k는 display:inline-block; c, g, i, l, m, n은 float: left; b, d, f, j는 float:right;

728x90

'HTML_CSS' 카테고리의 다른 글

HTML / CSS - 6 (2021.03.11) (1)	2021.03.11
HTML / CSS - 5 (2021.03.10) (0)	2021.03.10
HTML/CSS -3 (2021.03.08) (0)	2021.03.08
html/css 과제 - 회원가입 화면 css적용. (2021.03.07) (0)	2021.03.05
HTML - 2 (2021.03.05) (0)	2021.03.05

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/09 »
일	월	화	수	목	금	토
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

글 보관함

GPD2021

티스토리 뷰