티스토리 뷰
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 6일차입니다!
어제 HTML 기초 강의를 마무리하고 CSS 문법 강의를 듣고 관련하여 실습을 해 본 날이었습니다.
CSS는 HTML 파일 안에서 <head> 태그 안에 <style> 태그를 삽입하거나,
<link> 태그를 통해 외부 CSS 파일을 불러옴으로써 구현할 수 있어요.
또한 CSS를 적용하고자 하는 선택자 태그에 style을 각각 적용할 수도 있습니다.
이 때, 선택자 태그에 CSS를 적용하는 것이 가장 우선순위가 높답니다.
관련 예제는 아래에서 보여드리겠습니다. 👍🏻
오늘은 '01. 기본 문법과 선택자의 역할 / 02.속성(Properties)과 값(Value) / 03. 선언 방식 / 04. 선언 방식 예제'를 공부하였습니다.
CSS 첫걸음 챕터는 사흘 만에 끝내는 것이 목표입니다. 😊
오늘은 CSS 문법의 기본 요소인 선택자, 속성, 값에 대해 학습하고 그 선언 방식을 직접 실습해보는 시간을 가졌습니다.
CSS 문법
◾ 선택자(selector), 속성(property), 값(value)으로 이루어져있음.
: 선택자 { 속성 : 값; }
CSS 작성 방식
◾ 태그에 직접 작성하기 (인라인) = 선언 방식
: 각 태그에 공통 style이 있어도 일일히 작성 및 수정해야 하는 문제가 있음.
➡ 직접 입력하는 것은 되도록 피하자!
✨ <BODY> 태그 안에서 선택자에 직접 CSS 스타일을 주면, 외부 CSS 파일이나 <head> 태그 안에 있는 <style>의 내용보다 우선적으로 적용됨!
◾ HTML에 포함하기 (내장) = embedded
:<head> 태그 안에 <style></style> 태그를 사용하여 그 내부에 CSS 코드 작성
◾ HTML 외부에서 불러오기
: <link rel="stylesheet" href="./style.css"> 태그 사용
(* ./style.css은 현재 작성중인 html 파일 주변에 있는 style.css라는 뜻!)
내용 학습 출처: https://heropy.blog/2019/04/24/html-css-starter/
강의 링크: https://bit.ly/3m0t8GM
'[패캠] 프론트엔드 패키지 > CSS' 카테고리의 다른 글
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 35회차 미션 (0) | 2020.11.22 |
|---|---|
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 34회차 미션 (0) | 2020.11.21 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 33회차 미션 (0) | 2020.11.20 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 8회차 미션 (0) | 2020.10.26 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 7회차 미션 (0) | 2020.10.25 |