[THU]2021-11-11 TIL

오늘부터 킥복싱을 시작했다.
너무 재밌다 진짜.
오랜만에 미트랑 샌드백치니까 스트레스가
다 풀리는 기분이다. 열심히 다녀야지😊

아 그리고 멋사 캐릭터 경진대회에서 받은
선물도 도착했다.
노트북 파우치만 올 줄 알았는데 열쇠고리, 스티커, 손코딩하기 좋아보이는 공책 두 권도 같이 왔다. 귀엽당 😘

CSS

🔷 Box Model

• box-sizing : 박스크기에 대한 기준을 정함

1. box-sizing: content-box (기본값)

.box {
	box-sizing: content-box;
	width: 400px;
	height: 400px; 
	padding: 10px;
	border: 3px solid black;
	margin: 10px;
}

박스의 크기가 width, height와 같음
⁖ 박스, padding, border, margin을 합친 총 넓이는 width 446px

2. box-sizing: border-box (기본값)

.box {
	box-sizing: content-box;
	width: 400px;
	height: 400px; 
	padding: 10px;
	border: 3px solid black;
	margin: 10px;

박스와 border, padding를 합쳐 width 400px, height 400px
⁖ 박스, margin을 합친 총 넓이는 width 420px

• display : 박스의 성질을 지정

1. inline: 줄바꿈X, width, height, margin-top,
margin-bottom 값 지정불가, 내부에 block 요소가 존재할 수 없음

2. block: 항상 줄바꿈O, 모든 값 지정가능,
내부에 inline요소 존재가능

3. inline-block: inline처럼 한줄에 여러 요소 위치가 가능하며,
block처럼 모든 값을 지정할 수 있음

The element generates a block element box that will be flowed with surrounding content as if it were a single inline box

4. contents: These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes

5. flex: The layout of items in one dimension
In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

6. grid: A two-dimensional grid system to CSS.
Grids can be used to lay out major page areas or small user interface elements
A grid is a set of intersecting horizontal and vertical lines defining columns and rows.
Elements can be placed onto the grid within these column and row lines.

🔷 Text

1. line-height : 글자의 높이를 지정함
- normal : 기본값, 폰트에 따른 기본 높이 제공
- number: 2은 기본 font-size값의 두배, 소수점을 지원
- px, em, % 등의 단위 사용가능

2. letter-spacing : 글자사이 간격 조정
- normal : 기본값, 폰트에 따른 기본 간격 제공
- px, em 등의 단위 사용가능

3. text-align : 텍스트 정렬
- left : 왼쪽 정렬
- right: 오른쪽 정렬
- center: 중앙 정렬
- justify: 양쪽 정렬 (양쪽의 여백 크기를 맞춤)

4. text-indent : 들여쓰기 공간 설정
- mm, cm, px, em, % 등의 단위 사용가능

5. text-decoration : 텍스트를 꾸며줌,
꾸미는 요소로는 잘 사용하지 않고,
a 태그의 기본 스타일 제거시 활용함

✨참고: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

🔷 말 줄임표 구현하기

p {
    width:500px;
    overflow:hidden;
    white-space:nowrap; 
    text-overflow:ellipsis; 
  }

• overflow:hidden;
  : 요소를 넘어가는 컨텐츠 숨깁
• white-space:nowrap;
  : 텍스트 공백에서의 줄바꿈 여부 설정,
  nowrap은 공백을 만나도 줄바꿈X
  
• text-overflow:ellipsis;
  : 요소를 넘어가는 텍스트 말 줄임 처리