[2주차] 3. HTML 인라인 텍스트 & 수정 & 멀티미디어 & 내장 콘텐츠 관련 태그들

인라인 텍스트 태그
1. span 태그
- 대표적인 인라인 요소
- 본질적으로 아무런 의미를 갖고있지 않음
- 막 사용될 수 있음
- 텍스트의 일부분들을 이 태그로 묶어서 css나 js 입력시 굉장히 많이 활용됨
-div 태그와 굉장히 유사하게 사용 가능
*div 태그는 본질적으로 아무런 의미를 갖지 않고 대표적인 블록요소이다.
- div 태그와의 비교 : div 태그는 기본적으로 블록요소기 때문에 한 줄에 하나밖에 표시할 수 있어서 다른 텍스트와 줄이 바껴서 표시됨, 하지만 span 태그는 인라인 요소기 때문에 텍스트 중간에 있는 부분을 딱 명확하게 찝어낼 수 있다. 의미가 없이 스타일을 적용하거나 혹은 js에 적용하는 데만 활용하는 것이면 div보다는 span 태그가 적합하다.

2. br 태그 <br/>
- 빈태그(닫히는 태그가 없음)
- br 태그를 여러 번 써서 줄바꿈을 여러 번 하여 줄과 줄 사이의 간격을 넓히는 것은 옳지 않다. html은 구조를 나타내는 역할로 사용하는 것인데 줄과 줄 사이의 간격을 넓히는 것은 화면에 표시되는 것을 만드는 것이기 때문에 화면에 표시되는 것은 거의 대부분의 경우에 css로 작업해야 한다.
- line-height는 css 속성으로 줄의 높이로 한 줄이 얼마만큼의 높이를 가지는 가를 설정하며 기본적으로는 폰트 사이즈와 동일한 높이를 가져가거나 혹은 브라우저에 따라 1.3배에서 1.4배 정도의 크기를 가지는 것이 일반적이다.
ex) 폰트 사이즈가 16px 이고 line-height를 50px로 지정하여 한 줄 높이가 50px일 때 폰트를 제외하면 한줄에서 남는 공간의 높이는 34px이다. 한 줄에서 글자 위 높이와 글자 아래 높이는 동일하므로 각각 17px이다. 그래서 첫번째 줄의 글자와 두번째 줄의 글자 사이의 실질적인 거리는 34px이 된다.
-> 그래서 line-height는 줄의 간격을 만들어내는 것이 아니고 줄의 높이를 설정하는 것이기 때문에 줄의 높이를 통해서 간격을 생각하고 만들어야 한다.

수정에 관련된 태그
1. del 태그 delete : 원래는 존재했지만 현재 상태에서는 제거됐다 라는 것을 표시하기 위해 사용된다.
- 인라인 요소 : 텍스트를 다루는 데 특화
- 기존에는 작성했었는데 시간이 지나 이제 이부분이 필요 없어졌을 때(ex 사전 등) 있었지만 내가 삭제했다는 것을 표시하기 위해 사용
- del 태그가 적용된 부분에는 브라우저에서 중앙선이 입력됨->css를 통해 변경 가능
- cite 속성 : 특정한 정보가 사라졌는데 제거한 것을 표시하고 싶을 때 제거된 이유라던가 변경사항을 설명하는 정보의 주소를 적을 수 있다.
- datetime 속성 : 변경사항이 실질적으로 언제 변경됐는지 명시해줌

2. ins 태그 insert : 원래는 없었지만 현재로서는 추가됐다는 것을 표시하기 위해 사용
- 인라인 요소
- del 태그와 반대되는 개념으로 del 태그의 경우 있다가 없어진 개념에서 쓰이고 ins 태그는 없다가 생긴 개념에 쓰일 수 있다.
- ins 태그 적용된 부분엔 브라우저에서 밑줄이 쳐져 있음->css를 통해 변경 가능
- cite 속성 : 추가된 이유, 변경사항을 설명하는 주소를 명시할 수 있다. 명시 안해도 되지만 되도록 추가된 정확한 이유가 있다면 그 이유에 대해 어떤 다른 페이지나 사이트에 대한 링크를 이부분에 작성해주는게 좋다
- datetime 속성: 변경사항이 일어난 시점 표시

