Programming

[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..

[CSS 기초] 엘리먼트 배치: float + clear: both, overflow: hidden

오늘은 엘리먼트를 배치하는 속성 중 하나인 float에 대해 알아보자. float 이란 CSS 속성 float은 '띄우다'라는 뜻으로, 한 요소를 일반적인 레이아웃의 흐름으로부터 띄워 수평 정렬 할 때 사용한다. float 속성은 이미지와 텍스트를 함께 배치할 때 사용하며, 요소가 부모요소 기준으로 왼쪽 또는 오른쪽에 배치된다. 과거에는 전체 레이아웃을 배치할 때도 float을 사용했으나 모던 웹에는 flexbox라는 속성이 있고 float은 레이아웃 배치를 위해 설계된 속성이 아니므로 사용에 주의해야한다. float 속성 값 left : 왼쪽 배치 right : 오른쪽 배치 none : float 없음 float 사용 예시 It is a long established fact that a reader ..