[코드잇] HTML 핵심 개념 ① - 링크, 텍스트, 리스트, 테이블

Notice

Recent Posts

Recent Comments

Link

« 2025/05 »
일	월	화	수	목	금	토
				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

Tags more

Archives

Today

Total

관리 메뉴

배꼽파지 않도록 잘 개발해요

[코드잇] HTML 핵심 개념 ① - 링크, 텍스트, 리스트, 테이블 본문

코드잇 Codeit/Front-End

[코드잇] HTML 핵심 개념 ① - 링크, 텍스트, 리스트, 테이블

꼽파 2023. 12. 20. 15:17

1. 시작하기

HTML 기본 구조

<!DOCTYPE html>
<html>
	<head>
	  페이지에 대한 정보가 들어가는 부분
	</head>
	<body>
	  화면에 보이는 내용이 들어가는 부분
	</body>
</html>

들여쓰기는 내용과 무관함.

· 주석 : 
· 기능 : 메모 남기기
· 단축키 : ctrl + /

2. 링크

라이브 프리뷰 설치하는 이유 :
· 서버를 통해서 접속했을 때랑 링크 동작에 차이가 있기 때문임.
· 실제 서버 환경과 비슷하게 만들어놓고 링크 동작 살펴보기

http://127.0.0.1:3000/index.html
· 라이브 프리뷰가 서버를 실행해서 내 컴퓨터에서 쓰는 주소로 접속할 수 있게 함.

현재 브라우저가 있는 폴더는 최상위 (/)

<a href="movies/"> → movie라는 폴더 안에 있는 index.html 파일을 보여줌.

index.html 파일은 폴더의 경로로 접속했을 때 기본으로 보여주는 파일임.

<a href="./index.html"> → 현재 폴더의 index.html을 찾아라.

<a href="../index.html"> → 부모 폴더의 index.html을 찾아라.

부모 폴더가 많은 경우 최상의 폴더를 기준으로 씀.

URI 프래그먼트(URI Fragment)
· 페이지의 특정 부분을 가리키는 주소
· 원하는 곳에 id 속성 지정, 링크 주소로 사용할 때는 맨 끝에 #아이디-이름

<a href= "#인터넷의_역사">인터넷의 역사<br>
<a href= "#대한민국의_인터넷_역사">대한민국의 인터넷 역사<br>
<a href= "#인터넷_이용자_수">인터넷 이용자 수</a>

<!-- 누르면 해당 위치로 이동 -->
<h2 id="인터넷의_역사">인터넷의 역사</h2>

· 이메일 보내기 : <a href="mailto:test@example.com">메일 보내기</a>
· 전화 걸기 : <a href="tel:+821012340123">전화 걸기</a>

<a href="https://movie.naver.com" target="_blank"><!-- 새 창으로 열기 -->
  네이버 영화 
</a>
<a href="https://movie.naver.com" target="_self"><!-- 현재 창 -->
  네이버 영화
</a>
<a href="https://movie.naver.com" target="movie"><!-- 내가 원하는 창 -->
  네이버 영화
</a>

여기서 target="movie"는 링크가 새 창이 아니라,

"movie"라는 이름의 프레임 또는 창에 열리기를 지시하는 HTML 속성

3. 텍스트

자주 쓰는 텍스트 태그

HTML 태그	용도	예시 코드
<h1>, <h2>, <h6>	제목, 숫자가 작을수록 큼	<h2>유명한 한국 감독</h2>
<p>	문단	<p>1950년대에는 한국전쟁이 일어나면서...</p>
<br>	줄바꿈	<p>1950년대에는 한국전쟁이 일어나면서... <br>하지만 1950년대 중반을 지나서...</p>
<strong>	의미상 강조, 굵은 텍스트	<strong>중요한 내용</strong>
<em>	강조, 기울어진 텍스트	<em>강조된 내용</em>
<s>	취소선이 있는 텍스트	<s>취소된 내용</s>
<sub>, <sup>	아래 첨자, 위 첨자	H<sub>2</sub>O, 3<sup>2</sup>
<hr>	수평선 (주제전환)	<hr>
<pre>	서식이 미리 지정된 텍스트	<pre>미리 서식이 정해진 텍스트</pre>
<code>	인라인 코드	<code>코드</code>
<blockquote>	인용문	<blockquote>인용 내용</blockquote>
<q>	인라인 인용	<p>글 안에서는 <q>짧게 인용</q>할 수 있습니다.</p>

