CSS - [기초 / 피드백]

1rem ( root em = 16px )

: html태그에 적용된 font-size의 영향을 받습니다. html태그의 폰트 크기에 따라서 상대적으로 크기가 결정

 

font-family : 서체 지정

font-weight : 폰트 두께

line-height : 행과 행 사이의 간격 지정

 

cascading

:     !important > style attribute > id selector > class selectort > tag selector

vertical-align : top;

: 수직 정렬 

margin: auto;

: 남는 여백을 알아서 나눠가진다.

---

1. 글자 관련은 height가 아닌 line-height 속성을 적용

2. 클릭 이벤트는 패딩까지 적용하고 마진 적용x

3. swiper 적용시 margin보단 padding을 쓰면 더 깔끔

 

box-sizing: border-box;

: 크기+padding+border만큼 width 차지하는 속성

 

flex-shrink: 0;

:  부모 flex속성 무시, width와 height 크기대로 유지?

:  flex-grow와 쌍을 이루는 속성으로 , 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정

 

글자가 넘어갈 시 . . .로 변경하기 위한 요소

.item {
	white-space: nowrap;		/* 줄바꿈 방지 */
	overflow:hidden;		/* 영역에 벗어나면 보여주지않음 */
	text-overflow: ellipsis;	/* 영역을 벗어나면 ...표시 */
}

+ flex시 글자 넘어갈 때 . . .하기위한 필요조건

.container {
	min-width:0;
}

 

피드백 내용

1. class이름은 카멜방식을 이용할 것
2.  태그는 최대한 간소화 할 것
3. absolute나 fixed로 띄웠을 경우 padding으로 공간 확보할 것
4. 글자 정렬 확실히!!! { display:flex; align-item:center; justify-content:center; }

 

 

github : https://github.com/PHyeonMIN/html-css_study

( 사진은 개인정보 문제로 넣어두지 않았습니다. )

---

media query

@media (max-width:500px) {
	body{
		background-color: red;
	}
}

@media ( max-width:500px ) {}

: 500px보다 작을 때 적용

 

@media ( min-width:500px ) {}

: 500px 이상일 때 적용

<meta name="viewport content="width=device-width, initial-scale=1.0">

: 모바일화면에 적용

 

---

CSS - animation

animation-name : 애니메이션 이름

animation-duration : 애니메이션 움직임 지속 시간

@keyframes : 애니메이션 움직임 제어

animation-iteration-count : 애니메이션 반복 횟수

animation-direction: 애니메이션 방향

animation-delay: 애니메이션 지연시간

animation-timing-function : 애니메이션 가속도

animation-fill-mode : 애니메이션 끝난 후의 상태

.box {
	animation-name: box_ani;
	animation-duration: 1s;
}

@keyframes box_ani {
	from{
    
	}
	to{
    
	}
}

---

2022-04-19

1. CSS문법 ( + Sass문법)

&:not(:last-child) {
	margin-right:60px;
}

2. 피드백

     - width height를 화면에 따라 변경하고 싶으면 padding-bottom:100%를 줘서 공간을 줘야한다 height 조절 x

       + div를 하나 더 넣어서 width가 280px인 100% box를 만들어줘서 사진 생성

        ( dom구조가 안좋아진다 -> grid를 사용했다면 더 좋았을 것! )

 

     - div background-image보단 img 태그를 사용할 것!