241016
미디어 관련 태그
audio 태그
음원을 삽입할 때 사용
<audio
src="./media/BakeNoHana_化けの花.mp3"
controls
autoplay
muted
></audio>video 태그
영상을 삽입할 때 사용
<video
src="./media/bubble.mp4" width="300"
controls
autoplay
muted
></video>💫 WEBRTC (실시간 라이브 스트리밍)
시멘틱 웹
글로벌 속성
CSS
인라인 스타일 (Inline CSS)
절대 사용 X
내부 스타일 시트 (Internal CSS)
새로고침할 때마다 불러옴 (실무에서는 쓰지 않음)
외부 스타일 시트 (External CSS)
실무에서 사용
문법의 시작
선택자 { 속성: 값;}
주석
/* */
전체 선택자
* (asterisk)
태그 선택자
태그명
아이디 선택자
#: id 속성의 값으로 선택자를 지정하는 방법
클래스 선택자
.: class 속성의 값으로 선택자를 지정하는 방법
.title {
color: red;
}
.underline {
text-decoration: underline;
}✨밑에 내용은 추가 학습이라고 할 수 있다.
속성 선택자
HTML 태그의 속성과 값을 활용해서 선택자를 지정하는 방법
속성=값
속성과 값이 일치
속성~=값
속성값에 값이 포함되어 있으면 선택 (단어 기준)
속성\=값
속성값이 값과 같거나 값- 시작하면 선택
속성^=값
속성값이 값으로 시작하면 선택
[href^="http:"] {
color: red;
text-decoration: line-through;
}속성$=값
속성값이 값으로 끝나면 선택
속성*=값
속성값에 값이 포함되어있으면 선택
조합 선택자
선택자를 조합해서 다양하게 활용하는 방법
그룹 선택자
,: 여러 선택자를 그룹 짓는 방법
#title,
,
title,
h3 {
color: blue;
}자식 선택자
>: 특정 부모의 자식만 대상으로 지정하는 방법
body > p {
color: blue;
}하위 선택자
공백: 특정 요소의 하위를 대상으로 지정하는 방법
인접 형제 선택자
+: (인접한) 형제 요소를 선택
일반 형제 선택자
~: 모든 형제 요소 선택
body h1 ~ h2 {
color: red;
}가상 요소 선택자
::before
콘텐츠의 맨 앞을 선택하는 선택자
::after
콘텐츠의 맨 뒤를 선택하는 선택자
h1::after {
content: "before";
color: red;
text-decoration: underline;
font-size: 10px;
}::placeholder
placeholder 선택하는 선택자
input::placeholder {
color: red;
}가상 클래스 선택자
요소의 특정 상태를 가지고 선택하는 방법
링크 가상 클래스 선택자
:link: 한 번도 방문하지 않은 상태
:visited: 한 번이라도 방문한 상태
a:link {
color: red;
}
a:visited {
color: orange;
}동적 가상 클래스 선택자
사용자의 어떤 행동에 따라 동적으로 변하는 상태
:hover
마우스를 올린 상태, 모바일에서는 동작X
:active
마우스를 클릭 하고(한X) 있는 상태
a:hover {
color: pink;
}
a:active {
color: green;
}입력 요소 가상 클래스 선택자
:focus
입력 요소가 활성화 된 상태
:checked
체크박스가 표시되어 있는 상태
:disabled
비활성화되어 있는 상태
:enabled
요소가 활성화되어 있는 상태
input:focus {
color: red;
}
input + label {
width: 30px;
height: 30px;
border: 1px solid black;
display: inline-block;
}
input:checked + label {
color: red;
background-color: blue;
}구조적 가상 클래스 선택자
E:first-child
E 요소의 첫 번째 자식 요소를 선택
E:last-child
E 요소의 마지막 자식 요소를 선택
E:nth-child(n)
E 요소가 부모 요소의 자식 요소 중 n번째 순서가 맞으면
p:nth-child(3)
E:nth-last-child(n)
E 요소가 부모 요소의 자식 요소 중 마지막에서 n번째 순서가 맞으면
E:nth-of-type(n)
부모 요소의 자식 요소 중 n번째로 등장하는 E 요소 선택
E:nth-last-of-type(n)
부모 요소의 자식 요소 중 마지막에서 n번째로 등장하는 E 요소 선택
E:first-of-type
부모 요소의 자식 요소 중 첫 번째로 등장하는 E 요소 선택
E:last-of-type
부모 요소의 자식 요소 중 마지막으로 등장하는 E 요소 선택
li:first-child {
color: red;
}
li:last-child {
color: blue;
}
p:first-child {
color: red;
}
p:nth-child(1) {
color: red;
}
p:last-of-type {
color: red;
}💫CSS 연습해보기 사이트
https://flukeout.github.io/
