비주얼스튜디오 코드(Visual Studio Code)의 기본코드

윤_코딩 2023. 2. 16. 09:56

2023. 2. 16. 09:56

※이번 시간에는 비주얼스튜디오코드(Visual Studio Code)의 기본적인 구조와 태그들에 대해서 알아보겠습니다.

우선 전체적인 태그들과 해당하는 옵션들을 파악해 보면서 사용방법과 활용에 대해서는 다음 시간에 정리하도록 하겠습니다.

목차

1. 기본 구조

2. 블록 레벨 요소

3. 기본 태그

1. 기본 구조

@코드로 확인

 이 부분은 주석입니다.

<!DOCTYPE html>

<title>Document</title>

</head>

<body>

</body>

</html>

2. 블록 레벨 요소

<header> : 1.HTML 문서의 헤더 영역을 의미하는 태그로 제목이나 내비게이션, 검색등의 내용들을 포함할 수 있다.
2. 텍스트, 인라인 요소, 블록레벨 요소를 포함할 수 있지만 < header >, < footer > 태그는 포함할 수 없음.

<section> : 1.HTML문서에서 맥락이 같은 요소들을 주제별로 그룹화해 주는 태그이며, 섹션 주제에 대한 제목 요소를

포함하는 것이 좋다.
2. 텍스트, 인라인요소, 블록 레벨 요소를 포함할 수 있음.

<footer> : 1.HTML문서의 푸터 영역을 의미하는 태그로 섹션 작성자나 저작권에 대한 정보 관련된 문서의 링크를 포함할 수 있다.
2. 텍스트, 인라인요소, 블록 레벨 요소를 포함할 수 있지만 < header >, < footer > 태그는 포함할 수 없음.

<nav> : 1.HTML문서의 메인 메뉴나 목차 등을 정의해 주는 태그
2. 텍스트, 인라인요소, 블록 레벨 요소를 포함할 수 있음.

<alticle> : 1.HTML문서에서 독립적으로 배포 또는 재사용이 가능한 게시물, 블로그 포스팅 등을 의미하는 태그.
2. 텍스트, 인라인요소, 블록 레벨 요소를 포함할 수 있음.

<aside> : 1. 메인 콘텐츠와 직접적으로 관련이 없는 영역을 의미하는 태그이며, HTML문서의 오른쪽이나 왼쪽의 사이드메뉴나 광고등의 영역으로 사용.
2. 텍스트, 인라인요소, 블록 레벨 요소를 포함할 수 있음.

3. 기본 태그

<h></h> 태그(heading) : <h1>~<h6>까지 존재하며 제목태그로 사용된다. 숫자가 작을수록 폰트 사이즈가 크고 굵게

표현된다.

<p></p> 태그(pargraph) : 하나의 문단을 만들 때 사용. 문단은 새로운 줄에서 시작되며 문단 사이에는 공백이 생긴다.

<br> 태그(break) : 엔터를 입력하여 줄 바꿈을 하더라도 실제로는 줄 바꿈이 적용되지 않는다. <br> 태그를 이용하여

엔터 효과를 가지게 한다.

<hr> 태그(horizontal rules) : 단순히 웹 페이지에 수평선을 그어주는 태그.

<pre></pre> 태그 : 입력한 내용 그대로를 출력한다. 엔터, 스페이스, 탭 등이 적용된 형태로 출력된다.

<q></q> 태그(quote) : 짧은 문장을 인용할 때 쓰이는 태그, 브라우저에서는 큰따옴표로 출력된다.

<blockquote></blockquote> 태그 : 긴 문장을 인용할 때 쓰이는 태그. 브라우저에서는 들여 쓰기로 출력된다.

<abbr></abbr> 태그(abbreviation) : 축약 텍스트를 표시하는 태그. 밑줄이 그어진 축약 텍스트에 마우스를 올리면

말풍선으로 텍스트의 뜻이 표시된다.

@텍스트 포매팅(text formatting) 태그 : 텍스트에 효과를 주는 태그들을 의미한다.

<b></b> : 텍스트를 굵게 출력

<strong></strong> : 텍스트를 굵게, 강조하여 출력 (중요함을 의미)

<i></i> : 텍스트를 이탤릭체로 출력

<em></em> : 텍스트를 이탤릭체로, 강조하여 출력 (중요함을 의미)

<small></small> : 텍스트를 작게 출력

<sub></sub> : 아래첨자

<sup></sup> : 위첨자

<ins></ins> : 삽입된 텍스트에 밑줄 출력

<del></del> : 삽입된 텍스트에 취소선 출력

<mark></mark> : 삽입된 텍스트에 형광펜처럼 강조 표시

@목록 관련 태그

<ol></ol> : 순서 있는 목록의 시작과 끝을 나타낸다.

<ul></ul> : 순서 없는 목록의 시작과 끝을 나타낸다.

<li></li> : 목록의 각 항목을 나타낸다.

<dl></dl> : 설명 목록의 시작과 끝을 나타낸다.

<dt></dt> : 설명 목록의 이름(제목)을 나타낸다.

<dd></dd> : 설명 목록의 값(설명)을 나타낸다.

저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

비주얼스튜디오 코드(Visual Studio Code)의 LIST (0)	2023.02.18
비주얼스튜디오 코드(Visual Studio Code)의 TABLE (0)	2023.02.17
비주얼스튜디오 코드(Visual Studio Code) 설정 및 단축키 모음 (0)	2023.02.15
비주얼스튜디오 코드(Visual Studio Code) 다운로드 및 설치방법 (0)	2023.02.15
웹 개발 기본 다지기 (0)	2023.02.14

개발자첫걸음