인스타 UI 클론 1일차!
오늘은 어제까지 완료한 파이썬 게임에 이어 인스타UI클론 1일차이다.
사실 파이썬 프로젝트 정리도 못하고 바로 다음 프로젝트라니.....
이건 나에 대한 반성이다 주말에 틈틈히 시간내서 파이썬 프로젝트도 git에 업로드 하고
중간중간 리펙토링 하는 과정을 잡아보자!!
-
UI클론, 첫시작은 Hade부분!
처음 hade부분 부터 시작을 했다! 처음에 height 값을 주고 background 그리고 border설정 등등!
웹개발종합반 강의가 빛을 발휘 하는 순간이였다!!
사실 팀프로젝트 에서는 팀장님 께서 뼈대 부분을 다 만들어 주셔서 연습해볼 기회가 많이 없었는데
오늘 정말 많이 공부가 됬던 것 같다 -
display 속성!
정말 뼈대를 구성하다보면 배치에서 엄청나게 시간을 잡아 먹는다.. 이건 끝없는 노력과 display 속성 그리고
각 요소들에대한 정확한 파악이 중요한 것 같다. 처음 팀프로젝트에서 이걸 못해서 정말 간단한 작업에서 너무
많은 시간을 잡아 먹었는데 이번에는 그래도 잘 진행 된 것 같아 너무 좋고 재밌게 한 것 같다.
확실히 진행하면서 개발자도구로 어느 요소가 어느정도 영역으로 들어오는지, 어떻게 들어오는지 보면서 작업하니 훨씬 수월한 느낌이였다. 개발자 모드를 습관화하자.
- icon.. 너란 녀석
오늘 icon에서도 상당히 애를 먹었는데 아무리 해도 icon 이 먹질 않는다.. 끈임없는 구글링과 여러가지 시도 끝에
cdn 6 버전을 연결시켜주니깐 다행히? 연결이 잘 되었다. 그리고 이제 icon 배치와의 싸움이였는데 계속 전쟁을 하던중
icon이 css가 이미 먹어져 있어서 다중css 가 안돼는줄 알고 머리를 싸매고 있었는데 다중 css가 되어서 생각보다 단순하게 해결하였다. 역시 뭐든지 부딪혀 보는게 좋은 것 같다!
- 미디어쿼리!
오늘은 작업 시작부터 계속 미디어쿼리로 작업을 하였다. 현업에서는 모바일 먼저 구현하고 데스크탑으로 많이 넘어 간다하고
튜터님께서 그렇게 말씀해 주셨지만, 뭔가 자신이 없어서 일단 풀스크린으로 디자인을 한후에 미디어쿼리로 한개씩 값을 지정해서
반응형으로 구현을 하였다. width 값은 애초부터 % 로 작업을하고 height 값을 어느정도 고정을 해놓고 나니 작업이 한결 수월했다. 이제부터는 또다시 배치 와의 싸움이였다
-
!important
작업을 하던중 모바일로 넘어오면 display:none; 을 해야 되는게 이게 먹질 않는다. visibility:hidden; 은 먹는다;
근데 내가 필요한건 none;이다 hidden 처리를 하면 화면에는 사라지지만 공간을 차지해서 공간을 맞출 수 가 없다..
그래서 열심히 찾아본 결과 !important; 를 하면 강제로 none; 을 먹일 수 있다. 많이 쓰면 좋지 않다고 한다.
일단 해결은 되었는데, 왜 display:none 이 먹질 않는지 찾아봐서 공부해봐야겠다. block->none 이 안된다는거 같은데 이해가 잘안가서 다시 한번 찾아봐야겠다. -
git 이슈;
작업 중간에 git을 도전했다! github 에 커밋을 해서 push를 하려했는데 오류가 났다.. 알고 보니 내가 블로그 주소를
잘못 설정해서 그런 것 같았다. 그런데 파일이 날라 간 것이다.. 정말 엄청난 멘붕에 빠졌지만 다행히도 팀장인 영상님이 도와주셔서 해결을 했다! 그리고 다시 commint 까지 , 그리고 터미널을 이용하는 방법과 여러가지를 알려주셨다. 정말 너무너무너무너무 감사합니다. 개인적으로 git은 협엽에서도 중요한 요소니 틈틈히 강의를 듣고 git 사용법에 대해서 익혀봐야겠다. 이건 정말 필수적인 요소인 것 같다. 다시한번 정말 감사합니다. -
오늘 전체적으로 좋았던 점
개인적으로 오늘 하루는 너무 재밌게 공부를 한 것 같다. 내가 공부한 것에 대해서 뭔가를 해볼 수 있어서 그런가 어제 잃었던 자존감을 조금은 회복하는 순간 이였다. 그리고 오늘은 내가 처음 뼈대부터 계속해서 정리를 하면서 코딩을 했다. 변수명 선정부터 html, css분리 부터 최대한 깔끔하게 코드를 짜보는게 이번 프로젝트의 목표이다. 저번에 제대로 하지 못했던 버전관리, 클린코드를 도전해보고 내것으로 만든다음에 발표까지 하고 싶다! 내일도 화이팅. -
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="head.css" rel="stylesheet" type="text/css" media="all and (max-width: 768px)"/>
<link rel="stylesheet" type="text/css" href = "head.css">
<link rel="stylesheet" type="text/css" href = "page.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<header>
<div>
<div class="head">
<i class="fa-solid fa-magnifying-glass search_icon" ></i>
<input type="search" class="head_input" placeholder="검색">
<div class="head_items">
<i class="fa-solid fa-house fa-2x "></i>
<i class="fa-regular fa-paper-plane fa-2x"></i>
<i class="fa-regular fa-square-plus fa-2x"></i>
<i class="fa-regular fa-compass fa-2x"></i>
<i class="fa-regular fa-heart fa-2x"></i>
<img src="../static/image/hj.jpg" style="margin-left: 5%; width: 30px; height: 30px; border-radius: 10px;">
</div>
</div>
</div>
</header>
<!--여기 까지 head 부분!!-->
<body style="background-color: whitesmoke">
<div>
<div class="footer" style="display: flex;">
<footer>
<p>Copyright © 2018 tcpschool.co.,Ltd. All rights reserved.</p>
<address>Contact webmaster for more information. 070-1234-5678</address>
</footer>
</div>
<div class="page_1">
</div>
</div>
</div>
<div class="page_2">
body2
</div>
<div class="page_3">
body3
</div>
</div>
</body>
</html>- head.css
.head {
height: 70px;
background-color: white;
background-image: url("../static/image/head_image.png");
background-repeat: no-repeat;
background-size: 150px;
background-position: 32%;
border-top: 1px solid darkgrey;
border-bottom: 1px solid darkgrey;
}
.head_input {
background-color: whitesmoke;
width: 10%;
height: 50%;
margin-left: 45%;
margin-top: 20px;
outline: 0;
text-align: center;
border-radius: 10px;
border: white;
}
.head_items {
margin-left: 3%;
margin-top: 20px;
display: flex;
}
.fa-regular {
margin-left: 15px;
}
.head, .head_input {
display: flex;
}
.search_icon {
position: absolute;
display: inline-block;
margin-left: 45%;
margin-top: 30px;
color: gray;
}
@media (max-width: 720px) {
.head_input {
display: None;
}
}
@media (max-width: 720px) {
.head_items, .head {
display: flex;
width: 100%;
background-position: 0%;
}
}
@media (max-width: 720px) {
.head_items {
display: flex;
justify-content: flex-end;
margin-top: 5%;
font-size: 90%;
}
}- page.css
.page_1 {
display: flex;
margin-top: 1%;
margin-left: 25%;
width: 30%;
height: 800px;
background-color: white;
}
.page_2 {
margin-top: 1%;
margin-left: 25%;
width: 30%;
height: 1000px;
background-color: white;
}
.page_3 {
margin-top: 1%;
width: 30%;
margin-left: 25%;
height: 800px;
background-color: white;
}
.footer {
float: right;
width: 40%;
margin-right: 3%;
background-color: whitesmoke;
display: flex;
}
@media (max-width: 720px) {
.footer, .search_icon {
display: none !important;
}
}
@media (max-width: 720px) {
.page_1, .page_2, .page_3 {
width: 100%;
margin-left: -0%;
}
}