Twittler과제(2) - CSS

HTML만 작성했을 때를 브라우저에 띄우면 왼쪽 사진과 같다. 

브라우저 왼쪽 및 위쪽에 모든 컨텐츠가 치우쳐져 있는 상태이다. 

 

반면 CSS를 적용하면 오른쪽 사진과 같다.

사진이 잘려서 전체적인 컨텐츠구조 위치를 잘 볼 수 없는데 실제로는 구조를

브라우저 정중앙에 위치 시켰다. 

CSS를 적용하기 전(왼쪽)과 후(오른쪽)

HTML구조를 어떤 CSS속성을 적용해서 오른쪽 이미지와 같은 모습을 구현했는지 내가 썼던 CSS 속성을 레이아웃 속성 위주로 정리하려고 한다. (CSS는 내가 썼었던 속성을 다시 보면 왜 썼는지 항상 의문이 든다;;)

 

전에 작성했던 와이어프레임

(1)전체적인 구조를 정중앙에 위치시키기.

 - 정중앙에 위치시키기 위해 html에서 모든 컨텐츠를 class="container"인 div태그(빨간색)로 묶은 이유가 여기에 있다. 모든 컨텐츠를 포함하고 있는 div.container를 움직이기만 하면 그 아래 자식들이 모두 움직이기 때문이다. 그렇게 하기 위해 div.container의 부모인 body에 position : relative를 주고 div.container에  absolute를 적용해서 div.container가 body크기 안에서 움직이게 했다. 그리고 left에서 50%만큼 이동시키면, 컨텐츠의 시작하는 부분이 브라우저 중앙으로 오기 때문에, 내가 원하는 컨텐츠의 중앙 부분이 브라우저의 중앙 부분으로 오게 하기 위해 transform : translate(-50%, 0)을 주었다. 이 방법은 다른 블로그를 참고 했다. translate의 첫번째 인자로 좌우, 두번째 인자로 상하를 조작할 수 있다.  

 

처음에 이렇게 했었는데 지금 글을 쓰다가 문득 생각이 들었다. 굳이 body에 position을 안줘도 그냥 div.container에 position : relative만 줘도 부모인 body크기 안에서 움직이지 않을까? 했는데 움직인다. 

 

<코드>

.container { 
position: relative; 
width: 650px; //전체적인 크기 설정
height: 900px; //전체적인 크기 설정
left : 50%; //위에 정리한 부분
transform: translate(-50%, 0);  //위에 정리한 부분
}

 

(2)Mango's twittler ( header )

 - 이 header부분은 코드스테이츠에서 이미 만들어 주셨다. 나는 그냥 여기서 header의 width와  background-color만 변경해 주었다.

 

(div태그 안 컨텐츠를 중앙에 배치하기 위해 text-align : center를 사용함.) 

 

(3) 입력하는 tweet 하는 main 부분

- 우선 (1)까지 하면 컨텐츠들의 큰 박스들(main, div, article)이 중앙에 위치한다. 거기서 첫 번째  큰 박스(main)의 내용물들인 UserName, Comment, input, textarea, button들을 중앙에 오게 하기 위해 text-align : center를 사용했다. 그리고 나머지 위치를 정밀하게 배치시키기 위해 padding이나 margin등을 사용했다. 

section main { 
height: 270px; 
padding : 16px; 
background-color: rebeccapurple; // 진한 파란색
border: 2px solid #ccc; //가장자리 선
border-radius: 1em; //모서리 선에 굴곡을 줌
text-align: center; //위에 정리한 부분
}

(4) check new Tweet 버튼 

 - 사실 처음 시작할 때 이 버튼이 무슨 기능을 하는 버튼인지 몰랐었다..(강의를 다 안보고 시작..) 그래서 main 태그와 article태그와 동등하게 div태그를 생성하고 그 안에 check new Tweet버튼을 만들었다(제일 만만한게 div). button을 정중앙에 오게 하기 위해 (1)에 썼던 방법처럼 button에 position : relative를 주고(그러면 부모인 div태그 안에서 움직일 수 있음 ) top50%, left50% 주고 transform(-50%, -50%)했다. 물론 다른 더 편한 방법도 있을 테지만, 중앙에 오게 할 때 이 방법이 너무 익숙해졌다.

section .checkTweet .btn { 
position : relative; 
width: 200px; // button 박스크기 설정
height: 40px; //button 박스크기 설정
font-size : 1rem; 
top : 50%; 
left : 50%; 
transform : translate(-50%, -50%);
}

 

 

(5) 입력한게 게시되는 부분(article > ul)

article태그 박스안에서 자식인 ul을 중앙에 오게 하는 방법은 위에 정리했던 것과 같은 방식으로 했다. 그리고 ul안에 li들은 js에서 필요할 때 생성되게 했기 때문에 html에는 ul태그만 만들었다. 

 

li 태그 안에 존재하는 태그들은 다음과 같다. (1년전 표시와 하트태그들은 무시)

- 이름인 tim은 <a>태그로 감쌌다.(Anchor태그로 만든 이유는 나중에 필터기능을 넣기 위해서 였다)

- 날짜는 div태그로 감쌌다.

- comment부분 역시 div로 감쌌다.  

li의 구조

그리고 배치는 위 정리했던 방법처럼 똑같이 부모인 ul에 position : relative를 주고 자식인 <a>, <div>태그들에 absolute를 줘서 각각 배치했다. 

section article ul .item { /*li*/ 
position: relative; 
list-style: none; 
left : 0; 
border-bottom : solid 1px gray; 
margin-bottom: 10px;
}

section article ul .item .name { /*js에서 a태그를 생성해서 클래스 지정해줌*/
  /*<a>태그는 컨텐츠 크기만을 차지하는 inline 요소였고, 생성했을 때부터 원하는 위치에 가있었기 때문에 
  위치를 위한 속성을 주진 않았다 */
  cursor: pointer;
  font-weight: bold;
  font-size : 1rem;
}

section article ul .item .date { /*li의 자식(날짜표시)*/
  position : absolute;
  right : 0;
  top : 0;
}

section article ul .item .comment { /*li의 자식(comment 표기부분)*/
  /*comment는 div여서 한 블록을 차지하기 때문에 자연스럽게 원하는 위치에 블록을 차지했다*/
  margin-top: 6px; 
}

 

이렇게 마무리를 했고 결과론적으로 위에 게시했던 오른쪽 사진이 되었다. 이렇게 글로 정리하니 정리했던 CSS속성들은 까먹지 않을 꺼 같다. 분명 위 정리했던 내용 중 틀린 부분이 있을 것이고, 실력을 쌓으며 차차 썼던 글을 다시 보며 수정해 나갈 것이다.