프론트-01 html을 위한 vscode 설치 및 html 페이지 구조

aggapang·2025년 3월 7일

kb IT's Your Life

목록 보기
2/20

프로그램 설치

  • vscode : 확장팩 설치
    • korea 언어팩
    • auto close tag
    • auto complete tag
    • auto Rename Tag
      • plug 설정
    • live server
    • prettier
  • node
  • git 설치

vscode에서 자주 사용할 것

  • alt + l + o : live server 실행
    • 임시 포트 번호를 할당하여 인터넷 같이 실행
    • 저장 시 바로 반영
    • f12 : 개발자 모드
  • emmet
    • $ : 순차적으로 증가
    • {} : 안에 들어가는 텍스트
    • * : 반복
  • !+enter : 기본 코드
  • html 주석 : <!-- -->

html 페이지 구조

<!DOCTYPE html> <!-- html5 문서임을 알리기 위한 태그 -->
<html lang="en"> <!-- html5문서임을 나타내는 태그 / 주 언어 설정 -->
<head> <!-- 문서의 메타데이터(정보)를 포함하는 영역 -->
    <meta charset="UTF-8"> <!-- 인코딩 방식 설정 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 화면 넓이 설정 -->
    <title>TITLE</title> <!-- 문서 제목  : 브라우저의 제목 표시줄 -->
</head>
<body> <!-- 웹 브라우저에서 실제로 표시될 내용 -->
    <h1>Hello HTML5</h1>
</body>
</html>

head 태그 속성

  • meta : 웹 페이지에 추가 정보
  • script : 스트립트 추가 (js)
  • link : 다른 파일 추가
  • style : 스타일시트 추가 (css)
  • base : 웹 페이지의 기본 경로 지정

css style태그 작성 방법

  1. <head> 태그내부 - <style> 태그 사용
  2. <body> 태그내부 - <style> 태그 사용
  3. 인라인 방식으로 각 HTML 요소의 style 속성값으로도 사용 가능
  4. 외부 스타일 시트 방식: <link> 태그를 사용해 외부 css 파일을 연결

js 작성 방법

  1. script 태그를 사용해 내부에서 작성
  2. script 태그의 src 속성 사용해 외부에서 불러옴
profile
aggapang
-
이전 포스트

kb IT's Your Life 00

다음 포스트

프론트-02 html 태그 (기본, 입력 양식, 구조화)

0개의 댓글