21. 1. 7

커피 내리는 그냥 사람·2021년 1월 7일
CSSTILhtmlnotion사전스터디
1

위코드 사전스터디

목록 보기
1/36

#1. 수강 과목 : Notion, HTML, CSS
#2. 수강 콘텐츠 : 조별 노션 만들기, 자기소개 홈페이지 만들기 1일차

(일단 이게 임시저장이 자동으로 안 된다는 점은 염두해두고 뒤로가기 조심해야겠다. 한 단락 날리고 나니 정신이 번쩍 든다.)

  1. 노션 만들기 : 조장이 되었다. 그리고 노션이라는 블로그 형태의 팀 공유 홈페이지가 필요해서 만들었다. 만드는 방식은 네이버 블로그에 익숙해서 그런지 어찌 저찌 1~2시간 만에 만든 것 같다. 물론 선배 기수 노션을 거의 클로닝하다 싶긴 했지만.. 여하튼 조별 과제가 제대로 이뤄지는지까지 확인 후 안심했다. 어쩌다 맡은 조장 열심히 해봐야겠다.

  2. 자기소개 홈페이지 만들기

일단 만든 것들 소스 코드부터 공유하고 시작하려고 한다. 편의상 전체 태그를 올리고 그에 따라 내가 발견한 것, 잘 몰랐던 것들에 대해 기술하려고 한다. 전체적인 흐름을 모르면 잘 알 수 없다고 생각해서다.
HTML 파일은 총 4개로 구성되어 있고 CSS는 총 2개를 구성했다.
(HTML)
home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="home.css">
    <link rel="stylesheet" href="navi.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>

</head>
<body>
    <div class="navi">
        <nav>
            <ul>
            <li><a href="basic.html">Basic</a></li>
            <li><a href="before.html">Before...</a></li>
            <li><a href="tobe.html">To be...</a></li>
            </ul>
        </nav>
    </div>
    <br>
    <div class="head">
    <header>
        <h1>Hello! I'm Damin!</h1>
    </header>
</div>
<div class="img">
<img src="image/home.jpg" alt="홈페이지 사진", title="홈페이지 사진">
</div>
<div class="foot">
    <footer style="font-size: 1.3rem;">
        <ul>
            <li>E-Mail : damin0320@gmail.com</li>
            <li>Velog : <a href="http://velog.io/@sinichy7" target="_blank">http://velog.io/@sinichy7</a></li>
            <li>Github : <a href="http://github.com/damin0320" target="_blank">http://github.com/damin0320</a></li>
        </ul>
    </footer>
</div>
</section>
</body>
</html>
  • 이번 미션은 navigation bar를 페이지 상단에 추가하고, 스크롤을 내려도 고정되는 효과를 주는 것이 첫번째였고, 두 번째는 메뉴를 클릭할 때 색상이 바뀌도록 css효과를 주는 것이었다. 일단 네비게이션 바를 div=navi로 묶고 나머지 사진부분, 하단 풋터 부분까지 전부 div로 따로 처리해서 공간을 3등분 했다. 이후 css 파일을 하나 만들어 navi에 대한 css처리를 따로 했다.
navi.css

   .navi{
    background-color: palegreen;
    position: fixed;
    float: left; 
    width: 100%; 
    padding-right: 20px; 
    padding-left: 25px; 
    margin: 0 auto; 
    text-align: center;
   }
   .navi{
       list-style: none;
       padding-bottom: 5px;
   }
   .navi ul li{
    color: #808080; 
    padding-bottom: 2px; 
    font-size: 1.8rem; 
    font-family: Arial, Helvetica, sans-serif; 
    display:inline-block; 
    padding-right: 100px;
   }
   .navi li a{
       display: block;
       color: black;
       padding: 1px 5px;
       text-decoration: none;
   }
   .navi li a:hover{
       background-color: forestgreen;
       color: white;
   }
   header{
       padding-top: 50px;
   }

