개발공부를 시작하며 제일 처음 HTML과 CSS를 배웠고 배운 것들을 사용해서 몇가지 웹페이지를 따라 만들어 보았었다. 그때 느끼며 적었던 내용중 기억에 남는 글이 있다.
"분명 내 머리속에는 div를 통해 상자를 넣었고 그것을 내 생각대로 내가 원하는 위치에 배치할 수 있을 거라 생각했는데 그게 아니였다. 그래서 모든 태그에 border을 입혀서 지금 어디에 어떤 크기에 상자들이 배치되어있는지 확인을 하며 만들어갔다. 도대체 얼마만큼의 높이와 너비를 사용해야하는지 어떻게 내가 원하는 위치에 각 태그들을 놓을 수 있는지 감이 잡히지 않았다."
지금도 모르는 것이 훨씬 더 많지만 아는 것이 아예 없었던 그때는 마구잡이로 어디서 들어본 속성들을 하나하나 사용해보며 어떻게 그 요소들이 배치되는지 시도(?)해보았었다.
💡 분명 div에 높이와 너비를 지정해줘서 박스형태가 되었고 아무리 left,right값을 지정해도 움직이지 않았었다...옆으로 이동시켜서 이쁘게 만들고 싶었을 뿐인데..💡그런 시간을 보내고 한달 뒤 HTML & CSS를 공부하니 느껴지는게 달랐고 보이지 않던 것들도 보이게 되었다. 신기하다.
완벽하진 않지만 어느정도 내가 원하는 위치에 원하는 요소들을 넣을 수 있게 되었고 무슨 말을 하는지 조금은 알 것 같다.
먼저 웹페이지 레이아웃을 만들때 크게 두가지정도를 제일먼저 신경써야하는 것들이 있었다.
첫번째, display
먼저 display의 속성이 크게 inline 이여야하는지 아니면 block 이여야하는지 생각하면 된다.
inline
- 새로운 라인에서 시작하지 않는다. → 문장의 중간에 들어갈 수 있다
- content의 너비만큼 가로폭을 차지, inline 레벨 요소 내에 block 레벨 요소를 포함할 수 없다. inline 레벨 요소는 일반적으로 block 레벨 요소에 포함되어 사용된다
- 컨텐트만큼의 공간만을 차지한다.
→ 그래서 버튼이나 링크같은것들을 표현할때 div안에 포함시켜서 레이아웃을 구성한다
- EX
- span
- a
- strong
- img
- br
- input
- button
block
- 항상 새로운 라인에서 시작
- 화면 크기의 전체의 가로폭을 차지
- EX
- div
- h1~h6
- p
- ol
- ul
- li
사실 레이아웃을 구성을 위해서는 거의 block요소인 div를 사용했기에 제일 처음 구조를 만들때는 어떤 속성을 가진 tag를 사용해야하는지 그렇게 어렵지 않았다.
inline-block이란 속성도 있는데 말그대로 두개를 섞어놓은 하이브리드라고 생각하면 좋을 것 같다.(여러 개의 element를 한 줄에 정확히 원하는 너비만큼 배치할 수 있다)
두번째, position
그리고나서 position의 속성대로 각각의 div에 넣으면 된다.
position은 요소들의 위치를 정의하기 위해 사용된다.
- static
- 기본값
- 배치 순서에 따라 위에서 아래, 왼쪽에서 오른쪽의 순서로 배치
- top,bottom,left,right 이런것들과 같이 사용할 수 없음!
- relative
- 기본 위치에서 top,bottom,left,right를 사용하여 위치를 이동시킨다.
- 그 외 static과 동일하게 동작
- fixed
-
부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표 프로퍼티(top,bottom,left,right)을 사용하여 이동시킨다.
-
스크롤이 되더라도 사라지지 않고 항상 같은 곳에 위치한다.
-
fixed 프로퍼티 선언 시, block 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.
→ Header, navbar등에 주로 쓰이게 된다.
-
- absolute
-
다른요소가 먼저 위치를 점유하고 있어도 뒤로 밀리지 않고 덮어쓰게 된다.
-
기준에 따라 top,bottom,left,right만큼 이동한다.
-
부모요소 또는 가장 가까이 있는 조상요소를 기준으로한다.
-
부모가 static이면 body를 기준으로 하여 좌표 프로퍼티대로 위치!
-
absolute 선언 시, block 레벨 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다
→ block속성이더라도 content 크기에 따라 크기가 결정된다..? 부모요소를 배치의 기준으로 삼기 위해서는 부모요소에
relative를 꼭 정의해야한다!
-
HTML & CSS는 단순히 하나하나의 속성을 외우는게 아니라 각 속성들이 어떻게 사용되는지 실습해보고 그것들을 익히면 이해하는데 아주 큰 도움이 되는 것 같다. 이론적인 부분까지 챙기는게 사실 쉽지 않고 어렵겠지만 지속적인 기술블로그 작성을 병행하여 CS지식까지 얻을 수 있도록 해야겠다.
참고자료
