index.html 메인 도메인 웰컴 페이지라 부른다.
http://www.naver.com/(index.html) 생략되어있는 형태이다.
서버(정보를 가지고 있는 컴퓨터) 렌탈로도 많이 사용한다.
정보를 가지고 있는 언어 html
속성은 속성 값이 필요하다.
a 태그는 href는 속성 그래서 앞에 공백으로 다른것임을 표시해야한다
target 또한 속성
head 태그는 정보를 가지고 있는 블록
body 태그는 실제로 보여질 정보를 작성한다.
<head>,<body> 태그는 동등한 관계로 형제 관계이다. 그리고 <html>태그는 최상위 태그로 이들의 부모태그이기도 하다.
하지만 <head>태그나 <body> 태그에 자식 태그는 <html>의 자손 태그이다. 자식 태그는 자신의 바로 밑 자식만 인정한다.
*html 공부는 태그와 속성을 공부하는 것
<h> 태그는 heading의 약자로 1~6까지가 있다. 제목 태그이기 때문에 진한 글씨가 기본으로 들어가고 크기로 구분한다.
<p> 태그는 paragraph의 약자로 문단을 나눌 때 사용하고, 단락과 단락 사이에 여유를 준다.
<i> 태그는 italic의 약자로 기울림체 스타일을 바뀌어주는 태그이다.
<b>태그는 bold의 약자 i태그와 마찬가지로 스타일 태그이다.
<ins> 태그는 insert의 약자로 추가하는 태그
<del> 태그는 delete의 약자로 삭제하는 태그
<sup> superscript의 약자 2<sup>3</sup>로 작성
<sub> subscript의 약자 2<sub>3</sub>로 작성
<em> 기울여지면서 강조 (의미적 태그)
브라우저가 읽지 못하는 주석처리는 ctrl + /로 tab <!-- 내용 -->으로 보인다.
ctrl + alt + 화살표 = 중복 커서가 가능하다.
ctrl + 커서로 원하는 곳을 찍으면 = 같은곳에 같은 글을 동시에 작성할 수 있다.
LIST 태그 (목록 태그)
순서와 상관없는 목록<ul></ul> unordered list
순서가 있는 목록<ol></ol> ordered list
(블럭요소로 sementic 태그이다.)
<div>는 division의 약자의 태그로 의미없는 공간을 분할하기 위한 태그이다. (블럭요소로 sementic 태그가 아니다.)
dl,dt,dd는 용어를 정의하는데 사용하는 의미론적인 sementic 태그이다.
table 태그는 <table>과 1개 이상의 <tr>와(<th> 또는 <td>)로 구성된다.
<tr></tr>은 테이블의 행, <td></td>는 테이블의 열을 나타낸다. <th> 테이블의 헤더를 나타낸다.
열끼리 결합하는 colspan
행끼릴 결합하는 lowspan
caption이란 표위에 적히는 제목을 말한다.
table border ="1" 이라고 적으면 테두리의 두께를 지정할 수있다.
align이란 속성을 사용하면 내용을 어느쪽에 위치하고싶은지 지정할 수 있다.
cellpadding은 셀안의 여유크기이고 cellspacing은 셀과 셀간의 간격을 의미한다.
링크를 걸어 컨텐츠로 이동하기
네이게이션 메뉴를 클릭했을 때 싱글 페이지 안에서 해당하는 컨텐츠로 이동하려면 id값이 필요합니다. 각 컨텐츠에는 id='아이디 값'을 주고 링크를 걸어줄 a 태그의 href 속성값으로는 #아이디명을 넣어준다.
이미지의 다양한 확장자
jpg :가성비가 좋다=>화질은 좋은데 용량은 작다!=>압축률이 좋다.[비손실 방식 lossless compression/ 손실 방식 lossy compression] 단, 투명도를 저장할 수 없다.
png :투명도를 저장할 수 있으면서 압축률이 좋은 확장자의 이미지
gif :이미지 중에서 유일하게 움직이는 이미지 저장 가능
bmp:원본 이미지의 정보를 100% 가지고 있는 포맷 => 용량이 크다.
tiff, targa :투명도 가지고 있다.
<img src="img/cuty/charactor01.gif" alt="">
내 html파일이 있는 위치에 img 폴더가 있고 그 안에 cuty 폴더가 있고 그 안에 charactor01.gif가 있는 경우
<img src="../charactor02.gif" alt="">
내 html파일 상위폴더에 charactor02.gif 이미지가 있는 경우에는 ../로 상위 폴더로 이동 가능하다
사운드를 출력해주는 audio 태그
<audio src="sound/pub.wav" controls="controls" loop="loop"></audio>
<p>속성명과 속성값이 같을 때에는 속성값을 생략할 수 있다.</p>
<audio src="sound/pub.wav" controls loop></audio>
w3school에서 태그의 여러 종류를 확인해보기
'HTML > information' 카테고리의 다른 글
| [HTML] 작성 양식인 form 태그와 레이아웃 설정 방법 (0) | 2023.03.28 |
|---|---|
| [HTML] HTML이란 (0) | 2023.03.22 |