What I Learned Today
드디어 기다리던 CSS에 대해서 배우기 시작했다.
오전에는 CSS의 정의와 문법에 대해 배웠다.
- CSS(Cascading Style Sheet)는 마크업 언어가 실제로 표시되는 방법을 기술하는 언어다.
- CSS는 W3C의 표준이며 레이아웃과 스타일을 정의할 때의 자유도가 높은 언어다.
- CSS는 웹 사이트에서 사용되는 스타일을 지정하기 위한 언어다.
- CSS 사용의 의의
- 스타일 사용의 중요한 의의는 문서의 구조와 표현을 부리할 수 있다는 점을 들 수 있으며 이는 구조와 표현을 분리함으로써 문서 구조의 수정 없이 스타일의 변경만으로 다양한 표현을 할 수 있다는 것을 의미한다.
- CSS 기본 문법
- 크게 선택자와 선언부로 이루어지며 선언부는 다시 속성과 속성 값으로 구성되어 있다.
- 선언부는 세미콜론으로 속성과 속성 값을 구분하여 여러 개의 선언을 지정할 수 있다.
- 스타일 방법 3가지
- External Style Sheet : CSS 파일을 별도로 생성하여 link 태그를 사용하는 방법 또는 @import 명령을 사용하는 방식.
- Embedded Style Sheet : CSS 파일을 생성하지 않고 HTML 파일 내에 CSS 코드를 style 태그에 스타일을 적용하는 방식.
- Inline Style Sheet : 특정 HTML 요소에 style 속성을 사용하여 CSS 코드를 선언하는 방법.
- 구조와 표현의 분리라는 관점에서 바람직하지 않다.
- CSS의 단위
- 문자열 타입 : CSS에서 미리 정의된 키워드나 제작자가 정의한 저작자 키워드 등 텍스트로 입력하는 속성 값.
- 숫자 타입 : 개수 비율 등을 나타낼 수 있는 정수, 실수 값, 퍼센트 값.
- 길이 단위 타입 : 상대 길이 단위 값과 절대 길이 단위 값이 있으며 상대 길이 단위 값은 특정 길이에 비율로 정해지는 값.
- CSS에서 사용할 수 있는 색상 값
- 색상명 : yellow, red 등
- transparent
- currentcolor : 부모의 색을 따라간다.
- 16진수 RGB 색상 값 : #fc10ab, #333
- 256 단계 색상 값 : rgb(255, 0, 0)
- 백분율(%) RGB 색상 값 : rgb(100%, 0%, 0%)
- RGBA, HSLA 색상 값 : 투명도를 정할 수 있는 alpha가 존재한다.
오후에는 CSS 선택자, 상속, 겹침, 우선순위에 대해 배웠다.
- CSS 선택자는 마크업 문서에 스타일을 추가할 수 있는 방법을 제공한다. 선택자에는 종류가 매우 많다.
- 전체 선택자 : 모든 요소를 선택하여 스타일을 적용할 수 있다. * 기호를 사용해야 한다.
- * { style~~~ }
- 요소 선택자 : 태그명을 사용하여 선택하고 스타일을 적용할 수 있다.
- 태그명 { style~~~ }
- 클래스 선택자 : 클래스 명을 선택하여 스타일을 적용할 수 있다. 클래스명 앞에 . 을 사용해야 한다.
- .클래스명 { style~~~ }
- 아이디 선택자 : 요소의 아이디 명을 선택하여 스타일을 적용할 수 있다. # 기호를 사용해야 한다.
- #아이디명 { style~~~ }
- 속성 선택자 : 특정 속성을 사용하는 곳에 스타일을 적용할 수 있다.
- [속성명] { style~~~ }
- 자손 결합자 : 두 개 이상의 선택자를 조합하고 특정된 선택자의 가장 마지막 선택자에 모두 스타일을 적용할 수 있다.
- 선택자 선택자 { style~~~ }
- 자식 결합자 : 두 개 이상의 선택자를 조합하고 특정된 선택자의 가장 마지막 선택자만 스타일을 적용할 수 있다.
- 선택자 > 선택자 { style~~~ }
- 가상 요소 : 선택자에 추가하는 코드로 선택한 요소의 일부분에만 스타일을 적용할 수 있다.
- 선택자::가상 요소 선택자 { style~~~ }
- 전체 선택자 : 모든 요소를 선택하여 스타일을 적용할 수 있다. * 기호를 사용해야 한다.
- CSS의 상속, 겹침, 우선순위
- CSS는 부모 요소가 자식 요소를 상속시킬 수 있다. 하지만 상속이 되는 요소가 있고 되지 않는 요소가 있다.
- 상속이 되는 요소는 꾸미기같은 요소로 color, size, font 등이 있다.
- 상속되지 않는 요소는 박스 관련 요소로 border, width, height, margin, padding 등이 있다.
- CSS는 여러 스타일이 한 요소에서 만날 때 마지막에 쓰여지거나 우선순위가 높으면 덮어 씌운다.
- CSS는 겹치는 스타일 중에서 어떤 것이 더 강력한지를 수치로 판단해서 적용하는 기준이다.
- CSS는 부모 요소가 자식 요소를 상속시킬 수 있다. 하지만 상속이 되는 요소가 있고 되지 않는 요소가 있다.
The Problem I Faced
What I Tried to Do
How I Solved It
So
Aha Moments
HTML과 CSS는 속성을 부르는 말이 다르다. HTML은 attribute라고 부르고 CSS property라고 부른다.
매일 한글로만 봐서 몰랐었는데 영어로 보니 다르다는걸 알았다.
오늘 진짜 회고조가 결성되었고 나는 조장이 되었다...
아직 모두가 어색해하는 분위기여서 내가 분위기를 풀어야겠다는 생각이 들었다.
6개월동안 모두 힘내서 수료했으면 좋겠다.
반응형
