2022-05-03
html 은 시작할 때 반드시 문서타입을 작성해준다.
<!DOCTYPE html>
<html>
<head>
<mata charset = 'utf-8'>
<title> 홈페이지 이름 </title>
</head>
<body>
</body>UTF-8 ?
아주 옛날 세상에 컴퓨터가 나왔을 때 언어라 해봐야 '영어'와 '특수문자' 몇 가지만 사용되었다. 컴퓨터가 전세계로 보급되면서 각 자국민들이 임의대로 알파벳 대신 자기나라 언어를 할당해서 사용하고 있었는데, 네트워크가 발전하면서 자국의 사람이 다른 나라의 홈페이지를 방문했을 때 글자가 깨지는 현상이 발생하고 만다! 그렇게 태어난 것이 바로 유니코드(Unicode)다.
UTF-8 란, 유니코드를 컴퓨터가 이해할 수 있는 언어로 바꾸어 놓는(인코딩encoding) 방식이다.
목록 태그 (List Tag)
부모와 자식이 쌍으로 조합된다. (ol, ul 과 li) (dl과 dt, dd)
부모 태그
ol : ordered list (1, 2, 3 ... a, b, c... I, II, III...)
ul : unordered list (squre, circle, disc(기본))
dl : 설명 리스트
자식 태그
li : ou과 ul의 자식 태그
dt : 용어/이름 정의
dd : 용어/이름에 대한 설명, 내용
예시)
ol type="I" reversed : 로마자 역순
ol start="10": 순서가 10번부터 시작함 (10, 11, 12...)
ul type="circle" : 비어있는 점이 나온다
이미지 태그
<img>
이미지가 문서에 포함되지 않고 링크된다.
이미지 태그의 속성
src : source 소스
height, width : px, % 크기를 지정
title : 이미지 위에 마우스오버를 하면(마우스를 올리면) 나오는 설명
alt : 그림이 렌더링되지 못할 때 나타날 문자열 (흔히 우리가 웹페이지 로딩에 실패했을 때 엑박뜨는 곳 옆에 나오는 글자 부분을 말함. 웹접근성을 지켜준다.)
width=50% : 사용자의 웹브라우저 화면 기준으로 50%만 보여준다는 의미.
디스플레이 화면은 가로width가 중요하다. 세로는 스크롤을 통해 무한으로 내릴 수 있지만, 가로는 주어진 환경따라 레이아웃이 달라질 수 있다.
<img src="./imgs/AAA.jpg"> 절대 경로 : 어디에 있든지 그 주소를 입력하면 바로 볼 수 있는 것. 하지만 주소가 길다는 단점이 있다
상대 경로 : 주소가 짧으나 언제든 바뀔 수 있음.
경로를 입력할 때 ./imgs/AAA.jpg 에서 .는 현재 작업하는 파일이 있는 폴더를 의미한다. 해당 폴더에 하위 폴더가 있다면 /슬래시로 폴더명을 입력하고, AAA.jpg라는 파일명을 가져오면 된다.
비디오 태그
<video tag>
비디오 태그 속성에는
autoplay, controls, loop, muted
width / height 지정 가능
<source></source> 여러 미디어 리소스 지정에 사용한다.
<source type=video/mp4> mp4, ogg, webm가 있다
<video width="300px" controls autoplay muted loop>
<source src="../jaryo/media/video.mp4" type="video/mp4">
<source src="../jaryo/media/video.ogg" type="video/ogg">
브라우저가 video 태그를 지원하지 않습니다.
</video>이 코드는? 비디오 태그로 가로 300픽셀의 컨트롤러 있고, 자동재생되고, 뮤트가 되며, 무한 재생하는 영상.mp4를 불러올건데 없으면 영상.ogg를 불러와, 그것도 없으면 '브라우저가 video 태그를 지원하지 않습니다.'라는 텍스트를 띄워 의 의미이다.
오디오 태그
audio src="오디오주소" controls autoplay loop></audio>
비디오랑 비슷하다.
파비콘 적용
파비콘이란? 홈페이지를 나타내는 로고, 아이콘이라 보면 된다.
적용 가능한 종류는 아이콘 이미지 *.ico 또는 일반 이미지 *.png, *.jpg
적용
<link rel="shorcut icon" href="이미지경로/*.ico">
<link rel="favicon" href="이미지경로/*.ico">
<link rel="icon" href="이미지경로/*.ico">
여러 가지인 이유는, 일부 브라우저 마다 서로 적용되는 언어가 다르기 때문
링크 태그
<a>
속성에는 href:링크의 목적지, target:창으로 여는 방식(속성: _blank, _self, _top, _parent)이 있다.
<a href="이미지 주소" target="_blank"> 와 같은 느낌으로 쓸 수 있음.
속성은 상황에 맞게 적절히 지정해준다.
_blank : 새 창 또는 새 탭으로 연다 (새로운 사이트를 연결할 때 등)
_self : 현재 창에서 링크를 연다 (메뉴 페이지를 열 때 등)
_parent : 부모(상위) 창으로 연다. 부모 창이 없을 경우 self처럼 연다
_top : 해당 브라우저에서 가장 높은 순위의 창을 연다 (메인 같은 곳). 없을 경우 self처럼 연다.
1.이미지 태그와 비디오 태그 써보기
2.링크 태그
어려웠던 점이나 해결못한 것
틀 없이 기본적인 태그들을 집어 넣는 것이라 크게 해결 못한 것은 없었다.
소감
너무 많은 태그들을 알아서 개념 정리를 우선적으로 했다. 목록 태그는 굉장히... 지루해보이는데 생각보다 많이 쓰는 듯 하다.
