개발기록장

float 속성을 이용하면 문서의 흐름과 관계없이 화면 배치를 유연하게 할 수 있다. 원래는 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성이었는데, 레이이아웃용으로 많이 사용된다. float이 적용된 요소는 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동시킬 수 있다. - float의 속성 값 • left : 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름. • right : 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. • none : 기본값(default), 요소를 띄우지 않음. ** left와 right 지정시 display 속성은 무시된..

display 속성은 웹페이지를 보고 있는 사용자에게 특정 요소(element)를 어떻게 보여줄지를 결정한다. display 속성은 매우 다양한 값을 가질 수 있지만, 가장 기본이 되는 block, inline, inline-block 을 비교해보자. - block display가 block으로 설정된 요소는 페이지에서 한 줄을 차지하거나, 부모 요소의 100%를 차지한다. 따라서 다음 태그는 그 다음 줄에 배치가 된다. 또한 가로(width)와 세로(height) 크기를 지정할 수 있다. 대표적으로 , , , 태그가 block을 기본값으로 갖는다. - inline display가 inline으로 설정된 요소는 태그안의 centent의 크기만큼을 차지한다. 이어서 오는 태그가 block이 아닐 경우에, ..

CSS에서 flexbox는 box나 item들을 행/열로 유연하게 배치시킬 수 있게 해주는 속성들이다. Flexbox의 속성을 보기 전에 먼저 반드시 알아야 할 중요 개념 2가지가 있다. 1. container와 item flexbox를 구현하기 위한 속성 값들은 크게 container(=감싸고 있는 큰 박스)에 적용되는 속성 값과 item(=큰 박스 안에 있는 작은 박스들)들에 적용되는 속성값이 있다. 2. main axis와 cross axis flexbox에는 main axis(=중심축)과 cross axis(=반대축)이 있다. container안에 item이 왼쪽에서 오른쪽으로 정렬되어 있는 경우에는 수평축이 중심축이 되고, 수직축이 반대축이 된다. container안에 item이 위쪽에서 아래쪽..

position은 HTML 태그의 위치를 조정할 수 있는 속성이다. position 속성 값으로 올 수 있는 것은 5가지가 있다. static relative absolute fixed sticky 1. static static은 기본값으로 position을 지정하지 않을 때와 같다. static은 html에 정의된 순서대로 브라우저상에서 자연스럽게 보여지게 된다. static을 주면 top, right, bottom, left 속성은 무시된다. 2. relative relative은 static일 때를 기준으로 위치를 조정할 수 있게 한다. top, right, bottom, left 속성을 통해서 요소를 움직일 수 있는데 static일 때를 기준으로 top은 위에서 얼마큼 떨어져 있는지, right는..