라라리라

2023.07.20 / HTML 1- 코딩 1 일차 본문

코딩/2023 HTML & CSS

2023.07.20 / HTML 1- 코딩 1 일차

헤실 2023. 7. 20. 19:32

0101_body.html

<!DOCTYPE html> <!--!DOCTYPE HTML 5버전을 사용한다는뜻-->
<html lang="ko"><!-- en = 영어 / ko = 한글 * 반드시 바꿀것-->
<head> <!-- 구역(기본) -->
    <meta charset="UTF-8"> <!--"UTF-8 " <- 한글,영어, 중국어  -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--모니터 가로크기 기준으로 화면에 출력-->
    <title>HTML 개념 01</title> <!-- 브라우저 창에서의 제목-->
</head> <!-- 구역-->
<body> <!-- 구역-->
    안녕하세요!!<br>
    안녕<br>
    하세요
   
</body> <!--구역-->
</html>
HTML 개념 01 안녕하세요!!
안녕
하세요

 

0102_heading.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>heading.html</title>
</head>
<body>
    <!--
        h(= heading)태그
        h1 ~ h6
    -->  
 

         <!--
        [복사] alt + shift + 위/아래 방향키
        [복사] alt + shift + 위/아래 방향키
        [복사] alt + shift + 위/아래 방향키
        [복사] alt + shift + 위/아래 방향키
        [복사] alt + shift + 위/아래 방향키
        [복사] alt + shift + 위/아래 방향키
        [복사] alt + shift + 위/아래 방향키
        [복사] alt + shift + 위/아래 방향키
        [복사] alt + shift + 위/아래 방향키
        [복사] alt + shift + 위/아래 방향키
        [복사] alt + shift + 위/아래 방향키
        [복사] alt + shift + 위/아래 방향키
        [복사] alt + shift + 위/아래 방향키
        [복사] alt + shift + 위/아래 방향키
        [복사] alt + shift + 위/아래 방향키
        [복사] alt + shift + 위/아래 방향키
        [복사] alt + shift + 위/아래 방향키
        [복사] alt + shift + 위/아래 방향키
        [복사] alt + shift + 위/아래 방향키
    -->
    <h1>이것이 heading 1 입니다.</h1>
    <h2>이것이 heading 2 입니다.</h2>
    <h3>이것이 heading 3 입니다.</h3>
    <h4>이것이 heading 4 입니다.</h4>
    <h5>이것이 heading 5 입니다.</h5>
    <h6>이것이 heading 6 입니다.</h6>

   
   
   
   
   
   
   
   

   
</body>
</html>
heading.html

이것이 heading 1 입니다.

이것이 heading 2 입니다.

이것이 heading 3 입니다.

이것이 heading 4 입니다.

이것이 heading 5 입니다.
이것이 heading 6 입니다.

 

0103_para.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        p(paragraph) 태그
    -->
    <p>이것이 하나의 단락입니다.</p>
    <p>이것이 하나의 단락입니다.</p>
    <p>이것이 하나의 단락입니다.</p>
    <p>이것이 하나의 단락입니다.</p>
    <p>이것이 하나의 단락입니다.</p>
    <p>이것이 하나의 단락입니다.</p>
    <p>이것이 하나의 단락입니다.</p>
    <h1><p>이것이 하나의 단락입니다.</p></h1>

</body>
</html>
Document

이것이 하나의 단락입니다.

이것이 하나의 단락입니다.

이것이 하나의 단락입니다.

이것이 하나의 단락입니다.

이것이 하나의 단락입니다.

이것이 하나의 단락입니다.

이것이 하나의 단락입니다.

이것이 하나의 단락입니다.

 

0104_br.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <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>
    <!--
        br(= break line) 태그 : 줄바꿈 역할
    -->  
    <!--
        <시작태그></시작태그>
        <단일태그>
        <단일태그 />

        <h1>내용</h1>
        <br>
        <br />
    -->
    <p>여기는</p>
    <p>para를 사용하여</p>
    <p>줄을 바꾸었습니다.</p>

    여기는 <br>br태그를 사용하여 <br/>줄을 바꾸었습니다.

</body>
</html>
Document

여기는

para를 사용하여

줄을 바꾸었습니다.

여기는
br태그를 사용하여
줄을 바꾸었습니다.

 

