twittler 목업 (HTML, CSS 하드코딩)

지난주동안 배웠던 내용들을 바탕으로 twitter와 비슷하게 웹페이지를 구현해보는 연습을 했다. 아직 실제 데이터를 자동으로(?) 넣는 방법은 배우지 않아서 HTML에 몇개의 데이터만 일일이 입력하는 식으로 목업만 완성했다! 완성하기까지의 과정 중 기억해둘만한 부분만 기록으로 남겨두려고 한다. (최종적으로 완성된 모습은 여기👈서 볼 수 있다. Change View를 Full Page View로 하고 보는걸 추천한다)

 

Step1. Framework

---

먼저 프레임워크를 오른쪽처럼 구상했다. 구성은 크게 header, writing-section, contents-section 세 부분으로 나누었다.

 

✔️ header

      : 로고, 새로고침 버튼이 포함된 부분

✔️ writing-section

      : 글을 작성하는 부분

          div, img : 프로필이미지

          input#new-comment : 글 작성하는 곳

✔️ contents-section

      : 작성한 글을 보는 부분

          div, img : 프로필 이미지

          span.username : 작성한 유저

          div.comment : 작성 글

          span.createdAt : 작성 시간 

 

세 부분을 html에 <header>, <section> 태그를 사용해 틀을 만들어두고, 나머지 요소들을 하위 태그로 넣는 방식으로 html을 작성하고자 했다.

 

 

실제 트위터를 보니 왼쪽에는 메뉴바(menubar)가, 오른쪽에는 사이드바(sidebar)가 있길래 이 부분도 더해보고자 했다. 위의 main부분 양 옆에다가 두 부분을 추가해 보았다.

 

 

 

 

Step2. HTML, CSS 작성하기

---

HTML은 다행히도 프레임워크를 짤 때 class와 id 이름까지 대략 지정해두어서 차례대로 입력만 하면 되었다.

CSS에서는 먼저 flex를 사용해 전체적인 레이아웃을 먼저 잡았다. 먼저 menubar, main, sidebar 세 부분은 가로방향으로 정렬하기 위해 flex-direction:row를 설정했고, 각각의 박스 안에서는 내부 요소들이 세로로 정렬될 수 있도록 박스마다 또 다시 flex를 설정해 flex-direction:column을 적용해줬다. 특히 메인부분은 세로 방향으로 header, writing-section, contents-section으로 나뉘고, contents-section 안에서 여러개의 글(contents)들이 다시 세로 정렬되기 때문에 flex를 여러겹으로 사용해야 했다.

 

✔️ contents-section 내부 정렬

가장 어려웠던 부분은 contents-section 내부에서의 정렬이었다. 프로필 사진을 왼쪽에 넣고싶었는데, 이렇게 하려니까 이 안에서 또! flex를! 두번이나 이용해야했다. 다른 방법이 있을 것 같기도 했지만,,, 일단 flex를 마스터해보자는 마음으로 flex만 이용해서 구현해보았다. 우선 이미지가 들어갈 div.userimg 부분과 작성자, 내용, 날짜가 들어갈 div.content 두 부분으로 크게 나누어 가로로 정렬했다.(flex-direction:row;). 그리고 div.content 안에서 작성자(span.username), 글 내용(div.comment), 작성날짜(span.createdAt)는 세로로 정렬(flex-direction:column;)해주었다.

 

contents-section(작성된 글들의 목록) 중 content(작성된 글) 부분의 프레임워크

contents-section(작성된 글들의 목록) 중 content(작성된 글) 부분의 실제 구현된 모습

 

 

 

✔️ hover(색상 전환 효과), cursor(마우스 포인터 모양 변경)

메뉴바 부분에서 마우스를 가져다 댈 때만 그 부분의 글자 색상이 변하고, 커서의 모양이 화살표가 아닌 손모양으로 변하도록 하고싶었다. 그래서 가상 클래스 선택자 중 :hover를 이용해, hover(요소에 마우스가 올라간 동안 선택) 상태일 때만 color는 하늘색으로, 커서는 손모양으로 지정해주는 코드를 작성했다. 아래 보이는 .menu p가 가만히 있었을 때 메뉴 글씨들의 기본 설정 부분이고, .menu p:hover이 마우스가 올라간 동안의 설정 부분이다.

