• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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 프레임워크 종류

 

 


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

분류 제목
table CSS - border-collapse 속성★ - 테두리겹침설정 (= 테두리중첩설정 = 테두리이중방지 = b…
table CSS - border-spacing 속성 - 테이블셀 테두리간격 (= border-spacing속성 = 보…
table CSS - caption-side 속성 - 테이블표제위치 (= caption-side속성 = 캡션사이드속성)
css CSS - 글자자르기 (= 문자열자르기 = 문자열줄이기= 글자길이자르기 = 문자열자르기 = 글자수자르기 = …
css CSS - zoom 속성 - 요소 확대 (= zoom속성 = 줌속성) ※ IE 하위 브라우저(예: IE6, …
intro CSS - CSS3 입문
intro CSS - 브라우저 접두어 (= vendor prefix = 벤더 프리픽스)
border CSS - border-radius 속성 ★ - 테두리둥글기 지정 (= border-radius속성 = 보더…
border CSS - border-top-left-radius 속성 - 테두리상단왼쪽둥글기 지정 (= 보더탑레프트레이디…
border CSS - border-top-right-radius 속성 - 테두리상단우측둥글기 지정 (= 보더탑라이트레이…
border CSS - border-bottom-right-radius 속성 - 테두리 하단 오른쪽 모서리 둥글게 (= …
border CSS - border-bottom-left-radius 속성 - 테두리하단왼쪽모서리둥글게 (= border…
border CSS - border-image 속성 - 테두리이미지 (= border-image속성 = 보더이미지속성, …
border CSS - border-image-source 속성 - 테두리 이미지 주소 (= border-image-so…
border CSS - border-image-slice 속성 - 테두리이미지자르기 (IE11)
border CSS - border-image-width 속성 - 테두리 이미지 너비 (= border-image-wid…
border CSS - border-image-outset 속성 - 테두리 경계 넘는 이미지 양. (= 보더이미지아웃셋속…
border CSS - border-image-repeat 속성 - 테두리 이미지 반복할지 늘릴지 선택 (= 보더이미지리…
background CSS - background-clip 속성 - 배경영역 (= background-clip속성 = 백그라운드…
background CSS - background-origin 속성 - 배경이미지 좌표시작점 (= 백그라운드오리진 속성)
7/25
목록
찾아주셔서 감사합니다. Since 2012