티스토리 뷰

프로그래밍 공부/에이블스쿨

[웹 프로그래밍] 커버 페이지 만들기 실습

sikaro 2024. 5. 8. 16:43
반응형

텍스트 앞의 파비콘 추가

 

shortcut icon에서 url을 찾는다.

혹은 네트워크에서 이미지를 보면 파비콘을 찾아도 된다.

원래의 홈페이지 아이디에 집어넣어서 경로를 결합해서 쓴다.

 

https://www.kt.com/favicon.ico

 

작게 보여줘야 할 때는 작게 보이고, 크게 보여줘야 할 때는 크게 보여준다.

파일 트래픽도 아끼고 속도도 높아진다.

파비콘은 아주 좋은 그림으로 쓴다.

<link rel="icon" href="https://www.kt.com/favicon.ico">

 

헤더

<header>
    <nav>
        <label for=""><b>KT</b></label>
        <!-- ul>(li>a)*3 -->
        <ul>
            <li><a href="" class="active">Home</a></li>
            <li><a href="">Join</a></li>
            <li><a href="">Login</a></li>
        </ul>
    </nav>
</header>

emmet으로 만들어준다.

 

헤더에 들어갈 것들을 넣는다.

class 스타일로 home만 css selector에서 다르게 선택하는 걸로 만들어주기 위해 넣는다.

 

메인

메인은 섹션을 나눠 만든다.

 

 <main class="contents">
     <section class="wrap">
         <h1>Cover Page</h1>
         <p>cover 영어 문자 아무거나</p>
         <button type=""button">Learn More</button>
     </section>
 </main>

버튼을 쓸 떄는 button 타입을 넣는 걸 잊지 않는다.

 

푸터

멘 아래에 나오는 저작권 관련 만드는 부분이다.

 <footer>
     <p>All rights reserved. ©KT</p>
 </footer>

 

 

CSS

 

<link rel="stylesheet" href="css/main.css">
<style>
    html,body{
        background-color: #343348;
        color : white;
    }
</style>

스타일로 쓸수도 있지만, 너무 길어진다.

그래서 code를 CSS로 따로 빼서 설정이 가능하다.

 

html,body{
        background-color: #343348;
        height: 100%;
        color : white;
        margin:0;
    }

css파일에는 스타일을 제외하고 해준다.

 

이제 개발자 도구를 보면 style에서 볼 수 있다.

 

margin이 있다.

해당 마진을 없앤다.

그리고 body가 전체를 커버하지 못하므로 height의 비율로 전체 설정해준다.

 

header 스타일 설정

 

header {
    height: 60px;
    background-color: white;
    color:black
}

헤더의 공간을 60으로 해서 위에 부각시켜주고, 컬러를 반전시켜준다.

header>nav{
    max-width: 720px;
    padding: 12px 20px;
    margin: 0 auto;
}

 

위에서 정의한 nav의 공간에 padding을 만든다.

가운데 정렬은 margin 0 auto로 한다.

 

header>nav>label {
    font-size: 32px;
    margin-top: 10px;
}

타이틀 로고에 대한 마진을 주고, font size를 지정

 

header>nav>ul>li{
    float: left; #왼쪽으로
    list-style: none; #. 없애기
    margin-left: 10px;
}
header>nav>ul>li>a{
    color : #6c757d;
    text-decoration: none; #링크 줄 없애기
    font-weight: bold;
}
eader>nav>ul>li>a.active{
   color : #343a40;
   border-bottom: 3px solid #343a40;
}

active는 active 된 곳에 밑줄을 쳐준다.

 

 

html에 몬트를 넣고, 폰트도 추가해준다.

 

html
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

css
html,body{
        background-color: #343348;
        height: 100%;
        color : white;
        margin:0;
        font-family:"Roboto"
    }

 

 

푸터

footer {
    max-width: 720px;
    margin: 0 auto;
    height: 20px;
    padding:20px;
    text-align:center;
}

footer>p{
    margin: 0;

}

 

스티키 푸터 구현은 전체 비율 중에 몇 퍼센트로 만들면 된다.

 

메인을 건드린다.

계산을 할거면 calc라는 함수를 쓴다.

main에서의 위아래 패딩을 줄여주고 그만큼을 고정해준다.

 

스티키 푸터는 100-120px이라고 했다.

그렇기에 300px에서 100px만큼 늘리면 전체에서 120을 빼면 main 길이가 가변적으로 바뀐다.

그런데 footer는 60px로 고정해놨기 때문에 보인다.

 

아래 20px 

main {
    height: calc(100% - 120px);
    padding: 0 20px;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

CSS 에서 어려운 점.

 

섹션에 해당하는 영역에서 전체 메인의 중간으로 위치하기 생각보다 어렵다.

메인의 디스플레이를 테이블로 놓고, 섹션을 테이블 셀로 놓는다.

 

해당 테이블 셀의 vertical align을 center로 놓는다.

그러면 동적으로 해도 가운데로 낮춰준다.

main {
    height: calc(100% - 120px);
    padding: 0 20px;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    display: table;
}

main>section{
    display: table-cell;
    vertical-align: middle;
}

 

vertical center 맞추는 게 정말 계산하기 어렵다.

이 방법은 자동으로 맞춰준다.

 

버튼 설정

메인 밑의 섹션 밑의 버튼

main>section>button{
    padding: 15px 20px;
    background-color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer; 
}

border는 버튼의 테투리

padding은 버튼 사이즈이다.

cursor은 올라갔을 때 손가락 누르는 마우스 형태가 바뀐다.

main>section>button:hover{
    background-color: #f33;
    color:white;
}

올라갔을 때 색상을 바꾼다.

 

max-width는 웹페이지 전체에서 통일성 있게 설정한다.

반응형