---

멀티미디어 태그
1.img 태그<img/>: 이미지를 해당하는 위치에 삽입할 때 사용하는 태그
- 빈태그
- src 속성 source : 필수 속성이다, 이미지 삽입시 어떤 이미지를 삽입할 것에 대한 속성을 추가해야 함
- alt 속성 alternative : 필수 속성이다, 이미지가 제대로 출력되지 못하는 환경에서 이미지 대신 출력될 이미지를 대체할 대체 텍스트
- width 속성, height 속성 : 이미지의 사이즈를 지정할 때는 가로방향이든 세로방향이든 하나의 사이즈만 지정하면 이미지가 갖고있는 비율을 그대로 유지하면서 사이즈를 줄일 수 있다. 크기를 조절하는 용도로 쓸 때는 한쪽 방향의 사이즈만 입력하는 것을 추천한다. css를 통해서도 img의 크기 조절 가능하다.
  -> 인터넷 익스플로러 지원 불가
->고정된 이미지 크기를 위해서 사용할 수 있지만 브라우저의 해상도(viewport) 의 크기에 맞게 srcset에 있는
이미지들 중 최적화된 이미지가 출력된다. 즉 일반 출력으로 width= 500px 일시 사이즈를 500px를 유지하지만
그 안에서 브라우저의 크기 최적화에 따라 사용하는 이미지의 경로는 다르게 가져가겠다. 출력하는 이미지의
크기만 500px로 고정하겠다라는 의미를 갖게 됨
-> 출력하는 크기만 설정하고 경로만 그때그때 달라짐
-> sizes와 width 동시 지정할 경우 width만 적용됨
- 반응형 웹사이트 제작할 때 해당하는 반응형 구조에 따라서 이미지가 어떤 종류가 나올 것인지 설정할 때 쓰는 속성
① srcset 속성 source set : 브라우저에 제시할 이미지의 url과 해당하는 원본의 크기 지정하고 그것들의 목록
정의 가능. sizes의 최적화된 조건에 해당해서 출력될 이미지의 목록(후보들)

• <img srcset=”이미지경로 실제가로너비, ”> 이런식으로 경로 띄어쓰기 너비 작성 후 구분은 ,(쉼표)로 한다. 이렇게 작성시 작성한 여러 이미지들 중에서 사용한 환경에 맞는 가장 최적화된 이미지를 골라서 사용하게 된다.
• 브라우저에 제시할 이미지와 이미지의 원본크기 지정
• 반응형 웹에 맞게 브라우저가 선택해서 사용할 이미지들의 후보 적어주고 브라우저는 그 후보를 선택해서 이미지를 골라서 사용하게 됨
• 후보로 사용하게 될 이미지의 경로와 그 해당하는 이미지의 원본의 크기를 정확하게 적어줘야만 브라우저가 적절하게 이미지를 골라서 사용할 수 있다.
• 사용할 이미지를 적어도 2장 이상 준비해야 하며 1장 사용시 굳이 srcset 이 아닌 src를 쓰면 된다.
• px 단위가 아닌 w나 x 단위 써야함
• 큰이미지 부터가 아닌 작은 사이즈의 이미지부터 위에서 아래로 순서대로 작성
• 크기를 늘려서 사용하는 것보단 줄여서 사용하는 것이 이미지가 깨지지 않는 방법이라고 브라우저가 판단. 그래서 브라우저는 줄여서 사용할 수 있는 이미지 크기에 가장 가까운 이미지를 골라서 사용
• css로 구현하고 싶을 시 미디어 조건은 @media(min-width: ;){}으로 쓸 수 있다. css로 작성시 많은 코드가 사용되므로 이미지 태그에서 srcset을 이용하는 것이 더 간편하게 반응형에 이미지 제공 가능

② sizes 속성 : 미디어의 조건과 그 해당하는 조건일때의 이미지의 최적화 크기 정의하고 그것들의 목록 정의 가능,
최적화된 조건을 명시하는 영역이다.

