4장
4.1 CSS문법 살펴보기
- 선언부 -h1{color:red};
선택자 속성 값
선택자: CSS스타일을 적용할 HTML태그 요소를 선택하는 영역
선언부: 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역
-> ({}) ; 중관호 안에 넣는다.
주석
(/ 별 주석내용 별 /)
4.2 CSS 적용하기
내부 스타일 시트 사용하기
(<>)안에 style
CSS 코드
/style(<>)
(정해진 위치는 없지만 보통 head 태그안에 사용)
외부 스타일 시트 사용하기
CSS 코드를 작성하는 별도 파일을 만들어 HTML문서와 CSS를 연결하는 방법이다.
확장자-> css
link rel ="stylesheet" herf="css 파일 경로"
인라인 스타일 사용하기
-> HTML태그에서 사용할수 있는 style 속성에 css코드를 작성하는 방법
태그에 직접 CSS코드를 작성하는 방식이라서 CSS의 기본 문법 형식에서 선택자 부분이 필요없다.
태그 style ="CSS 코드"></태그>
5장
5.1 기본 선택자 사용하기
전체 선택자
:HTML에서 사용할수 있는 모든 요소를 한번에 선택자로 지정하는 방법 * 기호를 사용해 표시
태그 선택자
: 지금까지 종종 사용한 방법으로 HTML선택자를 지정하는 방법
->선택자에 지정된 태그명과 일치하는 모든 요소를 한번에 선택
아이디 선택자
:HTML태그에서 사용할수 있는 id속성값을 이용해 선택자를 지정하는 방법
(#) 기호를 붙여 구분
클래스 선택자
:HTML태그에서 사용할수 있는 class 속성값을 이용해 선택자를 지정하는 방법
(.)기호를 붙여 구분
기본 속성 선택자
[속성]{CSS코드}
[속성=값]{CSS코드}
문자열 속성 선택자
:태그가 가진 속성값이 특정한 문자열과 일치하는 요소를 선택자로 지정하는 방법
5.2 조합 선택자 사용하기
그룹 선택자
:여러 선택자를 하나로 그룹을 지을떄 사용
(,) 기호로 구분
선택자1,선택자2,, ,,,,,,,,선택자n{CSS 코드}
자식 선택자
: 자식 선택자는 부모 요소의 하위에 있는 자식 요소에 스타일을 적용할때 사용함
부모선택자 > 자식선택자{CSS 코드}
하위 선택자
: 선택자의 범위를 특정 부모 요소의 하위 요소로 한정하는 방법
선택자1 선택자2 선택자3 ... {CSS 코드}
인접 형제 선택자
:앞에서 지정한 선택자 요소 바로 다음에 있는 형제관계 요소를 선택자로 지정
(+)기호로 구분
이전 선택자 + 대상 선택자{CSS 코드}
일반 형제 선택자
:이전 선택자 뒤에 오는 형제관계 요소를 모두 선택자로 지정
(~)기호로 구분
이전 선택자 ~ 대상 선택자{CSS 코드}
5.3 가상 요소 선택자 사용하기
가상 요소 선택자는 HTML문서에 명시적으로 작성된 구성요소는 아니지만 존재하는것처럼 취급해 선택하는 지정 방법
(::)기호로 구분
기준 선택자::가상 요소 선택자{CSS 코드}
5.4 가상 클래스 선택자 사용하기
:요소의 상태를 이용해 선택자를 지정하는 방법
기준요소:가상 클래스 선택자{CSS 코드}
링크 가상 클래스 선택자
:a태그에서 발생할수 있는 링크 상태를 이용해 선택하는 방법
:link - 한번도 방문하지 않은 링크일떄 선택
:visited - 한번이라도 방문한적 있는 링크일떄 선택
동적 가상 클래스 선택자
:사용자의 어떤 행동에 따라 동적으로 변하는 상태를 이용해 선택자를 지정하는 방법
:hover - 요소에 마우스를 올리면 해당 태그가 선택자로 지정
:active-요소 마우스를 클릭하고 있는 동안 해당 태그가 선택자로 지정
입력요소 가상 클래스 선택자
:focus - 입력 요소에 커서가 활성화되면 선택자로 지정
:checked - 체크박스가 표시되어 있으면 선택자로 지정
:disabled - 상호작용 요소가 비활성되면 선택자로 지정
:enabled - 상호작용 요소가 활성화되면 선택자로 지정
구조적 가상 클래스 선택자
E:first-child - E요소의 첫번째 자식 요소를 선택자로 지정
E:last-child - E요소의 마지막 자식 요소를 선택자로 지정
E:nth-chile(n) - E요소가 부모 요소의 자식 요소중 n번째 순서가 맞으면 선택
E:nth-of-type(n) - E요소가 부모 요소의 자식 요소중 마지막에서 n번째 순서가 맞으면 선택
E:nth-last-of-type(n) - 부모 요소의 자식 요소중 n번째로 등장하는 E요소를 선택
E:first-of-type - 부모 요소의 자식 요소중 첫번째로 등장하는 E요소
E:last-of-type - 부모 요소의 자식 요소중 마지막으로 등장하는 E요소
6장
6.1 CSS의 특징 살펴보기
기본 스타일 시트: 웹 브라우저에 기본으로 내장되어 웹 브라우저에 표시되는 요소들의 글꼴이나 크기,색상,굵기,문단 설정과 같은 스타일이 미리 정의된 파일 또는 문서양식
단계적 적용: 같은 태그에 여러 스타일이 적용되더라도 단계적으로 결국 마지막에 영향을 주는 하나의 스타일만 적용된다는 뜻
상속: 부모 요소에 적용된 스타일을 자식요소가 그대로 물려받아 적용되는 현상
단위
절대단위: 어떤 환경이라도 동일한 크기로 보이는 단위
싱대단위: 부모요소 또는 웹 브라우저의 창 크기에 따라 상대적으로 결정되는 단위를 말함
%: 해당 속성의 상위 요소 속성값에 상대적 크기를 가짐
em: 부모 요소의 텍스트 크기에 상대적인 크기를 가짐
rem: html 태그의 텍스트 크기에 상대적 크기를 가짐
vw: 뷰포트의 너비를 기준으로 상대적 크기를 가짐
vh:뷰포트의 높이를 기준으로 상대적 크기를 가짐
색상표기법
키워드 표기법: 색상의 영문명을 속성값으로 사용하는 방법
RGB 색상 표기법: RED,GREEN,Blue를 이용해 특정색을 표현하는 방법
+alpha 값: 색의 투명도를 의미하는 값
Hex 표기법
RED,GREEN,Blue해당하는 값을 16진수로 변환해 00~ff으로 나타내는 표기법
font-family속성
: 글꼴지정 가능 -> 글꼴 유형을 작성하도록 권장
font-size 속성
:텍스트 크기를 변경하고싶을때 사용하는 속성
font-size:<크기>;
font-weight 속성
font-weight<숫자표기법>|<키워드 표기법>;
숫자표기법: 100단위로 텍스트 굵기를 표현하는 방법(100~900값 사용)
키워드 표기법: lighter,normal,bold,bolder;
font-style 속성
font-style:<속성값>;
font-variant 속성
: 영문 텍스트를 크기가 작은 대문자로 변경할때 사용
font-variant:<속성값>;
color 속성
: 텍스트의 색상을 지정할때 사용
text-align 속성
:텍스트를 정렬할때 사용
text-align:<속성값>;
text-decoration 속성
:텍스트에 선을 긋는것
text-decoration:<속성값>;
letter-spacing 속성
:자간 조절시 사용
letter-spacing:normal|<크기>;
line-height 속성
line-height:normal|<속성값>
6.3 박스 모델을 구성하는 속성 다루기
박스모델은 모든 HTML요소가 사각형의 박스로 둘러쌓여있다는 개념
margin:박스모델에서 가장 외부에 있는 영역-> 요소의 외부 여백을 담당
border:margin보다 안쪽에 있으며 두번쨰 영역, 요소의 테두리(경계선)
padding :요소의 내부 여백을 담당
content: 시작 태그와 종료 태그 사이에 사용된 콘텐츠가 속하는 영역
블록 성격:hn,p,div태그를 사용했을때 요소의 너비가 콘텐츠 유무와 상고나없이 항상 가로한줄을 다 차지하는것을 말합니다.
인라인 성격: a,span,strong 태그를 사용했을때 요소의 너비를 콘텐츠 크기만큼 차지하는 성격을 말함
인라인 블록 성격: 요소의 너비가 콘텐츠의 크기만큼 차지하지만 그 외의 성격은 블록 성격을 가지는 복합적인 성격
6.4 배경 속성으로 요소의 배경 설정하기
background-color 속성
:요소의 배경에 색상을 넣을수 있음
background-color:<색상값>;
background-image속성
:이 속성을 사용하면 이미지를 넣을수 읶음
background-image:url('이미지경로');
background-size 속성
background-size:auto|cover|contain|<너비 높이>;
background-poistion 속성
:삽입하려는 이미지의 위치도 결정가능
background-poistion:<x 위치> < y 위치>;
background-attachment 속성
: 속성 요소에 삽입된 이미지를 스크롤 할때, 이미지의 작동 방식을 결정
background-attachment:<속성값>;
background 속성으로 한번에 지정하기
: 속성값을 나열하는 순서는 정해져있지 않지만 background-position 속성값을 먼저 작성하고 나서 슬래시로 구분한후 사용해야 한다
6.5 위치 속성으로 HTML 요소 배치하기
position 속성은 요소를 HTML 기본 흐름에서 벗어나 좌푯값에 따라 배치할떄 사용
- static ->아무런 변화가 없음
- relative 좌표를 속성에 따라 배치가능 -> top.right,bottom,left (기준점: 왼쪽 위 모서리)
- absolute ->기본 흐음에서 벗어나 좌표 속성에 따라 배치 (웹 브라우저 왼쪽 위 모서리)
- fixed -> 지정된 해당 요소는 지정된 위치에 고정
float 속성
:요소를 화면에 배치하는 또 다른 방법
float:<속성값>;
clear 속성
:float 속성을 해제할떄 사용하는 속성
6.6전환 효과 속성 적용하기
전환: 한 요소에 적용된 스타일 속성값을 다른 속성값으로 변하게 하는것
transition-proprty
:전환 효과를 적용할 대상 속성을 지정
transition-proprty:<속성값>;
transition-duration
:전환 효과의 지속시간을 설정하는데 사용
transition-duration:<시간>;
transition-delay 속성
:전환 효과의 발생을 지연가능 -> 지연하고 싶은 시간을 적으면 됌
trainsition-timing-function 속성
:전환 효과의 진행속도를 지정
linear : 처음속도와 마지막 속도가 일정
ease: 처음에는 속도가 점점 빨라지다가 중간부터 점점 느려짐
ease-in: 처음에는 속도가 느리지만 완료될떄까지 점점 빨라짐
ease-out: 처음에는 속도가 빠르지만 완료될떄까지 느려짐
ease-in-out:속도가 느리지만 빨라지다가 느려짐
cublic-bezier(p1,p2,p3,p4) : 사용자가 정의한 속도로 진행
6.7 에니메이션 속성으로 전환 효과 제어하기
키 프레임 정의하기
키 프레임: 에니메이션이 진행되는 과정에서 특정시점에서 발생해야하는 여러 작업을 정의하는 문법
animation-name속성
: 특정요소에서 적용할 키 프레임명을 지정
antimation-name:<키 프레임명>;
animation-duration 속성
:애니메이션 지속 시간을 설정->초나 밀리초 단위의 시간을 넣으면 됌
animation-duration:<지속시간>;
antimation-delay 속성
:애니메이션 실행을 지연가능
animation-duration:<지속시간>;
antimation-iteration-count 속성
이 속성을 사용하면 실행횟수를 조절가능
antimation-iteration-count:<횟수>;
antimation-play-state 속성
애니메이션의 재생상태를 지정
paused : 애니메이션의 실행을 일시 정지
running : 애니메이션을 실행
6.8 변형효과 적용하기
요소의 크기를 변형하거나 위치를 이동하거나 회전시키는 것처럼 요소 자체를 변하게 하려면 변형 효솨 속성을 사용해야한다
transform 속성
:요소에 특정 변형 효과를 지정가능
transformation:<함수>;
- translate(x,y)
- translateX(n)
- translateY(n)
- translatescale(x,y) :요소를 x와y만큼 확대 또는 축소
6.9 웹 폰트와 아이콘 폰트 사용하기
구글 폰트 적용하기
웹폰트: 인증된 기고나 또는 회사에서 웹 서버에 올려놓은 폰트
아이콘 폰트 : 다양한 아이콘을 웹 폰트를 사용하는것처럼 간단하고 쉽게 사용하는기술
