분류 전체보기

[CSS 기초] float를 clear하는 방법들 (::after, overflow, clear)

저번에는 float에 대해 정리했는데, https://jwss.tistory.com/13 [CSS 기초] 엘리먼트 배치: float + clear: both, overflow: hidden 오늘은 엘리먼트를 매치하는 속성 중 하나인 float에 대해 알아보겠습니다. float 이란 CSS 속성 float은 '띄우다'라는 뜻으로, 한 요소를 일반적인 레이아웃의 흐름으로부터 띄워 수평 정렬 할 때 사 jwss.tistory.com 이 float은 사전적의미로 '뜨다', '띄우다' 등의 의미를 갖고있고 float을 적용한 요소는 일반적인 흐름에서 벗어나는 특징이 있어 다음의 요소에게 영향을 미치기 때문에 clear와 반드시 함께 사용해야한다. 오늘은 clear를 하는 방법들에 대해 알아보자. float를 cl..

[CSS 기초] 엘리먼트 보이고 감추기 (display, visibility, opacity)

요소를 보이고 감추는 법에 대해 알아보겠습니다. 🔷 display 요소를 어떻게 보여줄지 결정합니다. display: none은 요소를 아예 사라지게 합니다. 보이지도 않고 해당 요소의 공간 또한 사라집니다. 🔹 display 속성 값 none : 요소를 보이지 않게 함. inline : 요소를 인라인레벨로 변경. block : 요소를 블록레벨로 변경. inline-block : 인라인레벨과 블록레벨의 특성을 (가로배치, 너비높이값 가짐) 모두 가지도록 변경. 이 세 가지 박스 중 파란색 박스를 없애는 것으로 예시를 들어보겠습니다. See the Pen display:none by k (@kjwboa) on CodePen. 파란색 박스가 보이지도 않고 파란색 박스가 원래 갖고있던 영역도 없어집니다. 다시..

[CSS 기초] 포지셔닝 : position (position: relative vs position: absolute / position: fixed vs position: sticky)

오늘은 position 속성에 대해 알아보겠습니다. position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. 🔷 position 속성 값 static (default) relative absolute fixed sticky 🔹 static 요소를 일반적인 문서 흐름 대로 배치합니다. (왼쪽에서 오른쪽, 위에서 아래로) 모든 태그들은 기본적으로 position: static 상태입니다. position을 해제할 때도 사용합니다. 🔹 relative 자신의 기존 위치(static이었을 때 위치)를 기준으로 이동합니다. top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조절이 가능합니다. See the Pen Relative by k (@kjwboa) o..