HTML 01

오늘·2021년 4월 12일
0

웹 페이지 연습

목록 보기
1/35
  • 사용한 개발 전용 에디터 : Visual Studio Code
    -> 추가로 설치한 확장
  1. Korean Language Pack for Visual Studio Code
  2. open in browser (= alt+B를 누르면 실행화면이 바로 뜬다)

기본적인 모양

<!DOCTYPE html>
<html>
<head>
    <title>탭 부분에 표시될 부분</title>
</head>
  
<body>
  <h1> 본문의 헤더입니다 </h1>
</body>
</html>

실행시 화면


속성

태그에 추가 정보를 부여할 때는 속성을 사용한다.

    속성이름 = 속성값
<h1 title = "header"> Hello </h1>

<> 는 속성 블록이다.

주석

주석은 아래와 같이 작성한다.

<!--주석 작성-->

단, <style> 이 부분 </style>
에서의 주석은 /* 이런 식으로 작성한다 */

head 태그 내부에 넣을 수 있는 태그

  1. meta : 웹 페이지에 추가 정보를 전달
  2. title : 웹 페이지의 제목
  3. script : 웹 페이지에 스크립트를 추가
  4. link : 웹 페이지에 다른 파일을 추가
  5. style : 웹 페이지에 스타일시트를 추가
  6. base : 웹 페이지에 기본 경로 지정
<!DOCTYPE html>
<!-- lang : 실제 웹 브라우저가 동작하는 데 어떤 영향도 끼치지 않는다
            구글과 같은 검색 엔진이 웹 페이지를 탐색할 때
            해당 웹 페이지가 어떤 언어로 만들어져 있는지 쉽게 인식하게 만든다-->
<html lang="en">
<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>Document</title>
    <!-- 스타일 시트를 추가할 수 있는 부분-->
    <style>
        /*예를 들어 이렇게 작성시
           모든 table 속성에 "테두리의 굵기는 1px 선은 실선으로 색은 slategray로
            하겠다는 것*/
        table {
            border: 1px solid slategray;
        }
    </style>
</head>

글자 태그

제목

아래순서에서 h1부터 큰 제목 글자 태그이다
h1 -> h2 -> h3 -> h4 -> h5 -> h6

<body>
    <h1> h1 작성 </h1>
    <h2> h2 작성 </h2>
    <h3> h3 작성 </h3>
    <h4> h4 작성 </h4>
    <h5> h5 작성 </h5>
    <h6> h6 작성 </h6>
</body>

실행화면

본문

<p> : 본문 글자 태그
<br> : 줄바꿈 태그
<hr> : 수평 줄 태그

p는 paragraph의 줄임말이다. paragraph는 단락을 의미하므로 p태그를 사용하면 하나의 단락을 만들 수 있다.

<body>
    <h2> p 사용시 단락이 잘 나뉜걸 확인할 수 있다</h2>
    <p> Pakistan is in a tight spot: Covid-19 cases are surging during a third wave, hospital beds are filling up </p>
    <p> Pakistan is in a tight spot: Covid-19 cases are surging during a third wave, hospital beds are filling up </p>
    
    <h2> br 사용시 다음 줄로 줄바꿈 되는 것을 확인할 수 있다 </h2>
    <br>
    <h2> hr 사용시 수평 줄이 생기는 것을 확인할 수 있다 </h2>
    <hr>
</body>

실행해보면 단락이 잘 나눠져 있는걸 확인할 수 있다.

앵커태그

앵커태그는 'a'이다. a 태그의 href속성을 사용하여 이동하고자 하는 웹 페이지를 지정할 수 있다. 하이퍼링크를 연결할 수 있는 태그인 것이다

<a href="http://naver.com"> 네이버 </a>

가끔은 하이퍼링크 기능을 제거하고 사용하는 경우도 있다. 이 경우 기능을 제거해도 웹 표준을 따르려면 a 태그에 href 속성을 반드시 입력해야하고, 이때 웹 표준은 지키면서 이동하지 않는 a 태그를 만들때는 속성에 #을 입력하면 된다

<a href="#"> 네이버 </a>

글자 형태

b : 굵은 글자
i : 기울어진 글자
small : 작은 글자
sub : 아래에 달라 붙는 글자
sup : 위에 달라 붙는 글자
ins : 밑줄 글자
del : 가운데 줄이 그어진 글자

    <b> b 입니다 </b> <br>
    <i> i 입니다</i> <br>
    <small> small 입니다 </small> <br>
    <sub> sub 입니다</sub> <br>
    <sup> sup 입니다</sup> <br>
    <ins> ins 입니다</ins> <br>
    <del> del 입니다</del> <br>

실행화면

0개의 댓글

관련 채용 정보