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

[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)

분류 제목
border CSS - border-inline-style 속성 -
border CSS - border-inline-width 속성 -
border CSS - border-start-end-radius 속성 -
border CSS - border-start-start-radius 속성 -
box CSS - box-decoration-break 속성 - 요소 상자 깨지는 방식 지정 (= box-decor…
css CSS - box-reflect 속성 (비표준) - 요소의 반사체 생성 (= box-reflect속성 = 박…
css CSS - break-after 속성 - 지정요소 뒤에서 (페이지분할/컬럼분할/영역분할) 발생 여부 지정 (…
css CSS - break-before 속성 - 지정요소 앞에서 (페이지중단/컬럼중단/영역중단) 발생 여부 지정 …
css CSS - break-inside 속성 - 지정요소 내 (페이지중단/컬럼중단/영역중단) 발생 여부 지정 (=…
css CSS - caret-color 속성 - '입력/편집' 가능 요소의 커서 색상 변경 (= caret-colo…
css CSS - clip-path 속성 - 보일 범위 지정해 자르기 (= clip-path속성 = 클립패스속성)
counter CSS - counter-set 속성 - 카운터 초기값(=시작값)을 부모요소에 설정 (= counter-se…
table CSS - empty-cells 속성 - 테이블 빈 셀 테두리 표시 여부 (= empty-cells속성 = …
font CSS - font-feature-settings 속성 - OpenType 글꼴의 고급 인쇄 기능 제어 (=…
font CSS - font-kerning 속성 - 문자 모양 고려해, 문자 사이 간격 지정 (= font-kerni…
font CSS - font-size-adjust 속성 - 소문자 x 높이 기준으로, 대체 글꼴 크기 재조정 (= f…
font CSS - font-stretch 속성 - 폰트 너비 조정 (= font-stretch속성 = 폰트스트레치속…
font CSS - font-variant-caps 속성 -
css CSS - hyphens 속성 - 긴 텍스트 단어에서 하이픈 표시 방법 지정 (= hyphens속성 = 하이…
css CSS - hyphenate-character 속성 - 하이픈 줄바꿈 시, 라인 끝 하이픈 모양 지정 (= …
20/25
목록
찾아주셔서 감사합니다. Since 2012