지지나

바로 앞 포스팅에서 포지션 중 absolute, relative에 대해 썼었는데 그 외의 포지션들과, absolute, relative position에 대해 더 자세히 알아보려고 한다. 왜냐하면 내가 아직 이해가 잘 안됨ㅋㅋㅋㅋㅋ 최대한 강의에서 배운 것은 노트필기한 것과 직접 해본 것으로 복습을 하려고 하는데 이 개념은 도무지 어렵기도 하고, 헷갈리기 쉬운 것이라 생활코딩의 인강을 틀었다! Position: html의 태그가 화면상의 어디에 위치할 것인가 결정하는 것이다. 1. Static vs. Relative 포지션에는 4가지 종류가 있는데 먼저 static과 relative에 대해 알아보도록 하자. 우선 기본적으로 이렇게 적용했고, 모든 div 태그에 보더 5픽셀과 마진 10픽셀을 주었다. 만약..

웹에서의 position은 4가지가 있다. Position 속성 1. Static - default (normal flow) 기본값 2. Absolute 3. Relative 4. Fixed - 스크롤해도 옆에 딱 붙어있는것 이번 포스팅에서는 absolute 절대적 좌표와 relative 상대적 좌표에 대해서 알아보도록 하자. Position: Absolute absolute의 기준: 0,0 (left, top) 부모를 기준으로 움직입니다. 우선 이렇게 기본적으로 셋팅을 해 놓았다. 항상 블록태그를 초기화 하는 것이 중요한 것은 지난번 포스팅에서 언급했었다. 목록태그에서도 왼쪽에 찍히는 점을 ul, li{list-style: none;} 을 이용해 제거해주었다. 그리고 이때 태그에 position:abs..

html/css에서 블록요소와 인라인요소, 박스 모델에 관해 알았으니 이제 본격적으로 무언가를 해보자. 수업때 머리로 아는 것보다 직접 여러개 값 바꿔보면서 알아가는게 최고임! 먼저 기본값으로 이렇게 코딩을 짜 보았다. 당연히 body와 div태그는 블록 요소이다. 그리고 대부분의 블록들은 자체적으로 margin과 padding을 가지고 있으므로, 박스1234 에 여백이 조금씩 있다. 그런데 그 마진이 얼마인지 우리는 알지 못한다. 그래서 필요한게 뭐냐면 마진과 패딩 값을 0으로 두는것, 초기화가 필요하다. 이 초기화를 작업하기 전에 꼭 시작하는 것이 중요하다. 지금의 경우, 와 에 초기화가 필요하다. 그래서 body, div{margin: 0; padding:0} 으로 초기화를 하면 브라우저의 여백이 ..