트위터 클론을 하기 위해 메인 뷰를 html로 먼저 구조화했다.
기본적으로 html 은 노멀 플로우로서 요소들의 흐름은 위에서 아래이다.
위에서 기본적으로 html 요소는 노멀 플로우로 흐름이 위에서 아래로 흐른다고 했는데, 위 이미지에서 왼쪽 부분을 보면
트윗 내용들이 위에서 아래로(순차적으로) 내려오는 것을 볼 수 있다.
반면, 어떤 요소는 왼쪽에 위치해 있고, 어떤 요소는 오른쪽에 위치해 있으며, 텍스트를 입력할 수 있는 요소와 그 밑에
버튼은 왠지 같이 묵여있는거 같아 보이는데 버튼이 오른쪽 끝 즈음에 위치해있다.
아래 이미지는 html과 css로 직접 따라 만들어본 메인 뷰이다.
똑같이 만들지는 못했지만 css를 적용해서 요소들을 왼쪽, 오른쪽으로 배치해보았다.
div 태그는 block 박스 모델로 div 태그로 마크한 요소가 위치한 라인 width를 다 차지한다.
span 태그는 inline 박스 모델로 span 태그로 마크한 요소가 위치한 곳에서 내용(content)의 크기에 따라 요소의 크기가
정해진다.(내용의 크기 === 요소의 크기)
input 태그는 type 속성이 있는데 type 속성 중 button 값을 적용했다.
ul은 리스트 항목(각각의 리스트)을 포함하여 나타낼 때 사용한다.
자식 요소로 li를 포함할 수 있다.
li 태그는 개발자 도구에서 확인해보면 display 속성이 block 박스 모델로 보이지는 않는다. 하지만 li 태그로 마크한 요소를 랜더 해보면 block 박스 모델처럼 요소가 위치한 라인 width 전체를 차지한다.
그리고 li는 리스트 항목(각각의 리스트)을 나타낼 때 사용한다.
부모 요소로 ol, ul을 포함할 수 있다.
css는 각 요소들에 class를 지정, class 값을 선택자로 사용해 style을 변경 및 적용했다.
요소들의 노멀 플로우 흐름에서 벗어나 보내고 싶은 위치로 보낼 때 position, float을 사용했다.
position은 값으로 relrative, absolute, static, fixed 가 있다.
relative는 요소가 위치한 기준으로 position relrative를 가지고 있는 요소를 부모로 가지고 있는 요소는 위치의 기준점을 잡을 때 부모 요소를 기준으로 잡게 된다.
absoulte는 가장 가까이 있는 요소의 position 값을 기준으로, static은 위치 지정 안 하고, fixed는 요소가 위치에 고정
float은 값으로 left, right를 줄 수 있다.
float은 이미지를 노멀 플로우에서 벗어나게해서 레이아웃에서 붕 뜨게 보이게 한 뒤 위치를 지정해주고 그 나머지 여백을 텍스트로 감싸주기 위한 목적으로 만들어진 이유다.
이미지와 텍스트로 조화를 이룬 뷰 페이지로 뉴스? 뉴스 기사? 등등등 에서 유용하게 사용하겠다.
position: relrative, absolute, fixed / float: left, right는 top, right, bottom, left 등 위치를 조정할 수 있는
속성을 사용해서 요소의 위치를 디테일하게 다룰 수 있다.
잘못된 내용 및 오타, 보완해야 할 내용은 댓글로 달아주시면 수정하겠습니다.