20일차

오늘부로 html을 배웠다.

html은 엄밀히 말하자면 프로그래밍 언아가 아닌, 마크업 언어(Markup: 문서타입)이다. xml 하위 집합으로 xml의 형식을 따른다. 태그로 시작해서 태그로 끝난다.

태그 형식

쌍태그 : <태그이름>내용</태그이름>

단태그 : <태그이름> <태그이름 />

속성형식 : <태그이름 속성이름="속성값"></태그이름>

: 주석

<head> : 문서 제목(title)과 문서 정보(meta)를 담고 있다.

<title> : 탭의 이름을 뜻한다.

< /(태그이름) > : 앞서 열은 태그를 닫는다. 브라우저 호환성을 위해 /를 사용한다.

<body> : 내용을 쓰는 태그

<html lang="ko"> : 주로 쓰이는 언어를 선택한다. 하지만 다른 언어를 사용하지 못하는 것은 아니다.

<h1> : 글자 크기를 정한다. 다음을 참고하라.

```html
<!-- 에밋(EMMET) : 코드 자동완성 확장팩이며, 기본패키지이다. -->
<!DOCTYPE html>
<html lang="ko">
<head>
  <title>문서제목태그 H1~H6</title>
</head>
<body>
  기본 글씨 크기는 16픽셀입니다.
  <!-- h1 : 32px, 기본의 2배 -->
  <h1>제목 글씨 H1</h1>
  <!-- h2 : 24px, 1.5배 -->
  <h2>제목 글씨 H2</h2>
  <!-- h3 : 21.28px, 1.33배 -->
  <h3>제목 글씨 H3</h3>
  <!-- h4 : 18.72px, 1.17배 -->
  <h4>제목 글씨 H4</h4>
  <!-- h5 : 13.28px, 0.83배 -->
  <h5>제목 글씨 H5</h5>
  <!-- h6 : 10.72px, 0.67배 -->
  <h6>제목 글씨 H6</h6>
</body>
</html>
```

<br> : 줄바꿈 태그

<br></br>: 쌍태그 형식으로 사용한 태그. 자주 사용하지는 않음.

<p>문단</p> : 문단(phrase)을 넣기 위해 사용하는 태그. 줄바꿈이 내장되어 있으며, 세로로 여백이 생긴다.

<로렘 입숨(Lorem ipsum)> : 더미 문구. 의미는 없으나 텍스트용도로 사용할수 있게 내장된 기능.

<a> : Anchor(닻)의 약자. 하이퍼링크(바로가기)를 위한 태그. href 속성에 이동할 주소(URL)를 넣어면 된다.

 <a href="http://www.naver.com">네이버 바로가기</a>

태그 사이에 하이퍼링크로 만들고자 하는 문자열을 넣을수 있다.

id : 속성값. 바로가기를 만들기 위한 기능이다. 위키피디아같은 곳에서 이름을 누르면 자동으로 해당 내용으로 스크롤이 내려가는 기능이다.

<a href="#p1">문단 1로 이동</a>
<p id="p1">문단1</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore ducimus dolorem beatae 
 blanditiis quae ullam animi fuga cum. Odit tempore repudiandae minus repellendus laboriosam 
quibusdam, temporibus tenetur voluptatum voluptate ex!</p>

id를 만들때는 #을, 가고싶은 id에는 그냥 id이름만 쓰면 된다.

다양한 문자 태그

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>텍스트 속성 태그들</title>
</head>
<body>
  동해물과 백두산이<br>
  <!-- b태그 : bold 굵은 글씨 -->
  <b>동해물과 백두산이</b><br>
  <!-- i태그 : italic 기울어진 글씨 -->
  <i>동해물과 백두산이</i><br>
  <!-- small태그 : 작은 글씨 -->
  <small>동해물과 백두산이</small><br>
  <!-- sub태그 : 아랫쪽 글씨 -->
  <sub>동해물과 백두산이</sub><br>
  <!-- sup태그 : 윗쪽 글씨 -->
  <sup>동해물과 백두산이</sup><br>
  <!-- ins태그 : 밑줄 그어진 글씨 -->
  <ins>동해물과 백두산이</ins><br>
  <!-- del태그 : 가운데줄 그어진 글씨 -->
  <del>동해물과 백두산이</del><br>
</body>
</html>

