[포스코x코딩온] 웹 풀스택 과정 1주차 회고 | HTML

이원노·2023년 7월 9일
htmlimg문자이미지태그테이블하이퍼링크
0

HTML에 대한 개요와 사용 가능한 태그들에 대해서 배웠다.

1. HTML

HTML(Hypertext Markup Language)

  • HTML은 태그를 이용해 구조화하는 마크업 언어이다.
  • HTML5 문서는 반드시 으로 시작하여 문서 형식을 HTML5로 지정한다.

1-1. head 태그

  • HTML 문서의 메타 데이터와 문서 정보를 정의하는데 사용된다.
  • title : HTML 문서의 제목을 설정한다.
  • style : 스타일 정보를 정의한다.
  • link : 외부 리소스와의 연결정보를 정의한다.(CSS파일)
  • script : Javascript를 정의한다.
  • meta : 페이지 설명, 키워드, 저자, 화면 크기 등의 정보로 주로 브라우저, 검색엔진에서 사용된다.

1-2. body 태그

  • HTML 문서의 실제 콘텐츠를 정의하는 데 사용된다.

2. HTML 태그 종류

2-1. 제목태그

  • <h1~6></h1~6>
  • 자동 줄바꿈

2-2. 본문태그

  • 본문을 뜻하는 paragraph 의 약자, p를 사용한다.

2-3. 줄 바꿈 태그

  • "break"의 약자 br을 이용하며, 줄을 바꿔준다.

2-4. 목록

  • ul : 순서 없는 목록 (unordered list)
  • ol : 순서 있는 목록 (ordered list)
  • ul, ol 태그 안에 li 태그를 이용한다.

2-5. 수평 줄

  • 수평으로 된 줄을 그어 준다.

2-6. 문자 꾸미기 태그

• b : 두껍게
• strong : 두껍게 + Semantic 한 의미를 지닌다.
• i : 이탤릭(글자 기울이기)
• em : 강조, 기울여서 표시됨
• del : 중간 줄
• u : 밑 줄

실습(1)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EDIYA</title>
</head>
<body>
    <h1>EDIYA COFFEE</h1>
    <h2>메뉴 이름</h2>
    <ul>
        <li>아메리카노, 3000원</li>
        <li>카푸치노, 3500원</li>
        <li>복숭아 아이스티, 2500원</li>
        <li>카페라떼, 3000원</li>
    </ul>
    <hr />
    <p><strong>아메이카노 </strong><u>에스프레소에 뜨거운 물을 추가한 커피 음료</u></p>
    <p><strong>카푸치노 </strong><u>에스프레소, 뜨거운 우유, 그리고 우유 거품</u>을 재료로 만드는 이탈리아의 커피 음료</p>
    <p><strong>복숭아 아이스티 </strong>상큼달콤한 <u>복숭아향이 가득한 아이스티</u></p>
    <p><strong>카페라떼 </strong><u>에스프레소에 뜨거운 우유를 곁들인 커피</u></p>
</body>
</html>

2-7. 이미지 태그

  • 이미지를 넣을 때 사용한다.
  • src 속성에 이미지의 주소를 입력한다.
  • 이미지 로드가 안될 경우를 대비하기 위해 alt 속성을 이용한다.

2-8. HTML의 하이퍼링크

  • Anchor 의 약자인 a 태그 사용
  • href : 이동할 페이지의 링크를 입력하는 속성
  • target : 링크를 열 때 어디서 열 것인지 지정하는 속성
  • _blank : 새로운 탭에서 열기
  • _self : 현재 탭에서 열기 (기본 값)

2-9. 사용자 입력

  • Form 태그 & Input 태그
  • input
  • Type : button, text, password, checkbox, radio, date, color, range, file
  • 버튼(type="button") : 버튼을 생성
  • 텍스트(type="text") : 텍스트 입력 값을 받는 폼 생성
  • 패스워드(type="password") : 비밀번호 값을 받는 폼 생성
    → 입력 값을 자동으로 안보이게 처리
  • 체크 박스(type="checkbox") : 여러 개를 선택 가능한 체크 박스 생성
    → 속성 : Name, Value, Checked
  • 라디오 버튼(type="radio") : 하나만 선택 가능한 라디오 버튼 생성
    → 속성 : Name, Value, Checked
  • 날짜 선택(type="date") : 특정 날짜(년/월/일)를 선택
    → 속성 : Name
  • type="datetime-local" : 시간 까지 선택 가능
    → 기존은 “datetime” 을 사용하였으나 시간은 시간대의 영향을 받기 때문에 정확한 데이터 값 전달이 불가능 하여 지금은 사용하지 않음
  • Select : 선택 메뉴(드롭 다운)를 만드는 태그, option 태그 이용해 옵션 값 생성
    → name은 select에 value는 option에 입력
    → Selected : 최초에 선택 된 값으로 설정
    → optgroup : option 을 그룹화한다.
    → Label : optgroup 이름 설정
    → Disabled : 옵션은 보이지만 선택을 못하도록 설정

