[포트폴리오 페이지]_1단계 html, css 구성_ feat(Spring)

2022. 3. 2. 13:09ㆍ[Spring]_/[Spring]_포트폴리오 페이지 만들기

728x90
반응형

목표]

header 부분]

좌측 : 아이콘

중앙 : 이름

우측 : auth 기능

 

body 부분]

좌측 : global nav menu bar

우측 상단 : tab 메뉴

우측 하단 : content

 

사용한 html]

<body>
<div id="container">
    <header class="header">
        <div class="imgcontainer">
            <img src="/assets/img/logo.jpg" class="header_image"/>
        </div>
        <h2 class="header_text">
            이름
        </h2>
        <div class="header_login">
            <div class="login-form">
                <div class="login-form-input">
                    <input type="text" name="email" class="text-field" placeholder="아이디">
                    <input type="password" name="password" class="text-field" placeholder="비밀번호">
                </div>
                <div class="login-form-submit">
                    <input type="submit" value="로그인" class="submit-btn">
                </div>
            </div>

        </div>
    </header>

    <div class="gnb">
        <ul class="sidebar_menu">
            <li><a href="javascript:void(0)" id="menu1">menu1</a></li>
            <li><a href="javascript:void(0)" id="menu2">menu2</a></li>
            <li><a href="javascript:void(0)" id="menu3">menu3</a></li>
        </ul>

    </div>
    <div class="main">
        <div class="tab_bar">
            <ul id="tabmenu">

            </ul>
        </div>
        <div id="main_content">
            <div id="content">

            </div>
        </div>
    </div>

</div>
</body>

사용한 css]

.header_text {
    float: left;
    margin-left: 60px;
    margin-top: 60px;
}

.header {
    background-color: #EEEFF1;
    position: relative;
    box-sizing: border-box;
    padding: 0 30px 0 26px;
    height: 150px;
    overflow: hidden;
}

.imgcontainer {
    float: left;
    width: 180px;
    margin-top: 10px;

}

.imgcontainer img {
    border-radius: 65%;
    width: 130px;
    height: 130px;
    text-align: center;


}

.header_login {
    position: absolute;
    left: 1350px;
    float: right;
}


.gnb {
    width: 150px;
    padding: 0px;
    position: fixed;
    margin-left: 10px;
    height: 700px;
}

sidebar_menu a {
    background-color: #FF6347;
    color: white;
}

sidebar_menu a:hover:not(.current) {
    background-color: #CD853F;
    color: white;
}

.sidebar_menu {
    list-style-type: none;
    width: 150px;
    height: 100%;
    padding: 0px;

    border: solid 1px black;
}

.sidebar_menu li {
    border-bottom: solid 1px black;
}

.sidebar_menu li:last-child {
    /*border-bottom: none;*/
}

.sidebar_menu a {
    display: block;
    color: #000000;
    padding: 8px;
    text-align: center;
    text-decoration: none;
    font-width: bold;
}

.sidebar_menu a:hover {
    background-color: #CD853F;
    color: white;
}

* {
    box-sizing: border-box;
    font-family: 'Noto Sans KR', sans-serif;
    border-radius: 5px;
}

.login-form {
    display: flex;
    margin-top: 11px;
    width: 300px;
    padding: 20px;
    text-align: center;
    border: none;

}

.text-field {
    font-size: 14px;
    padding: 10px;
    border: none;
    margin-bottom: 10px;

}

.submit-btn {
    font-size: 14px;
    border: none;
    padding: 10px;
    width: 100px;
    background-color: #1BBC9B;
    color: white;
    height: 90px;
}

.login-form-input {
    flex: 2;
}

.login-form-submit {
    flex: 1;
    width: 50px;
    margin-left: 10px;
    float: right;
}


.main {
    margin-left: 170px;
}

#tabmenu{
    background-color: #d8dde5;
    margin-top: 10px;
    height: 50px;
    margin-bottom: 0px;
    padding-top: 13px;
    padding-left: 0px;
}
#tabmenu li{
    display: inline-block;
    margin-left: 10px;
    width: 150px;
    height: 40px;
    /*padding-top: 5px;*/
}
a{
    text-decoration: none;
    color: black;
}
.tab-menu-click{
    display: inline-block;
    width: 150px;
    background-color: white;
    height: 40px;

}
.tabmenulist{
    /*padding-top: 5px;*/
}
.tabmenulist input{
    float: right;
    text-align: center;
    padding: 2px 2px 2px 2px;
    margin-top: 4px;
    margin-right: 5px;
}
.tabmenulist a{
    float: left;
    padding-top: 5px;
    padding-left: 5px;
}

css 설명

 

margin 이나 padding은 기본적인 내용이니 간단하게 설명

margin은 해당 영역을 기준으로(태두리) 얼만큼 간격을 두는지 설정

padding은 해당 영역을 기준으로(태두리) 내부 콘텐츠를 얼만큼 간격을 두는지 설정

 

position: relative;

요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신 을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다.

 

overflow: hidden;

컨텐츠가 넘칠 경우 잘라서 보여줍니다 -> 다른 요소에 영향을 주지 않도록 하기 위함.

 

float: left;

컨테이너 -> 해당 요소를 감싸는 div 를 기준으로 위치를 지정할때 사용합니다. left,right 두종류를 사용하였습니다.

 

border-radius: 65%;

이미지를 원형으로 보이기 위해 사용하였습니다.

 

list-style-type: none;

ul 목록의 기본인 점을 삭제하기 위해 사용하였습니다.

 

display: flex;

로그인 div 안에서 input 박스영역과 로그인 버튼의 width비율을 지정하기 위해 사용하였습니다.

 

.sidebar_menu a:hover {
    background-color: #CD853F;
    color: white;
}

지정한 a 태그의 위에 마우스가 hover 되었을때 작동하는 css입니다. 배경을 주황색으로 바꾸게 되고 글씨를 흰색으로 바꿉니다.

 

이렇게 뼈대를 만들어 보았습니다.

감사합니다.

728x90
반응형

'[Spring]_ > [Spring]_포트폴리오 페이지 만들기' 카테고리의 다른 글

[포트폴리오 페이지]_7단계_회원가입 구현(feat.oracle)  (0) 2022.03.31
[포트폴리오 페이지]_5단계_db에 데이터 집어넣기  (0) 2022.03.10
[포트폴리오 페이지]_4단계 Spring 생태계 이해  (0) 2022.03.10
[포트폴리오 페이지]_3단계 DB연결 (feat. oracle)  (0) 2022.03.10
[포트폴리오 페이지]_2단계 TAB구성_ feat(Spring)  (0) 2022.03.02

관련글

티스토리툴바