css

[CSS] CSS 색상 표현방법 (RGB, HSL 등)

CSS에는 여러가지 색상 표현방법이 있다. CSS3 이전에는 16진수, 색상명, RGB 값으로 색상을 표현하는 방법이 있었으나, CSS3에서부터 RGBA, HSL, HSLA 색상값이 추가되었다. 16진수 표기법 - # 이후 16진수 색상값, #rrggbb 형식. - 각 값들이 반복되는 경우 #rgb로 한 자리씩 생략 가능. ( #ff0000 > #f00) div { background-color: #0000ff; color: #fff; } 색상명 표기법 - 각 색상들의 명칭으로 표기. - w3schools 색상명 확인 바로가기 HTML Color Names W3Schools offers free online tutorials, references and exercises in all the major l..

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