[Git hub]깃허브로 웹페이지 만들기(3) - 메인보드 추가

hadan-hwh.github.io/

HADAN | Portfolio

1. 배경이 밋밋해서 배경은 가만히 있지만 스크롤로 할 수 있는 메인보드를 앞에 추가했다. 기존의 레이아웃은 지웠다.

inner를 만드는 코드

#main > .inner {
    width: 80rem;
    max-width: 90%;
    background: rgba(255,255,255,0.95);
    -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.75);
    -moz-box-shadow: 0 0 15px 0 rgba(0,0,0,0.75);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.75);
    border-radius: 4px;
    margin: 0 auto 2rem;
}

html에서는 아래처럼. <section> </section>사이에 박스를 넣어 내용을 채우면 된다.

    <section id="main">
        <div class="inner">
            <section>
                <!--만들고 싶은 섹션-->
            </section>
        </div>
    </section>

 

2. 아직 완성 전이라 복병아리랑 포트폴리오 로고는 페이지 보는 것을 방해하도록 position: fixed;해주었다.

z-index로 맨 앞에 오도록 설정해준다.

.mainImg {position: fixed;width: 200px; left: 50%; top: 40%; z-index: 0; transform: translate(-50%, -50%);z-index:1;}
.mainImg2 {position: fixed;width: 600px; left: 50%; top: 50%; z-index: 0; transform: translate(-50%, -50%);z-index:1;}
 

 

3. 상단과 하단의 회색부분도 position: fixed;해놓았다. 스크롤을 움직이든 항상 고정되있음. 그런데 body 텍스트 부분이 헤더를 침범하는 문제가 있었는데 z-index를 설정하니까 쉽게 해결되었다.

/* 헤더 */
.headers {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #f1f1f1;
    height: 40px;
    border-bottom: 2px solid #000;
    z-index: 99999;
}
.header_text {width: 50px; position: absolute; left: 30px; top: 20%;}
 
/* 테이블 */
.menutable {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f1f1f1;
    height: 40px;
    border-bottom: 2px solid #000;
}
.menutable > div {position: fixed; text-align: center;}
.menutable > div > span {position: absolute; left: 50%; top: -20px; transform: translateX(-50%); display: block; border-radius: 5px; width: 70%;padding: 0px 20px 0 20px; opacity: 0; background: #f1f1f1; border: 2px solid #000; transition: opacity 0.1s ease;}
.menutable > div:hover > span {opacity: 1;}
 
.menutable .github {width: 50px; position: fixed; right: 170px; bottom: 2px; z-index: 2;}
.menutable .tistory {width: 40px; position: fixed; right: 100px; bottom: 4px; z-index: 2;}
.menutable .blogger {width: 40px; position: fixed; right: 30px; bottom: 4px; z-index: 2;}
 

4. 하단 아이콘을 오른쪽으로 옮겼다. 이제 웹페이지 사이즈가 줄어든다고 겹치거나 하지 않음.

5. 내용을 html로 쓰고 css에서 일일이 스타일을 바꿔줘야해서 귀찮았다. 각기 디자인 다르게 하려고 했는데 포기.

 

---

앞으로 수정할 사항

1. 메인 보드 디자인 및 색깔 수정. 너무 분홍분홍하다.

+ 내용 정리 시급;;

2. 메인 보드에 버튼 생성

3. 하단 아이콘을 누르면 팝업창 떠서 다른 정보를 볼 수 있도록 추가.

4. 너무 정적인데 나중에 애니메이션도 추가해봐야겠다.