분명 태그 처리 했는데 왜 이렇게 나오는지...?

  • 여하튼 네비게이션 바 전체를 상단 위로 올리고, li 값이었으므로 list-style을 none 처리 해준다. 이후 네비게이션 바 전체를 display로 inline-block 처리 해준 뒤 정렬에 필요한 여러 패딩 처리를 해줬다. 이후 색깔이나 배경색은 백그라운드 배경이 바뀐 뒤 저장했다.
  • 이후 hover 효과를 줘서 마우스 포인트가 반응할 때 네비게이션 바 색상에 변화를 줬다. 이 css 파일 하나로 일단 미션을 모두 완료한 것 같았다. 나머지 세세한 패딩값이나 폰트 사이즈 같은 것은 참고한 사이트에 있는 것과 내가 만든 홈페이지가 달라서 다 바꿨다.

home에 있는 네비바는 남은 3페이지에 모두 출력시켰고 css 파일로 디자인을 통제했다. 처음에 안 넣었는데 다른 선배 기수님들 보니까 모든 페이지에 공통으로 되어 있길래 넣었다.

나머지 html 파일을 보기에 앞서 그 html파일을 모두 통제하는 css 파일을 먼저 보면 다음과 같다.

home.css

body{
    z-index: 1;
}

body::after{
    content: '';
    background-image: url(image/back.jpg); 
    opacity: 0.5;
    display: block;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 120%;
    z-index: -1;
    background-size: cover;
    color : black;
    font-weight: bold;
}

.head{
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
}
ul{
    list-style-type:none;

}
.navi nav{
    text-align: center;
}   

.foot{
    text-align: center;
}

img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    height: 500px;
}

footer{
    text-align: center;
}

.sentence{
    text-align: center;
    padding-bottom: 50px;
}

#btn{background-color: #08bc9a; 
    border-color: #08bc9a; 
    -webkit-box-shadow: 0 3px 0 #088d74; 
    box-shadow: 0 3px 0 #088d74;}
#btn:hover{background-color:#01a183;}
#btn:active{top: 3px; 
    outline: none; 
    -webkit-box-shadow: none; 
    box-shadow: none;}

여기서는 3가지 지점에서 집중해서 봐야 한다.

  • 첫 번째는 li 태그들에 있는 점을 없애기 위한 list-style-type
  • 두 번째는 body에 준 백그라운드 배경 반투명. 이건 다른 분들이 하신 것 보고 따라한건데 백그라운드 배경을 그림으로 주는게 좋아서 했지만 너무 진해서 문제가 될 때 opacity 값을 조정하고 들어가는 그림을 흰배경 위에 덮는다는 느낌으로 비율을 조정해서 전체화면으로 보이게 만드는 것이다. 그래서 height를 120%로 자연스럽게 늘린 것이고 opacity도 0.5로 준 것이다(50%)
  • 세 번째는 버튼, 코드인인가? 하는 폼 많은 홈페이지에서 css 양식을 따왔는데 입체감 있는 초록색 버튼이 나왔다. 아직 코드를 이해할 정도는 아니지만 어떻게 긁어서 사용하는지는 알게 되었다. 처음 써봤다.

이제 다음은 basic.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="home.css">
    <link rel="stylesheet" href="navi.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>basic</title>
    <style>
        table{
            font-size: 1.5rem;
            font-weight: bold;
            text-align: center;
            width: 400px;
            height: auto;
            margin-right: auto;
            margin-left: auto;
            padding-top: 10px;
            padding-bottom: 10px;
        }
    </style>
  
</head>
<body>
    <div class="navi">
        <nav>
            <ul>
            <li><a href="basic.html">Basic</a></li>
            <li><a href="before.html">Before...</a></li>
            <li><a href="tobe.html">To be...</a></li>
            </ul>
        </nav>
    </div>
    <br>
<div class="head">
    <header>
        <h1>Introduce Myself</h1>
    </header>
