TIL(today I learned)

2020.09.21 #TIL

노랑세희 2020. 9. 22. 01:36

 오늘은 줄간격과 여백을 중점적으로 공부할 수 있는 사이트맵을 만들었다. line-height와 padding, margin으로 여백을 줄 수 있는데 상황에 따라 다르게 적용한다. 어떤 상황에 어떤 명령어를 사용하는지 이해가 어려웠는데 아래 예제를 풀고 나니 좀 더 명확하게 알 수 있었다. 다만 아래 예제를 풀기 위해 3번 정도 전체 CSS를 갈아엎었다.. 하지만 마지막에 원하는 결과를 얻고나서 너무 뿌듯했다. 여백관련 부분은 좀 더 많은 예시를 따라 만들어야겠다.

 

1. Sitemap

HTML

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="sitemap2.css">

    <link rel="stylesheet" href="default.css">

    <title>sitemap</title>

</head>

 

<body>

    <div class="sitemap">

        <div>

            <h2>Service</h2>

            <ul>

                <li>

                    <a href="#a">Professional Service</a>

                    <ul>

                        <li><a href="#a">Design Thinking</a></li>

                        <li><a href="#a">Strategy & Plansning</a>

                            <ul>

                                <li><a href="#a">IT Strategy / Operation<br>Consulting</a></li>

                                <li><a href="#a">Enterprise Solution<br>Implementation Consulting</a></li>

                                <li><a href="#a">SAP Implementation</a></li>

                                <li><a href="#a">SAP Upgrade</a></li>

                                <li><a href="#a">SAP Migration</a></li>

                            </ul>

                        </li>

                    </ul>

                </li>

                <li><a href="#a">Solutions</a>

                    <ul>

                        <li><a href="#a">Enterprise Application</a></li>

                        <li><a href="#a">Side-by-Side Extention</a></li>

                        <li><a href="#a">System Implementation</a></li>

                    </ul>

                </li>

                <li><a href="#a">Managed Service</a>

                    <ul>

                        <li><a href="#a">Cloud Service</a>

                            <ul>

                                <li><a href="#a">Amazon Web Service</a></li>

                                <li><a href="#a">Microsoft Azure</a></li>

                                <li><a href="#a">SAP HEC</a></li>

                            </ul>

                        </li>

                        <li><a href="#a">Appication Managed Service</a></li>

                        <li><a href="#a">Infrastructure Managed<br>Service</a></li>

                        <li><a href="#a">Education Support</a></li>

                    </ul>

                </li>

            </ul>

        </div>

    </div>

</body>

 

</html>

 * html 자체는 크게 어렵지 않았음. 다만 3dep으로 들어가는 구조를 처음 만들어봐서 조금 헷갈렸음

 * 각 li는 링크가 연결되어야하기 때문에 <a>를 넣어야함

 

 

CSS

.sitemap div{

    padding: 50px;

}

.sitemap div h2{

    font-size: 18px;

    color: #c2c1bf;

    line-height: 100%;

    padding: 0 0 7px;

    transition: color .5s;

}

.sitemap div:hover h2{

    color: #f8510f;

}

.sitemap div *{

    font-size: 13px;

    color: #55524d;

    transition: color .5s;

}

.sitemap div:hover *{

    color: #c2c1bf;

}

.sitemap div > ul> li {

    padding: 27px 0 0;

}

.sitemap div > ul> li:hover >a {

    color: #f8510f;

}

.sitemap div > ul> li> ul{

    padding: 18px 0 0;

}

.sitemap div > ul> li> ul> li{

    line-height: 14px;

    padding: 4px 0 6px 20px;

    border-left: 1px solid #3c3933;

    position: relative;

}

.sitemap div > ul> li> ul> li:hover >a{

    color: #f8510f;

}

.sitemap div > ul> li> ul> li:before{

    content: "";

    width: 1px; height: 100%;

    background: #f8510f;

    opacity: 0;

    transition: opacity .5s;

    position: absolute; left:-1px; top:0;

}

.sitemap div > ul> li> ul> li:hover:before{

    content: "";

    width: 1px; height: 100%;

    background: #f8510f;

    opacity: 1;

    position: absolute; left:-1px; top:0;

}

.sitemap div > ul> li> ul> li> ul{

    padding: 18px 0 0;

}

.sitemap div > ul> li> ul> li> ul> li{

    line-height: 15px;

    padding: 0 0 7px 20px;

    border-left: 1px solid #3c3933;

    position: relative;

}