• 인터넷 익스플로러 지원 불가
• 일반 출력이 아닌 최적화 출력을 함
• sizes=”500px” 일시 출력되는 이미지의 크기는 500px이고 최적화된 크기도 500px이다. srcset의 400px, 700px, 1000px 의 이미지 들 중 500px로 가로너비를 맞출 때 가장 가로너비를 적게 줄이는 700px 선택하게 됨. 400px은 500px으로 가로너비를 늘려야해서 사진이 깨질 수 있으므로 안됨. 즉 이렇게 최적화된 이미지를 고른 후 가로너비크기를 500px로 고정해서 사용
• 미디어 조건을 다르게 명시하면 그때그때 다르게 활용이 될 수 있지만 기볹거으로 출력되는 크기도 지정하지만 이미지가 사용될 만한 최적의 크기도 동시에 지정해서 경로가 바뀌지 않고 하나의 이미지만 사용하게 되는 개념이다
• <img srcset=”” sizes=”(미디어조건) 최적화출력크기”> 브라우저가 조금 더 자세하게 srcset의 이미지들 중에서 sizes에 있는 현재 조건에 맞는 최적화된 이미지를 골라 사용할 수 있게 됨.
• <img srcset=”” sizes=”(min-width:1000px) 700px”> ->브라우저의 뷰포트의 가로너비가 1000px 이상일 때는 이미지의 최적화 출력 크기를 700px 로 하라는 뜻

③ srcset과 sizes 속성 지정해서 설정하면 직접적으로 환경 설정하는 부분을 모두 건너뛰고 image의 url과
원본크기만 을 지정하는 것만으로도 대부분의 환경 설정등을 브라우저에 떠넘겨서 반응형 웹페이지를 만들 수 있다
④ 이미지의 url을 지속적으로 바꾸면서 테스트 할 것이여서 이미지가 캐싱되어 새로고침을 해도 변경되지 않는
문제가 발생할 수 있다. 그래서 개발자 도구 f12 에서 network부분에서 하단의 disable cashe 부분에
체크되어있는지 확인해야 한다.
⑤ srcset과 sizes 사용할 경우 src와 alt는 무시해도 된다. srcset이 사용될 수 없는 환경에서는 src 속성이 대체되서
사용하게 됨
- w 단위 width descriptor : 이미지의 원본 크기 중 가로 너비 크기 설정 -> w 단위는 x 단위의 superset으로 상위호환이므로 x 단위 보다는 w 단위 적는 것을 추천
ex) 400*300(px)일 경우 w값은 400w
- x 단위 Device pixel ratio descriptor : 비율의도(1을 기준으로 하여 몇 배냐 ex)2x) 의미, 일종의 ㅂ수 정의. 제일 작은 이미지의 배수를 기준(1x)으로 삼고 다음 이미지의 크기가 몇 배씩 큰지를 명시해줄 수 있다. 정확한 크기가 가늠하기 어려우므로 일반적으로 w 단위 사용

2. audio 태그 : 소리콘텐츠 삽입 태그 ex)mp3
- js 사용시 오디오 시작하는 시점이라던가 오디오 시작 음향 크기 등 오디오 태그를 제어함으로서 자세한 부분들을 컨트롤 할 수 있다.
-autoplay 속성 : 오디오 콘텐츠가 사이트에 들어가자마자 바로 재생
-controls 속성 : 재생, 소리 음향 조절, 정지 이런 버튼들을 제어하는 메뉴들을 화면에 출력. 이거 작성 안하면 빈화면임. 브라우저에서 제공하는 컨트롤러 표시가 브라우저에 나옴
-loop 속성 : 소리 콘텐츠 재생이 끝났을 때 멈추는 것이 아니라 원래대로 돌아가서 재생
-preload 속성 : 소리 콘텐츠가 있는 사이트로 들어갔을 때 미리 준비를 해놓는 것
->none: 아예 load하지 않다가 플레이 될시 오디오 파일을 완벽하게 load하는 것 , metadata로 설정 : 기본적인 정보만 미리 불러와 놓은 상태, auto: 페이지가 열리고 재생버튼 누르지 않아도 전체파일을 미리 가져온 체로써 설정
- src 속성: 소리 콘텐츠 경로 명시
-muted 속성 :음소거가 되서 소리가 안나는 형태로 됨 . controls 있을 시 소리 다시 나오게 가능