4. 리스트

순서 리스트

순서 변경할 때 유용함

    <p>
         1. 라라랜드<br>
	    1. 명량<br>
	    2. 극한직업<br>
	    3. 신과함께: 죄와 벌<br>
	    4. 국제시장<br>
	    5. 어벤져스: 엔드게임
    </p>

순서가 있는 태그는 <ol> 안에 <li>를 쓰면 됨

    <ol>
      <li>라라랜드</li>
	    <li>명량</li>
	    <li>극한직업</li>
	    <li>신과함께: 죄와 벌</li>
	    <li>국제시장</li>
	    <li>어벤져스: 엔드게임</li>
    </ol>

순서 없는 리스트

순서가 없는 목록을 작성할 때 <ul>이라는 태그를 감싸고, 그 안에 항목은 <li> 태그

    <ul>
      <li>한국 영화</li>
      <li>외국 영화</li>
      <li>드라마</li>
      <li>예능</li>
      <li>영화</li>
      <li>프로야구</li>
    </ul>

리스트 스타일링

순서 리스트에서는 type 속성으로 기호를 변경할 수 있음.

body 본문에서 변경

    <ol type="a">
    <ol type="i">
    <ol type="I">
    <ol type="1">

type 값	실제 기호
a	a, b, c, d, e, …
i	i, ii, iii, iv, v, …
I	I, II, III, IV, V, …
1	1, 2, 3, 4, 5, …
hangul (한글)	가, 나, 다, 라, 마, 바, 사
decimal-leading-zero (앞에 숫자 0을 채워서 보여줌)	01, 02, 03, 04, 05, 06, 07
none (주로 순서 없는 리스트에 사용)

head에서 CSS 속성으로 변경

  <head>
    <meta charset="utf-8">
    <title>Watch it!</title>
    <style>
      ol {
        list-style: disc;
      }
    </style>
  </head>

기호를 없애고 싶을 때는 none을 사용

ul {
  list-style: none; 
}