.sitemap div > ul> li> ul> li> ul> li:hover:before{

    content: "";

    width: 1px; height: 100%;

    background: #f8510f;

    position: absolute; left:-1px; top:0;

}

.sitemap div > ul> li> ul> li> ul> li a{

    font-size: 8px;

}

.sitemap div > ul> li> ul> li> ul> li a:hover{

    color:#f8510f;

}

 

 * 각 단계별 스타일을 주기 위해서는 부모-자식 선택자를 연속해서 선택해야 추후에 디자인 주기 용이함

 * 복잡한 구조를 디자인할 때는 위에서 아래로 진행하지 말고 1dep 마다 디자인을 마무리하면서 깊이를 들어가는 것이 더 쉬움

 * 여백을 줄 때는 줄간격과 패딩, 마진이 중복되지 않게끔 유의하기

 * .sitemap div > ul> li> ul> li:hover >a 이 선택자는 2dep의 li가 hover되면 li안에 a가 디자인이 들어감

 * border를 중복으로 같은 부분에 적용할 수 없기 때문에 색상이 바뀌는 부분은 :before로 만든 뒤 position으로 올려주어야 함

 * 사소한 부분에서의 차이를 파악하기 어렵기 때문에 매번 CSS입력 후 제대로 적용되는지 꼼꼼히 볼 것!

 

 

결과

 

 

 

2. 로그인창 만들기

 

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="login(html4).css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>login-html 4</title>

</head>

<body>

    <form action="" method="">

        <fieldset >

            <legend class="hide">로그인</legend>

            <div class="login">

                <ul class="top">

                    <li><label for="txt1">아이디</label><input type="text" id="txt1"></li>

                    <li><label for="txt2">비밀번호</label><input type="password" id="txt2"></li>

                    <li class="btn"><a href="#a">로그인</a></li>

                    <li class="save"><input type="checkbox" id="chk1"><label for="chk1">ID 저장</label></li>

                </ul>

                <ul class="btm">

                    <li>아이디를 잊으셨나요?<a href="#a">아이디 찾기</a></li>

                    <li>비밀번호를를 잊으셨나요?<a href="#a">비밀번호 찾기</a></li>

                </ul>

            </div>

        </fieldset>

    </form>

</body>

</html>

 * html 5로 만들었을때는 table 안에 input넣고 만들었는데 이번에는 html 4로 업로드 된 영상이여서 ul-li로 만들었음

 * 다만 box-sizing같은 익숙한 요소는 임의적으로 사용함

 

 

CSS

body{

    padding: 50px;

}

fieldset{

    border: none;

}

.hide{

    position: absolute; left: -3000%;

}

.login ul{

    padding: 0;

}

.login li{

    list-style: none;

}

.login .top li{

    padding: 0 0 9px;  

}

.login .top li label{ 

    font-size: 12px;

    font-family: dotum;

    font-weight: bold;

    display: inline-block;

    width: 62px;

}

.login .top input[type="text"],

.login .top input[type="password"]{

    border: 1px solid #d9d9d9; 

    width: 146px; height: 31px;

    padding: 0;

    box-sizing: border-box;

}

.login .top{

    position: relative;

    width: 328px;

}

.login .top li.btn{

    padding: 0px;

}

.login .top li a{

    position: absolute; right: 0; top: 0;

    display: inline-block;

    width: 111px; height: 69px;

    background: #849b35;

    border: 1px solid #798f30;

    box-sizing: border-box;

    font-size: 12px;

    color: #ffffff;

    font-weight: bold;

    text-align: center;

    line-height: 69px;

    text-decoration: none;

}

.login .top li.save{

    padding: 0 0 0 57px;

}

.login .top li.save label{

    font-weight: normal;

    width: auto;

}

 

.login .btm{

    padding: 17px 0 0 58px;

}

.login .btm li{

    font-size: 12px; 

    color: #383d41;

    padding: 0 0 12px 8px;

    position: relative;

}

.login .btm li:before{

    display: inline-block;

    content:"";

    width: 2px;

    height: 2px;

    background: #383d41;

    position: absolute; left: 0; top: 6px;

}

.login .btm li a{

    color: #849b35;

    font-size: 12px;

    font-weight: bold;

    margin: 0 0 0 12px;

    line-height: 100%;

}

 * 로그인 버튼 부분은 <a>를 display: inline-block; 로 가로세로 사이즈를 주고 position: absolute; right: 0; top: 0;로 input 옆에(ul.top 내 오른쪽) 붙였음

 * 선생님은 dot을 이미지로 넣었는데 나는 :before로 만들어봤음

 

 

결과