• 1:1 문의
  • 회원가입
  • 로그인

[입문] CSS - 레이아웃 속성 베스트 (= 홈페이지 구조 필수 스타일시트 Layout, Stylesheet)

 

1.

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

아무 속성 없으면 브라우저 왼쪽 끝에서 오른쪽 끝까지 나열

 

 

 

2. display


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

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

 

1. 

요소의 성질 재정의


2. 

display:block; =  한줄전체

display:inline; =  해당요소만큼만
display:inline-block; = 해당요소만큼만 + 가로세로지정가능 + 요소나란히
display:none; = 요소숨김

 

 

 

3. margin:auto


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

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

너비 설정된 블럭요소의 중앙 정렬

 

 

 

4. max-width

 
http://ko.learnlayout.com/max-width.html
https://homzzang.com/b/css-67

 1. 최대 너비 설정
 2. 브라우저 너비가 요소 너비보다 훨씬 클 때 유용

 

 

 

5. 박스 구성 요소: width, margin, padding, border

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

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

width : 너비 

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


margin : 바깥 여백

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


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

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

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

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


 


6. box-sizing:border-box


https://ko.learnlayout.com/box-sizing.html
https://homzzang.com/b/css-225 

1. 요소 너비 재설정
2. 요소 너비 = width


※ padding + border 값을 요소 너비에서 제외

 

 

 

7. position


https://ko.learnlayout.com/position.html
https://homzzang.com/b/css-108

 

1.
요소 위치 방식 설정

2.
position:relative;
position:absolute;
position:fixed;
position:static;

 

 

 

8. position 예제

 

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

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


 

 

9. float

 

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

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


1.
요소 나란히 왼쪽이나 오른쪽에 정렬 (※ 중앙 X)

2.
float:left; 
float:right; 

 

 

 

10. clear

 

https://ko.learnlayout.com/clear.html
https://homzzang.com/b/css-106

1.
float 설정 해제해 줄바꿈 시킴

2.
clear:left;
clear:right;
clear:both;

 

 

 

11. clearfix 핵

 

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

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

1.
float 속성 사용 시 에러 해결
overflow:auto; zoom:1; 
https://homzzang.com/b/css-105

2.
div 요소 안에 여러 div 나열 시 에러 해결
clear:both 속성 가진 div 요소 추가
https://homzzang.com/b/css-106

 

 

 

12. float 예제

 

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

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

 

 

 

13. 퍼센트 너비

 

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

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

 

 

 

14. @media (미디어쿼리)

 

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

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

 

 

 

15. display:inline-block   vs   float:left

 

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


display:inline-block;
https://homzzang.com/b/css-107 

float:left;

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

 

 

 

16. display:inline-block 예제

 

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

 
display:inline-block;
https://homzzang.com/b/css-107

 

 

 

17. column


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

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


가로 문단 단락

 

 

 

18. flexbox


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

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

 

 

 

19. CSS 프레임워크 종류

 

 

 

목차 참고 http://ko.learnlayout.com/

즐겨찾기 (= 북마크) : Ctrl + D
저작권・초상권 권리보호 신청
홈짱닷컴 (Homzzang.com)

방문자 수

오늘 347
어제 451
최대 583
전체 416,893

회원 수

오늘 1
어제 3
전체 864
Since 2012