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

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



1.

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

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

 

 

 

2. display


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

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

 

1. 

요소의 성질 재정의


2. 
https://homzzang.com/b/html-103

 

display:block; =  한줄전체

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

 

 

 

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. 브라우저 너비가 요소 너비보다 훨씬 클 때 유용

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

 

 

 

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


3.
가상선택자 ::after 이용

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

}

 

 

 

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. grid   vs   flexbox


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

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

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

 

 

 

19. 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/ 

 

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

즐겨찾기 (= 북마크) : Ctrl + D
홈페이지 제작
유지보수 관리

분류 제목
intro CSS - 정의와 장점 + CSS 기본 문법
intro CSS - 발전사 (CSS1 → .01 → CSS3)
intro CSS - 적용 방법 3가지 ★★★ - (인라인 스타일 / 내부 스타일 / 외부 스타일) 적용 순서 + 속…
selector CSS - 선택자 (Selector) 종류
selector CSS - 아이디(id) , 클래스(class) 선택자 ★★★★★
selector CSS - 전체선택자 (*)
selector CSS - 요소선택자 (요소)
selector CSS - 병렬선택자 (요소,요소) ★ - 요소 여러개 나열
selector CSS - 자손선택자 (요소 요소) ★ - 특정 요소 아래의 모든 자손 요소
목록

방문자 수

오늘 121
어제 557
최대 583
전체 439,525
Since 2012