같은 영역에 서로 다른 타입의 태그 및 내용을 같은 영역을 공유하고 싶다면 float 옵션을 사용합니다. 예를 들어 글 내용 도중에 사진 이미지가 같이 포함이 되어 있고 같은 영역에 배치되어 사용되고 싶다면 이럴 때 float 특성을 사용합니다. 기본적으로 서로 다른 태그를 사용하게 되면 각각의 사용되어 보여지는 display 영역이 다르기 때문에 한 라인씩 해당 태그가 배치되어 보여집니다. float 옵션을 적용하면 같은 display를 공유하게 되면서 적절하게 배치되어 마치 한 라인에 같이 보여지는 것처럼 보일 수 있습니다. 예시 코드 CatCSS Nap all day cat dog hate mouse eat string barf pillow no baths hate everything but kit..

HTML 구조에 존재하는 내용물들에는 각각 표현되는 고유의 영역이 있습니다. 예를 들어 h2 태그를 생성하게 되었으면 특정한 처리를 하지 않는 이상 기본적으로 h2 태그 만의 display(표현) 영역이 존재하는 것입니다. CSS에는 이러한 display 영역을 다른 내용들이 침범하지 않도록 막거나 같이 공유하거나 하는 설정을 해줄 수 있습니다. 여러 설정들이 있지만 대표적인 세 가지 설정들에 대해서 알아보겠습니다. display: inline; Harry Potter h2{ display: inline; } display: inline 은 같은 라인에 내용이 같이 보여질 수 있도록 하는 CSS 설정입니다. 각각 h2 태그가 원래는 따로 개행되어 나뉘어 보이지만 inline 설정값을 통해 같은 라인에 내..

태그로 만든 영역을 위치 지정시켜 줌으로서 본격적으로 페이지의 구성 틀을 만듭니다. 시점에 따른 각각의 위치 지정을 지정해줄 수 있습니다. 정적 위치 지정 - Static Positioning .static{ position: static; left: 50px; top: 50px; } 가장 기본적인 위치 지정입니다. 아무런 설정 값을 주지 않아도 기본적으로 적용되는 위치입니다. position: static 이라고 굳이 명시하지 않아도 기본 위치에 위치하게 됩니다. top, left, right, left 와 같이 특정 부분에 얼마나 위치 시킬 것인지 지정할 수 있으나 static은 기본 위치이기 때문에 적용되지 않습니다. 기본 위치에 지정되었습니다. left와 top 에 위치 값을 조정해주었으나 변하지..

처음 CSS를 적용시킬 때 단일로 Selector를 지정해서 CSS를 적용하는 방식은 익숙할 것입니다. 하지만 CSS를 적용할 때 단일로만 지정해서 하는 것이 아닌 결합해서 지정하고 적용할 수 있습니다. Group 결합 [양식] selector, selector{ color: blue; } ----------------------------- [예시] h1, h2{ color: blueviolet; } 여러 태그에 대한 CSS 적용을 한번에 할 수 있습니다. 쉼표로 여러 태그나 속성들을 구분지어 한번에 적용할 수 있습니다. Child 결합 [양식] selector > selector{ color: red; } ---------------------------- [예시] .box > p{ color: fi..

CSS를 설정하게 되면 무지성으로 넣기만해서 된다고 생각할 수 있겠지만 적용 순서가 있습니다. 이 적용 순서를 파악하고 CSS를 설정해야 좀 더 구체적이고 옳바른 스타일을 적용시킬 수 있습니다. 1. 위치에 따른 적용 순서 li{ color: red; color: blue; } 같은 CSS 속성이 들어있는 경우 위치 상 아래에 있는 속성이 가장 마지막에 반영되기 때문에 색상은 blue가 됩니다. 2. 특성에 따른 적용 순서 li{ color: blue; } .first-class{ color: red; } li[draggable]{ color: purple; } #first-id{ color: orange; } 특정 태그에 관한 태그 CSS 설정, class CSS 설정, 속성 CSS 설정, id CSS..

박스 영역 태그는 HTML 페이지를 구성하는 가장 중요하고 많이 사용되는 태그입니다. div 태그를 사용하여 어떠한 내용은 어떻게 배치될 것인지 정할 수 있습니다. 박스 영역 태그 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at sapien porttitor urna elementum lacinia. In id magna pulvinar, ultricies lorem id, vehicula elit. Aliquam eu luctus nisl, vitae pellentesque magna. Phasellus dolor metus, laoreet ac convallis sit amet, efficitur sed dolor. div ..