- 웹페이지의 구조 설명
- 요소로 구성 —> 브라우저에 내용을 표시하는 방법 , 레이블 지정
- 웹페이지를 만들기 위한 표준 마크업 언어
Alt f s -> save
Html,css,js 파일 만들려면 이름.뒤에 적어줘야함
실행방법 ) 오른쪽 마우스 -open in default browser
바-Live Server 이용: 오른쪾 마우스 open live server ->바로바로 확인 가능
html, css 한번에 보기 : css 파일 이름을 마우스 오른쪽 버튼으로 클릭 후 [측면에서 열기]
- 간단한 html 문서
<!DOCTYPE html> // html로 디코딩을 하면된다고 알려줌(이 문서는 html이다)
<html> //html 페이지의 루트 요소
//html lang = “en” 언어를 영어로 하겠다
<head> // 사용자 눈에 보이지 않는 요소 들어감 (페이지에 대한 메타 정보)
<title>Page Title</title> // html 페이지의 제목 지정 (예외적으로 head 부분에서 사용자의 눈에 보임 // <h1> 가장 중요한 제목 , <h6> 가장 덜 중요한 제목(글자 크기 감소)
<a href = “ http://www.w3schools.com”> This is a link</a> // href 속성에 지정 (html 요소에 대한 추가 정보 제공) <img src = “w3schools.jpg” alt = “w3schools.com” width = “104” height = “142”> // 소스 파일(src) , 대체 텍스트( alt) , width 및 height 속성 제공
</head>
<body>//문서의 본문 정의 (사용자의 눈에 보이는 아웃풋들이 들어감
<h1>My FIrst Heading</h1> //큰 제목 정의 (h 뒤에 숫자에 따라서 글자 크기가 달라짐)
<p>My First paragraph.<\p> // 단락 정의
</body>
</html>
- *vscode로 html 기본양식 완성 법
-
- 새 html 파일을 생성한다. ...
- 하단에서 언어모드가 'HTML'인지 확인한다. ...
- 빈 html에 !(느낌표)를 입력한다. ...
- Tab 키를 눌러주면 html 기본 양식이 세팅된다.
- html 요소란?
- 시작 태그, 일부 콘텐츠, 종료 태그로 정의
//<p> opening tag, </p> closing tag → 항상 열고 닫아줘야함
단, <br> 요소와 같은 경우 빈 요소 이므로 종료 태그 없음 , 줄 바꿈 정의
- 요소는 중첩 가능 ( <html>요소안에 <body>요소, <body>요소 안에 <h1>,<p>요소
- html 속성
- 모든 html 요소는 속성 가질 수 있음
- 요소에 대한 추가 정보 제공
- 항상 시작 태그에 지정
- name = “value”와 같이 이름/값 쌍으로 제공
태그 <a> : 하이퍼링크 정의
속성 href : 링크가 이동하는 페이지의 url 지정
<a href = “ [https://www.w3schools.com”>Visit](https://www.w3schools.㯘%3Evisit-3j3f/) w3schools<a/>
태그 <img> : html 페이지에 이미지 삽입
속성 src : 표시할 이미지 경로 지정
<img src = “img_girl.jpg” width = "500" height = "600">
src 속성에 url 지정하는 방법
'웹 > Html' 카테고리의 다른 글
| 이미지 & 멀티 미디어 (0) | 2023.09.23 |
|---|---|
| 텍스트 입력, 목록 , 표 (0) | 2023.09.23 |
| 폼 삽입(form) (0) | 2023.08.02 |
| 하이퍼 링크 (0) | 2023.08.02 |
| 시멘틱 요소 (0) | 2023.08.02 |
