웹개발(1)-html Extensions, 문서 구조
*이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*
자동줄바꿈 설정: file->preferences->settings->world wrap: on
에밋(Emmet) : html, xml, xsl, 문서 등을 작성할 때 빠른 코딩을 위해 사용하는 플러그인입니다.
- 사용법 : !(Enter): html 기본코드 완성
! + enter 입력<!DOCTYPE html> : 선언문. HTML5버전 나타냄
<html lang="en"> : html문서, 리더기의 언어를 설정(en:영어, ko:한국어)
<head>
<meta charset="UTF-8">: 언어셋을 설정(예: euc-kr)
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 해상도는 점을 작게쓰느냐 크게쓰느냐, 가로폭은 width-width, initial-sclae은 화면 확대 및 축소, 모바일 환경에 대한 설정
<title>목록태그</title>: 제목 표시줄에 텍스트 출력
</head>
<!DOCTYPE html> <!--html5버전-->
<html lang="en"> <!--리더기의 언어를 영어로 설정-->
<head>
<meta charset="UTF-8"> <!--언어셋 한글로 설정-->
<!--viewport는 해상도, width는 가로폭, initial은 화면 설정-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문단태그</title> <!--제목 표시줄에 텍스트 출력-->
</head>메타태그: 추가 설명 필요
- <meta>: HTML 문서에 대한 정보를 정의할 때 사용
- <head> ~ </head> 사이에 적용
- name, content, http-equiv, author, viewpoint, keyword, description 등 여러가지 속성들을 사용
익스텐션(Extensions): IDE에 추가적인 기능을 제공하는 소프트웨어 모듈을 가리킵니다. 이러한 익스텐션은 사용자가 개발 작업을 보다 효율적으로 수행하게 도와줍니다. 다음은 익스텐션 모듈 중 사용하면 유용한 기능을 제공하는 모듈입니다.
- Live Server : HTML 파일에 대해 로컬 웹 서버를 가상으로 실행하여 웹페이지를 실시간으로 미리 보기할 수 있는 확장 기능을 제공합니다.
- 간단한 HTML문서 확인: Alt 누르고 있는 상태 + L, O
Alt + L + O 입력- Auto Rename Tag : HTML이나 XML파일에서 태그를 변경하면 해당 태그의 짝 태그를 자동으로 변경해주는 확장 기능을 제공합니다.
1. html 시작과 head, body
head는 시작태그, title은 제목태그, body는 본문을 입력하는 태그입니다.
<html>
<head>
<title>최초의 내사이트</title>
</head>
<body>
최초의 내사이트에 오신 걸 환영합니다!!!
</body>
</html>2. 문단태그
<p>를 입력해 문단을 만듭니다.
-특수태그-
- < : <
- > : >
- (공백):
- <br> : 다음줄로 개행
주석
- <!-- 주석을 넣음 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문단태그</title>
</head>
<body>
<p>문단을 만드는 태그</p> 일반 글자
또 일반 글자 또 일반 글자
<p>문단을 만드는 태그</p>
<p><br>
개행<br>개행<br>개행<br>
</body>
</html>3. 제목태그
h를 이용해 제목태그를 붙일 수 있습니다. h1,h2,...를 이용해 제목태그의 크기값도 조정할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제목 태그</title>
</head>
<body>
<h1>안녕하세요. 제목태그h1</h1>
<h2>안녕하세요. 제목태그h2</h2>
<h3>안녕하세요. 제목태그h2</h3>
<h4>안녕하세요. 제목태그h2</h4>
<h5>안녕하세요. 제목태그h2</h5>
<h6>안녕하세요. 제목태그h2</h6>
일반 문자
</body>
</html>
4. 서식태그
b태그는 글자를 굵게, strong태그 또한 글자를 굵게 만듭니다. i, em 태그는 이탤릭체를 표현합니다. ins태그는 중요글자로 표현하고, del태그는 줄그어줌으로써 글자를 지운것처럼 표현합니다. sup태그는 수식을 표현합니다. sub태그는 화학식을 표현합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>서식태그</title>
<p>b 태그는 글자를 <b>굵게</b> 표현</p>
<p>strong태그도 글자를 <strong>굵게</strong> 표현</p>
<p>i 태그는 글자를 <i>이탤릭체</i>로 표현</p>
<p>em 태그도 글자를 <em>이탤릭체</em>로 표현</p>
<P>ins태그는 <ins>중요한 글자</ins>를 표현</P>
<P>del 태그는 <del>글자를 지운 것</del>처럼 표현</P>
<p>sup 태그로 수식을 표현: x<sup>2</sup> + y <sup>3</sup>=z</p>
<p>sub 태그로 화학식을 표현: H <sub>2</sub>0</p>
</head>
<body>
5. 목록태그
ul과 li를 이용해서 목록을 표현할 수 있습니다. dl과 dd를 이용해서 목록을 표현합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>목록태그</title>
</head>
<body>
<h2>목록태그</h2>
<!-- ul>li*3 -->
<ul>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ul>
<hr>
<ol>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ol>
<hr>
<!-- dl>dt+dd*3 -->
<dl>
<dt>류정원 선생님</dt>
<dd>김사과</dd>
<dd>오렌지</dd>
<dd>반하나</dd>
</dl>
</body>
</html>
li로 *표현, dt는 목록에서 제목 표현, dd는 또한 목록 표현입니다. 문단 나누기 -----는 hr로 나눌 수 있습니다.
정리: 나중에 배울 내용까지 미리 정리하겠습니다.
- div: HTML 문서에서 구획을 정의하는 데 사용됩니다. 주로 CSS 스타일을 적용하기 위한 블록 단위의 컨테이너 역할을 합니다. 시각적인 구획을 나누거나 그룹화할 때 사용합니다.
- id: HTML 요소에 고유한 식별자를 지정합니다. 각 요소는 하나의 id를 가질 수 있으며, 이를 통해 JavaScript나 CSS에서 해당 요소를 선택하여 조작할 수 있습니다.
- class: HTML 요소에 하나 이상의 클래스를 지정하여 그룹화합니다. 클래스는 스타일을 적용하거나 JavaScript에서 해당 요소를 선택하여 작업할 때 사용됩니다. 하나의 요소에 여러 클래스를 지정할 수 있습니다.
- header: HTML 문서의 머리글을 나타내는 요소입니다. 일반적으로 제목, 로고, 검색 폼 등을 포함합니다.
- nav: HTML 문서의 탐색 링크 그룹을 나타내는 요소입니다. 일반적으로 사이트의 주요 탐색 링크를 포함합니다.
- ul (unordered list): 순서가 없는 목록을 나타내는 요소입니다. 주로 메뉴, 목차 등을 나타낼 때 사용됩니다.
- li (list item): 목록의 각 항목을 나타내는 요소입니다. ul 또는 ol 안에 포함되어야 합니다.
- section: HTML 문서의 구획을 나타내는 요소입니다. 일반적으로 콘텐츠를 그룹화하거나 논리적인 섹션을 만들 때 사용됩니다. 예를 들어, 웹 페이지의 여러 섹션을 나타내거나 챕터를 나눌 때 사용됩니다.