반응형 웹- 4일차

학습한 내용

지난 시간에 이어 2단 블로그 실습을 마무리 하였다.
먼저, aside 영역을 스타일 적용을 해주었다.

다음으로 박스안에 있는 ul, li 등 목록들을 스타일 적용

그리고 form영역도 스타일 적용해준다.
여기서, .newsletter-form input[type='email']를 사용하여
특정 인풋 타입에 대해서 스타일을 지정해줄 수 있고,
placeholder 부분도 적용 가능하다.
submit:hover 통해 마우스를 올렸을 때, 색을 바꾸어 적용한다.

footer영역도 스타일 지정

그리고 기준600px보다 클 때(min-width:600px), 즉 데스크탑 사이즈에서 1단인 블로그가 2단 레이아웃으로 변하게 하기위해 미디어쿼리를 적용해준다.

여기서 position: sticky 부분은 스크롤을 내리다가 sticky가 적용되는 부분에서부터 붙어서 내려오게 된다.

스타일이 적용된 페이지를 확인해 보면

기준 600px 이상일 때 2단으로 잘 적용되는 것을 확인할 수 있다.

다음으로 css 라이브러리에 대해 배웠다.
1. emmet으로 빠르게 코딩하기
html 코딩에서 html:5 라던지 ! 와 doc를 이용하면 빠르게 html구조를 만들 수 있다.
또한 태그 이름, 태그 이름+ class이름(id 이름), 자식 요소가 있는 태그 , 같은 계층 등 텍스트를 입력하거나 일련번호를 붙이는 것도 간단하게 tab키와 빠르게 적용할 수 있다.
단축기처럼 기존의 하나하나 입력하는 코딩보다 더 빠르게 코딩할 수 있다.
html뿐만 아니라 css에서도 적용이 가능하다.

2. calc 함수로 계산식 사용하는 법
   1) 크기를 정할 때
   예를 들어 100% 의 너비를 3으로 나누어 적용하고 싶을 때
   width:33.3333%;로 적용하는 것이 아닌 오차를 더 줄이기 위해
   사용한다.
   width: clac(100% / 3);
   여기서 주의할 점은 연사자 앞 뒤에 꼭 공백이 있어야 한다.

2) 계산 단위가 달라도 사용 가능
height:calc(100vh - 100px); 처럼 단위가 달라도 적용되어 나타난다.

3) 커스텀 속성(변수)과 조합
변수는 값을 담을 수 있는 공간(상자)이다. 값을 저장하는 역할을 하고 1개만 저장할 수 있다.
그래서 같은 값을 여러 군데 사용할 때 변수에 장점이 나타난다.
하지만 태그 안에서 변수를 선언할 경우, 다른 태그에서는 사용하지 못하는 단점이 있다.
이를 해결하기 위해서는 최상단 root에서 변수를 선언해주면 적용이 가능하다.

주의점으로는
1. 대소문자 구분
2. 커스텀 속성에 속성명을 넣을 수 없다.
-> 변수에는 key를 넣을 수 없다. ex) background-color

3. 커스텀 속성을 호출한 뒤 단위를 덕붙이면 적용안 됨
-> 변수 자체에 단위를 선언하거나, 뒤에 * 1rem 등 단위를 곱해준다.

위 경우는 적용이 안 되는 예이다.

3. sass
sass란, css를 보조하는 새로운 도구이다.
코드를 적을 때 간략하게 작성이 가능하여, 기존 css보다 더 빨리 개발이 가능하다.
확장자로는 .sass 와 .scss가 있다.
sass파일을 저장하면 자동으로 css가 변환(컴파일)된다.

●장점
1) 셀렉터 무조 자식 관계를 네스트로 구현
2) 변수로 값 다시 사용가능
3) 파일을 분할해서 관리

이렇게 sass파일을 작성 후 변환하면

자동으로 이때까지 배운 css형식에 맞춰 적용된다.

● VScode에서 확장 기능 설치하기
DartJS sass compiler and sass watcher
을 검색 후 설치하면 적용가능하다.
scss파일을 만들어 저장을 해 보면

다음과 같이 여러 파일이 저장되는 것을 볼 수 있다.
.min이라고 적힌 파일들은 들여쓰기, 줄바꿈, 주석이 모두 제외된 파일이다.
.map은 css파일을 합치기 위한 소스맵이다.

4. mixin으로 스타일 재사용
mixin, 미리 지정한 스타일을 필요한 곳에서 불러와 재사용하는 기능
다음과 같이 사용 가능

인수 여러개도 사용이 가능하고, 초기값을 지정해 줄 수도 있다.

5. 폰트 표시 단위
em의 상대크기는 부모 요소이다. 중접이 되었을 때 문제가 있을 수 있다.


em은 중접이 되었을 때 문제가 있을 수 있다.

이럴 경우 적용해보면

다음과 같이 더 커지는 현상을 볼 수 있다.
이럴 경우 rem을 사용한다.
rem : root em으로 최상단에서 정해주면 부모 태그의 크기를 따라가는 것이 아닌, 최상단 기준을 따라간다.
rem을 인식 못하는 브라우저가 있을 수 있어 호환을 위해 px단위도 같이 써주기도 한다.

6. svg
화질에 영향 받지 않는 벡터 이미지이다.
스타일 수정이 용이, xml 기반의 문서이고
애니메이션, css3 효과적용이 가능하다.

로고와 아이콘, 데이터 시각화(시각화 프레임워크 사용)에 사용됨

※ 라이브러리 - 어떤 기능을 가지고 와서 쓰는 것
프레임워크 - 기능을 쓰기 위한 문법, 고정되 있음. 즉, 개발하는 사람의 자율성을 제한.

https://material.io/icons 에서 쉽게 다운받을 수 있다.
파일을 VScode로 열 수 있는데 그 코드를 html에서도 사용이 가능하다.

svg코드로 적용한 경우 스타일스티에서 다른 태그들과 똑같이 스타일 적용이 가능하다.

7. css라이브러리
1) animate.css
사용하기 쉬운 css애니메이션 라이브러리
https://animate.style/
2) imagehover CSS
https://imagehover.io/
3) lading.io
로딩 화면, 로딩 프로그래스
4) 힌트
https://kushagra.dev/lab/hint/
5) getskeletion
https://getskeleton.com
정말 심플하고 군더더기 없는 것을 사용하고 싶을 때 좋다.

학습한 내용 중 어려웠던 점 또는 해결못한 것들

해결방법 작성

학습 소감

미디어쿼리를 적요하는 부분은 생각보다 쉬운데, 역시 그 전 단계인 레이아웃을 구성하고 스타일 적용하는 부분이 아직까지는 힘들다. 지난 과제와 복습을 통해 참고하지 않아서 생각나도록 연습해야 겠다.