html, css - 국비 교육 3일차 일지
국비교육 3일차 학습 일지
오늘은 css 학습을 시작했다.
선택자 종류가 너무 많아서 했갈리는데 ㅠㅠ복습 열심히 해야겠다..! 홧팅
[chapter07 멀티미디어]
HTML5에서는 웹 브라우저 안에 멀티미디어를 직접 재생 할 수 있다.
1. 웹에서 지원하는 비디오/ 오디오 파일 종류
1) 비디오
mp4, ovg
2) 오디오
mp3, ogg
2. <audio> 태그
: 오디오 파일 삽입하기
: 배경음악이나 효과음 등 오디오를 삽입할 때 사용
<audio src="오디오파일 경로" [속성] [속성="속성값"]></audio>
- autopey : 오디오를 자동 재생
- cooltools :
- rop
-mute : 오디오 파일 진행은 되지만 음소거
3.<video>
: 비디오 파일 삽입하기
* 속성
- autoplay : 크롬 자체에서 소리가 막혔기 때문에 자동 재생은 가능하나! mute로 음소거를 해줘야지 자동재생이 됨
-poster : 브라우저 및 인터넷 문제로 동영상 재생이 안될 때 사진 이미지가 대체되서 들어가는 것(썸네일)
: 여러 미디어 확장자 파일 한꺼번에 지정할 때는 sorce 태그 사용
(주로 이전 버전 대응해서 영상을 보여줘야 할 때 사용)
[CSS]
[chapter 01 css 기초]
1. css의 이해와 주석 설정
1) 텍스트 색상이나, 크기, 이미지 크기나 위치, 표 색상, 배치 방법등 웹 문서의 디자인 요소를 담당
2)선택자란 css로 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말함
3) {}안에 여러 속성을 지정할 수 있고 마지막엔 ;(세미콜론)으로 구분해준다.
(만약 다음에 올 속성이 없으면 생략해도 가능함)
4) 스타일형식
- 주석
/*내용*/
2. 외부 스타일 시트
: 일반적으로 가장 많이 사용하는 형식
: html에 <head></head> 내에 <title> 태그 밑에 직접 입력하기
<link href="파일경로" rel="stylesheet" type="text/css">
3. 내부 스타일 시트
: 많이 사용은 되지 않지만 간단히 테스트 해 볼 때 사용함(길어지게 되면 용량 등 코드가 복잡할 때는 사용이 어렵기 때문)
:html문서에 사용함
: <style>
3. 인라인 스타일 시트
: 같은 자리에 css가 여러개 겹치는 경우가 발생함, 인라인으로 태그가 된 경우 겹쳐진 경우 인라인이 우선순위로 적용됨
: 거의 사용하지 않고 우선순위를 따질 때 사용
: 태그에 직접 사용하는 방식
<p style="속성:속성값;"></p>
4. import
:css안으로 다른 파일을 불러들일 경우 사용
@import url("경로");
[chapter 02 CSS 선택자의 종류]
- 선택자의 종류(12가지)
1. 전체선택자
2. 태그선택자
3. id선택자
4. class선택자
5. 종속선택자
6. 하위선택자
7. 자식선택자
8. 인접선택자
9. 그룹선택자
10. 반응선택자
11. 속성선택자
12. 가상선택자
1. 전체선택자
: HTML문서 안에 있는 모든 태그를 선택할 때
: 모든 태그에 동일한 효과를 일괄적으로 줄 때
: 모든 태그에 적용함
: 주로 프로젝트 작업시 기본 세팅할 때 사용함
(값을 초기화 시키고자 할 때, 여백 줄이기 등등)
*{속성:속성값;}
2.태그선택자
: 특정한 종류의 태그를 모두 선택할 때
태그 {속성:속성값;}
3. id선택자
: 이름은 한 번만 사용 가능
#아이디명{속성 속성값;}
4. class선택자
: 이름을 여러번 사용 가능
.클래스명 {속성:속성값;}
5. 종속선택자
: 하나의 선택자에 종속되어 있는 선택자를 사용할 때
: 태그 선택자 내부에 또 다시 클래스 선택자 또는 아이디 선택자가 포함되어 있는 경우
선택자 형태 설명
| 태그#아이디 {속성:속성값;} | li태그안에 있는 #menu1에만 스타일이 적용된다. |
| 태그.클래스 {속성:속성값;} | li태그안에 있는 .menu1에만 스타일이 적용된다. |
6.하위선택자
: 띄어쓰기 가능
: 특정한 태그 아래에 있는 후손을 선택할 때
: 부모요소에 포함된 하위 요소를 모두 선택
: 넓은 범위로 사용할 때 편함, 속 안까지 선택하지 않을 때 사용시 주의 해야 함
: 상위요소에 포함된 모든 하위요소에 스타일이 적용됨, 상위요소와 하위요소를 공백으로 구분
7.자식선택자
: 특정한 태그 아래에 있는 자식을 선택(후손까지는 안가는)
: 자식 요소에만 스타일을 적용하는 선택자로, 두 요소사이에 '>'기호로 표시하여 구분
:부모 밑에 있는 자식 태그에만 스타일이 적용
: 부모 밑에 있는 자식 태그에만 스타일이 적용
*자식선택자와 하위선택자의 차이
-자식선택자
: 부모밑에 있는 자식태그에만 스타일이 적용됨(선택자A>선택자B)
-하위선택자
: 상위요소에 포함된 자식에서부터 후손까지 모두 적용됨, 공백으로 구분
(선택자A 선택자B)
8.인접(동위)선택자
: 동위 관계에서 뒤에 위치한 태그를 선택할 때
: 인접 형제 선택자라고도 함
: 요소1과 요소2사이에 '+'기호를 표시함
: 요소1과 요소2는 같은 레벨이면서 요소1 이후 가장 먼저 오는 요소2를 선택합니다.
기본형 ) 요소1+ 요소2
선택자 형태 설명
| 선택자A + 선택자B | 선택자A 바로 뒤에 있는 선택자B에 스타일 적용 |
| 선택자A ~ 선택자B | 선택자A 뒤에 있는 선택자B에 스타일 적용 |
예) * 인접선택자 :
h1 + p{color : blue;}
h1요소와 형제인 p요소 중에서 첫 번째 p요소만 선택하여 글자를 파란색으로 적용하려면 다음과 같이 사용함
* 형제선택자
: 형제요소의 스타일을 정의하는데 인접 형제 선택자와 달리 모든 형제 요소에 적용됨
: 형제 선택자를 정의할 때는 첫 번째 요소와 두 번째 요소 사이에 '~'기호로 표시
: 요소1과 형제인 요소2를 모두 선택하는 것임
예) h1~p{color : blue}
: h1요소 뒤에 오는 모든 형제 p 요소의 글자에 파란색이 적용됨
기본형 ) 요소1~ 요소2
9.그룹선택자
: 동일한 선택자를 그룹으로 묶어서 사용할 때
: 쉼표(,)를 이용하여 선택자를 나열하고 속성지정함
.classname, #idname, tagname{속성:속성값;}
10.반응선택자
: 사용자의 반응으로 생성되는 특정한 상태를 선택하는 선택자
|
선택자 형태
|
설명
|
|
:active
|
마우스로 클릭했을 때 반응
|
|
:hover
|
마우스를 위에 올린 상태의 반응
예)opstic 투명도 |
|
:link
|
방문하지 않은 링크의 반응
|
|
:visited
|
방문한 링크의 반응
|
1) :link 가상 클래스 선택자
: 방문하지 않은 링크에 스타일을 적용
: 텍스트링크는 기본적으로 파란색 글자와 밑줄로 표시된다. 이때 링크의 밑줄을 없애거나 색상을 바꾸려면 :link 선택자를 사용한다.
2) visited 가상 클래스 선택자
: 웹 문서의 링크 중에서 한 번 이상 방문한 링크에 적용한다. 한 번 이상 방문한 텍스트 링크는 보라색이 기본값, 이때 사용자가 방문한 텍스트 링크와 색상이 달라지지 않게 하려면 visited 선택자를 사용해 조절
3) :hover 가상 클래스 선택자
: 웹 요소 위로 마우스 포인터를 올려놓을 때 스타일을 적용한다.
: 이미지 위로 마우스 포인터를 올려놓았을 때 다른 이미지로 바뀌거나, 메인 메뉴 위로 마우스 포인터를 올려놓았을 때 서브메뉴가 나타나는 효과를 만들 수 있다.
4) :active 가상 클래스 선택자
: 웹 요소의 링크나 이미지 등을 활성화 했을 때, 즉 클릭했을 때 스타일을 지정
: 예를 들어 어떤 웹 요소의 링크를 클릭하는 순간의 스타일을 지정할 수 있다.
5) :focaus 가상 클래스 선택자
: 웹 요소에 초점이 맞추어졌을 때 스타일을 적용
: 텍스트 안에 마우스 포인터를 올려놓거나, 웹 문서에서 tap을 눌러 입력 커서를 이동했을 때 스타일을 지정
* 적용 순서
이 순서가 바뀌면 스타일을 정의하더라도 제대로 적용되지 않는다.
(1) :link(2) :visited(3) : hover(4) :active
11.속성선택자
: 특정 속성에 효과를 줄 때 , 선택자 뒤에 대괄호([])를 사용해 속성값 입력
: HTML 태그를 작성할 때 여러가지 속성을 함께 사용하는데 그 속성 값에 따라 원하는 요소를 선택할 수도 있다. 이때 사용하는 것이 [속성]선택자이다. 대괄호 사이에 원하는 속성을 입력하면 된다.
|
선택자 형태
|
설명
|
|
선택자[속성]
|
특정한 속성이 있는 태그를 선택
|
|
선택자[속성=값]
|
특정한 속성 안의 값이 특정 값과 같은 문서 객체를 선택
|
|
선택자[속성^=값]
|
속성 안의 값이 특정 값으로 시작하는 태그를 선택
|
|
선택자[속성$=값]
|
속성 안의 값이 특정 값으로 끝나는 태그를 선택
|
|
선택자[속성*=값]
|
속성 안의 값이 특정 값을 포함하는 태그를 선택
|
- 선택자[속성]
예) a요소 중에서 href속성이 있는 요소를 선택하려면 다음과 같다.
a [ href ] {...}
- 선택자[속성=값]
: 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정할 때 사용
예) a요소 중에서 terget 속성 값이 '_blank'인 것만 선택하고 싶다면 다음과 같이 작성한다.
a [ target = _blank ] {...}
-선택자[속성~=값]
: 여러 값 중에서 특정 속성 값이 포함된 속성 요소를 선택하는 선택자: 이 선택자는 속성이 하나면서 속성값이 여러 개일 때 특정 속성값을 찾는 데 편리하다.: 예를 들어 하나의 요소에 클래스 스타일을 여러 개 적용할 수 있는데, 그 중에 button 스타일이 있는 요소를 찾으려면 다음과 같이 작성한다.
[class ~= button ] {...} (class 값 중에 button이 있는 요소)
여기서 주의할 점은 [속성~=값] 선택자는 button 값과 정확하게 일치하는 요소를 선택한다는 것!만약 flat-button이나 buttons 처럼 button 외에 다른 글자가 속성값에 포함되어 있으면 선택하지 않음!
-선택자[속성^=값]
: 특정 속성값으로 시작하는 속성 요소를 선택: 속성값이 정확하게 일치하지 않더라도 지정한 속성값으로 시작하는 요소를 찾을때 사용예) title속성 값이 eng로 시작하는 a요소를 찾는다면 다음과 같이 작성함a[title ^=eng] {...}속성값이 'eng'뿐만 아니라 'english'인 요소도 선택할 수 있다.
- 선택자[속성$=값]
: 지정한 속성값으로 끝나는 요소를 선택예) 링크한 파일 이름의 마지막 단어가 xls인 요소를 찾는다면 다음과 같이 작성[href $=xls]{...}
- 선택자[속성*=값]
: 속성값이 어느 위치에 있든지 지정한 속성값이 포함되어 있다면 해당 요소를 선택함예) href 속성 값 중에 'w3'가 포함된
요소를 선택한다면 다음과 같이 작성함
[href *=w3]선택자
12.가상(수도)선택자
: 사용자 동작에 반응하는 가상 클래스
: 웹 문서에서 특정 요소에 스타일을 적용하려면 보통 class나 id선택자를 사용한다. 하지만 요소가 여러 개 나열되어 있는 경우에는 class나 id를 사용하지 않고도 스타일을 지정할 요소가 몇 번째인지를 따져서 스타일을 적용할 수 있다,
선택자 형태 설명
| ::before | 특정 요소의 앞에 내용이나 스타일을 추가합니다. |
| ::after | 특정 요소의 뒤에 내용이나 스타일을 추가합니다. |
| :nth-child(n) | 부모 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택합니다. |
| :first-child | 부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택합니다. |
| :last-child | 부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택합니다. |
| A:first-of-type | 부모 안에 있는 A요소 중에서 첫 번째 요소를 선택합니다. |
| A:last-of-type | 부모 안에 있는 A요소 중에서 마지막 요소를 선택합니다. |
[chapter 03 선택자의 우선 순위]
1. 선택자 우선순위
같은 선택자가 여러 css명령을 중복으로 받으면 우선순위가 같은 선택자라면 나중에 기술한 것이 먼저 기술한 것보다 우선 순위가 높음