일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- null # undefined
- pop()
- 합집합
- a=1
- 불리안
- 변할 수 있는
- 딥러닝
- false
- 1일차
- 조건문 큰 수부터 입력받아야하는 이유
- 리스트와 차이점
- 파이썬
- html
- 그룹 # 그룹 해체 # 단축키 #figma #Figma
- input()
- 변수
- 정보를 담을 수 있는 그릇
- del()
- index()
- insert()
- 성적 입력받기
- 차집합
- 조지 불
- 입출력
- append()
- 부스트캠프
- Python
- Java Script # == # === # difference # 차이
- 변수와 입출력
- 귀도 반 로섬
- Today
- Total
I about me
[HTML] HTML의 모든 것 본문
HTML의 모든 것을 정리해보자!
기본 틀
<!DOCTYPE html>
<html>
(쓰고 싶은 내용)
</html>
첫 번째, <! ~>는 HTML에서 주석을 나타내는 부분이라고 한다.
두 번째, DOCTYPE html 이 부분은 이 파일을 html의 언어로 작성하겠다고 쓰는 것이라고 한다.
세 번째. <html> (쓰고 싶은 내용) </html>을 쓰면 짜잔!!
이렇게 만든 파일 클릭하면 다음과 같이 나온다.
또한, 아래 netlify 사이트에 들어가면 내가 만든 사이트를 공유할 수 있다...!
Develop and deploy websites and apps in record time | Netlify
Accelerate the time to deploy your websites and apps. Bring your integrations and APIs together on one powerful serverless platform. Get started for free!
www.netlify.com
https://htmlstudy1.netlify.app/
htmlstudy1.netlify.app
사이트에 이름 붙이기
위에서 제목명이 index.html로 되어 있지 아니한가?
이름을 바꾸기 위해서는 <title> ~ </title> 로 묶어 내용을 구성해야하며,
안에 들어가는 내용과 구별하기 위해 <head> ~ </head>, <body> ~ </body>로 나뉘어지게 해야한다.
<!DOCTYPE html>
<html>
<head>
<title> Weekly Codeit </title>
</head>
<body>
~
</body>
</html>
제목 넣기
<!DOCTYPE html>
<html>
<head>
<title> Weekly Codeit </title>
<meta charset = "utf-8">
</head>
<body>
<h1> Weekly Codeit </h1>
<h2> ~ </h2>
<h3> ~ </h3>
</body>
</html>
다음과 같이 제목 1, 제목 2, 제목 3... etc를 나타내기 위해서는 <h1> ~ </h1>, <h2> ~ </h2>의 부분이 필요하다
본문 넣기
<!DOCTYPE html>
<html>
<head>
<title> Weekly Codeit </title>
<meta charset = "utf-8">
</head>
<body>
<h1> Weekly Codeit </h1>
<p>
금요일에 만나는
코딩 한 스푼
</p>
<h2> ~ </h2>
<h3> ~ </h3>
</body>
</html>
<p> ~ </p>가 필요하다.
본문에 enter 집어넣기
그런데 위의 '금요일에 만나는 코딩 한 스푼'을 주의해서 보자
다음 사이를 enter 치게 하려면 어떻게 해야할까?
<!DOCTYPE html>
<html>
<head>
<title> Weekly Codeit </title>
<meta charset = "utf-8">
</head>
<body>
<h1> Weekly Codeit </h1>
<p>
금요일에 만나는<br>
코딩 한 스푼
</p>
<h2> ~ </h2>
<h3> ~ </h3>
</body>
</html>
다음과 같이 <br>을 치면 되며, br은 break의 줄임말이라고 생각하면 좋을 것 같다.
<>를 글자로 넣는 방법
예를 들어, 글자로 <html>를 표현되기 위해서는 <html> 이렇게 적어줘야 한다.
링크 추가하는 방법
1. '<a> (페이지명) </a>'로 하여 틀을 잡는다.
2. <a href = "(실제 주소)"> (페이지명) </a>로 하여 실제 링크를 삽입한다.
이미지 넣는 방법
1. 주소로 넣는 방법
1. 이미지 주소 복사 ex) https://www.kyongbuk.co.kr/news/photo/201402/158150_20140220077.jpg
2. 다음 주소를 검색창에 쳐서 이미지 파일이 나오는지 확인한다.
ex)
3. <img src = "(복사한 이미지 주소)">
2. 파일로 넣는 방법
1. 이미지 다운로드
2. 실행하는 파일과 같은 위치에 이미지 위치 시키기
3. <img src = "(다운로드받은 이미지 파일)">
영역 나누는 방법
1. 이미지 다운로드
2. 실행하는 파일과 같은 위치에 이미지 위치 시키기
3. <img src = "(다운로드받은 이미지 파일)">
'Frontend > HTML' 카테고리의 다른 글
[HTML] Table 태그 (0) | 2024.03.18 |
---|---|
[HTML] 입력 양식 태그 (0) | 2024.03.13 |
[HTML] 글자 형태 (0) | 2024.02.26 |
[HTML] HTML 페이지 구조 (0) | 2024.02.26 |
[HTML] 페이지 생성하고 실행하기 (0) | 2024.02.26 |