</div>
<div class="img">
    <img src="image/introduce.jpg" alt="소개 사진", title="소개 사진">
    </div>
<div class="navi2">
    <nav>
        <table border="2">
        <tr>
            <td>이름</td>
            <td>안다민</td>
        </tr>
        <tr>
            <td>사는 곳</td>
            <td>강동구</td>
        </tr>
        <tr>
            <td>생일</td>
            <td>4/22</td>
        </tr>
        <tr>
            <td>취미</td>
            <td>음악듣기</td>
        </tr>
    </table>
</nav>
</div>
<footer>
<button id="btn" onclick="location.href='home.html'">
    HOME
</button>
</footer>
</body>
</html>

여기서 특별히 주목해야 할 부분은 테이블 만들기. 전에 생활코딩을 통해 접한 기술인데 tr이 세로, td가 가로임을 이용해서 표를 만든다. 표에 대한 속성은 table태그에 이름을 주고 css를 직접 줬으며 테이블 자체를 마진값과 패딩값을 줘서 배열했다. 이 때 테이블 자체에 크기를 조정해줘서 위에 같이 쓴 사진과 맞췄다.

다음은 제일 시간이 많이 걸렸던 before.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="home.css">
    <link rel="stylesheet" href="navi.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>before</title>

    <style>
        .imgs{
            text-align: center;
        }
        .img{
            display: inline-block;
            vertical-align: middle;
            padding: 30px;
        }
        .head{
            padding-top: 60px;
        }
        .sentence{
            font-size: 1.2rem;
        }
        
    </style>
    
</head>
<body>
    <div class="navi">
        <nav>
            <ul>
            <li><a href="basic.html">Basic</a></li>
            <li><a href="before.html">Before...</a></li>
            <li><a href="tobe.html">To be...</a></li>
            </ul>
        </nav>
    </div>
    <br>
 <div class="head">
    <h1>Before Wecode...?</h1>
</div>
<div class="sentence">
    <article>
    STARBUCKS Partner
    <br>(2018.2~2020.10)
    </article>
</div>
<div class="imgs">
<div class="img">
    <img src="image/before1.JPG" alt="바리스타", title="바리스타">
</div>
<div class="img">        
        <img src="image/before2.JPG" alt="슈퍼바이저", title="슈퍼바이저">
</div>
</div>
   

    <footer>
        <button id="btn" onclick="location.href='home.html'">
            HOME
        </button>
        </footer>
</body>
</html>

여기서 주목할 부분은 이미지를 가운데 나란히 두는 것. 먼저 div 로 이미지를 하나 씩 먼저 나열을 한 뒤 이 둘을 div로 다시 묶어 가운데 정렬을 먼저 해준다. 그러면 사진이 세로로 정렬이 되는데 이를 display를 inline-block 해준 뒤 vertical-align을 중간으로 맞춰주면 거짓말처럼 세로 정렬 된 이미지가 가로 정렬로 바뀐다. 1시간 넘게 고민했던 건데 버티컬 얼라인 하나로 해결했다.
처음에 고민한게 텍스트로 변환해서 해볼까, 아님 li로 변환해서 해볼까 별의 별 생각을 다 해봤는데 결국 이게 답이었다. 이미지 가운데로 나란히 정렬하기 만 몇 번을 검색 했는지.. 이후 패딩값을 줘서 보기 좋게 정렬했다.

마지막 tobe.html은 사진에 글만 좀 들어간 형태라 나중에 보완해야겠다. 너무 간단하게 만든 것 같다.

내일 더 고민해봐야 할 것들은 만든 홈페이지를 더 이쁘게 만드는 것..? 여러 css 효과를 줘봐야겠다.

profile
커피 내리는 그냥 사람
커피 내리고 향 맡는거 좋아해요. 이것 저것 공부합니다.
다음 포스트

21.1.8

0개의 댓글