[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 : 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/css?sca=grid
https://homzzang.com/b/bs?sca=grid (BS3 grid)
https://homzzang.com/b/bs4?sca=grid (BS4 grid)
https://homzzang.com/b/bs5?sca=grid (BS5 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://semantic-ui.com/
• https://purecss.io/