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

[intro] CSS - (요소정렬/요소위치/요소이동) CSS 속성 BSET ★★★★★ (= 레이아웃/홈페이지 구조 스타일시트 = Layout Stylesheet)

목차
  1. 요소 중앙 정렬 - margin:auto / text-align:center
  2. 요소에 아무 속성도 적용 안 한 경우 요소 위치
  3. 박스 구성 - width, height, margin, padding, border
  4. div 상자 만들기 - clearfix (= 클리어픽스) 핵
  5. 요소 위치 - position, top, bottom, left, right, z-index
  6. 요소 성질 변경 : display, float, clear, visibility
  7. 문단 단락 배치 - column
  8. 정렬/배치 모델 - (grid / flex) 모델 차이
  9. 반응형 만들기 - @media (미디어쿼리)
  10. CSS 프레임워크 종류


요소 중앙 정렬 - margin:auto / text-align:center

 

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

 


[가로 중앙 정렬]

 

가운데 정렬 정리

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

 

블럭요소 중앙정렬 : 해당 요소에 margin:auto

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

https://ko.learnlayout.com/margin-auto.html

 

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

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

PS1. 

position/top/left 등 속성 이용해 가로/세로 중앙정렬 가능.
https://homzzang.com/b/css-108

 

PS2.

flex 이용해 가로/세로 중앙정렬 가능

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

 


[세로 중앙 정렬]

 

vertical-align : 요소 수직 정렬
https://homzzang.com/b/css-88 

 


요소에 아무 속성도 적용 안 한 경우 요소 위치

 
https://ko.learnlayout.com/no-layout.html

https://codepen.io/sinbi/pen/zXYeEe
아무 속성 없으면 브라우저 왼쪽 끝에서 오른쪽 끝까지 나열

 

 

박스 구성 - width, height, margin, padding, border

 
https://ko.learnlayout.com/box-model.html

https://ko.learnlayout.com/box-sizing.html

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



[너비 = 가로길이]

 

width : 너비 

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

 

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


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

http://ko.learnlayout.com/max-width.html

 

요소 너비 = width + padding + border
전체 너비 = 요소 너비 + margin

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

 

퍼센트 너비

https://ko.learnlayout.com/percent.html

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

 


[높이 = 세로길이]

 

height : 높이

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

 

min-height : 최소높이

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

 

max-height : 최대높이
https://homzzang.com/b/css-68

 

cf.

line-height : 텍스트 라인 높이 (+ 인라인 요소 수직 중앙 정렬)

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

 


[여백]

 

margin : 바깥 여백

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


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

 


[테두리]


border : 테두리
https://homzzang.com/b/css-39

 

border-radius : 테두리 둥글기

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

 

 

div 상자 만들기 - clearfix (= 클리어픽스) 핵

 

https://ko.learnlayout.com/clearfix.html

 



방법1 - float 속성 사용 시 에러 해결

overflow:auto; zoom:1; 
https://homzzang.com/b/css-105

방법2 - div 요소 안에 여러 div 나열 시 에러 해결

clear:both 속성 가진 div 요소 추가
https://homzzang.com/b/css-106


방법3 - 가상선택자 ::after 이용

선택자::after {
    display:block;
    clear:both; 

}

 


요소 위치 - position, top, bottom, left, right, z-index

[요소 위치]


https://ko.learnlayout.com/position.html

https://ko.learnlayout.com/position-example.html

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

 

1.
요소 위치 방식 설정

2.

position : 위치 (상대위치/절대위치/고정위치/기본위치)
https://homzzang.com/b/css-108

  • position:relative; 상대 위치
  • position:absolute; 절대 위치
  • position:fixed; 고정 위치
  • position:static; 기본 위치


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

 

z-index : 절대 위치 요소 간 중첩 시 층간위치
https://homzzang.com/b/css-113

 


[텍스트위치 / 배경이미지위치 / 리스트마커위치]

 

text-indent : 텍스트 라인 들여쓰기
https://homzzang.com/b/css-85

 

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

 

list-style-position : 리스트 마커 위치

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

 


요소 성질 변경 : display, float, clear, visibility

 

display : 요소 기본 성질 변경

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

https://ko.learnlayout.com/display.html

https://homzzang.com/b/html-103 (블럭요소/인라인요소)

  • display:block; =  한줄전체
  • display:inline; =  해당요소만큼만
  • display:inline-block; = 해당요소만큼만 + 가로세로지정가능 + 요소나란히
  • display:none; = 요소숨김  cf. visibility:hidden

 

float : 블럭요소 나란히 배치

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

https://ko.learnlayout.com/float.html

https://ko.learnlayout.com/float-layout.html

  • float:left;
  • float:right;
  • float:center; (존재 X)

 

clear : 강제 줄바꿈 (= float 기능 해제)

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

https://ko.learnlayout.com/clear.html

  • clear:left; - 왼쪽 강제 줄바꿈
  • clear:right; - 오른쪽 강제 줄바꿈
  • clear:both; - 양쪽 강제 줄바꿈

  


PS. 

 

(display:inline-block  vs.  float:left) 차이

https://ko.learnlayout.com/inline-block.html

https://ko.learnlayout.com/inline-block-layout.html



문단 단락 배치 - column


https://ko.learnlayout.com/column.html 

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

가로 문단 단락

 

 

정렬/배치 모델 - (grid / flex) 모델 차이


grid 모델

https://homzzang.com/b/bs?sca=grid

flex 모델

https://ko.learnlayout.com/flexbox.html 

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

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

 


반응형 만들기 - @media (미디어쿼리)

 

https://ko.learnlayout.com/media-queries.html 

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


 

CSS 프레임워크 종류

 

http://www.blueprintcss.org/

https://unsemantic.com/

https://getbootstrap.com/

https://www.oddbird.net/susy/

https://foundation.zurb.com/

https://imperavi.com/kube/

http://groundworkcss.github.io/

https://semantic-ui.com/

https://purecss.io/

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

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