코드스테이츠 수강_2주차_4일차_Twittler 목업 구현

코드스테이츠 수장 2주차 4일차에는 지금까지 배운것 (HTML, CSS)을 활용하여 웹 페이지 목업을 만들었다.

목업이란?

쉽게 말하면 만들고자 하는 제품의 "형상"만 갖춘 모형이라고 생각하면 된다.

광고 디자인이라면 치수와 형태가 들어간 배너가 될 수도 있고, 제조라면 외부 기구물만 갖춘 것 일 수 있다. (일명 깡통)
-> 예시) 푸드코트의 플라스틱 음식 모형, 핸드폰 매장의 전시용 폰

이전에 설명한것 처럼, 프론트엔드는 사용자가 직접 볼수 있는 영역이다. 

고로, 직번 목업 작업을 진행하면서 프론트엔드를 찍먹 해보자

 

구현

사실, 이번 시간은 하루종일 목업 구현만 햇는데, 대부분 코드스테이츠에서 제공한 코드를 편집하고, 목적에 따라 내가 직접 추가하는 식이였으므로 코드 전체를 올리는 것은...죠큼...ㅎ

대신 귀여운 웹 페이지를 드리겠습니다.

목업 실습 진행한 웹 페이지, 일명 코드그램, 같이 실습 진행한 페어가 텔레그램 컨셉을 제안했다.

기본적인 HTML 틀은 코드스테이츠에서 제공했기 때문에, 직접 추가한것은 Username, Message , 텍스트 입력부분, 그리고 버튼들이다. (생각보다 많이 했는디?)

단순히 구현한것을 설명하겠다. 

HTML구현

1. Username, Message 텍스트
->  <div>Username</div>, <div>Message</div> 로 텍스트 추가

2. Username 텍스트 입력부
<input id = "usernameInput" type = "text" placeholder="이름을 입력하세요"> : input type = "text" 를 이용해서 텍스트 상자 생성, 내부에 "이름을 입력하세요"를 넣었다.

3. Message 텍스트 입력부
<textarea id ="messageInput" placeholder="내용을 입력하세요" resize:none;></textarea> : <textarea>를 활용해서 텍스트 상자 생성, 내부에 "내용을 입력하세요."를 넣었다.
-> input type = "text" 와 <textarea>의 차이 : <textarea>는 줄바꿈이 된다. 장문의 줄을 쓰는데 적합하고, input type = "text"는 한줄로 줄줄 들어가기 때문에 짤막한 줄에 적합하다.

4. 버튼 두개 (Tweet! , check new tweets)
<div id = "randomButton"><button id = "NEW"> <img id = "im" src = "re.png" width="10px" > Refresh! </button></div> 
<button> : 버튼이 생김,  <img id = "im" src = "re.png" width="10px" >: 버튼 안에 새로고침 이미지 삽입

맨 위의 로고는 버튼 두개에서 이미지 삽입 예시가 있으므로 생략

CSS구현

1. 박스의 배경색
background-color: rgb(xxx, xxx, xxx); 지정한 구역의 배경색을 지정

2. 박스 경계를 둥글게
border-radius: 1em; 두의 1em을 편집해서 모서리의 곡률 설정 가능

3. 요소의 배치 변경
display: flex; 플렉스박스 사용 설정 justify-content: flex-end; 가로축으로 요소 지정 (flex-end는 왼쪽에 딱 붙인다.) flex-direction : column; 정렬 하는 축 수직으로 변경

4. 글 작성 구분선 
border-bottom: 2px solid rgb(xxx, xxx, xxx); : 해당 요소의 아랫쪽에만 경계선 생성

 

글로 쓰고보니 몇시간 걸려서 할만한 정도는 아니였다. 

이것저것 많이 시도해봤었는데 잘 안된 부분도 있었다.
->예시) 날씨 요소를 넣을려고 하이퍼링크를 사용했는데, 툴의 문제인지 작동 안함 / 마우스 버튼에 올리면 색깔 변하게 하고 싶었는데 못했음 ㅎ

직접 프론트엔드를 찍먹해보고 느낌점은

이거 좀 노가다인데?

의외로 심미적인 부분을 코드로 구현하기 힘든거구나 한다. 

딱 정렬됫으면 좋겠는데, 막상 생각대로 안되고, 기능도 어떤게 있는지 몰라서 검색을 해야 하는데, 뭘 검색해야 하는지 모른다 ㅋㅋ

하지만 의외로 이거에 매력이 있어서 교육 도중에 프론트엔드로 옮겨간 사람이 있다고 한다 ㅋㅋ

역시 취향은 다양하다, 나는 좀 안맞던데

여튼... 직접 이렇게 결과물로 만들어보니 적어도 뭘 배우고는 있구나 하는 생각도 든다. 

뭘 한다는 사실 자체가 중요하다. 적어도 지금은.