Programming/CSS

[CSS] border 속성 (border-style, border-width, border-color, border-radius...)

border 테두리 관련 속성을 살펴보자. border-style 테두리 선 스타일을 지정하는 속성. border-style 속성 값 dotted dashed solid double groove ridge inset outset border-width 테두리 선의 두께를 지정하는 속성. border-color 테두리 선의 색상을 지정하는 속성. 한 번에 지정하는 법 /* border: (선 두께) (선 스타일) (선 색상); */ border: 2px solid red; border-radius 엘리먼트 코너 둥글게 하기 코너 개별적으로 둥글게 하기 border-top-left-radius border-top-right-radius border-bottom-left-radius border-botton-..

[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. 파란색 박스가 보이지도 않고 파란색 박스가 원래 갖고있던 영역도 없어집니다. 다시..