<ol> : Order List. 자동적으로 순서가 매겨지는 리스트

<ul> : Unorder List. 순서가 없이 점이 매겨지는 리스트

<li> : 리스트 항목 1개를 의미함

<dl> : 용어 정의 목록 태그

<dt> : 용어 이름

<dd> : 용어 설명

  <dl>
    <dt>네이버</dt>
    <dd>대한민국의 검색 포털입니다.</dd>
  </dl>

<table> : 격자. 테이블을 만듬.

<tr> : 테이블의 row줄 하나를 만든다.

<th> : 제목셀(칸) 하나를 만든다.

<td> : 데이터셀(칸) 하나를 만든다.

<font 속성> 내용 </font>: 문자열을 양쪽으로 감싸서 사용한다. color과 같은 속성값을 지정할수 있다.

***vsc 내에서는 td*3, tr*3과 같은 식으로 여러개의 태그를 동시에 만들수 있다.

colspan: 속성값. 가로 칸수를 지정한다. 기본은 1칸이나, 1칸 이상을 차지하고 싶게 할때 사용한다.

rowspan : 속성값. 세로 칸수를 지정한다. 기본은 1칸이나, 1칸 이상을 차지하고 싶게 할때 사용한다.

다양한 테이블 속성값들

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>테이블태그 속성들</title>
  <!-- border : 테두리선의 굵기 1px -->
  <!-- width : 테이블 너비 300 -->
  <!-- height : 테이블 높이 400 -->
  <!-- rowspan : 세로칸수 colspan : 가로칸수 -->
  <!-- align : 데이타셀의 정렬 center left right -->
  <!-- font태그의 color속성 : 글자색상 white blue red -->
  <!-- bgcolor : 백그라운드 색상 white blue red -->
</head>
<body>
  <table border="1px" width="500px" height="300px">
    <tr>
      <th bgcolor="skyblue"><font color="white">제목셀1</font></th>
      <th bgcolor="skyblue"><font color="white">제목셀2</font></th>
    </tr>
    <tr>
      <td align="center">셀데이타1</td>
      <td align="center">셀데이타2</td>
    </tr>
    <tr>
      <td align="center">셀데이타1</td>
      <td align="center">셀데이타2</td>
    </tr>
  </table>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>줄바꿈 태그 : br태그</title>
</head>
<br>
  첫번째 줄입니다.<br>
  두번째줄입니다.
  <!-- 단태그를 사용하는 3가지 형식 -->
  <!-- 1.표준형식의 태그 -->
  <br>
  <!-- 2.쌍태그 형식 : 잘사용하지 않음. -->
  <br></br>
  <!-- 3. /을 붙이는 형식 : 웹브라우저 호환성 향상 -->
  <!--   웹브라우저: 크롬,엣지,파이어폭스,사파리,IE -->
  <br />
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>문단태그 : p태그</title>
  <!-- Paragraph : 문장(문단) - 긴글을 표현할 때  -->
  <!-- 줄바꿈 내장, 세로 여백 있음.  -->
</head>
<body>
  <p>첫번째 문단입니다.</p>
  <p>두번째 문단입니다.</p>
  <!-- 더미 문구 : 의미없는 문구지만 테스트용도로 사용 -->
  <!-- 로렘 입숨 : 철학자 키케로의 '최고선악론'의
        문장들을 섞어 놓은 것 -->
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
    elit. A asperiores impedit maiores laboriosam laborum 
    delectus quia inventore fugiat? Accusantium iure id 
    placeat qui labore voluptatum odit modi alias, 
    porro nisi?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, porro deserunt. Deleniti nam est fugit, laudantium ipsa dolorum quasi autem vero, perferendis cumque ratione veritatis delectus officia placeat omnis enim?</p>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>바로가기태그 - a태그</title>
  <!-- 하이퍼링크 태그 -->
  <!-- Anchor의 약자, 닻을 의미 -->
</head>
<body>
  <!-- href 속성에 이동할 주소(URL)를 넣어면 된다. -->
  <a href="http://www.naver.com">네이버 바로가기</a>
  <!-- 연습문제 1 -->
  <!-- 1. 구글에 연결되는 a태그를 만드시오. -->
  <a href="http://www.google.com">구글 바로가기</a>
  <!-- 2. 구글에서 '월드컵'으로 검색결과를 나타내는
          a태그를 만드시오. -->
  <a href="https://www.google.com/search?q=월드컵">구글 월드컵 검색</a>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>페이지 안에서 스크롤하기 : a태그</title>
