Post

Web 스터디-1. HTML 파일 구조.

Posted Updated
By reason_rock
4 min read
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<!DOCTYPE html><!--html임을 정의-->
<html lang="en">
<head>
    <meta charset="UTF-8"><!--깨짐을 방지/ title와 함께 head로 맨위에 위치-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body><!--본격적인 본문-->
    <!--인터넷과 웹의 관계: 인터넷을 구성하는 서비스 중 하나가 웹이다.-->
    <!--인터넷+하이퍼텍스트+마크업언어=>웹(팀 버너스리)-->
    <!--ip를 외우기 어려워지자 도메인을 만듦(최초의 도메인 info.cern.ch)-->
    <!--인터넷을 구성하기 위해서는 최소 두대 PC 필요, 정보를 요청하는 PC가 클라이언트, 응답하는 웹서버가 서버 각각의 장치를 host-->
    <!--127.0.0.1 : 내 내부 아이피-->
    <!--서버를 운영하기 위해 인터넷에 접속된 컴퓨터를 운영하는 것을 호스팅이라 한다-->
    <!--코드 자동정렬 shift+alt+f / ubuntu ctrl+shift+f-->
    HTML 실습 <u>밑줄 그어보기</u> <!--밑줄--> 
    <!-- html 주석 단축키는 ctrl+/ -->
    <br> <!--줄바꿈-->
    HTML 실습 <strong>글자 진하게 강조하기</strong><!--진하게-->
    <br> <!--줄바꿈-->
    이렇듯 <>를 사용하는 것들을 <strong>"tag"</strong>라고 한다
    <br> <!--줄바꿈-->
    <br> <!--줄바꿈-->
    HTML 실습 <h1>제목태그 h1 사용하기</h1> <!--제목태그-->
        <h2>제목태그 h2 사용하기</h2> <!--제목태그-->
        <h3>제목태그 h3 사용하기</h3> <!--제목태그-->
        <h4>제목태그 h4 사용하기</h4> <!--제목태그-->
        <h5>제목태그 h5 사용하기</h5> <!--제목태그-->
        <h6>제목태그 h6 사용하기</h6> <!--제목태그-->
    <br> <!--줄바꿈-->
    <img src="https://images.unsplash.com/photo-1542831371-29b0f74f9713?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="HTML실습 이미지 삽입하기" width="300" height="300"> <!--이미지 뒤에 붙는건 속성(attribute)-->
    <!--vscode 설정 단축키는 'ctrl'+','-->
    <iframe width="560" height="315" alt="HTML 실습 유튜브 삽입하기" src="https://www.youtube.com/embed/1fWc6dNKBUo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <br>
    <a href="reason-rock.github.io/">링크걸기</a>
    <ul>
        <li><a href="1.html">페이지 내 링크 이동</a></li><!--페이지 나누기-->
        <li><a href="css1.html">내부이동 css</a></li><!--페이지 나누기-->
        <li><font color="red">리스트2</font></li><!--색상변경->지원안될수 있음 => CSS로 변화되기 전 원시적 방법-->
        <li>리스트3</li>
    </ul>
    <ul>
        <li>다른 리스트1</li>
        <li>다른 리스트2</li>
        <li>다른 리스트3</li>
    </ul>
</body>
</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡ 적용예 ㅡㅡㅡㅡㅡㅡㅡㅡㅡ

HTML 실습 밑줄 그어보기
HTML 실습 글자 진하게 강조하기
이렇듯 <>를 사용하는 것들을 "tag"라고 한다

HTML 실습

제목태그 h1 사용하기

제목태그 h2 사용하기

제목태그 h3 사용하기

제목태그 h4 사용하기

제목태그 h5 사용하기
제목태그 h6 사용하기

HTML실습 이미지 삽입하기
링크걸기
  • 다른 리스트1
  • 다른 리스트2
  • 다른 리스트3
Study, Web
HTML Web 웹 HTML 리스트 HTML 링크걸기
This post is licensed under CC BY 4.0 by the author.