0105_hr.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <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>
    <!--
        hr(= horizontal, 수평선) 태그
    -->
   
    <hr>
    이것이 수평선입니다.

    <hr />
    <p>수평선이었습니다.</p>
    <p>수평선이었습니다.</p>
    <p>수평선이었습니다.</p>
    <p>수평선이었습니다.</p>
    <p>수평선이었습니다.</p>
    <p>수평선이었습니다.</p>
    <p>수평선이었습니다.</p>
    <p>수평선이었습니다.</p>
    <p>수평선이었습니다.</p>
    <p>수평선이었습니다.</p>
    <p>수평선이었습니다.</p>
    <p>수평선이었습니다.</p>
    <p>수평선이었습니다.</p>
    <p>수평선이었습니다.</p>
    <p>수평선이었습니다.</p>

    <hr />

</body>
</html>
Document
이것이 수평선입니다.

수평선이었습니다.

수평선이었습니다.

수평선이었습니다.

수평선이었습니다.

수평선이었습니다.

수평선이었습니다.

수평선이었습니다.

수평선이었습니다.

수평선이었습니다.

수평선이었습니다.

수평선이었습니다.

수평선이었습니다.

수평선이었습니다.

수평선이었습니다.

수평선이었습니다.

 

0106_a.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <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>
    <!--
        a(= anchor) 태그 : 페이지 이동
    -->
    <!--
        태그(tag)
        <태그 속성="속성값" 속성="속성값".... ></태그>

        (1) href : 이동할 페이지 주소
        (2) target
            1) _self : default값(기본 속성값), 생략해도 무방
            2) _blank : 새 탭에 이동한 페이지를 보여준다
    -->

    <a href="http://www.naver.com" target="_blank">네이버 이동 (추가페이지)</a>
    <br>
    <hr>

    <a href="http://www.google.com" target="_self"> 구글로 이동 (현재페이지)</a>
    <br>
    <hr>
   
    <!-- target="_self" 는 생략 가능하다. -->
    <a href="http://www.naver.com">네이버 이동 (현재 페이지) </a>
    <br>
    <hr>
   

    <a href="https://www.hrd.go.kr/hrdp/ma/pmmao/newIndexRenewal.do" target="_blank">HRD.NET 이동(추가페이지)</a>
    <br>
    <hr>

    <!-- 미리 틀을 잡아놓을때는 링크를 # 으로 해놓는다.  -->
    <a href= "https://www.instagram.com/?hl=ko" target="_self">인스타그램 이동(현재페이지) </a>
    <hr>
    <br>
    <a href="#" >임시 페이지</a>

</body>
</html>
 
Document 네이버 이동 (추가페이지)
구글로 이동 (현재페이지)
네이버 이동 (현재 페이지)
HRD.NET 이동(추가페이지)
인스타그램 이동(현재페이지)

임시 페이지

 

0107_nbsp.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <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>
   
    <!--
        공백을 처리 : &nbsp;
        none break spacebar
    -->

    안&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;녕하세요
    <br>
   
    안&nbsp;녕&nbsp;하&nbsp;세&nbsp;요

</body>
</html>
Document 안      녕하세요
안 녕 하 세 요

 

0108_title.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>슈퍼코드마더</title>
</head>
<body>
   
</body>
</html>
슈퍼코드마더

 

0109_image.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <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>
   
    <!--
        img(=image) 태그
        (1) src(source) : 이미지파일명.확장자
        (2) width : 가로 크기
        (3) height : 세로 크기
        (4) alt : alternative 대체어
    -->

    <img src="0109_zebra.jpg" width="100px" height="100px">

    <img src="0109_zebra.jpg" width= "200px" height = "300px">

</body>
</html>
Document

 

0109_zebra.jpg

 

0110_image경로오류.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <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>
   
    <!--
        이미지 경로 상에 오류가 발생하여
        정상적으로 이미지가 출력되지 않을 때,

        alt(alternative) 속성을 통해 이미지를 대신해
        설명을 보여줄 수 있다.
    -->
    <img src="0109_zbra.jpg" alt="출력불가">

</body>
</html>
Document 출력불가

 

 

'코딩 > 2023 HTML & CSS' 카테고리의 다른 글

2023.08.10 / CSS3 - 코딩 22 일차  (0) 2023.08.10
2023.08.09 / CSS2 - 코딩 21 일차  (0) 2023.08.09
2023.07.21 / HTML 4- 코딩 2 일차  (0) 2023.07.21
2023.07.21 / HTML 3- 코딩 2 일차  (0) 2023.07.21
2023.07.20 / HTML 2- 코딩 1 일차  (0) 2023.07.20
'코딩/2023 HTML & CSS' Related Articles more