HTML기초
html - 웹문서의 뼈대. 제목, 본문, 이미지 등의 요소를 알려주고 이러한 내용을 웹문서에 어떻게 나타내야 하는 지에 대한 규칙이라고 볼 수 있음.
기본구성
<!D0CTYPE html>
→ 현재 문서가 HTML5언어로 작성한 웹 문서라는 뜻
<html lang="en">
→ 문서에서 사용할 언어지정
1.검색 사이트에서 특정언어로 제한하여 검색할 때
2.낭독기에서 웹문서를 소리 내어 읽어줄 때 해당 언어에 맞춰 발음이나 억양을 다르게 할 수 있음
<head>
→ 정보 지정, 제목, 스크립트, 스타일시트 담고 있음
<title><첫 수업></title> → 제목 지정 (창을 열었을 때 나타나는 타이틀)
</head>
<body> → 사용자에게 실제로 보이는 부분 (나타내고 싶은 부분)
<h1>첫 수업</h1> → 제목 태그 h1~6까지 존재 (숫자 커질수록 굵기, 크기 작아짐)
</body>
</html>
- 기본적으로 헤드는 바디 뒤에 올 수 없고 바디는 헤드 앞에 올 수 없다. 중첩을 허용하지 않음.
- 태그는 일반적으로 소문자로 통일
- 그리고 꼭!!! 닫아주는 태그를 써줘야함.
타이틀에 툴팁 달기
예시)
<h3 title="김치찌개">오늘의 점심 메뉴<h3/>
결과)
속성 값에 빈칸이 있는 경우 반드시 따옴표를 붙여줘야 함. 안 붙여주면 빈칸 전까지만 읽기 때문
본문태그 종류
p 태그
- 문단을 작성할 때 사용 (여러 개의 빈칸, 엔터키는 하나의 빈칸으로 취급 )
- 태그 사이에 텍스트 입력하면 하나의 문단으로 표시됨
- 문단의 상단과 하단에는 공백 생김
br 태그
- 줄바꿀 때 사용
- 여러번 입력시 입력한 만큼 줄바꿈 됨
- 종료 태그가 없어 <br> <br/> 이렇게 사용하기도 함
hr 태그
- 수평선 만들 때 사용
pre 태그
- 사용자가 입력한 그대로 출력됨 (들여쓰기나 줄바꿈 등)
(예시)
<p> p태그와 br태그를 사용하여 멋드러진 본문을 완성시켜 보자
<br>물론 아주 기초적인거지만 기초부터 탄탄히 쌓아야 한다.</p>
<hr>
<p><p>태그를 사용하면
여러 개의 빈 칸은 하나로,
여러 줄은 한 줄에 붙여 출력
</p>
<pre>
그러나 <pre> 태그를 사용하면
사용자가 입력한
그대로 출력
</pre>
글자모양 태그
| 태그 | 설명 |
| b | 굵은글자 |
| i | 기울어진 글자 |
| small | 작은 글자 |
| sub | 아래 첨자 |
| sup | 위 첨자 |
| ins | 밑줄 글자 |
| del | 가운데 줄이 그어진 글자(취소선) |
결과
이미지 태그
이미지를 삽입할 때 사용
src - 이미지 경로를 지정
alt - 이미지가 없을 때 나오는 글자를 지정
이미지 삽입 방법 (2가지)
1.사진을 저장하여 파일 경로와 제목 입력
<img src="images/google.com" art="구글로고">2. 이미지 주소 링크를 복사하여 붙이는 방법
(원하는 이미지에 오른쪽 마우스 버튼 클릭후 이미지 주소 복사)
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png art="구글로고">후자의 경우 사진의 링크가 잘못된 경우도 많아 확실히 나타내기 위해서는 저장하고 삽입하는 것이 나을 것 같다.
속성값에 따옴표를 붙이지 않거나 작은따옴표를 사용해도 되지만 가독성을 위해 보편적으로 큰 따옴표를 주로 사용하기 때문에 큰 따옴표 붙이는 습관을 들이는 것이 좋음.
링크 태그
a 태그
Anchor를 의미
하이퍼링크 생성
href 속성
어떤 웹페이지로 이동할지 지정
<a harf="http://google.com">사진이나 텍스트로 생성 가능</a>여는 앵커태그 - 연결되는 페이지링크 주소 - 텍스트 or 이미지 - 닫는 앵커태그
링크 태그는 이미지 태그나 p태그의 자식으로 들어가도 되고 부모가 되어도 상관 없이 링크이동이 가능한 것 확인함.
html 간의 연결 및 내부에서도 a 링크를 통해 단락 이동 가능 (id태그활용)
id 태그
id를 지정하여 특정 id만 호출할 수 있게 함
target 태그
링크를 새 탭에서 열어주는 속성
<a harf="http://google.com" target="blank_">여기를 클릭하면 구글로 이동</a>공간 분할 태그
1) 블록형식으로 공간 분할 (한 블록을 다 차지)
- div 태그
- p 태그
- h1~6 태그
- 목록 태그
- 테이블 태그
- 입력 양식 태그
2) 인라인형식으로 공간 분할 (자신의 크기만큼만 차지 - 블록의 일부만 차지)
- span 태그
- a 태그
- input 태그
- 글자형식 태그
| 태그 | 설명 |
| header | 페이지 제목, 페이지를 소개하는 간단한 설명 |
| nav | 네비게이션 |
| 하이퍼링크들을 모아 놓은 공간 | |
| aside | 사이드에 위치하는 공간 |
| 본문에서 벗어난 노트나 팁 | |
| section | 문서의 장(chapter, section) 또는 절을 구성 |
| article | 글자가 많이 들어가는 공간 |
| footer | 꼬리말 영역 |
시맨틱 태그
문서 구조화를 위해 표준화한 태그
- 소스코드 파악 용이, 검색 및 탐색 용이, 의미 전달 가능
예)
새싹DT기업연계형 프론트엔드 실무 프로젝트 과정 1주차 블로그 포스팅
'Html & Css' 카테고리의 다른 글
| [새싹 프론트엔드] 2주차 - 1 CSS 레이아웃 & HTML 테이블 (0) | 2022.10.24 |
|---|---|
| [새싹 프론트엔드] 1주차 - 5 CSS 위치 속성 (0) | 2022.10.21 |
| [새싹 프론트엔드] 1주차 - 4 CSS 배경 & 박스 속성 (0) | 2022.10.21 |
| [새싹 프론트엔드] 1주차 - 3 CSS 단위 & 글자 속성 (0) | 2022.10.19 |
| [새싹 프론트엔드] 1주차 - 2 CSS 기초 & 선택자 (0) | 2022.10.18 |
