1. 학습한 내용
라이브러리
HTML과 CSS 더 빠르고 쉽게 관리하는 방법
에밋(Emmet)
https://emmet.io/
https://docs.emmet.io/cheat-sheet/
calc 함수
- 크기를 정할 때 사용
width: calc(100% / 3);
연산자 앞뒤에 꼭 공백넣기
사용 가능 연산자: + - * /
- 계산단위가 달라도 사용가능
height: calc(100vh - 100px);- 커스텀 속성(변수)과 조합
--number: 500;
width: calc(var(--number) * 1px);커스텀 속성
css변수, 캐스케이드 변수
/* 전역선언 */
:root{
--number: ;
} :root {
--main-color: #4dblec;
}
a {
color: var(--main-color);
}커스텀 속성 주의점
- 대소문자 구분함
- 커스텀 속성에 속성명을 넣을 수는 없다
- 커스텀 속성을 호출한 뒤 '단위'를 덧붙이면 적용되지 않는다.
clac 함수 사용하면 단위를 빼고도 사용 가능 * 1rem
--main-padding: 2;
padding: calc(var(--main-padding) * 1rem ); div {
--main-padding: 2rem;
padding: var(--main-padding);
}SASS
- css를 보조하는 새로운 도구
- 파일 확장자 .scss .sass
장점
- 셀렉터 부모 자식 관계를 네스트로 구현
- 변수로 값 다시 사용하기
$변수명 : 값; $main-color :#fff; background: $main-color;
- 파일을 분할해서 관리
Sass 실습
- 네스트 활용하기
-&를 붙여서 부모 셀렉터 참고하기
-클래스명도 네스트가능
-속성명도 네스트 사용- 과도한 네스트 사용 주의
mixin으로 스타일 재사용하기
- mixin: 미리 저장한 스타일을 필요한 곳에서 불러와 재사용하는 기능
SVG
-
화질에 영향 받지 않는 벡터 이미지
-
스타일 수정 용이
-
xml 기반의 문서
-
애니메이션, css3 효과 적용 가능
-
어디에 사용?
-로고와 아이콘
-데이터 시각화（시각화 프레임워크 사용)
https://material.io/icons
-머티리얼 SVG 아이콘 다운로드
SVG 사용하기
<img>태그- SVG 소스
Animate.CSS
- 사용하기 쉬운 css 애니메이션 라이브러리
https://animate.style/
https://imagehover.io/
https://loading.io/ -로딩 화면,로딩 프로그래스
https://kushagra.dev/lab/hint/
http://getskeleton.com/
2. 학습한 내용 중 어려웠던 점 또는 해결못한 것들
실습 중 크기나 위치 지정하는게 약간 어렵다.
3. 해결방법
사이드박스에 여백이 엄청 늘어나는 바람에 왜 이러나 했었는데 여백있는 쪽을 살펴보니 padding에 소수점 하나가 빠져있었다.
어딘지 티가 나는 부분이라 다행이었는데 잘 안보이는 부분이었으면 점 하나 찾는데 오래 걸렸을것같다..
4. 학습 소감
border: 1px solid #000; 치기가 평소에 귀찮았는데 에밋을 사용해서 bd만 치면 자동완성이 된다는 걸 알았다. 뿐만 아니고 여러 유용한 단축키들을 알게 됐는데 앞으로의 수업의 속도를 더 빠르게 따라갈수 있을거같다. 그리고 커스텀 속성을 써서 색상을 지정해두면 나중에 한꺼번에 색을 고칠때도 유용할거같아서 좋았다.
Today I Learned