본문 바로가기

css

(3)
[CSS] position 속성 | static | relative | absolute | fixed | sticky 오늘은 CSS 위치 속성인 position 속성에 대해 정리해볼게요🔍 웹 페이지를 작업할 때 각 요소의 위치는 2가지 방법으로 설정할 수 있는데 태그 요소를 입력한 순서를 통해 상대적으로 위치를 지정하는 상대 위치 좌표와 X좌표와 Y좌표를 직접 설정해 절대 위치를 지정하는 절대 위치 좌표가 있습니다. 상대 위치 좌표와 절대 위치 좌표에 따라 요소를 배치할 수 있는 position 속성에 대해 알아봐요!!🔥🔥 position은 위치를 잡아주는 속성으로 보통 콘텐츠를 서로 겹치게 배열하거나 마크업 순서와 디자인 상의 순서가 다를 경우 사용합니다. 하지만 레이아웃 깨뜨릴 수 있기 때문에 남용해서는 안돼요!🙅🏻 값으로는 static / relative / absolute / fixed / sticky가 있고 t..
[CSS] float 속성 | left | right | none | 해제 오늘은 display 속성 마지막에서 예고했던 float 속성에 대해 정리해볼게요🔍 웹 페이지에서 배치 작업을 할 때는 CSS 포지셔닝(positioning)이 중요한데 블록요소를 가로로 배치하는 방법에는 - 가로 배치하고 싶은 요소에게 display: inline-block; - 가로 배치하고 싶은 요소에게 float라는 속성 부여 - 가로 배치하고 싶은 요소를 감싸는 부모요소에게 display: flex; 가 있습니다. 이 중에서 float 속성에 대해 알아볼게요!!🔥🔥 float는 원래 이미지를 글자와 조화롭게 배치하기 위한 속성이지만 요즘에는 레이아웃을 작성할 때 자주 사용됩니다. 왼쪽이나 오른쪽에 배치할 때 사용하며 배치를 하지 않을 경우는 'none'으로 표현합니다. 📌 float: left;..
[CSS] display 속성 | block | inline | inline-block | none 오늘은 글자태그 정리 마지막에서 예고했던 display 속성에 대해 정리해볼게요🔍 웹 문서는 블록(block), 인라인(inline), 인라인 블록(inline-block) 세 가지 요소로 나누어지는데 각 요소를 표현하고 변경하는 css가 display입니다. display로 표현할 수 있는 값은 정말 많은데 웹 문서의 레이아웃을 만들 때 자주 사용하는 block, inline, inline-block, none에 대해 알아볼게요!!🔥🔥 블록(block) 요소, 인라인(inline) 요소, 인라인 블록(inline-block) 요소의 특징에 대해 먼저 정리해볼게요🔍 📌 블록(block) 요소 - h 태그, p 태그, ul 태그, ol 태그, li 태그, div 태그가 블록 요소에 해당 - 해당 요소의 웹..