</head>
<body>
  <a href="#p1">문단 1으로 이동하기</a>
  <a href="#p2">문단 2으로 이동하기</a>
  <a href="#p3">문단 3으로 이동하기</a>
  <p id="p1">문단1</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore ducimus dolorem beatae blanditiis quae ullam animi fuga cum. Odit tempore repudiandae minus repellendus laboriosam quibusdam, temporibus tenetur voluptatum voluptate ex!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore ducimus dolorem beatae blanditiis quae ullam animi fuga cum. Odit tempore repudiandae minus repellendus laboriosam quibusdam, temporibus tenetur voluptatum voluptate ex!</p>
  <p id="p2">문단2</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore ducimus dolorem beatae blanditiis quae ullam animi fuga cum. Odit tempore repudiandae minus repellendus laboriosam quibusdam, temporibus tenetur voluptatum voluptate ex!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore ducimus dolorem beatae blanditiis quae ullam animi fuga cum. Odit tempore repudiandae minus repellendus laboriosam quibusdam, temporibus tenetur voluptatum voluptate ex!</p>
  <p id="p3">문단3</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore ducimus dolorem beatae blanditiis quae ullam animi fuga cum. Odit tempore repudiandae minus repellendus laboriosam quibusdam, temporibus tenetur voluptatum voluptate ex!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore ducimus dolorem beatae blanditiis quae ullam animi fuga cum. Odit tempore repudiandae minus repellendus laboriosam quibusdam, temporibus tenetur voluptatum voluptate ex!</p>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>목록(리스트) 태그 : OL UL 태그</title>
  <!-- OL : Order List 순서있는 리스트 - 1 2 3 글머리기호 -->
  <!-- UL : Unorder List 순서없는 리스트 - 점점점 글머리기호 -->
  <!-- LI : 리스트 항목 1개를 의미함. -->
</head>
<body>
  <h3>OL List</h3>
  <ol>
    <!-- li*3 : ul태그 3개 만들어짐. 에밋 기능 -->
    <li>유튜브</li>
    <li>벨로그</li>
    <li>카카오톡</li>
  </ol>
  <h3>UL List</h3>
  <ul>
    <li>유튜브</li>
    <li>벨로그</li>
    <li>카카오톡</li>
  </ul>

</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>용어 정의 목록태그 : DL태그</title>
  <!-- DL(Definition List) : 용어 정의 목록 태그 -->
  <!-- DT(Title) : 용어 제목 태그 -->
  <!-- DD(Description) : 용어 설명 태그 -->
</head>
<body>
  <dl>
    <dt>네이버</dt>
    <dd>대한민국의 검색 포털입니다.</dd>
  </dl>
  <dl>
    <dt>벤투</dt>
    <dd>대한민국 축구대표팀 감독입니다.</dd>
  </dl>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>테이블(격자) 태그 : table태그</title>
  <!-- 테이블(표, 격자, 바둑판, 그리드) -->
  <!-- table태그 : table임을 알려줌 -->
  <!-- tr 태그 : row 가로줄 하나 -->
  <!-- td 태그 : data 셀 하나 -->
  <!-- th 태그 : header 제목셀 하나 -->
</head>
<body>
  <!-- border속성 : 테두리선의 두께 -->
  <table border="1px">
    <tr>
      <!-- 에밋 자동완성 :CTRL+SPACE -->
      <th>제목셀1</th>
      <th>제목셀2</th>
    </tr>
    <tr>
      <td>셀데이타1</td>
      <td>셀데이타2</td>
    </tr>
    <tr>
      <td>셀데이타1</td>
      <td>셀데이타2</td>
    </tr>
  </table>
</body>
</html>

'공부 > html --- css' 카테고리의 다른 글

24일차 복습 (0)	2022.12.15
23일차 복습 (0)	2022.12.14
22일차 복습 -2 css시작 (0)	2022.12.13
22일차 - html 끝 (0)	2022.12.13
21일차 (0)	2022.12.12

프로그래밍 공부 이야기

20일차

'공부 > html --- css' 카테고리의 다른 글

티스토리툴바

20일차

'공부 > html --- css' 카테고리의 다른 글

관련글

티스토리툴바