실습(2) : 설문조사 폼 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>설문조사</title>
</head>
<body>
    <h2>설문조사</h2>
    <div>
        <label for="name">이름</label>
        <input type="text" name="name" id="name">
    </div>
    <div>
        <label for="email">이메일</label>
        <input type="email" name="email" id="email">
    </div>
    <h3>나이</h3>
    <div>
        <input type="radio" name="age" value="10대" id="age10">
        <label for="age10">10대</label>
        <input type="radio" name="age" value="20대" id="age20">
        <label for="age20">20대</label>
        <input type="radio" name="age" value="30대" id="age30">
        <label for="age30">30대</label>
        <input type="radio" name="age" value="40대" id="age40">
        <label for="age40">40대</label>
        <input type="radio" name="age" value="50대" id="age50">
        <label for="age50">50대</label>
        <input type="radio" name="age" value="60대 이상" id="age60">
        <label for="age60">60대</label>
    </div>
    <h3>원하는 강의(복수응답가능합니다.)</h3>
    <div>
        <input type="checkbox" name="class" value="html" id="html">
        <label for="html">html</label>
        <input type="checkbox" name="class" value="javascript" id="javascript">
        <label for="javascript">javascript</label>
        <input type="checkbox" name="class" value="css" id="css">
        <label for="css">css</label>
    </div>
    <div>
        <textarea placeholder="하고 싶은 말을 입력해 주세요!" cols="100" rows="10"></textarea>
        <input type="button" value="제출">
    </div>
    
</body>
</html>

2-10. table

  • 표를 만들 때 사용하는 태그
  • tr : 표 내부의 행
  • th : 행 내부의 제목 칸
  • td : 행 내부의 일반 칸
  • table 속성
    → border : 테두리 두께
    → cellspacing : 테두리 간격 사이의 너비
    → cellpadding : 셀 내부의 간격
    → align : 테이블 정렬 속성
    → width 와 height : 테이블의 너비와 높이
    → bgcolor 와 bordercolor : 테이블 배경색과, 테두리 색
  • td 속성
    → colspan : 해당 칸이 점유하는 열의 수 지정
    → rowspan : 해당 칸이 점유하는 행의 수 지정

실습(3) : colspan과 rowspan 이용하기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
</head>
<body>
    <table border="1" width="400px" height="200px">
        <tr>
            <td colspan="2">1</td>
            <td rowspan="2">2</td>
        </tr>
        <tr>
            <td rowspan="2">3</td>
            <td colspan="1">center</td>

        </tr>
        <tr>
            <td colspan="2">4</td>
        </tr>
    </table>

    <style>
        table{
            border-collapse: collapse;
        }
    </style>
</body>
</html>

실습(4) : 카페 음료 주문 테이블 작성

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실습4</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>구분</th>
            <th>음료</th>
            <th>가격</th>
            <th>이미지</th>
        </tr>
        <tr>
            <td rowspan="2">커피류</td>
            <td><a href="230704_am.html">아메리카노</a></td>
            <td>4200원</td>
            <td><img src="img/am.jpg" width="200px"></td>
        </tr>
        <tr>
            <td><a href="230704_tc.html">돌체라떼</a></td>
            <td>4800원</td>
            <td><img src="img/dc.jpg" width="200px"></td>
        </tr>
        <tr>
            <td rowspan="2">주스류</td>
            <td><a href="230704_jc.html">자바칩 프라푸치노</a></td>
            <td rowspan="2">5000원</td>
            <td><img src="img/jc.jpg" width="200px"></td>
        </tr>
        <tr>
            <td><a href="230704_nc.html">녹차 프라푸치노</a></td>
            <td><img src="img/nc.jpg" width="200px"></td>
        </tr>
    </table>

    <style>
        table{
            border-collapse: collapse;
        }
    </style>
</body>
</html>

3. Semantic 태그

  • HTML 요소는 Semantic하게 작성되어야 한다.
  • 웹 페이지를 이루는 요소의 의미와 맞는 태그를 사용
  • footer : 푸터 (하단 영역)
  • header : 헤더 (로고, 메뉴 아이템 등)
  • nav : 네비게이션 (다른 곳으로 이동 가능한 링크들)
  • main : 콘텐츠 영역임을 표시
  • aside : 콘텐츠와 직접적인 연관이 없는 옆에 있는 부분
  • article : 하나의 의미있는 요소
  • section : article을 포함 (그룹화 목적)

태그를 이용하고, 어떤 속성들이 사용되는지 배우게 됐다. 하지만 아직 자바스크립트를 들어가지 않아 몇몇 속성들을 제대로 이용해 보지는 못했다. 추후에 자바스크립트를 나가게 된다면, 이용해 보지 못한 속성들을 활용해 볼 생각이다.

profile
이원노
이전 포스트

[포스코x코딩온] 웹 풀스택 과정 1주차 회고 | Git 설치 및 세팅

다음 포스트

[포스코x코딩온] 웹 풀스택 과정 2주차 회고 | 애니메이션, 자바스크립트

0개의 댓글