DevLog__[TIL: CSS]_2021.4.28
On.
CSS
1) Flex와 Grid를 언제 사용해야할까?
컴포넌트가 1차원적(한 방향)으로 나열이 될 때 flex를, 2차원적(입체적?)으로 나열이 될 때는 grid를 사용해주는 것이 좋은 방법일 수 있다.
2) 재사용성
css도 최대한 코드가 반복되지 않게, 다시 사용되어질 수 있게 작성하는 것이 좋은 개발 방향인 것 같다!
3) h1
h1은 block, 그리고 기본적으로 margin을 가지고 있다.
4) (max/min) width, height
height는 해당 element의 절대적 높이를 정해줄 때 사용.
min-height는 "웹을 아무리 줄여도 element가 최소 이정도 높이다" 라는 것을 정해줄 때 사용
max-height는 "웹을 아무리 늘려도 element는 최대 이정도 높이다" 라는 것을 정해줄 때 사용
5) focus-within
.parent:focus-within {
border: 1px solid skyblue;
}
parent의 child input element를 클릭하면 테두리가 생기게하는 CSS효과
6) calc 함수
.header {
height: 50px
}
.content {
height: calc(100vh - 50px)
}
✔️ 이런식으로 calc를 사용하면 반응형 비슷하게 구현할 수 있고, 쓸데없이 스크롤이 생기는 현상도 해결 가능하다.
✔️ calc안에 연산은 단위까지 정확하게 적어줘야 한다.
7) place-content와 place-items
추후 업데이트해봄...
grid에서 컴포넌트 센터맞추는게 왤케 헷갈리는 걸까.....
items,,,,content,,,,왤케 이름을 헷갈리게 정해 놓은 걸까....하하하...
8) styled component - 부모에서 자식 선언
.element{
width: 200px;
height: 200px;
& > img {
width: 100px
height: 100px
}
}
9) flex property
✔️ flex-grow
✔️ flex-shrink
✔️ flex-basis
: 페이지를 늘리나 줄이나 나는 45px을 유지하겠다는 표현 (flex-direction이 row라면 width의 길이를, column이면 height의 길이를 나타낸다!)
.example {
flex: 0 0 45px;
}
위 3가지의 의미를 분명하게 알아야 하는데,,,,,,헷갈림,,,,,누가 알려줌메
Off.
프론트와 백을 넘나드는 리드 개발자가 되는 그날까지 🔥🔥🔥
Author And Source
이 문제에 관하여(DevLog__[TIL: CSS]_2021.4.28), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@hongin/DevLogTIL-CSS
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
1) Flex와 Grid를 언제 사용해야할까?
컴포넌트가 1차원적(한 방향)으로 나열이 될 때 flex를, 2차원적(입체적?)으로 나열이 될 때는 grid를 사용해주는 것이 좋은 방법일 수 있다.
2) 재사용성
css도 최대한 코드가 반복되지 않게, 다시 사용되어질 수 있게 작성하는 것이 좋은 개발 방향인 것 같다!
3) h1
h1은 block, 그리고 기본적으로 margin을 가지고 있다.
4) (max/min) width, height
height는 해당 element의 절대적 높이를 정해줄 때 사용.
min-height는 "웹을 아무리 줄여도 element가 최소 이정도 높이다" 라는 것을 정해줄 때 사용
max-height는 "웹을 아무리 늘려도 element는 최대 이정도 높이다" 라는 것을 정해줄 때 사용
5) focus-within
.parent:focus-within {
border: 1px solid skyblue;
}
parent의 child input element를 클릭하면 테두리가 생기게하는 CSS효과
6) calc 함수
.header {
height: 50px
}
.content {
height: calc(100vh - 50px)
}
✔️ 이런식으로 calc를 사용하면 반응형 비슷하게 구현할 수 있고, 쓸데없이 스크롤이 생기는 현상도 해결 가능하다.
✔️ calc안에 연산은 단위까지 정확하게 적어줘야 한다.
7) place-content와 place-items
추후 업데이트해봄...
grid에서 컴포넌트 센터맞추는게 왤케 헷갈리는 걸까.....
items,,,,content,,,,왤케 이름을 헷갈리게 정해 놓은 걸까....하하하...
8) styled component - 부모에서 자식 선언
.element{
width: 200px;
height: 200px;
& > img {
width: 100px
height: 100px
}
}
9) flex property
✔️ flex-grow
✔️ flex-shrink
✔️ flex-basis
: 페이지를 늘리나 줄이나 나는 45px을 유지하겠다는 표현 (flex-direction이 row라면 width의 길이를, column이면 height의 길이를 나타낸다!)
.example {
flex: 0 0 45px;
}
위 3가지의 의미를 분명하게 알아야 하는데,,,,,,헷갈림,,,,,누가 알려줌메
프론트와 백을 넘나드는 리드 개발자가 되는 그날까지 🔥🔥🔥
Author And Source
이 문제에 관하여(DevLog__[TIL: CSS]_2021.4.28), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hongin/DevLogTIL-CSS저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)