float 속성은 문서 내부에서 이미지 등을 띄워 출력하기 위해 만들어진 속성입니다. 그런데 이를 활용하다 보니 레이아웃에도 사용할 수 있어서 20년 넘게 사용되어 왔던 것입니다. 하지만 레이아웃 구성을 위해 만들어진 속성이 아니다 보니 처음 보면 납득하기 힘들고, 어떻게 활용해야 할지 잘 모르는 경우가 많습니다. 그래서 CSS3에서는 레이아웃을 구성할 때 사용할 수 있는 전용 속성을 추가했는데, 그게 바로 Flex 속성과 Grid 속성입니다.  Flex 속성과 Grid 속성은…

플렉스 항목(Flex items)은 플렉스 컨테이너 안에서 플렉스 라인(Flex Line) 이라는 가상의 선을 따라 정렬합니다. 다음 표의 속성을 사용할 수 있습니다. 값 설 명 order Item 의 순서를 설정. 기본값: 0 가장 작은 수를 첫 부분에 가장 큰 수를 마지막에 배치. (음수 사용 가능합니다.) flex Item 의 너비 비율을 설정. …

Container 와 item 을 정렬하기 위해 다음 표의 속성을 이용합니다. 속 성 설 명 justify-content item 을 수평 방향으로 배치. flex-start: item 을 container 의 시작점에서부터 배치. 기본값. flex-end: item 을 container 의 끝점에서부터 배치. center: item을 container 의 가운데서부터 배치. spac…

플렉시블 박스(Flexible box)라고 부르는 플렉스 박스(flexbox) 레이아웃은 일반적으로 처리하기 까다로운 레이아웃을 쉽게 처리할 수 있습니다. 불과 몇 해전만 하더라도 float 나 position 을 이용해 레이아웃을 어렵게 구성해야 했습니다. 하지만 플렉시블 박스가 등장하면서 일정하게 공간을 배분하거나 원하는 방향으로 정렬할 수 있게 되었습니다. 뿐만 아니라 복잡한 레이아웃도 flexbox 를 이용하면 쉽게 구현이 된다는 점입니다. 플렉스 박스를 지…

가변 그리드는 반응형 웹 페이지를 만들기 위해 꼭 필요한 요소입니다. 고정 그리드는 그 크기가 고정되어 있어서 해상도에 따라 보여지는 화면이 줄어들더라도 요소의 크기는 그대로이기 때문에 일부는 화면에 가려 스크롤 해야 보이는 경우가 생깁니다. PC에 최적화되어 있어도 태블릿이나 모바일 사용자도 고려해야 하므로 스크롤 하지 않고도 한 화면에 내용이 모두 들어오도록 해야 합니다. 가변 그리드를 사용하려면 먼저 고정된 값을 가변으로 바꿔주는데,  px 를 % 로…

요소 안의 컨텐츠가 해당 영역을 넘치는 경우 어떻게 할 것인지를 지정하는 속성입니다. 속 성 설 명 overflow-x 컨텐츠가 영역을 넘치는 경우 가로방향의 표시방법을 지정. visible: 요소를 벗어난 컨텐츠를 그대로 보여줌. 기본 값. Hidden 요소를 벗어난 컨텐츠를 숨김. scroll: 가로방향으로 항상 스크롤를 표시함. auto: 요소를 벗어난 컨텐츠만 가로방향으로 스크롤로…

z-index 는 요소를 쌓는 순서를 정합니다. 요소 위에 다른 요소를 쌓을 수 있고, 순서를 달리 할 수도 있습니다. z-index 는 position 의 absolute, relative, fixed 일 때만 동작하며 음수를 사용할 수 있습니다. z-index: <숫자> 쌓는 순서는 작은 수가 아래에 가고 큰 수가 위에 쌓입니다. <style> #use-wrapper { position: relative; width: 150px;…

이 속성은 어떤 요소를 감추거나 보이게 할 수 있습니다. 값 설 명 visible 화면에 요소를 보임. hidden 화면에 요소를 감춤. 하지만 요소의 크기는 그대로 유지함. collapse 표의 행과 열만 서로 겹치도록 지정할 수 있으며, 그 외 요소는 hidden 으로 처리함 <style> .h…

positon 은 나열된 정적인 요소의 틀을 벗어나 원하는 위치에 다른 요소와 함께 배치시킬 수 있습니다. 값 설 명 static 기본적으로 모든 태그들은 static 상태임. 기본 값. float 속성을 이용해 배치할 수 있지만 left, right, top, bottom 속성을 사용할 수 없음. absolute 위치가 설정된 상위의 조상요소를 기준으로 …

float 이란 단어의 의미는 "뜨다" 라는 의미를 가지고 있으며 박스나 이미지를 어떻게 띄워서 다른 요소와 함께 배치할 것인가를 결정합니다. 레이아웃 배치에 많이 사용됩니다. 속 성 설 명 float 요소를 어느 쪽에 배치할 것인가를 설정. none | left | right 중 하나. clear 앞서 설정한 float 속성을 무효화 시…

요소의 출력 여부나 요소의 앞과 뒤에 줄바꿈을 지정하기 위해 사용합니다. 값 설 명 none 해당 요소를 감춤. inline 인라인 요소로 표시. <span>와 같은 인라인 요소로 바꿈. 앞 뒤의 요소에 대해 줄바꿈을 하지 않음. (margin-top, margin-bottom, 너비, 높이 조절 불가) block …