7월 1일_HTML(프로그램 설치, 기본 문법, 표만들기)

CLASS_HTML&CSS

by awesong 2024. 7. 1. 17:18

728x90

# 프로그램 확장파일 설치

작업 편의를 위한 확장프로그램(비주얼코드) 설치

VS Code 확장 프로그램

1. Material Theme: VS Code의 테마를 구글의 Material Design 스타일로 변경합니다.
2. Material Icon Theme: VS Code의 파일 및 폴더 아이콘을 Material Design 스타일로 변경합니다.
3. Auto Rename Tag/Jun Han: HTML 태그를 수정할 때 자동으로 쌍을 이루는 태그도 함께 수정해줍니다.
4. HTML CSS Support/ecmel: HTML과 CSS 코드를 편리하게 작성할 수 있도록 도와줍니다.
5. CSS Peek: CSS 선택자를 클릭하면 해당 CSS 코드를 볼 수 있습니다.
6. Autoprefixer: CSS 속성에 자동으로 벤더 프리픽스를 추가해줍니다.
7. Indent-rainbow: 들여쓰기 된 코드를 색상으로 구분하여 보여줍니다.
8. Live Server: 로컬 웹 서버를 실행하여 실시간으로 코드 변경 사항을 확인할 수 있습니다.
9. Korean Language Pack for Visual Studio Code/Microsoft: VS Code의 사용자 인터페이스를 한국어로 변경합니다.
10. Prettier - Code formatter: 코드를 자동으로 포맷팅해줍니다.
11. ESLint: JavaScript 코드 스타일을 검사하고 오류를 찾아줍니다.
12. Path Intellisense: 파일 경로를 자동 완성해줍니다.

# HTML 시작하기

<!DOCTYPE html>
<html lang = "ko">
<head>
  <title>첫 HTML 프로그램</title>
</head>

<body>
  안녕하세요
</body>

</html>

코드 작성 후 저장하면

파일 생성 > 파일 실행하면

출력되는 것을 확인 할 수 있음

** 확장 프로그램의 Liver Server 사용하면 실시간으로 작업의 내용을 확인 가능함

# 태그언어 종류

<h1> ~ <h6> 글자 크기 지정
<p> 단락지정
<br> 줄바꿈
<blockquote> 인용문 넣기
<b> 단순히 굵게 표시
<strong> 중요한 내용 강조 표시
<pre> 띄어씌기 줄바꿈 코드형태 그대로 출력
<i> 단순히 이텔릭체 표시
<em> 흐름상 특정부분 강조
<ol> 순서 목록
<li> 순서 목록 안의 내용들
<ul> 순서 없는 목록
<u> / <ins> 밑줄
<sup> 위첨자
<sub> 아래첨자
<del> 글자 가운제 밑줄
<mark> 글자에 형광펜 효과
® / ® = ® 기호 표기
<dl> 설명 목록 - 이름(제목)과 값(설명) 형태로 된 목록
<dt> 태그 - 이름(제목)지정
<dd> 태그 - 값(설명)지정
<caption> 표 제목
<table> 표 전체
<tr> 행
<td> 셀
<th> 제목 셀
<thead> 표의 제목
<tbody> 표의 본문
<tfoot> 표의 요약
<colspan> <rowspan> 행 , 열 합치기

저작자표시 비영리 동일조건

'CLASS_HTML&CSS' 카테고리의 다른 글

7월 8일_CSS(float 속성, 요소 위치, 시멘틱태그언어) (0)	2024.07.08
7월 5일_CSS(마진, 패딩, 박스모델) (1)	2024.07.05
7월 4일_CSS(!important, 웹폰트적용, 스타일시트링크, 다양한 스타일 적용) (0)	2024.07.04
7월 3일_HTML(도스명령어, 블록, 인라인, iframe, CSS) (1)	2024.07.03
7월 2일_HTML(멀티미디어, 폼) (1)	2024.07.02