본문 바로가기
HTML5 + CSS

HTML 기본

by moonstal 2021. 10. 23.

HTML

  • 웹 문서 작성: 웹 편집기 / 웹 문서 보기: 웹브라우저(크롬)
  • HyperText Markup Language 하이퍼텍스트(링크>문서,사이트), 마크업(태그>역할표시)
  • 웹 문서 만드는 언어
  • <>: 태그 , 태그 붙이는 것: 마크업
  • 웹표준: 웹사이트 만들 때 지켜야 하는 약속, 어떤 기기에서나 볼 수 있게
  • HTML5와 CSS3공부이유: 최신 웹 표준에 맞는 웹 사이트 제작, 앱화면 디자인 기초, 인터랙티브한 사이트 만듦, 소스 이해>웹사이트 블로그 수정
  • CSS3: 접속 기기 따라 사이트 레이아웃 바꿈

웹 편집기

  • 비주얼 스튜디오 코드: 뷰바>사이드바>편집기/상태표시줄
  • 뷰바: 탐색기/검색/깃/디버그/확장

HTML 기본 문서 구조

  • 태그: 마크업할 때 사용하는 약속된 표기법
  • <>로 태그 구분
  • 태그는 소문자
  • 여닫는 태그
  • 소스 들여스기:tab키
  • 태그는 속성과 함께 사용가능 <태그 속성="속성 값" 속성="속성 값">HTML문서만들기
  • <img src="image.jpg" width="100" height="100" alt="나">
  • 작업폴더추가: 탐색기>폴더 열기>폴더선택
  • 새파일 실행 저장: ctrl+n, ctrl+S(제목.html)
  • 소스코드 입력
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <h1>aa</h1> <p>bb<br> cc</p> <img src="images/first.jpg"> </body> </html>
  • 인텔리센스 기능: 자동완성, 설명
  • !doctype: 문서 유형 지정하는 선언문
  • html태그: 웹 문서 시작을 알리는 태그
  • lang 속성: 사용 언어 지정(검색사이트 특정 언어 제한)
  • <html lang="ko">
  • head 태그: 브라우저에게 정보 제공, 화면x ex)title(제목표시줄)
  • meta 태그: 문자 인코딩 및 문서 키워드, 요약 정보
  • body 태그: 브라우저 표시 내용
  • 엔티티 기호: 미리 약속한 이름이나 표기법

웹 문서 만들고 업로드

  • 서버 컴퓨터로 옮기기
  • 닷홈 무료 호스팅 서비스
  • 파일 전송프로토콜 FTP: 서버와 클라이언트 간 파일 주고 받음
  • FTP 프로그램 FileZilla

'HTML5 + CSS' 카테고리의 다른 글

텍스트 관련 태그  (0) 2021.10.24