본문 바로가기

CSS

[CSS 레이아웃] display 프로퍼티: inline, block, inline-block 웹 페이지의 모든 요소는 사각형 박스 모양을 같습니다. display 프로퍼티를 이용하면 이 박스가 어떻게 보이게 만들지 정할 수 있습니다. 가장 대표적인 세 가지 값과 해당 속성이 적용된 요소의 특징에 대해서 알아보겠습니다. selector { display: inline; display: block; display: inlin-block; } inline element (인라인 요소) 인라인 요소는 컨텐츠의 영역만큼 공간을 차지합니다. , , 와 같은 태그들이 해당합니다. - 컨텐츠의 영역만큼 공간을 차지합니다. - 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치합니다. - 상하 padding과 margin을 줄 수 없습니다. 단, 좌우 padding과 margin은 설정할 수 있습니다. See t.. 더보기
[CSS 레이아웃] position 프로퍼티: static, relative, absolute, fixed CSS 포지션 프로퍼티는 문서 내에서 요소를 배치하는 유형을 설정합니다. 또한 top, bottom, left, right 프로퍼티와 함께 사용되는 것이 일반적입니다. position 프로퍼티 값으로는 static, relative, absolute, fixed 네 가지가 있으며 각각에 대해서 예제와 함께 알아보겠습니다. static position 프로퍼티의 기본 값입니다. 특별히 다른 값을 지정하지 않았다면 모든 요소는 기본적으로 static 값을 갖습니다. 요소들은 차례대로 왼쪽에서 오른쪽, 위에서 아래쪽으로 쌓이게 됩니다. See the Pen CSS position: static by hogni-seoul (@hogni-seoul) on CodePen. relative 기본 위치인 static .. 더보기
CSS 가상 클래스 셀렉터 :nth-child와 :nth-of-type의 차이점 종종 헷갈리는 CSS 가상 선택자 :nth-child와 :nth-of-type의 차이점에 대해서 알아보겠습니다. 예를 들어 다음과 같은 HTML 코드가 있습니다. Lorem ipsum dolor nth-child와 nth-of-type을 이용해서 ipsum라는 텍스트의 색상을 흰색, 배경을 노란색으로 변경해보겠습니다. :nth-child nth-child는 부모 요소의 n번째 자식 요소를 의미합니다. 이번 예제에서는 p:nth-child(2)라고 입력했으니 p 태그의 부모 요소를 기준으로 두 번째 자식 요소에 해당하는 ipsum를 지칭합니다. See the Pen nth-child by hogni-seoul (@hogni-seoul) on CodePen. :nth-of-type nth-of-type은 부.. 더보기
CSS 가상 셀렉터(Pseudo Selector) :active, :hover, :focus 가상 선택자(셀렉터)를 이용하면 HTML 요소의 상태에 따라서 해당 요소의 스타일을 다르게 적용할 수 있습니다. 대표적인 것이 hover, active, focus입니다. 아래의 예제처럼 사용할 수 있습니다. :hover 가상 셀렉터 :hover를 이용하면 마우스가 해당 요소 위에 있을 때 요소의 스타일 변경할 수 있습니다. 밑에 보이는 예제의 입력창에 마우스를 올려놓으면 색깔이 변경되는 것을 볼 수 있습니다. See the Pen :hover by hogni-seoul (@hogni-seoul) on CodePen. :active 가상 선택자 :active를 이용하면 사용자의 마우스가 해당 요소를 클릭하는 순간부터 떼는 순간까지 요소의 스타일 변경할 수 있습니다. 아래 예제의 입력창을 클릭해서 마우스를.. 더보기

티스토리툴바