Posted Updated  minkuen frontEnd / html & css3 minutes read (About 395 words)

html 기초

사전작업

  • 바탕 화면에 폴더 생성 : project
  • 폴더 우클릭 : git bash here
  • VSCord 작동 : code .

Untitled

  • 폴더, 파일 생성
  • PROJECT 아래에 생성
    • 폴더 생성 : step01_intro
    • 파일 생성 : index.html

html 작성

  • 코드 작성
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
    </head>
    <body>
        aaa
    </body>
</html>
  • 저장 후 폴더에서 html파일 열기
  • 다음과 같이 작서한 내용이 출력되어 있다.

Untitled

링크 첨부

  • Naver 주소를 복사하여 다음과 같이 작성한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>돈까스집</title>
    </head>
    <body>
        <a href="https://www.naver.com/">NAVER</a>
        <br>
        <br>
        <div>Hello World</div>
    </body>
</html>

Untitled

이미지 추가

  • project/step01_intro 경로에 폴더 생성 : img
  • 아무 사진이나 다운받아서 폴더에 넣는다.
    • 사진을 다른 이름으로 저장 : temp
  • 여기까지 설정하고 다음과 같이 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>돈까스집</title>
    </head>
    <body>
        <a href="https://www.naver.com/">NAVER</a>
        <br>
        <br>
        <div>Hello World</div>
        <br>
        <img src="./img/temp.jpg" alt = "ball">
    </body>
</html>

Untitled

이미지 주소로 추가

  • 이미지 우클릭 : 이미지 링크 복사
  • 다음과 같이 링크를 붙여넣고 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>돈까스집</title>
    </head>
    <body>
        <a href="https://www.naver.com/">NAVER</a>
        <br>
        <br>
        <div>Hello World</div>
        <br>
        <img src="./img/temp.jpg" alt = "ball">
        <img src="https://img.animalplanet.co.kr/news/2020/01/07/700/tbg4j63622z4545z51af.jpg" alt = "fox">
    </body>
</html>

Untitled

페이지 이동

  • 링크로 페이지 이동하기
  • 우선 step01_intro 아래에 폴더 생성 : about
    • about 아래에 파일 생성 : index.html
  • about/index.html에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>About</title>
    </head>
    <body>
       <a href="../">Home</a>
       About 페이지입니다.
    </body>
</html>
  • index.html에 about/index.html 경로 추가
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=devie-width, initial-scale=1.0">
        <title>돈까스집</title>
    </head>
    <body>
        <! -- 키워드: 상대경로, 절대경로 -->
        <a href="https://www.naver.com/">NAVER</a>
        <a href="./about/index.html">About</a>
        
        <br>
        <br>
        <div>Hello World</div>
        <br>
        <img src="./img/temp.jpg" alt = "ball">
        <img src="https://img.animalplanet.co.kr/news/2020/01/07/700/tbg4j63622z4545z51af.jpg" alt = "fox">
    </body>
</html>

Untitled

팁

  • 다음 설정으로 코드 가독성을 높일 수 있다.
    • VSCord → 메뉴바 → 보기 → 자동 줄 바꿈

html 기초

https://kmk3593.github.io/2022/06/05/html_start/

Author

minkuen

Posted on

2022-06-05

Updated on

2022-06-18

Licensed under

#
You need to set install_url to use ShareThis. Please set it in _config.yml.

Like this article? Support the author with

You forgot to set the business or currency_code for Paypal. Please set it in _config.yml.

Comments

You forgot to set the shortname for Disqus. Please set it in _config.yml.
Follow

Links

Categories

Recents

Archives

Tags

HTML6
JPA11
JPA 기초11
Java9
JavaScript1
NiFi1
Notion4
PL/SQL4
R2
R Markdown1
VScord1
Vue.js7
Vue.js 기초7
airflow4
anaconda1
apache1
chatbot5
crawling4
elasticsearch1
git1
github blog1
heroku4
javascript10
kakao_chatbot5
kibana1
machine learning22
oracle15
pipeline1
postgreSQL5
python30
setting14
spark7
wsl21
생활코딩1

Subscribe for updates

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.

follow.it

×