3. video 태그 : 영상 콘텐츠 삽입 ex)mp4
-autoplay 속성 : 영상 콘텐츠가 사이트에 들어가자마자 바로 재생
-controls 속성 : 재생, 소리 음향 조절, 정지 이런 버튼들을 제어하는 메뉴들을 화면에 출력.
-crossorigin 속성: 외부에 있는 특정한 사이트, 특정한 페이지에서 동영상 가져올 때 동일한 출처인지 확인할 것인지 여부 볼 때 사용
-loop 속성 : 영상 콘텐츠 재생이 끝났을 때 멈추는 것이 아니라 원래대로 돌아가서 재생
-muted 속성 :음소거가 되서 소리가 안나는 형태로 됨
-poster 속성: 재생되기 전 상태의 썸네일로 사용될 이미지 경로 작성하여 삽입
-preload 속성 : 소리 콘텐츠가 있는 사이트로 들어갔을 때 미리 준비를 해놓는 것
->none: 아예 load하지 않다가 플레이 될시 오디오 파일을 완벽하게 load하는 것 , metadata: 기본적으로 이거로 설정되어있음, 기본적인 정보만 미리 불러와 놓은 상태, auto: 페이지가 열리고 재생버튼 누르지 않아도 전체파일을 미리 가져온 체로서 설정
- src 속성: 영상 콘텐츠 경로 명시
- width 속성 : 화면에 출력될 영상 가로너비 설정
- height 속성: 화면에 출력될 영상 세로길이 설정
3. figure 태그, figcaption 태그: 이미지와 이미지에 대한 설명 이 두개가 연관되어 있다는 것을 브라우저에 알려주기 위한 태그
- figure 태그 : 삽입할 이미지나 삽화 그리고 도표 등의 영역 설정
- figcaption 태그 : 삽입한 것에 대한 설명
- 관계가 있다고 명시하고 싶은 이미지와 설명을 figure 태그로 wrapping 가능, 설명 부분은 figcaption 태그 사용

---

내장 콘텐츠
1. iframe 태그: 다른 html 페이지를 현재 페이지에 삽입할 때 사용하는 태그
- 인라인 요소
- 해당하는 사이트 안에다가 다른 사이트를 넣을 수 있다
- 유튜브 등 동영상 콘텐츠를 가져와서 페이지에 삽입할 때 많이 사용
-> 유튜브 소스코드(iframe 태그로 되어있음) 복사해서 코드에 붙여넣으면 페이지에 유튜브 동영상이 삽입된다. 이렇게 다른페이지의 영상 콘텐츠를 iframe을 통해서 가지고 와서 특정 페이지의 일부분처럼 사용해서 제공할 수 있다.
- 하나의 페이지에는 기본적으로 브라우저가 가지는 컨텍스트 라는 개념이 있다. 근데 하나의 페이지 안에 다른 페이지가 들어있으므로 브라우저 컨텍스트가 중첩됐다라고 할 수 있다.
- name 속성 : iframe이 가지는 이름. 여러 iframe 있을 시 이거 있으면 좋음
- src 속성 : iframe에 들어갈 특정 페이지의 링크
- width, height 속성 : iframe이 출력될 가로너비와 세로길이 설정
- allowfullscreen 속성 : 동영상이 삽입될 경우 전체화면을 통해서 볼 수 있는데 그 사용여부
- frameboader 속성 : 기본값이 1로 설정되어 있음, 딱히 필요하지 않은 외곽선이므로 값을 0으로 바꿔 사용하는 것이 좋다
- sandbox 속성 : 삽입한 페이지 내에서 뭔가를 할 수 없고 읽기만 할 수 있게 만드는 속성
->iframe 같은 경우 외부에 있는 현재 페이지에 다른 사이트를 삽입하는 거여서 보안에 취약하므로 보안적인 문제가 발생할 수 있는 데 이 속성을 사용시 보안적인 문제에서 조금 자유로워질 수 있다. 하지만 외부에서 가져온 사이트를 삽입하는 경우 sandbox를 사용하게 되면 보안이 강력해지만 사이트에서 사용하는 기본적인 양식이나 js이 동작이 안 할 수도 있다. 그래서 일단 다 막긴하는데 허락하는 것들을 설정할 수는 있다.
-> allow-form: 양식 제출 가능, allow-scripts: js을 실행할 수 있는 형식으로 만드기 위해 사용 , allow-same-origin: 같은 출처 리소스 사용 가능

