-
[HTML/CSS] CSS 기본 레이아웃 요소 정리웹 개발/HTML & CSS 2021. 2. 17. 14:37반응형
display란
요소를 어떻게 보여줄지를 결정한다.
- block : 줄바꿈
- inline : 줄 바꾸지 않고 오른쪽에 표시 / width와 height를 지정 할 수 없음
- inline-block : 줄 바꿈이 되지 않지만 크기를 지정 할 수 있음 / 마진값이 붙어있기 때문에 inline처럼 보인다.
- vertical-align : 인라인 요소의 수직정렬
ofcourse.kr/css-course/display-%EC%86%8D%EC%84%B1
CSS display 속성 - ofcourse
개요 display 속성은 요소를 어떻게 보여줄지를 결정합니다. 주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다릅니다. none : 보이지 않음 block : 블록 박스 inline : 인라인 박스 inline-block : block과
ofcourse.kr
position이란
태그들의 위치를 설정한다.
- static : 기본설정 / top, bottom, left, right 속성들로 위치변경이 안됨
- relative : 태그들의 위치를 설정하고 싶을 때 / top, bottom, left, right의 상대적인 위치
- absolute : 가까운 위치에 있는 조상 element에 대해 상대적 위치로 배치된다.
- fixed : view port를 기준으로 상대적으로 고정된 위치
- sticky : 문서의 흐름을 따르면서 containing box를 기준으로 상대적인 위치에 배치됩니다.
medium.com/@yeon22/css-css-position-%EC%84%A4%EB%AA%85-f2c0a0b26556
(CSS) CSS Position 설명
CSS를 사용하다보면 position 속성을 사용할 때가 많이 있는데요. 이번 글에선 이 position에 대해 설명해보려고 합니다.
medium.com
float란
기본적인 문서 배치에서 벗어나서 자신을 포함한 블록의 좌 우 측에 떠있도록 하는 속성이다.
각 div가 마진값이 없이 붙어있기 때문에 inline처럼 보인다.
left : 요소를 왼쪽 방향으로 부유하게 설정함
right :요소를 우측 방향으로 부유하게 설정함
position 속성의 absolute 값과 양립할 수 없습니다.
webclub.tistory.com/606플로팅(float) 레이아웃과 clear 속성
레이아웃 디자인 - Floating 뷰포트(Viewport)와 관련하여 레이아웃(배치)을 다루기 위한 float , clear 속성에 대해 알아보겠습니다. 플로팅 레이아웃(float) 대표적인 레이아웃 테크닉인 플로팅(Floating)을
webclub.tistory.com
clear란
float 속성을 적용한 해당 객체의 다음에 오는 객체가 붙지 않게 하기 위한 요소
electronic-moongchi.tistory.com/22
[css] clear(none, both, left, right) 의 속성
[css] clear(none, both, left, right) 의 속성 이전에 float 속성에 대해서 배웠는데, float 은 왼쪽, 오른쪽으로 해당 객체를 위치 시켜서 정렬하는 속석이었다. float(none, left, right) 의 속성 보기..
electronic-moongchi.tistory.com
반응형'웹 개발 > HTML & CSS' 카테고리의 다른 글
[HTML/CSS] Tstory - story 페이지 클론 (0) 2021.04.11 [HTML/CSS] CSS의 수평 수직 정렬구조 (float / flex) (0) 2021.04.08 [CSS] CSS 속성 예시 (0) 2020.06.30 [CSS] CSS 기본 문법 (0) 2020.06.23 [HTML] HTML 기본 문법 (0) 2020.06.20