Advanced Web Programming - HTML 기본태그 — 현서의 개발 일지📚

여기 Advanced Web Programming에는 내가 고급웹프로그래밍 시간에 배운 것들을 짧게 정리하고 실습해본 파일들을 공유하고자 한다.

특수문자 처리

<!DOCTYPE html>
<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" />
    <meta name="author" content="Hyunseo Lee" />
    <meta name="description" content="Web Programming" />
    <!-- <meta http-equiv="refresh" content="10; url=http://lms.knu.ac.kr/"> -->
    <!-- <base href="http://www.w3.org/" target="_blank"> -->

    <link rel="stylesheet" href="main.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,wght@1,100&family=Roboto:wght@100&display=swap" rel="stylesheet">
    <title>Advanced Web Programming</title>
  </head>

  <body>
      <center>
          <h1>&lt; HTML Special Letter &gt;</h1>
      </center>
  
      <section>
          <article>
              &num; 풀스택 개발자를 위한 웹 프로그래밍 &num;
              <p></p>
              HTML5 &#38; CSS3 &#38; JavaScript &#38; JQuery
          </article>
      </section>
      <hr size="10" align="left" width="90%" noshade="noshade"/>
      <footer>
          <small>
              &nbsp;&nbsp; &copy; 한빛아카데미 &nbsp;&nbsp;
              &nbsp;&nbsp; &reg; 2017
          </small>
      </footer>
      

  </body>
</html>

특수 문자 처리 <pre> 태그

또한 입력한 그대로 화면에 표시하고 싶다면 pre태그를 쓰면 된다.

...
    <pre>
              Text is a pre element
              is displayed in a fixed-width
              font. and it preserves
              boths      spaces and
              line breaks
    </pre>
...

텍스트

텍스트 관련 태그에는 아래와 같이 존재한다.

: 볼드체로 표시
: 강조하여 표시
: 이탤릭체로 표시
: 작게 표시ㅇ
: 중요한 내용을 표시
: 아래 첨자로 표시
: 윗첨자로 표시
<ins> : 아래 밑줄을 표시
<del> : 가운데 선으로 표시
: 하이라이트 표시
<code> : 컴퓨터 코드 표시
<samp> : 컴퓨터 프로그램 샘플 출력 표시
<kbd> : 키보드 입력 표시
<var> : 변수 표시

개인적으로 궁금해서 code, samp, kbd, var 태그 예제를 작성해 보았다.

...
	<pre>
          <code>
              const onClickHandler = () => {
                  console.log('it\'s clicked');
              }
          </code>
      </pre>

      <p>
          While computing <samp>OPops... the system encountered a problem (#707)</samp> this message was comming
      </p>

      <p>취소하시려면 <kbd><kbd>Ctrl</kbd> + <kbd>z</kbd></kbd> 를 입력하세요</p>
  ...

하이퍼링크

다른 사이트 혹은 같은 문서 내 다른 위치로 이동할 떄 <a>태그 안의 href속성값에 URL을 입력하면 됩니다.

이는 절대경로URL, 상대경로 URL, 페이지 내 위치, 프로토콜, 스크립트 파일을 모두 표시할 수 있다.

또한 a태그의 target속성은 링크된 문서를 Open할 위치를 지정하는 역할을 수행한다.

_blank : 새로운 웹 브라우저 창에 연다.
_self : 현재 웹 브라우저 창에 연다 ( default )
_parent : 부모 웹 브라우저 창에 연다.
_top : 웹 브라우저 전체 영역에 연다.

하이퍼링크 >> base태그

이는 상대경로를 설정해주는 Option인데 몇가지 조건이 존재한다.

이는 href과 target을 명시해 주어야 하며 페이지 당 한개여야 한다는 것이다.

만약에 이렇게 html을 작성했다면

가장 위에걸 들어가면 base URL에 명시된 값에 따라 상대 경로로 들어가게 된다. => http://www.w3.org/standards/ 로 접속

하이퍼링크 >> name, id 속성

이는 문서 내 특정 위치로 이동하는 옵션이다. 책갈피라고 보면 되는데 a태그에 href="#~~" 값을 주어주고 다른 DOM에 name="~~"나 id="~~"을 주게되면 a태그를 클릭했을 떄 그 DOM위치로 바로 가게 된다.

이는 간단히 이렇게 정리할 수 있다.

목록에는 무순서 <ul ( unordered list )>, 순서 <ol ( order list )>, 정의형 <dl ( data list )>

표

예제로 바로 보면 이해가 빠를 것이다.

...	
    <table border="1" style="width:50%; text-align: center;">
        <caption>현서 표</caption>
        <tr>
            <th>이름</th>
            <th>점수</th>
        </tr>
        <tr>
            <td>이현서</td>
            <td>20</td>
        </tr>

        <tr>
            <td>이현서2</td>
            <td>21</td>
        </tr>
      </table>
...

<tr>은 각각의 행을 <th>는 표의 header를 정의 즉 셀 제목 글자를 강조하는 것이고 <td>는 열을 생성하는 역할을 한다.

또한 셀을 병합할 수 있는데 rowspan : 셀을 세로로 병합, colspan : 셀을 가로로 병합 한다.

...
	<table border="1" style="width:50%; text-align: center;">
        <caption>현서 표</caption>
        <tr>
            <th>1행</th>
            <td>1행 1열</td>
        </tr>
        <tr>
            <td rowspan="2">2행</td>
            <td>2행 2열</td>
        </tr>

        <tr>
            <td>3행 2열</td>
        </tr>
      </table>

      <table border="1" style="width:50%; text-align: center; margin-top: 20px;">
        <caption>현서 표2</caption>
        <tr>
            <th>1행</th>
            <th colspan="2">2열</th>
        </tr>
        <tr>
            <td>2행 1열</td>
            <td>2행 2열</td>
            <td>2행 3열</td>
        </tr>
      </table>
...

'Web > Advanced Web Programming' 카테고리의 다른 글

고급 웹 프로그래밍 - 정리 - 2 (0)	2022.06.04
고급 웹 프로그래밍 - 기말 정리 - 1 (0)	2022.06.04
Advanced Web Programming - CSS (2) (0)	2022.04.04
Advanced Web Programming - CSS (1) (0)	2022.04.03
Advanced Web Programming - 멀티미디어 태그 (0)	2022.03.15