웹 개발/HTML & CSS
웹을 구성하는 요소
2^7
2022. 10. 10. 14:26
웹을 구성하는 요소
HTML, CSS, JS
- HTML : 웹의 정보 또는 설계도(글, 이미지 등)
- CSS : 웹의 디자인 또는 스타일링(스타일 시트)
- JS(JavaScript) :웹의 기능과 효과
HTML(Hyper Text Markup Language) 기본 태그
HTML : 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어 시간이 지남에 따라 자주 사용되지 않는 용어(레거시)들은 사라지고 시대에 맞추어 새로운 신조어가 등장
HTML 태그 구성 요소
<열린태그 속성 = "속성값"> 컨텐츠</닫힌태그>- 태그명 : HTML이 갖고 있는 고유의 기능(<열린태그> </닫힌태그> 형태로 입력)
- 컨텐츠 : 열린 태그와 닫힌 태그 사이에 있는 내용
- 속성 : HTML 태그가 갖고 있는 추가 정보
- 속성값 : 어떤역할을 수행 할지 구체적인 명령을 진행하는 것
HTLML 문서의 기본 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제목을 입력하세요</title>
</head>
<body>
</body>
</html>- <!DOCTPE html> : HTML5라는 신조어로 문서를 선언하는 태그(닫힘 태그 없음)
- <html>.....</html> : HTML 문서의 시작과 끝을 의미 모든 HTML 태그들은 <HTML> 태그 안쪽에 입력
- <head>.....</head> : 웹사이트의 간단한 요약 정보를 담는 영역 웹사이트에서 노출되지 않는 정보
- <body.....</body> : 웹사이트에서 눈에 보이는 정보를 담는 영역 이미지나 텍스트처럼 출력되는 정보
- <meta charset=“UTF-8”> : character setting의 약자를 나타내는 문자 코드 모든 문자를 웹 브라우저에서 깨짐 없이 표시하겠다는 의미
- <title>.....</title> : 웹사이트 탭에 나타나는 제목
<!DOCTYPE html> <!-- HTML5 문서 선언 -->
<html> <!-- HTML 문서의 시작과 끝 -->
<head> <!-- 문서와 관련된 요약 정보 정리 -->
<meta charset="UTF-8"> <!-- 문자 코드 -->
<title>제목을 입력하세요</title> <!-- 웹사이트 제목 -->
</head>
<body> <!-- 웹사이트 내용 -->
</body>
</html>자주 사용 되는 태그
<a> 태그 : 글자나 이미지 클릭시 다른 사이트로 이동시키는 태그 (버튼)
<a href = "https://www.naver.com" target = "_blank"> 네이버 </a>- herf 속성 : HTML을 연결할 페이지의 주소 지정
- target 속성 : 어떤 방식으로 페이지로 이동할지 결정
- “_blank” : 새로운 탭을 띄어서 웹사이트를 전환
- “_self” : 현재 탭에서 웹사이트를 전환(디폴트 값)
<img>태그 : 정보성을 갖고 있는 이미지를 삽입(닫힌 태그 없음)
<img src=“logo.png” alt=“이미지”>- src속성 : 삽입할 이미지 파일 경로
- alt속성 : 웹사이트가 이미지를 출력하지 못했을 경우, 텍스트 정보로 대체
<h>태그 : Heading의 약자로 제목이나 부제목을 표시
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>Hello World
Hello World
Hello World
- 숫자 값이 클수록 폰트 사이즈가 작음
- <h1>태그는 가장 중요한 정보를 담음으로 하나의 html문서에서 한 번만 사용됨
<p>태그 : Paragraph의 약자로 본문 내용을 표현
<p> 내용을 입력하세요 </p>내용을 입력하세요
- 웹사이트의 중요 정보를 담는 태그
- 나타내고자 하는 내용을 열린 태그와 닫힌 태그 사이에 입력
<ol>, <li>, <ul> 태그
- <ol>태그 : Ordered list의 약자로 순서가 있는 리스트 생성(작성 내용 앞에 번호 생성)
- <li> 태그 : <ol>과 <ul>의 각 항목을 나열할 때 사용
- <ul>태그 : Unordered list의 약자로 순서가 없는 리스트 생성(작성 내용 앞에 번호 생성 안 됨)
<ol>
<li> 메뉴1 </li>
<li> 메뉴2 </li>
<li> 메뉴3 </li>
</ol>- 메뉴1
- 메뉴2
- 메뉴3
<ul>
<li> 메뉴1 </li>
<li> 메뉴2 </li>
<li> 메뉴3 </li>
</ul>- 메뉴1
- 메뉴2
- 메뉴3
구조를 잡을 때 사용하는 태그
HTML 태그 구성 요소 (목차, 본문, 부록)
<header>, <nav> 태그 : 목차
- <header>태그 : 웹사이트의 머리글을 담는 공간
- <nav>태그 : 메뉴 버튼을 담는 공간 <ul>, <li>, <a>와 함께 사용
<header> <!-- 상단 영역 -->
<img src="img.png" alt = "이미지">
<nav> <!-- 메뉴 영역 -->
<ul>
<li> Home </li>
<li> 목록 </li>
</ul>
</nav>
</header>
<main>, <article> 태그 : 본문
- <main> 태그 : 문서의 주요 내용을 담는 태그
- <article> 태그 : 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그 태그 내에 구역을 대표하는 타이틀 <h>태그가 존재해야 함
<main role=“main"> <!-- 본문 영역 (익스플로어는 지원하지 않으므로 role="main" 속성 입력 필요 -->
<article> <!-- 정보 영역 -->
...
</article>
</main
<footer>, <div> 태그 : 부록
- <footer> 태그 : 가장 하단에 들어가는 정보를 표시할 때 사용
- <div> 태그 : 임의의 공간을 만들 때 사용
<footer> <!-- 하단 영역 -->
<div> <!-- 상세 정보 -->
<p>주소: 대한민국 어딘가</p>
<p>이메일: Korea@korea.co,kr</p>
</div>
<div> <!-- 추가 정보 -->
<p>전화번호: 010-000-00000 | 대표: 홍길동</p>
</div>
</footer>HTML 태그의 두 가지 성격
Block와 Inline : 두 성격을 구분 짓는 주요 특징 (줄바꿈 현상, 가로/세로, 상/하 배치)
Block
- y축 정렬 형태로 출력(줄바꿈 현상 나타남)
- 공간을 만들 수 있고 상하 배치 작업 가능
- <p>태그 이용
<p> Hello </p>
<p> Hello </p>
<p> Hello </p>Hello
Hello
Hello
Inline
- x축 정렬 형태로 출력(한 줄에 출력)
- 공간을 만들 수 없고, 상하 배치 작업 불가능
- <a>태그 이용
<a> Bye </a>
<a> Bye </a>
<a> Bye </a>
728x90