dukDukz

2021.03.09 경일 홈페이지 앞 부분 안보고 작성해보기 본문

웹 개발/HTML 과 CSS

2021.03.09 경일 홈페이지 앞 부분 안보고 작성해보기

헤일리_HJ 2021. 3. 9. 12:19

1. 안보고 다시 작성해보는 연습!

<!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_ex.css">
</head>
<body>
    <div id="wrap">
        <div id="header">
            <h1 id="logo"><a href="#"><img src="./img/logo.png" alt="로고"></a></h1>

            <div id="menu">
                <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>

html 작성까지는 ok.. css연결하는 문법 정확히 익히기

 

 

 

*{margin: 0; padding: 0;}

ul, li{
    list-style: none;
}

#wrap{
    width: 100%;
}

#header{
    width: 1200px;
    float: left;
}

#logo{
    width: 80px;
    margin-top: 20px;
}

#menu>ul>li{
    float: right;
}

#menu>ul>li>a{
    margin-right: 20px;
}

정렬하는 문제!!

심지어 float: right; 했는데 글자가 54321 순으로 정렬됨

 

 

 

 

*{margin: 0; padding: 0;}

ul, li{
    list-style: none;
}

#wrap{
    width: 100%;
}

#header{
    width: 1200px;
    float: left;
}

#logo{
    width: 80px;
    margin-top: 20px;
    display: inline-block;
    float: left;        /*float 효과 준 값만!*/
}

#menu{
    display: inline-block;
    float: right;
}

#menu>ul>li{
    /*float: left;   /*글자 순서 = li 순서  right 하면 거꾸로 정렬*/
    display: inline-block;
    padding: 40px 0;
    width: 120px;
}


/*
    float: left;
    display: inline-block;

    span은 크기조절 x
    div는 크기조절 o



    **과제
    헤더 부분을 반복해서 혼자 만들어보는 연습 - 검색해서라도 완성해보기

*/

 

 

/*중요한 것*/

#header{
    width: 1100px;		//전체 크기
    margin: 0 auto;		// 가운데 정렬
    height: 110px;
}

#logo
{
	width: 200px;
    height:100px;			// 이걸 안해주면 밑에 div들이 logo 옆에 붙어있음!
    float: left;			// 왼쪽으로 붙여줌
    display: inline-block;
    padding-top: 20px;
}

#menu{
    float: right;		//오른쪽으로 붙여줌
    width: 750px;		//width를 크게 할 수록 전체 1000px
}

#menu>ul>li{
    float: left;		 	// 일렬로 된 메뉴를 가로로 붙여줌
    padding-right: 60px;	// 중간 중간에 간격을 띄워줌
    padding-top: 50px;
}

#menu>ul>li>a{
    font-weight: bold;
    color: rgb(30, 30, 92);
    font-size: 19px;
    text-decoration: none;
}

#menu>ul>li>a:hover{
    text-decoration: underline;
}

'웹 개발 > HTML 과 CSS' 카테고리의 다른 글

2021.03.16 회색 네모 박스 위치 조정  (0) 2021.03.16
2021.03.15 경일 아카데미 홈페이지 만들기  (0) 2021.03.15
2021.03.11 경일 홈페이지_공동 코드 작성  (0) 2021.03.11
2021.03.10 경일 홈페이지_ 뒷 부분 까지 작성 / 새로운 CSS  (0) 2021.03.10
2021.03.08 경일 홈페이지 앞 부분 작성  (0) 2021.03.08
'웹 개발/HTML 과 CSS' Related Articles more