wecode [TIL]
Westagram main-page (HTML & CSS & JavaScript)
프린벼르
2022. 2. 12. 13:03
인스타그램을 모티브로 위스타그램을 만들어 보았다. 가장 먼저 레이아웃 틀부터 잡아주었다. 위 사진처럼 feeds태그와 main-right태그를 묶어줄 wrap태그를 만들고 wrap태그를 묶어줄 main태그 그리고 메뉴바인 nav태그까지!! 전체 레이아웃 구조를 위 사진과 같이 만들어주었다.
nav태그를 만들기 전에 가장 먼저 생각해야 할 것은 각 요소들을 어떻게 배치해서 만들것이냐에 대한 고민이다.
가로배치를 해야하기때문에 nav태그안에 3개의 요소들을 각각 파란틀로 만들어준 후 각각의 파란틀안의 요소들을 또 div태그로 잡아주었다. 물론 메뉴바이기때문에 ul태그로 묶어서 li요소들로 배치해서 만들어주어도 된다. 메뉴바는 엄청 중요한 요소가 아니기때문에 div태그를 써서 만들든, ul태그를 써서 만들든 큰 상관이 없다. 하지만 ul태그로 묶어준다면 좀 더 시맨틱하게 보이지 않을까 싶긴하다. 하지만 나는 ul태그로 묶어줄 생각을 못했고 그래서 그냥 div태그로 만들어주었다. 첫번째 파란틀에 쓰여진 "가상선택자"라는 요소는 인스타그램이모티콘과 로고 사이에 위치한다. 중요한 의미가 있는게 아닌 단지 꾸며주는 디자인요소라서 원하는 크기로 만들어주고 싶어서 border를 쓰지않고 가상선택자요소로 만들어주었다.
<nav>
<div class="inner">
<div class="nav_logo">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><h1>Instagram</h1></a>
</div>
<div class="nav_search">
<input type="text" placeholder="검색">
<i class="fas fa-search"></i>
</div>
<div class="nav_icon">
<a href="#"><i class="far fa-compass"></i></a>
<a href="#"><i class="far fa-heart"></i></a>
<a href="#"><i class="far fa-user"></i></a>
</div>
</div>
</nav>nav_icon클래스 요소를 div가 아닌 ul태그로 묶어주었으면 좋았을 것 같다...😂
프로필 레이아웃을 만들어보자. 검정틀로 요소들을 묶은 후 , 검정틀에 flex속성을 준다면 사진과 같은 가로정렬을 볼 수 있다.
또한, 그 안의 남색틀로 요소들을 묶어주어서 flex를 주면 위 사진과 같이 가로정렬이 보기좋게 된다. 첫번째 남색틀에서 로고와 아이디, 장소는 2개의 틀로 묶어줘야한다. 그러면 flex를 줌으로 가로로 배치가 가능해지고 아이디와 장소를 묶은 틀을 flex를 주면서 flex-direction : column 속성을 준다면 세로정렬이 깔끔하게 된다. 여기에서 아이디와 장소는 span태그를 이용해서 작성했다. 왜냐면 p태그를 쓰지 않은 이유는 블록요소기 때문에 블록요소특성상 주위에 간격을 만든다. 그걸 방지하고자 span태그를 사용했다. span태그는 인라인속성이라서 주위에 간격을 만들지 않는다.
<div id="user">
<div class="profile">
<a href="#" class="user">>wecode</a>
<div class="logo">
<span>wecode_bootcamp</span>
<span>WeCode - 위코드</span>
</div>
</div>
<div class="menu_bar">
<i class="fas fa-bars hamburger"></i>
</div>
</div>
▶ 사진에서 보이는 검정색,분홍색,하늘색 틀로 안의 요소들을 둘러싼 이유는 flex를 주어서 가로정렬을 하기위해서다.
<ul class="icon">
<div class="left">
<li><i class="fas fa-heart"></i></li>
<li><i class="far fa-comment"></i></li>
<li><i class="fas fa-share-square"></i></li>
</div>
<li><i class="far fa-bookmark"></i></li>
</ul>
<div class="write">
<div class="photo"></div>
<span class="today_diary"><a style="font-weight: bold; color: #000; font-size: 17px;"
href="#">seungyoun_iain</a>님 <b>외 4명</b>이 좋아합니다</span>
</div>
<div class="chat">
<span class="comment"><b>wecode_bootcamp</b> "위코드는 단순 교육업체가 아닌 개발자 커뮤니티입니다.
Wecode에서 배우고 저는 5개의 회사에서 오퍼를 받았습니다. - Wecode 졸업생 강병진님"..
<button class="more_btn">더 보기</button></span>
<span class="timeout"><b>54</b>분전 ..</span>
</div>
main-right태그에서 만든 스토리와 팔로우 추천 섹션이다. 그 섹션들의 레이아웃 구조를 보여주는 사진이다. 스토리 섹션에서는
over-flow속성에 scroll을 주어서 스크롤바를 생성하였다. 마찬가지로 flex를 이용해서 가로배치를 하고 세로배치를 해야할 경우엔 flex를 준 후 flex-direction에 column속성을 부여함으로써 세로정렬을 깔끔하게 했다.
<div class="insta-story">
<div class="intro_story">
<h2>스토리</h2>
<button class="all">모두 보기</button>
<ul class="story">
<li class="set">
<div class="pic1"></div>
<div class="others">
<span>alexishyuni</span>
<span>2시간 전</span>
</div>
</li>
</ul>
</div><div class="recommend">
<div class="intro_recommend">
<h2>회원님을 위한 추천</h2>
<button class="all">모두 보기</button>
</div>
<ul class="follow">
<li class="sett">
<div class="picc1"></div>
<div class="other_p">
<span>bowerbird_sym</span>
<span>회원님을 팔로우합니다</span>
</div>
<div class="add_follow">
<a style="color: rgb(30, 145, 194); font-weight: bold;"
href="#">팔로우</a>
</div>
</li>
</ul>
</div>
footer 부분은 p태그를 써서 주위에 간격이 생김과 동시에 줄바꿈을 만들어주기 위해서 썼고 아래부분은 span태그를 사용했다.
물론, 두 부분 다 span태그로 처리해도 되고 p태그로 처리해도 된다.
<div id="footer"> <p>Instagram 정보 · 지원 · 홍보 센터 · API · 채용 정보 · 개인정보처리방침 · 약관 · <br>디렉터리 · 프로필 · 해시태그 · 언어</p> <span>© 2022 Instagram</span> </div>
댓글 input창에 키보드를 누르는 순간 게시버튼이 활성화될 수 있도록 만들었다. 물론 엔터버튼을 눌러도 댓글은 남겨진다.
이 로직을 수행하기 위해서 쓴 이벤트함수는 keyup이벤트와 click이벤트다.
const toDoForm = document.getElementById("todo-form"); const toDoInput = document.querySelector("#todo-form input"); const toDolist = document.getElementById("todo-list"); const btn = document.querySelector(".post"); function paintToDo(newTodo){ if(!newTodo.trim()) return; const li = document.createElement("li"); const p = document.createElement("p"); const userName = document.querySelector(".userName").innerText; li.appendChild(p); p.innerHTML = '<b style = "font-size:17px;">'+userName+'</b>'+' '+newTodo; //댓글을 쓰면 아이디가 찍힐 수 있게 userName을 적어주었다. toDolist.appendChild(li); } function handleToDoSubmit(event){ event.preventDefault(); const newTodo = toDoInput.value; toDoInput.value = ""; paintToDo(newTodo); } function onClick(){ btn.classList.remove("disabled"); const newTodo = toDoInput.value; toDoInput.value = ""; paintToDo(newTodo); } function btnActive(){ const toDoInputList = document.querySelector("#todo-form input").value; return (toDoInputList)?btn.classList.remove("post"):btn.classList.add("post"); } toDoForm.addEventListener("submit", handleToDoSubmit); toDoInput.addEventListener("keyup", btnActive); btn.addEventListener("click", onClick); //down->press->up 순서로 가기 때문에 키패드가 눌려지는 그 순간부터 이벤트가 시작되서 한박자 느리게 찍힌다innerHTML과 innerText의 차이는 스타일속성을 줄수 있는지의 여부이다. 전자는 스타일속성을 줄 수 있다.
그래서 innerText가 아닌 innerHTML을 사용했다.
댓글 구현 기능은 <li></li>태그를 많이 씀
=============================================================================
nav메뉴바에 있는 각 메뉴들을 a태그로 쓸지 li태그로 쓸지는 어떤 방식으로 구현하느냐에 따라 달라짐(리액트가서..)
=============================================================================
position속성은 모서리를 기준으로 위치함
=============================================================================
불필요한 태그를 많이 쓰는지 꼭 확인해보자
=============================================================================
CSS속성은 레이아웃에 영향을 많이 주는 순서대로 인접속성끼리 묶어서 작성해주는게 좋음
=============================================================================
Img 태그 => alt 속성을 꼭 써주자. (너무 중요하기때문)
ex . <img alt = "" src = "" /> : 이렇게 alt속성을 먼저 적어주자
=============================================================================
Id 쓰는거 지양하기. 주로 Tag로 주거나 Class명으로 줘서 꾸며주자
=============================================================================
.클래스명 태그명 => 보기 좋게 금방 찾을 수 있도록 이렇게 작성해주자
=============================================================================
리팩토링 정말 꼭 해주기(너무너무 중요한 작업) : 유지보수를 위해서! <코드가독성과 확장성을 좋게 만들어줌>
인스타그램을 모티브로 위스타그램을 만들면서 아직 HTML구조를 짜는것이 부족하다 느꼈다. flex속성을 이용하면 쉽게 가로 정렬이 가능한데 아무 생각 없이 position을 사용해서 다시 flex로 수정하느라 조금 힘들었다. 앞으론 정말 써야할 곳을 제외하고는 position속성을 쓰지 않도록 해야겠다. css를 쓸때도 칸을 띄워서 눈에 보기좋게 만드는 습관을 들여야겠다. 이번 실습과제는 만들면서 너무 행복하고 재밌었고, 배운 것이 많은 뜻깊은 시간이였다.