[HTML+CSS_Summary] position, 이미지 삽입, 로고 삽입, i class, 동영상 삽입

1. 이미지 스프라이트

- 이미지를 합쳐서 사용

- 로딩 속도 빠라진다, 편집이 용이하다.

- 잘 안바뀌는 로고나 공통요소를 표현할때 쓰인다.

- 개별 상품 이미지 같은건 계속 업데이트되므로 안된다.

 

- css sptrite generator

- 이미지 3장 합치고 로고를 추출하는 것에 사용한다.

- 가로, 세로, 배경이미지, x, y 위치

- 좌표를 수동으로 측정~,  sprite cow

이미지 스프라이트 예시

 

2. 웹사이트에서 링크 불러오기

2-1) i 클래스를 사용해서 로고 불러오기, fa-'n'x 클래스를 추가해서 크게 확대하기

head영역에서 <link>로 웹페이지에 있는 css class파일을 불러올 수 있다.

body영역의 클래스 이름에서 fa-2x를 큰따옴표 안에 스페이스바를 눌러 한칸 띄운 뒤 입력하면 크기가 2배 커진다.

왼쪽부터 1배, 2배, 3배, 4배 확대한 모습

i class로 만든 로고는 확대해도 화질이 깨지지 않는다.

i class 아이콘은 https://cbjh-4.tistory.com/17 17번 글에서 소개한 'font awesome' 홈페이지에서 무료로 검색 후 클래스 명을 확인할 수 있다. 해당 라이브러리 링크는 'cdnjs' 홈페이지에서 받을 수 있다.

 

2-2)<span style = "color : 색"></span>

<span> 태그 사이에 i클래스를 넣어 색을 바꿀 수 있다. (이외에 다양한 데코레이션이 가능하다)

 

 

5,6 번째가 span 태그를 사용해 컬러를 바꾼 모습

 

2-3) 인스타, 유튜브 로고 예제

 

 

 

2-3) Font Awesome 홈페이지 document 페이지 활용

아이콘 사이즈 변경 기능

무언가 아이콘에 데코레이션을 하고 싶으면 DOC탭에 들어가서 검색 후 사용하면된다.

 

아이콘을 회전하는 것도 가능하다.

애니메이션 효과를 준다.(beat효과)

>>수업 예제: 페이스북, 인스타, 유튜브 로고에 회전과 비트 애니메이션 효과를 부여하자.

 

3. 오디오 삽입

src폴더에 audio폴더를 생성 후 음성 파일을 넣고, body 영역에서 <audio src = "주소".> </audio>태그로 불러오면 된다.

cotrols는 제어창을 생성한다. 재생, 중지, 진행바 등등이 나온다.

 

4. 비디오 삽입

 

embed : 끼워넣다.
embed태그 - 오디오, 비디오, swf(미디어 다 된다.)
embedded - 임베디드(끼워넣어진)

유튜브에서 주소창을 복사한 후 그대로 src에 붙여넣으면 접근을 거부했다고 뜬다. https://www.youtube.com/embed/id입력  >>> 이런식으로 입력해야 화면에 제대로 나온다.

또는 유튜브에서 '공유' -> '퍼가기' -> src="주소"에서 큰따옴표 안에 있는 주소를 복사해서 embed src주소에 붙여넣으면 된다.

 

4-1) embed의 type에 대해서

5. iframe

웹페이지안에 웹페이지를 삽입할 경우 사용함.

5-1) iframe 예시

&amp;start='원하는 시작초' 입력하면 영상을 클릭할 때 시작하는 시간을 지정할 수 있다.

 

 

5-1) iframe 예시 - 구글맵(API 키 필요함)

 

 

5-2) input태그

input태그를 넣으면 박스가 생기며 사용자가 텍스트를 입력할 수 있는 영역이 생성된다.

placeholder : 디폴트로 인풋 박스에 글을 출력한다.

value : 디폴트로 인풋 박스에 미리 입력된 값을 출력한다. 미리 입력된 값을 사용자가 수정할 수 있다.

maxlength : 사용자가 입력할 수 있는 텍스트 길이를 제한한다.

★ <br/> 태그 : 다음줄로 이동

6. action 태그

 

 

 

7. HTML+CSS document 확인하는 사이트

https://developer.mozilla.org/ko/docs/Web/

 

 

8. position

조상 기준 : 부모 기준과 같은 의미. 가장 가까운 상위 영역(디비전 같은)

8-1) absoulte에 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 잡는다는 것은 body를 기준으로 잡는다는 의미이다.

기능사 와이어프레임 예제에서 contents태그에 position:relative;를 입력하고 cont1에 position:absolute;를 설정하면 contents가 가장 가까운 조상 중 위치 지정 요소가 있기 때문에 contents를 기준으로 위치를 잡을 수 있다.

 

8-2)  fiexd 뷰포트를 기준으로 위치를 고정한다.

 뷰포트란 웹페이지상에 보이는 영역을 말한다.

 예시) 화면을 마우스 스크롤로 이동해도 메뉴가 사라지지 않고 위쪽에 계속 보인다.

 

8-3 ) static

 

 box는 공통요소이기 때문에 class를 사용한다.

 id는 #two만 있기 때문에 one, three, four는 기본 .box형태를 갖는다.

 positon: static;은 일반적인 문서 흐름에따라 배치하므로 top, left값을 넣어도 변화가 없다.

8-4) relative

#two에 position만 relative로 바뀐 예제

relative는 일반적인 문서 흐름에 따라 배치하지만 top, left등 오프셋을 주어 이동이 가능하다.

 

8-5) absolute

#two에 position만 absolute로 바뀐 예제

요소를 일반적인 문서흐름에서 제거하고 부모기준으로 top, left와 같은 오프셋을 이용해 위치를 잡는다.

 

 

 

body영역의 div부분을 보면 one을 부모, two를 그 밑에 배치했다.

>>부모(one)를 기준으로 two위치를 top, left하여 오프셋 적용된 모습이다.

 

8-6) fixed

 스타일 영역의 .outer{}는 p태그와 box디비전을 감싸는 영역이다. border-box를 써서 혹시 영역 밖으로 나갈 경우 튀어나오지 않게 했다. 그리고 영역을 넘어가는 부분은 overflow: scroll;로 스크롤을 통해 이동할 수 있도록 했다. box클래스가 position: fixed;이므로 스크롤로 outer부분을 이동해도 one박스의 위치는 변하지 않는다.

 

8-7) sticky

sticky 속성은 static과 fixed 속성의 특징을 모두 가지고 있는 속성입니다.
평소엔 static 처럼 행동하다가, 임계영역에 이르면 fixed로 전환됨
상단 0px에 고정됨 - 묻히기전에