이미지를 웹페이지에 넣고 싶을때 '경로' 설정을 정말 잘 해야한다.
html과 같은 폴더 안에 다른 폴더에 이미지가 있으면
ex) img/cuty/파일명
html보다 상위 폴더의 다른 폴더에 이미지가 있으면
ex) ../cha/파일명
위의 방식은 상대경로
절대 경로는 이미지 파일의 저장 위치 주소를 그대로 사용하는 방식이다.(많이 사용하지 않는다)
동영상 포맷 중에 avi 포맷은 원본의 정보를 모두 가지고 있어서 해상도는 좋으나 압축을 하지않아서 용량이 크다.
많이 사용하는 동영상 포맷으로는 mp4, mov가 있다. 둘 다 압축률이 좋아서 해상도도 좋으면서 용량도 작다. 특히 mov 포맷은 투명도를 저장할 수 있는 유일한 동영상 포맷이다. mov 파일은 맥에서 사용하는 디폴트 동영상 포맷으로 윈도우에서 보려면 압축을 해제하는 프로그램이 설치되어 있어야 한다. 대표적으로 quick time player가 있다.
원래 html은 공백이 1개 이상이면 더이상의 공백은 읽지않는데 그럴땐 원하는 공백 부분에 &nbsn을 사용해서 공백을 만들거나 많은 공백이 필요하다면 <pre></pre> 태그를 이용한다. 그 태그안에서는 공백을 자유롭게 연출할 수 있다.
양식이라는 뜻 form 짝꿍태그이다.
input은 입력한다라는 뜻으로 단일 태그이며 인라인 요소이다.
type에 따라서 입력하는 방법이 다르다.
textarea는 text를 자유롭게 쓸수있는 box를 만들어준다.
select 태그 안에 옵션을 만들어 선택할 수 있는 박스를 만든다. (하나만 선택 가능)(다중 선택을 하고 싶다면 multiple 속성)
submit은 제출하는 형태의 input type이다.
<form action="저장할 파일명">
method = "get" 내가 입력한 매개변수값이 노출이 되는 방식.
method = "post" 노출이 되면 안되는 상황에서는 post 방식을 사용한다.
radio 선택을 하나만 하고싶다면 lable 태그를 이용해서 name으로 같은 그룹이라고 묶으면 된다.
checkbox는 다중선택을 하고싶을때 사용한다.
label의 for 속성과 input의 id 값을 맞춰주면 토글박스를 누르지않고 텍스트를 눌러도 선택이 된다.
<fieldset></fieldset> 같은 필드끼리 묶어준다.
<legend></legend> 필드의 제목을 만들어준다.
꾸미는 스타일요소로는
외부 스타일 방식
내부 스타일 방식
인라인 스타일 방식
세가지 방식이 있지만 오늘 배우는 방식은 인라인 스타일의 방식이다.
두개 이상의 스타일을 주고싶을때 ;(세미콜론)을 이용해서 현 스타일이 끝났다는것을 알려야한다.
header 태그
<head>태그는 문서에서 단 한 번만 사용할수 있고 <html>태그 다음에 입력하나,
<header> 태그는 여러 번 사용할 수 있고 본문 즉 <body>태그 안에서 사용가능하다.
<nav>태그는
네비게이션 표현을 위한 태그로 본문 위치에 영향을 받지않는다. 즉, <body>태그 안에는 어디든 사용할 수 있다.
(클릭했을때 어떤 화면으로 넘어가는 역할을 하기 때문이다.)
<article>태그는 웹페이지 상에서의 실제 내용을 의미
본문이면서 기사로 인식할 수 있는, 배포할 수 있는 내용을 보통 article태그로 묶는다.
태그를 사용한 웹컨텐츠는 다른 곳에 배포하거나 재사용할 수 있다고 검색엔진이 인식하기 때문에 본문 내용에서 독립적으로 분리할 수 있는 기사 내용
<section>태그는 웹컨텐츠들을 그룹으로 묶어주는 역할을 담당
<article>태그와 비슷한듯하면서 다른다. <section>태그로 묶은 후 그 안에서 <article> 태그를 사용할 수 있다.
<section>태그로 내용을 묶은 후 그 안에서 또 다른 <section>태그를 사용할 수 있따.
<section>태그로 묶을 시 하나의 제목으로 정의될 수 있는 연관성 있는것들을 <section>태그로 묶어주는 것이 좋다.
<aside>태그는 웹컨텐츠 제작시 주 내용이 아닌 왼쪽이나 오른족에 부수적인 내용이 들어가는 부분 표현
<footer>태그는 웹사이트의 저작권 정보나 저작권표기와 같은 내용이 들어가는 부분
스타일을 주기 위해 블록 형태의 의미없는 태그인 div태그로 집단을 만들어 수정하거나 편집하기에 용이하게 사용한다.
센스있게 스타일을 내는 기법으로 톤인톤 배색기법과 톤온톤 배색기법이 있다.
톤인톤 배색기법 : 다양한 색상을 사용하지만 채도와 명도를 맞추어 배색하는 기법
톤온톤 배색기법 :색상은 한가지만 사용하면서 명도와 채도를 변경해주는것
메인 페이지는 index.html로 웰컴 페이지임을 알린다.
'HTML > information' 카테고리의 다른 글
| [HTML] 여러가지 태그들 (0) | 2023.03.24 |
|---|---|
| [HTML] HTML이란 (0) | 2023.03.22 |