CSS - Box Model, height, width, Icon, position, overflow, Float
* Box Model *
https://www.w3schools.com/css/css_boxmodel.asp
모든 HTML elements 들은 사각형 상자 모양으로 구성된다.
CSS에서 말하는 box model 이란 바로 이런것을 말한다.
CSS box model 은 모든 HTML elements을 구성하는(감싸는) box <br> Box model 은 border + padding + margin + content 로 구성됨
- Content : 텍스트나 이미지가 등장하는 영역
- Padding : content 주변을 둘러 싸는 영역. content - border 사이 간격, 투명이다
- Border: padding 을 감싸는 테두리
- Margin : border의 바깥 영역 (다른 element 와의 간격)
element 의 '전체 width / height' 구하는 공식
element 의 전체 width =
width + left padding + right padding + left border + right border + left margin + right margin
element 의 전체 height =
height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
* height, width
CSS 의 height, width 값은
padding, border, margin 영역은 포함하지 않습니다
padding, border, margin 안쪽 영역만 다룬 값입니다.
width 와 height 의 디폴트 값은 : auto <-- 즉, 브라우저가 알아서 계산합니다
- max-width : element의 최대 width 값
아무리 container가 커져도 max-width 값보다 커지지는 않음
- min-width : elemtnt의 최소 width 값
아무리 container가 작아져도 min-width 보다 작아지지는 않음.
디폴트 값은 none <-- maximum width 값 없음.
max-width 가 설정되면 기존의 width 값도 오버라이딩 한다.
- max-height : 아무리 안의 내용물이 넘쳐도 그 이상 height가 커지지 않는다
- min-height : 아무리 안의 내용물이 줄어도, 그 이하로 height가 작아지진 않는다
즉 max/min height 는 '내용' 에 대한 크기 이다.
max-height 가 설정되면 기존의 height 값을 오버라이딩 한다.
* Icon
반드시 아래 viewport 지정
<meta name="viewport" congtent="width=device-width, initial-scale=1">
font awesome 아이콘
<script src="https://kit.fontawesome.com/bb29575d31.js"></script>
아이콘(icon)
https://www.w3schools.com/css/css_icons.asp : CSS icon 단원
https://www.w3schools.com/icons/default.asp : Font Awesome5 외
https://www.w3schools.com/icons/icons_reference.asp : FA5 reference
https://fontawesome.com/ : 공식
가급적 Font Awesome 같은 공개된 아이콘 라이브러리를 사용합시다.
일반적으로 <i> 나 <span> 태그에 스타일링 하여 사용합니다.
* 현시점에서 가용한 대표적인 아이콘 라이브러리들
Font Awesome 5.x (★추천★)
Font Awesome 4.x : https://www.w3schools.com/icons/fontawesome_icons_intro.asp
BootStrap3 Glyphicons : https://www.w3schools.com/bootstrap/bootstrap_glyphicons.asp
Google 아이콘 (material-icons) : https://www.w3schools.com/icons/google_icons_intro.asp
※ BootStrap4 부터는 자체 아이콘 지원 안함 BootStrap3 아이콘도 호환안됨)
- 아래 클래스 사용하여 컨테이너 대비한 아이콘 사이즈 조정 가능
fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x, fa-10x
- fa-ul 와 fa-li 를 사용하면 list 태그의 기본 심벌(bullets) 를 대체 가능
fa-spin : 아이콘 회전
fa-pulse : 8단계로 회전
fa-rotate-* : 회전
fa-flip-* : 뒤집기
여러개의 아이콘을 겹쳐서(stacked) 표현 가능
fa-stack : parent 에 명시
fa-stack-1x : 정상 size
fa-stack-2x : 큰 size
fa-inverse : 색상 반전
아이콘의 너비도 각각 다 다르다. 만약 열의 너비를 맞추어야 하는데,
아이콘의 서로 다른 너비 때문에 문제가 된다면
fa-fw 를 사용하여 동일한 너비가 되도록 하자.
fa-border : 테두리 있는 아이콘
fa-pull-right, fa-pull-left :
Google 아이콘
* position : element 의 배치
아래 4가지 종류
1. static : (디폴트) 기본위치(normal) 에 배치.
top, bottom, left, right 와 아무런 영향 없음
-- 나머지 아래 3개는 모두 ~~에 대해 '상대적' 배치
top, bottom, left, right 값에 영향 받음
2. relative : 기본위치(normal) 에 대해 '상대적' 배치
3. fixed : 뷰포트(viewport) 에 대해 '상대적' 배치
4. absolute : 부모(ancestor) 에 대해 '상대적' 배치
- 부모가 relative, fixed, absolute 인경우만 작동!
- 부모가 static 이면, body 에 대해 상대적 배치다.
* overflow
'content' 가 element box 를 벗어난 경우 어떻게 처리할지 명시
overflow 는 height 값을 가진 block 속성 element 에 대해서만 동작함!
- visible : (기본값) clip 발생 안하고, 그냥 box 영역 밖에 보임
- hidden : clip 발생, 넘치는 content 는 안 보임
- scroll : clip 발생하나 scroll 바 등장하여 볼수는 있게 한다
- auto : overflow 발생시에만 scoll 바 등장
- initial : 기본값 전환
- inherit : 부모 element 의 overflow 값 계승
https://www.w3schools.com/css/css_overflow.asp
https://www.w3schools.com/cssref/pr_pos_overflow.asp
https://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow
x축(수평) overflow 값에 대해서만 설정할때는 overflow-x
y축(수직) overflow 값에 대해서만 설정할때는 overflow-y
* Float
CSS float
https://www.w3schools.com/css/css_float.asp
float 는 content들을 어떻게 배치하고 자리 잡을지 세팅한다.
- left : element를 컨테이너의 왼쪽으로 float 한다
- right : element를 컨테이너의 오른쪽으로 float 한다
- none : float 안한다 (디폴트) (일반 텍스트 출력처럼 한다)
- inherit : 부모의 float 값대로 동작.
★ float 되면 float 된것들끼리 inline 처럼 배치된다.
ex) float:left 는 float:left 끼리.
★ 일단 자신이 float가 되면 주변의 다른 element 의 content 는 그 '주변'으로 배치된다.
- float: none 일때는 이미지도 텍스트의 하나처럼 배치된다
- float: right 하면, 이미지는 컨테이너 우측으로 float 하고
주변 element의 content 은 float 하는 이미지 주변을 감싸는 형태가 된다.
- float: left 하면, 이미지는 컨테이너 좌측으로 float 하고
주변 element의 content 은 float 하는 이미지 주변을 감싸는 형태가 된다.
* clear 값 - clear가 적용된 element
좌우로 어떻게 float이 적용될지 지정
https://www.w3schools.com/css/css_float.asp
- none : (디폴트) float 허용
- left : 왼쪽으로는 float 허용안함
- right : 오른쪽으로는 float 허용안함
- both : 양쪽으로 float 허용안함
- inherit : 부모의 clear 값
- 부모 컨테이너 안에 자식 요소들이 위치하는 구조이지만
실제 화면에서는 부모 영역 밖에 위치한 상태로 보여지는 경우가 있다.
- 해결책1 clear : both
- 해결책2 overflow : auto