2. canvas 태그 : canvas API이나 WebGL API 사용해서 그래픽이나 애니메이션을 렌더링할 범위 지정하는 용도로 사용
- js 없이 제어 불가능, html과 css를 이용해서 그림 그리는 것은 아님
- 그림을 그릴 때 js를 이용하여 그림을 그릴 수 있는 명령(canvas API:canvas를 활용할 수 있는 명령들의 집합, WebGL API: 웹에서 그림이나 그래픽이나 애니메이션을 만들 수 있는 고성능의 명령들의 집합) 제공
- width, height 속성 : 그래픽이나 애니메이션을 렌더링 할 영역의 가로너비, 세로길이 지정, px 단위 안적어도 됨
- 좀더 많은 코드들을 이용해서 화려하고 멋있는 애니메이션 만들 수 있고 외부에서 이미지를 가져와서 캔버스에서 그려서 밖으로 내보낼 수도 있다
- canvas 태그 안에 js에서 지칭해서 찾아서 그림을 그려야 하니까 id로 고유한 이름을 설정해준다.
<canvas id="canvas" width="200" height="150"></canvas>

//js 작성
<script>
const canvas =document.getElementById('canvas');
const ctx = canvas .getContext('2d')

//캔버스 안에다가 script를 통해 그림그리기
ctx.fillStyle='rgb(200,0,0)';
ctx.fillRect(10, 10, 50, 50);
</script>


const canvas =document.getElementById('canvas');
-> html에서 id가 canvas인 canvas 태그 찾기

const ctx = canvas .getContext('2d')
-> ctx는 컨텍스트의 약자로 이코드는 ctx는 canvas에다가 2d로 그림을 그릴 것이라는 내용이 된 것이다.ctx로 그림 그리기 가능해짐

ctx.fillStyle='rgb(200,0,0)';
-그림 그릴 색깔

ctx.fillRect(10, 10, 50, 50);
- fillRect는 사각형을 그리는 것으로 (왼쪽에서의 거리x, 위에서의 거리y, 가로사이즈, 세로사이즈)

---

Tip
- 화면에 표시되는 부분이랑은 별개로 원하는 스타일은 무조건 css로 작성할 수 있다. html 태그를 통해서 화면에 노출되는 스타일은 사실상 크게 인식할 필요 없이 충분히 수정 가능하니까 약간 무시하면서 쓰는 것도 하나의 방법이고 의미론적 부분에서 태그가 갖고있는 의미에 집중해야지 표시되는 데 집중할 필요는 없다.
- 경로 작성 시 ./는 생략 가능 하다. 적은 것과 안적은 것의 효과는 동일 하다
-개발자 도구 상단 오른쪽 점이 세로로 세개 나열되어 있는 것은 클릭 시 각각의 위치들을 브라우저의 어디서 실행할 것인지 설정 가능
- 브라우저(viewport) 크기 조절시 브라우저 오른쪽 상단에 크기 표시됨
- 오디오나 영상에 마우스 대고 오른쪽 버튼 누르고 새탭으로 열기해서 그 주소 복사해서 코드에 적으면 그 오디오나 영상 사용 가능
-카멜표기법: fillStyle, getContext 등 중간에 나오는 단어는 대문자로 시작

참고
https://heropy.blog/2019/05/26/html-elements/

한눈에 보는 HTML 요소(Elements & Attributes) 총정리

https://heropy.blog/2019/06/16/html-img-srcset-and-sizes/

HTML IMG의 srcset과 sizes 속성(updated)