모양은 마치 div 태그 적용한 것처럼 보임.

    <style>
      ol {
        list-style: disc;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <h2>상영작 순위</h2>
    <ol type="1">
      <li>라라랜드</li>
	    <li>명량</li>
	    <li>극한직업</li>
	    <li>신과함께: 죄와 벌</li>
	    <li>국제시장</li>
	    <li>어벤져스: 엔드게임</li>
    </ol>

리스트 항목을 한 줄로 쓰고 싶으면 display: inline-block을 활용

      ul > li {
        display: inline-block;
        border: 1px solid black;
        border-radius: 24px;
        padding: 8px;
      }

5. 테이블

테이블 태그

· <table>: 테이블 전체를 정의
· <tr>: 테이블의 각 행(row)을 나타냄.
· <th>: 테이블의 헤더(열 제목)를 정의. 주로 굵은 글씨로 표시됨.
· <td>: 테이블의 데이터 셀(data)을 정의

머리글 바닥글

· 머리글 <th> </th> / 행 <tr>
· 본문 <tbody> / 행 <tr>
· 바닥글 <tfoot> </tfoot> / 행 <tr>

      <thead>
      <tr>
          <th></th>
          <th>Premium</th>
          <th>Standard</th>
          <th>Basic</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>모바일+태블릿+PC</td>
          <td>지원</td>
          <td>지원</td>
          <td>지원</td>
        </tr>
        <tr>
          <td>TV</td>
          <td>지원</td>
          <td>지원</td>
          <td>지원</td>
        </tr>
        <tr>
          <td>화질</td>
          <td>최대</td>
          <td>FHD</td>
          <td>HD</td>
        </tr>
        <tr>
          <td>동시 시청</td>
          <td>4명</td>
          <td>2명</td>
          <td>1명</td>
        </tr>
        <tr>
          <td>다운로드</td>
          <td>무제한</td>
          <td>월 30회</td>
          <td>불가</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th></th>
          <th>₩15,900</th>
          <th>₩10,900</th>
          <th>₩8,900</th>
        </tr>
      </tfoot>

테이블 스타일링

border 속성을 사용해서 테두리를 넣을 수 있음. (테두리 : table, th, td)

기본적으로 테이블 사이의 간격이 줄어들면 thead, tfoot에 있는 border가 우선으로 보임.
그 다음으로 th, td, table순으로 보임.

  <style>
    table {
      border: 10px solid red;
      border-spacing: 15px;
    }
    
    th, td {
      border: 1px solid blue;
    }
    
    thead th, td {
      border: 1px solid green;
    }
  </style>

표 테두리 간 간격을 없애고 테두리끼리 겹치고 싶다면 border-collapse 속성을 활용.

여기서는 border-spacing으로 간격을 부여함.

예시문제의 너비에서 있었던 이슈

        <thead>
          <tr>
            <th></th>
            <th>1일 영양성분 기준치에 대한 비율(%)*</th>
          </tr>
        </thead>

        <thead>
          <tr>
            <th>1일 영양성분 기준치에 대한 비율(%)*</th>
          </tr>
        </thead>

th {
  display: table-row;
}

이랬더니 윗줄에 <th></th>를 삽입해도 공백이 생기지 않음.

이 원인을 찾음.

          <tr>
            <td>트랜스지방 1.000g</td>
            <td></td>
          </tr>

여기서 인라인으로 트랜스지방 부분 너비를 70%로 늘리니까 영향을 받음.

그래서 별의별 것을 다 시도해보았으나, 실패하였음.

결국 div class nutrition-facts의 간격 자체를 CSS에서 넓이를 더 넓게 지정해줌.

개별 요소의 비율을 건들이니까 다른 것들에 영향을 받아서 그냥 통째로 넓게 해주는 것이 나았다.

   <div class="nutrition-facts">
      <h1>영양 성분</h1>
      <div class="calorie">1 개당 390kcal</div>
     <table>
       <thead>
          <tr>
            <th></th>
            <th>1일 영양성분 기준치에 대한 비율(%)*</th>
          </tr>
       </thead>
        <tbody>

.nutrition-facts {
  border: 2px solid #bcbcbc;
  padding: 16px 16px;
  width: 430px;
  margin: 0 auto;
}

728x90

'코드잇 Codeit > Front-End' 카테고리의 다른 글

[코드잇] 인터랙티브 자바스크립트 ① 시작하기, 브라우저와 자바스크립트 (1)	2023.12.23
[코드잇] HTML 핵심 개념 ② 링크, 텍스트, 리스트, 테이블 (0)	2023.12.20
[코드잇] CSS 핵심개념 ② - Display, 선택자, 스타일 계산하기 (0)	2023.12.18
[코드잇] CSS 핵심개념 ① - 기본개념, 자주 쓰는 CSS 속성, 박스모델 (0)	2023.12.17
[코드잇] 모던 자바스크립트 ② 자바스크립트 문법과 표현, 내부 기능, 모듈 (0)	2023.12.17

'코드잇 Codeit/Front-End' Related Articles

배꼽파지 않도록 잘 개발해요

[코드잇] HTML 핵심 개념 ① - 링크, 텍스트, 리스트, 테이블 본문

[코드잇] HTML 핵심 개념 ① - 링크, 텍스트, 리스트, 테이블

1. 시작하기

2. 링크

3. 텍스트

자주 쓰는 텍스트 태그

4. 리스트

순서 리스트

순서 없는 리스트

리스트 스타일링

5. 테이블

테이블 태그

머리글 바닥글

테이블 스타일링

'코드잇 Codeit > Front-End' 카테고리의 다른 글

티스토리툴바