강의를 들으면서 오픈샌드박스에 하나씩 따라해보고 있기는한데, 아무래도 기록을 하지 않으니까 정리가 안되고 금방 까먹을 것 같아서 이미 좀 들은 강의들도 기록하면서 다시 들어보기로 했다. 이미 내 머리 속에서 사라진 내용이 많을 것이므로😇 빨리 듣는 게 대수인가, 좀 천천히 듣더라도 머리 속에 남기면서 들어야지! 하면서 재수강...나 화이팅⭐
1. CSS란?
Cascading Style Sheets의 약자로, HTML(마크업 언어)로 만든 웹페이지를 꾸며주는 역할을 하는 언어
2. CSS 문법의 종류 : 선택자(selector), 속성(property), 값(value), 선언(declaration), 선언부(declararion block), 규칙(rule set)
1) 선택자(selector) : 꾸며주는 대상. 아래 예시에서 h1이 선택자.
2) 속성(property) : 꾸며주는 요소. ex. 위 문법에서 color, font-size가 속성이 된다. cf. HTML에서의 속성은 attribute로 CSS에서의 속성과 다름
3) 값(value) : 속성이 지정하는 내용. ex) 위 문법에서 속성이 지정하는 값인 yellow와 2em이 값이 된다.
4) 선언(declaration) : 꾸며주는 명령어 부분. 선언은 연달아 나올 수 있고 ;로 구분한다. ex) 위 문법에서 color:yellow; font-size:2em; 부분
5) 선언부(declaration block) : 선언 전체를 의미. 중괄호로 표시. ex) 위 문법에서 { color:yellow; font-size:em; } 부분을 의미
6) 규칙(rule set) : 선택자까지 포함한 전체 부분을 의미. ex) 위 문법에서 h1 { color:yellow; font-size:em; } 부분을 의미
3. 주석 : CSS에서도 HTML과 같이 실제 웹페이지 구성에 영향을 주지 않는 주석을 선언할 수 있다. => /* 내용 */
cf. HTML에서의 주석은 <!-- 내용 -->
4. CSS의 연결 방식 : Inline, Internal, External, Import
1) Inline : 해당 요소에 직접 선언. 선택자 필요X. 여러 문장에 적용이 필요할 때 일일이 적용하기 불편.
2) Internal : <head>와 </head> 사이에 <style>을 넣어서 선언. 해당 페이지 내에서는 일괄적으로 적용할 수 있어 Inline보다는 편리하지만 페이지가 많은 경우에는 일일이 적용하기 불편하다는 단점
3) External : 외부 스타일 시트 파일(이름.css)을 활용하여 선언. 외부 스타일 시트 파일을 만들어 그 안에 규칙을 선언하고 <link rel=styelsheet href="파일명">으로 연결하여 사용. css 파일을 연결할 때는 rel에 'stylesheet'를 사용한다. 여러 페이지가 있어도 한줄만 복붙하여 모두 적용할 수 있으며 변경이 있을 때도 외부 스타일 시트에 한번만 수정하면 되는 관계로 관리가 쉬워 많이 사용하는 방식.
4) Import : 스타일 시트 내에서 다른 스타일 시트를 불러오는 방식. 성능이 좋지 않아 거의 쓰이지 않음(강의에서조차 다루지 않음).
부스트코스 '비전공자를 위한 HTML/CSS 강의'(무료로 제공되는 혜자 강의!)
https://www.boostcourse.org/cs120/lecture/92896?isDesc=false
비전공자를 위한 HTML/CSS
부스트코스 무료 강의
www.boostcourse.org
'[커리어] 에디터의 자기계발 > [도전] 비전공자 코딩 학습기록' 카테고리의 다른 글
| [CSS 공부] 부스트코스 '비전공자를 위한 CSS 강의' 수강 기록 #3. 가상 선택자 (0) | 2022.04.02 |
|---|---|
| [CSS 공부] 부스트코스 '비전공자를 위한 CSS 강의' 수강 기록 #2. 선택자 (0) | 2022.03.29 |
| [HTML 배우기] 엘리스 코딩 무료 강의 HTML 코스 기초 기록 (기본 태그) (0) | 2022.03.20 |
| [코딩 공부] 엘리스 SQL강의 수강일지 2강 4장 - 윈도우 함수, 순위 함수 (0) | 2022.03.13 |
| [코딩 공부] 엘리스 SQL강의 수강일지 2강 3장 - 서브쿼리 심화 (0) | 2022.03.09 |
댓글