본문 바로가기
Front-End/HTML & CSS

html과 css를 이용하여 웹 화면 구현해보기(2)

by newny 2023. 2. 10.
반응형

[참조사이트] https://dinfree.com/lecture/frontend/122_css_exam.html

Quiz-2) 사이드 메뉴 웹페이지 구조 만들기

고정된 사이드 메뉴를 가지는 간단한 웹페이지 구조를 만드는 것이 목표 입니다. 실행결과를 보고 최대한 동일하게 만들어 보도록 합니다.

  • 사이드 메뉴는 마우스가 올라갈 경우 배경과 글자색이 변경 되도록 해야 합니다.
  • 본문에 학과, 학번, 이름 등을 넣고 작성 합니다.
  • 헤더영역과 사이드메뉴는 고정되어 있고 본문이 스크롤되어 헤더 영역으로 들어갈때 헤더 아래쪽으로 들어가야 함.

✅실행 결과

  • 코딩 시간은 1시간30분정도 걸린것 같다.
  • css 파일을 따로 만들어 사용했다.
  • 이번엔 reset을 사용하여 초기화 후 코딩하였다.
  • header 부분을 상단에 고정하기위해 fixed속성을 사용하였고 main의 내용이 중첩되지 않게 main영역에 padding-top사이즈를 지정해 주었다.
  • sideBox 부분은 처음엔 li태그에 a태그를 넣어서 링크를 걸어서 만들었었는데, a태그 속성이 inline이여서 글자 위치 조정이 힘들고 li태그와 따로 놀았다. 그래서 a태그 안에 li태그를 넣어서 링크와 글자위치, 배경컬러 문제를 해결했다.
  • mainBox 부문은 처음엔 위치 조정에 float를 이용하여 지정했더니 원하는대로 모양이 나오지 않았다. 공부했던 내용을 다시 보면서 position을 absolute로 바꾸어 해결했다.
  • 다 만들고나서 창을 작게 한 후 스크롤 바를 내려보니 mainBox가 header 위로 올라왔다. z-index를 이용하여 해결했다.

 

✅코드

[html]

<!DOCTYPE html>
<html lang="ko">
<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="reset.css">
    <link rel="stylesheet" href="./css-proj2.css">
</head>
<body>

    <header>
        <h1>CSS Quiz-2</h1>
    </header>

    <main>
        <div id="sideBox">
            <ul>
                <a href="#"><li>Home</li></a>
                <a href="#"><li>menu1</li></a>
                <a href="#"><li>menu2</li></a>
                <a href="#"><li>menu3</li></a>
            </ul>
        </div>
        
        <div id="mainBox">
            <div>
                Department: Computer Engineering <br>
                Student Name: hong gil dong <br>
                Student ID: 202300000
            </div>
            
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus 
                imperdiet, nulla et dictum interdum nisi lorem egestas odio, vitae 
                scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultroces nes 
                congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. 
                Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent 
                convallis urna a lacua interdum ut hendrerit risus congue. Nunc sagittis 
                dictum nisi, sed ullamcorper ipsum dignissm ac. In at libero sed Nunc 
                venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida 
                venenatis.Integer fringilla congue eros non fermentum. Sed dapibus 
                pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. <br><br>

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus 
                imperdiet, nulla et dictum interdum nisi lorem egestas odio, vitae 
                scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultroces nes 
                congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. 
                Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent 
                convallis urna a lacua interdum ut hendrerit risus congue. Nunc sagittis 
                dictum nisi, sed ullamcorper ipsum dignissm ac. In at libero sed Nunc 
                venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida 
                venenatis.Integer fringilla congue eros non fermentum. Sed dapibus 
                pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
            </div>
            
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus 
                imperdiet, nulla et dictum interdum nisi lorem egestas odio, vitae 
                scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultroces nes 
                congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
            </div>
        </div>
        
    </main>
    
</body>
</html>

[css]

@charset "UTF-8";

header {
    position: fixed; top: 0px; right: 0; left: 0;
    z-index: 3;
}

header>h1{
    padding: 30px;
    text-align: center;
    font-weight: bolder;
    font-size: 35px;
    background-color: rgb(144, 151, 170);
}

main {
    padding-top: 83px;

}

main>#sideBox {
    margin: 30px 15px;
    float: left;
    z-index: 2;
}

main>#sideBox>ul a {
    text-decoration: none;
}

main>#sideBox>ul a>li {
    padding: 10px;
    width: 130px;
    height: 37.5px;
    background-color: rgb(240, 240, 240);
    color:black;
    font-weight: bold;
    cursor: pointer;
}

main>#sideBox>ul a>li:hover {
    background-color: rgb(190, 190, 190);
    color: rgb(255, 255, 255);
}


main>#mainBox {
    margin: 30px 15px;
    position: absolute; left: 180px;
    z-index: 2;

}

main>#mainBox div {
    font-weight: bold;
    padding: 10px;
    margin-top: 0;
    margin-bottom: 20px;
    background-color: rgb(206, 204, 204);
}
반응형
저작자표시 비영리 변경금지

'Front-End > HTML & CSS' 카테고리의 다른 글

html과 css를 이용하여 웹 화면 구현해보기(3)  (0) 2023.02.24
html과 css를 이용하여 웹 화면 구현해보기(1)  (0) 2023.02.07
CSS(3)  (0) 2023.02.07

관련글

댓글

티스토리툴바