• Q&A
  • 회원가입
  • 로그인

[intro] CSS - 요소정렬 + 요소위치 (= 요소이동) 관련 속성 BEST

0.  

요소 가로 중앙 정렬

 

가운데 정렬

https://homzzang.com/b/css-282

 


ps.


요소 성질 파악
https://homzzang.com/b/html-103

블럭요소 중앙정렬 : 해당 요소에 margin:auto
https://homzzang.com/b/css-95


인라안요소 중앙정렬 : 부모 요소에 text-align:center

https://homzzang.com/b/css-83

※ 참고
요소 성질 불문 position, top, left 등 속성 이용해 중앙정렬 가능.
https://homzzang.com/b/css-108

 


1. width, min-width, max-width 

(height, min-height, max-height)

 

width 너비
https://homzzang.com/b/css-63

min-width 최소너비
https://homzzang.com/b/css-65


max-width 최대너비
https://homzzang.com/b/css-67

 

 

2. margin, padding

 

margin 바깥여백
https://homzzang.com/b/css-95

padding 안여백
https://homzzang.com/b/css-100

 

 

3. position, top, bottom, left, right

 

position 위치
https://homzzang.com/b/css-108


top 상단기준 위치 (= 위기준위치)
https://homzzang.com/b/css-109

bottom 하단기준위치 (= 밑기준위치)
https://homzzang.com/b/css-111

left 왼쪽기준위치 (= 좌측기준위치)
https://homzzang.com/b/css-112

right 오른쪽기준위치 (= 우측기준위치)
https://homzzang.com/b/css-110


 

4. z-index

 

층간위치
https://homzzang.com/b/css-113

 

 

5. display

 

요소기본속성 변경
https://homzzang.com/b/css-107

 

 

6. float

 

블럭요소 나란히 배치
https://homzzang.com/b/css-105

 

 

7. clear

 

float 기능 해제
https://homzzang.com/b/css-106

 

 

8. line-height

 

줄높이 (인라인 요소 수직중앙정렬)
https://homzzang.com/b/css-82

 

 

9. text-align

 

블럭요소 (또는, 인라인블럭) 요소 안의 인라인요소 정렬

https://homzzang.com/b/css-83

 


10. text-indent

 

들여쓰기
https://homzzang.com/b/css-85

 

 

11. background-position

 

배경이미지 위치
https://homzzang.com/b/css-36

 

 

12. list-style-position


리스트 마커 위치

https://homzzang.com/b/css-94 


 

13. flex

 

https://homzzang.com/b/css?sca=flex

 


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012