HAHYE_ARCHIVE
[새싹 프론트엔드] HTML 기초 정리편 본문
🖥 웹 페이지 구성 3요소
∙HTML : 웹 페이지의 구조와 내용 / 제목, 본문(텍스트, 이미지, 표 등), 머릿말, 꼬릿말 등
∙CSS : 웹 페이지의 모양 / 글자 크기 및 색, 배경
∙Javascript : 웹 페이지의 행동 및 응용 프로그램 / 마우스 클릭, 키 입력 등을 처리하는 코드, 여러가지 계산, 차트, 게임, 지도 등 다양한 프로그램
🖥 HTML 기본 용어
✔️태그 (Tag)
▪️요소를 만들 때 사용하는 기호
✔️요소 (Element)
▪️시작 태그와 종료 태그로 이루어진 모든 명령어
<h1>Hello HTML5</h1>여기에서 <h1>은 시작태그
Hello HTML5 는 컨텐츠(내용)
</h1> 는 종료태그
✔️속성 (Attribute)
▪️태그에 추가 정보를 부여할 때 사용
<h1 title = "header">Hello HTML5</h1>
<img src="apple.png"/>여기에선 title = "header" / src="apple.png" 가 속성임
더 나누면 src는 속성이름 "apple.png"는 속성 값
‼️ 태그와 속성은 대소문자 구분을 하지않음 ‼️
🖥 HTML 주석 처리 방법
<!-- 주석 내용 -->간단하다!
단축키는 cmd + / (맥 기준)
드래그해서 단축키해도 되고 커서를 두고 단축키해도 됨!
🌱 HTML 글자 태그
🖥 제목 글자 태그
✔️h1 ~ h6 까지 있음 ( 1이 제일크고 6이 제일 작음)
💡title 속성으로 툴팁 달기
h(n)태그에 마우스를 가져다 대면 나오는 툴팁!
<h1 title="h1태그로 작성하였습니다."> 1장 홈페이지 </h1>어트리뷰트에 title로 넣어주면 끝!
🌱 HTML 본문 태그
🖥 <p> 태그
✔️문단을 작성할 때 사용하고, <p> 태그 사이에 입력한 텍스트는 하나의 문단으로 표시함
‼️이 문단의 상단과 하단에는 약간의 공백이 생긴다‼️
🖥 <br> 태그
✔️줄바꾸기 태그
🖥 <hr> 태그
✔️수평선 삽입 태그
🖥 특수 문자 표기
✔️예약어 또는 키보드로 입력이 어려운 기호
&엔터티; 또는 &#코드값; 으로 표현
🌱 글자 모양 태그
🖥 글자 모양 태그
✔️내가 잘 못외워서 표로 정리해보기!!
css로 적용해도 되지만 둘다 정리해서 외워보기!!
|
태그
|
설명
|
|
b
|
굵은 글자
|
|
i
|
기울어진 글자
|
|
small
|
작은 글자
|
|
sub
|
아래 첨자
|
|
sup
|
위 첨자
|
|
ins
|
밑줄 글자
|
|
del
|
가운데 줄이 그어진 글자(취소선)
|
🌱 이미지 태그
🖥 이미지태그 <img /> 태그
ex)<img src="이미지주소,이름,파일명" width="200" height="200" alt="사과">
|
속성
|
설명
|
|
src
|
이미지의 경로를 지정
|
|
alt
|
이미지가 없을 때 나오는 글자를 지정
|
|
width
|
이미지의 너비 지정
|
|
height
|
이미지의 높이 지정
|
🌱 링크 태그
🖥 링크태그 <a /> 태그
ex)<a href="http://naver.com">네이버</a>
‼️ 이미지에 링크 거는법 ‼️
<a href=“http://www.naver.com">
<img src=“images/naver.jpg” alt=“네이버사이트”>
</a>링크가 먼저!!! 링크안에 이미지태그 이용해서 링크걸기!!
🖥 웹 페이지 내부에서 링크로 이동하기
✔️id속성을 이용해서 링크걸기
<!--원하는 태그에 id 속성을 지정-->
<p id=“chap1”>1장 서론</p>
<!--<a href=“#id속성”> 지정-->
<a href=“#chap1”>서론으로 가기</a>id값은 #으로 좌표찍어준다고 생각하면 편함 (css에서도 # 선택자)
🖥 target 속성
✔️링크를 새 탭에서 열어주는 속성
<a href=“http://naver.com” target=“_blank”>여기를 클릭</a>
🌱 블록 형식 태그
🖥 div 태그
✔️블록 형식으로 공간 분할
🖥 span 태그
✔️인라인 형식으로 공간 분할
‼️블록형식과 인라인 형식의 차이
블록형식은 항상 새 라인에서 시작하여 한 라인을 독점으로 사용함
|
div 태그
|
p태그
|
목록 태그
|
|
h1~h6 태그
|
테이블 태그
|
입력 양식 태그
|
인라인 형식 태그는 블록 태그 속에 삽입되어 블록의 일부로 출력
|
span 태그
|
a태그
|
|
input 태그
|
글자 형식 태그
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
background-color: rgb(122, 189, 255);
}
span {
background-color: rgb(228, 255, 175);
}
</style>
</head>
<body>
<div>프론트엔드 공부중</div>
<div>프론트엔드 공부중</div>
<div>프론트엔드 공부중</div>
<div>프론트엔드 공부중</div>
<hr>
<span>프론트엔드 공부중</span>
<span>프론트엔드 공부중</span>
<span>프론트엔드 공부중</span>
<span>프론트엔드 공부중</span>
</body>
</html>
div와 span의 차이가 명확히 보인다!
🖥 시맨틱 태그
✔️HTML 소스 코드만으로는 문서 구조 파악이 불가능해 만들어진 태그
|
기존 태그
|
문서의 구조나 의미 전달이 어려움
|
|
<p>, <div>, <h1> 등
|
|
|
시맨틱 태그
|
문서의 구조와 의미를 전달하는 태그
|
|
<header>, <section>, <article> 등
|
|
태그
|
설명
|
|
header
|
페이지 제목, 페이지를 소개하는 간단한 설명
|
|
nav
|
네비게이션
|
|
하이퍼링크들을 모아 놓은 공간
|
|
|
aside
|
사이드에 위치하는 공간
|
|
본문에서 벗어난 노트나 팁
|
|
|
section
|
문서의 장(chapter, section) 또는 절을 구성
|
|
article
|
글자가 많이 들어가는 공간
|
|
footer
|
꼬리말 영역
|
‼️ 문서의 모양은 구조와는 별개
• 시맨틱 태그로 문서의 구조를 지정했다고 해서 문서의 위치와 색, 모양이 자동으로 결정되는 것은 아님
• 개발자가 직접 CSS3를 이용하여 위치와 색, 모양을 지정해야 함!
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 1주차 블로그 포스팅
'새싹' 카테고리의 다른 글
| [새싹 프론트엔드] 자바스크립트 문법 (0) | 2022.11.01 |
|---|---|
| [새싹 프론트엔드] 메뉴바 만들기 (0) | 2022.10.26 |
| [새싹 프론트엔드] CSS3 레이아웃 (0) | 2022.10.26 |
| [새싹 프론트엔드] CSS 속성 정리 (0) | 2022.10.26 |
| [새싹 프론트엔드] CSS 기초 정리 (0) | 2022.10.24 |
