안녕하세요! 패스트 캠퍼스의 프론트엔드 국비지원교육을 시작한지 벌써 2주차 입니다!
2주차에는 CSS에 대한 기초 내용을 배웠는데, 이에 대한 회고록을 작성해보겠습니다!
CSS 기초
CSS는 HTML과 함께 웹 개발에서 꼭 필요한 기술 중 하나입니다. 2주차에서는 CSS의 기본적인 문법과 속성, 선택자, 박스 모델 등에 대해 배웠습니다.
우선, CSS를 학습하는 과정에서 가장 중요한 것은 역시 많은 실습입니다. 많은 예제와 실습을 통해 CSS의 개념을 이해하고, 익히는 것이 매우 중요합니다. 실제로 강의를 수강하면서도 그러한 실습들을 직접 적용해보면서 생기는 문제들을 해결하고 경험을 쌓을 수 있도록 도와줍니다.
또한, CSS는 디자인에 매우 중요한 역할을 합니다. 따라서, 디자인에 대한 감각과 이해가 필요합니다. 시간이 충분하다면 디자인과 관련된 책이나 온라인 강의를 참고하여, 기본적인 디자인 원리와 색상, 레이아웃 등에 대해 학습하는 것도 도움이 될 것입니다.
위의 이미지는 직접 실습을 진행하면서 CSS를 적용해본 코드입니다. 직접 작성하면서 스타일이 변화하는 것을 바로바로 확인 할 수 있으니 재미있었습니다!
마지막으로, CSS는 HTML과 함께 사용되는 기술이므로, HTML의 구조와 문법에 대한 이해도 필요합니다. 따라서, 1주차 때 배운 HTML을 충분히 익혀두시는 것이 좋습니다.
이번 주차에 배운 CSS는 웹 개발에 있어 매우 중요한 기술 중 하나입니다. 계속해서 실습과 개인 공부를 통해 더욱 전문적인 수준으로 성장해 나가야겠습니다.
CSS 기초 정리
아래는 2주차 과정을 거치면서 배웠던 내용 중 일부분을 정리한 내용입니다!
선택자(Selector)
: 선택자는 CSS 스타일을 html의 어떤 요소에 적용할지를 선택하는 일종의 규칙이다.
선택자 {
속성: 값;
}- 선택자: 스타일 적용할 대상
- 속성: 스타일의 종류(Property)
- 값: 특정 속성의 값
- { }: 해당 선택자에 적용될 스타일 범위
브라우저 스타일 초기화
: 크로스 브라우징 이슈를 해결하기 위해 각 브라우저가 기본으로 제공하는 CSS 스타일을 초기화 해줘야 한다.
- 주로 www.jsdelivr.com 사이트 이용
- 구글 검색: reset.css cdn
- reset.min.css -> Copy HTML link -> \ 태그에 link
- 주의❗️ 메인 css 파일보다 위에 link를 적용하는 것이 깔끔히 리셋되고 충돌 우려가 적다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">CSS 주석 처리
/* Comment */CSS 선언 방식 4 가지
- 내장 방식: \ 부분에 \ 작성
- 링크 방식: \ 부분에 \로 외부 CSS 문서 연동(병렬 연결)
- 인라인 방식: 요소의 전역 속성(style="")에 직접 스타일 작성(우선 순위 높음)
- @import 방식: CSS문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식이다.(직렬 연결) 지연 연결이 발생할 수 있다.
@import 방식 장단점
link로 연결되는 메인 CSS파일이 연동되고 메인 파일크기가 클 경우 import 구문의 해석이 딜레이 되기 때문에 임포트 파일은 지연 연결이 일어날 수 밖에 없다. 고의로 지연 시킬 의도로 사용할 수 있다.
💡 사용 권장 시나리오
- 권장하지 않는 방식: 내장, 인라인
- 권장 방식 : link 로 전부 head에 작성
- 지연 연결 의도 시 고려 방식 : @import
CSS 단위
아래 표현 단위 중 px만 절대 단위 이다. 나머진 상대 단위이다.
-
px (픽셀)
-
% (상대적 백분율, 부모 요소와 비교)
-
em (부모 요소의 글꼴 크기)
-
rem (루트 요소(html)의 글꼴 크기)
루트 요소(html)의 기본 글꼴 크기는 16px이다. -
vw (뷰포트 가로 너비의 백분율)
50vw -> 뷰포트 가로 너비의 절반
100vw -> 뷰포트 가로 너비 전체 -
vh (뷰포트 세로 너비의 백분율)
50vh -> 뷰포트 세로 너비의 절반
50vh -> 뷰포트 세로 너비의 전체