커서 모양이 바뀌는건 cursor:pointer; 이 부분인데, 편리하게도 따로 hover선택자를 사용하지 않아도, 자동으로 hover상태일 때 포인터 모양을 바꿔준다. (캡쳐할 때 커서는 빼버리고 캡쳐가 되어서 이부분은 사진이 없다😥) 이 기능은 메뉴 뿐만 아니라 모든 버튼에 적용해주었다.

 

 

 

 

✔️아이콘 넣기

위의 메뉴바를 보면, 많은 아이콘들이 들어간 것을 볼 수 있다. 아이콘은 fontawesome이라는 사이트에서 소스를 가져오는 식으로 넣어보았다. fontawesome에 가입하고, 각자 받은 script 코드를 html에 넣어두기만 하면, 여기있는 모든 아이콘들을 필요에 따라 찾아서 사용할 수 있다. 아래 두 화면 중 오른쪽 화면을 자세히 보면, <i class="fas fa-home"></i>라고 된 부분이 있는데 이부분을 복사해서 html에 붙여넣기만 하면된다. 기본적으로 검정색으로 아이콘이 들어가는데, CSS에서 color속성으로 원하는 색상을 지정해 주면 된다. 그리고 크기를 좀 더 크게 넣고자 할 때는, font-size 속성으로 사이즈를 지정해주면 된다. 사실 처음에 width와 height로 크기를 변경해보려고 시도했었는데 안돼서 검색해보니 특이하게도 font-size로 지정해 줘야 했다.

 

 

 

 

✔️ outline 설정

input태그를 사용해서 글 내용을 입력받을 수 있게 하는 박스 부분에서, border:none; 설정을 통해 윤곽선을 지워 아래와 같은 상태로 만들었다.

 

여기까지는 아무 문제가 없는 듯 했는데, 이렇게 내용을 입력하려고 input 박스를 선택하니 갑자기 안보이던 윤곽선이 나타났다. 좀 더 깔끔하게(?) 만들고싶어서 이렇게 나타나는 윤곽선도 없애버리고 싶어서 의식의 흐름대로 구글에 'css input 클릭시 테두리'라고 검색하니 바로 나왔다. border외에도 outline속성까지 none으로 지정해주면 해결되는 문제였다.

 

outline:none; 속성 지정후의 모습이다. 이렇게 input박스를 클릭해도 이제 윤곽선이 생기지 않게 되었다!

 

✔️ CSS 설정 초기화

추가적인 팁(?)으로, CSS파일을 작성하다보면 기본적으로 요소들에 border, margin, padding 값 등이 설정되어 있는 것을 볼 수 있다. 오히려 이런 기본 설정들이 내가 원하는 디자인을 하는 데 방해가 되기도 해서, 맨 처음에  CSS 설정을 초기화 하는 코드를 넣어줬다. CSS Tools라는 사이트에 가보면 이렇게 모든 초기 설정들을 reset해주는 코드가 있어서 CSS 파일 앞에 넣어주기만 하면 된다. 맨 처음에 적용했을 때는 정말 글자들만 덩그러니 남겨진 모습이 보여서 당황스러웠지만, 하나씩 속성을 적용하다보니 뭔가 오히려 방해되었던 것들이 없어지는 느낌..?이 들어서 앞으로도 애용할 것 같다.

 

 

 

Step3. 최종 완성

---

최종적으로 완성된 모습이다 👏👏👏 (완성본 링크) HTML, CSS만 가지고 만들어서 아직은 실제로 무언가 작동하지는 않지만, 얼른 Javascript도 더 공부해서 트윗을 누르면 글이 업로드도 되고, 그렇게 업로드된 글들이 목록에 하나씩 추가되도록 개선해나가야겠다 ✊🏻