CLASS_HTML&CSS

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

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> 글자에 형광펜 효과
  • &reg; / &#174; = ® 기호 표기
  • &copy; / &#169; = ⓒ 기호 표기
  • <dl> 설명 목록 - 이름(제목)과 값(설명) 형태로 된 목록
  • <dt> 태그 - 이름(제목)지정
  • <dd> 태그 - 값(설명)지정
  • <caption> 표 제목
  • <table> 표 전체
  • <tr> 행
  • <td> 셀
  • <th> 제목 셀
  • <thead> 표의 제목
  • <tbody> 표의 본문
  • <tfoot> 표의 요약
  • <colspan> <rowspan> 행 , 열 합치기

 

 

 

 

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