[31일차] HTML 필수 태그 & CSS

목차
1. 실무에서 자주 사용하는 HTML 필수 태그 다루기
2. CSS로 웹 페이지 꾸미기
3. CSS 선택자 다루기

1. 실무에서 자주 사용하는 HTML 필수 태그 다루기

1. 폼 구성하기

• form 태그
  : 폼 양식을 의미하는 태그
  • action 속성
    : 폼 요소에서 사용자와 상효작용으로 입력받은 값들을 전송할 서버의 URL 주소
  • method 속성
    : 입력받은 값을 서버에 전송할 대 송신 방식을 적음
    속성값으로 get 또는 post 사용 가능
• input 태그
  : 입력받는 요소를 생성할 때 사용
  • type 속성
    : 입력된 값에 따라 상호작용 요소의 종류 결정
  • name 속성
    : 입력 요소의 이름 작성
  • value 속성
    : 입력 요소의 초기값 작성

<input type="text">
<input type="password">
<input type="tel">
<input type="number">
<input type="url">
<input type="search">
<input type="email">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="button">
<input type="image" src="./instagram.png">
<input type="hidden">
<input type="date">
<input type="datetime-local">
<input type="month">
<input type="week">
<input type="time">
<input type="range">
<input type="color">
<input type="submit">
<input type="reset">

• label 태그
  : form 태그 안에서 사용하는 상호작용 요소에 이름 붙일 때 사용
  ➡ for과 id 같게

<!-- 암묵적인 방법 -->
     <label>
     아이디
     <input type="text">
</label>

<!--명시적인 방법-->
<label for "userpw"> 비밀번호</label>
<input type="password" id="userpw">


<!--암묵적 + 명시적 방법-->
<label for "username">
     <input type="text" id="username"> 이름
</label>

•  fieldset와 legend 태그
  • form 태그 안에 사용된 다양한 상호작용 요소도 fieldset 태그를 사용하여 그룹 지음
    ➡ 그룹별로 박스 모양 테두리가 생김
    ➡ 이렇게 그룹 지은 요소들은 legend 태그로 이름 붙임

<form>
    <fieldset>
        <legend>기본 정보</legend>
        <p>
            <label for="userid">아이디</label>
            <input type="text" id="userid">
        </p>
        <p>
            <label for="password">비밀번호</label>
            <input type="password" id=""password>
        </p>
    </fieldset>
    <fieldset>
        <legend>선택 정보</legend>
        <p>
            <label for="age">나이</label>
            <input type="number" id="age">
        </p>
        <p>
            <label for="recommender">추천인</label>
            <input type="text" id="recommender">
        </p>
    </fieldset>
</form>

• textarea 태그
  : 여러 줄의 입력 요소를 생성할 때는 input 태그가 아닌 textarea 태그 사용
  • input 태그와 달리 닫는 태그 존재
    ➡ textarea 태그로 생성한 여러 줄의 입력 요소는 콘텐츠 영역에 초기값 정의

<form action="#" method="post">
    <fieldset>
        <legend>블로그 글쓰기</legend>
        <p>
            <label for="title">제목
                <input type="text" id="title" name="title">
            </label>
        </p>
        <p>
            <label for="desc">내용
                <textarea id="desc" name="desc"></textarea>
            </label>
        </p>
    </fieldset>

• select, option, optgroup 태그
  
  • select: 콤보박스 생성
  • option: 콤보박스에 항목 하나 추가
  • outgroup: 항목들을 그룹으로 묶을 때 사용
    • 서버에 전송할 값 vaule 속성으로 지정 가능
    • 속성 생략시 option 태그의 콘텐츠로 적은 텍스트가 값으로 전송
    • 반드시 label 속성으로 그룹명 지정
  • size : 콤보박스에서 화면에 노출되는 항목 갯수 지정하는 속성
  • multiple 속성: select 태그로 생성하는 콤보박스에서 여러 항목 동시 선택 가능
    ➡ crtl 키 누르면서 사용하면 됨
  • selected: 기본값 설정

<!--select&option 사용-->

<select name="city" id="city">
    <option vlaue="강북구">강북구</option>
    <option vlaue="강남구">강남구</option>
    <option vlaue="서초구">서초구</option>
    <option vlaue="종원구">중원구</option>
    <option vlaue="분당구">분당구</option>
</select>

<!-- select & option & optgroup 사용 -->

<select name="city" id="city">
    <optgroup label="서울시">
        <option vlaue="강북구">강북구</option>
        <option vlaue="강남구">강남구</option>
        <option vlaue="서초구">서초구</option>
    </optgroup>
    <optgroup label="경기도 성남시">
        <option vlaue="종원구">중원구</option>
        <option vlaue="분당구">분당구</option>
    </optgroup>
</select>

<!-- select & size 사용 -->

<select name="city" id="city" size="3">
    <option vlaue="강북구">강북구</option>
    <option vlaue="강남구">강남구</option>
    <option vlaue="서초구">서초구</option>
    <option vlaue="종원구">중원구</option>
    <option vlaue="분당구">분당구</option>
</select>

<!-- select & multile 사용-->

<select name="city" id="city" multiple>
    <option vlaue="강북구">강북구</option>
    <option vlaue="강남구">강남구</option>
    <option vlaue="서초구">서초구</option>
    <option vlaue="종원구">중원구</option>
    <option vlaue="분당구">분당구</option>
</select>

<!-- select & selected 사용-->

<select name="city" id="city">
    <option vlaue="강북구">강북구</option>
    <option vlaue="강남구">강남구</option>
    <option vlaue="서초구">서초구</option>
    <option vlaue="종원구">중원구</option>
    <option vlaue="분당구" selected>분당구</option>
</select>

• button 태그
  
  • submit: 폼을 서버에 전송할 목적
  • reset: 상호작용 요소에 입력된 내용을 초기화하는 버튼
  • button: 단순한 버튼

<button type="submit">
    <img src="instagram.png" alt="인스타그램 버튼">
    인스타그램에 등록하기
</button>

• disabled 속성
  • 상호작용 요소를 비활성화
  • input, textarea, select, button 태그에 사용 가능

<input type="text" disabled>
<button type="button" disabled>비활성</button>

• readonly 속성
  
  • 상호작용 요소를 읽기 전용으로 변경
  • 읽기 전용 ➡ 입력 요소에 텍스트 입력 불가, 요소를 선택하거나 드래그해서 내용 복사 가능
  • textarea와 input태그에서 사용 가능
    • input 태그의 경우
      ➡ text, search, url, tel, email, password, date, month, week, time, datetime-local, number 일 때만 사용 가능

<input type="password" readonly>
<textarea readonly></textarea>

• maxlength 속성
  
  • 입력할 수 있는 글자 수 제한
• checked 속성
  • 요소를 선택된 상태로 표시

<fieldset>
    <legend>좋아하는 과일</legend>
    <input type="checkbox" id="banana" name="banana" value="banana">
    <label for="banana">banana</label><br>
    <input type="checkbox" id="apple" name="'apple" value="apple">
    <label for="apple">apple</label><br>
    <input type="checkbox" id="orange" name="orange" value="orange" checked>
    <label for="orange">orange</label>
</fieldset>

• placeholder 속성
  
  • 입력 요소에 어떠한 값을 입력하면 되는지 힌트를 적는 용도

<input type="tel" placeholder="전화번호를 입력해 주세요.">

2. 표 만들기

• table 태그
  : 표를 생성할 때 사용하는 태그
• caption 태그
  :표 제목 지정 태그
• tr 태그
  : 행 생성하는 태그
• th, td 태그
  : 표에서 열을 생성할 때 사용하는 태그

<table>
    <tr>
        <th>번호</th>
        <th>상품명</th>
        <th>수량</th>
        <th>가격</th>
    </tr>
    <tr>
        <td>1</td>
        <td>콜라</td>
        <td>1개</td>
        <td>1,500원</td>
    </tr>
    <tr>
        <td>2</td>
        <td>사이다</td>
        <td>2개</td>
        <td>1,000원</td>
    </tr>
    <tr>
        <td>3</td>
        <td>탄산수</td>
        <td>3개</td>
        <td>1,000원</td>
    </tr>
</table>

• rowspan과 clospan 속성
  
  • rowspan: 행과 행 병합
  • colspan: 열과 열 병합

<table>
    <tr>
        <th>번호</th>
        <th>상품명</th>
        <th>수량</th>
        <th>가격</th>
    </tr>
    <tr>
        <td>1</td>
        <td>콜라</td>
        <td>1개</td>
        <td>1,500원</td>
    </tr>
    <tr>
        <td>2</td>
        <td>사이다</td>
        <td>2개</td>
        <td rowspan="2">1,000원</td>
    </tr>
    <tr>
        <td>3</td>
        <td>탄산수</td>
        <td>3개</td>
    </tr>
    <tr>
        <td>총 금액</td>
        <td colspan="3">6,500원</td>
    </tr>
</table>

• thead, tfoot, tbody
  : 행을 묶어 그룹화

<table>
    <thead>
        <tr>
            <th>번호</th>
            <th>상품명</th>
            <th>수량</th>
            <th>가격</th>
        </tr>
    </thead>
    
    <tfoot>
        <tr>
            <td>총 금액</td>
            <td colspan="3">6,500원</td>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>1</td>
            <td>콜라</td>
            <td>1개</td>
            <td>1,500원</td>
        </tr>
        <tr>
            <td>2</td>
            <td>사이다</td>
            <td>2개</td>
            <td rowspan="2">1,000원</td>
        </tr>
        <tr>
            <td>3</td>
            <td>탄산수</td>
            <td>3개</td>
        </tr>
    </tbody>
    
</table>

• col과 colgroup 태그
  
  • col
    : 하나의 열을 그룹화
  • colgroup
    : span 속성과 함께 사용해 2개 이상의 열을 그룹화

<table>
    <col style="width:80px">
    <colgroup span="2" style="width:150px"></colgroup>
    <col style="width:100px">
    <tr>
        <th>번호</th>
        <th>상품명</th>
        <th>수량</th>
        <th>가격</th>
    </tr>
    <tr>
        <td>1</td>
        <td>콜라</td>
        <td>1개</td>
        <td>1,500원</td>
    </tr>
    <tr>
        <td>2</td>
        <td>사이다</td>
        <td>2개</td>
        <td rowspan="2">1,000원</td>
    </tr>
    <tr>
        <td>3</td>
        <td>탄산수</td>
        <td>3개</td>
    </tr>
    <tr>
        <td>총 금액</td>
        <td colspan="3">6,500원</td>
    </tr>
</table>

• scope 속성
  : 제목을 나타내는 셀의 범위 지정

<table>
    <tr>
        <th scope="col">구분</th>
        <th scope="col">중간고사</th>
        <th scope="col">기말고사</th>
    </tr>
    <tr>
        <th scope="row">전공</th>
        <td>A+</td>
        <td>B+</td>
    </tr>
    <tr>
        <th scope="row">교양</th>
        <td>C-</td>
        <td>B+</td>
    </tr>
</table>

3. 멀티미디어 설정하기

• audio 태그

<audio src="Bourree - Joel Cummins.mp3" controls></audio>

• video 태그

<video src="sample.mp4"controls></video>

• source 태그
  : audio 태그와 video 태그에서 리소스(파일)의 경로와 미디어 타입을 명시하는데 사용

 

2.  웹 스타일링을 위한 CSS 기초 배우기

1. CSS 문법 살펴보기

• 문법 형식
  : 선택자<속성:값;>
• 주석 처리
  ➡ /* */ 사용

2. CSS 적용하기

• 내부 스타일 시트 사용하기
  
  • 장점
    : body 태그에 작성된 내용이 사용자에게 노출되기 전에 CSS를 불러와 빠르게 디자인을 적용할 수 있음
  •  단점
    : 웹 브라우저에서 HTML 문서를 해석할 때마다 CSS 코드를 매번 다시 읽음

<head>
    <title>내부 스타일 시트(Internal Style Sheet)</title>
    <style>
        h1{
            color:blue;
        }
    </style>
</head>
<body>
    <h1>내부 스타일 시트</h1>
</body>

• 외부 스타일 시트 사용하기
  • css 확장자 사용해야 함

h1{
    color:red;
}

<head>
    <title>외부 스타일 시트(External Style Sheet)</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>외부 스타일 시트</h1>
</body>

• 인라인 스타일 사용하기
  
  • 선택자 부분 불필요

<body>
    <h1 style="color:red; font-size:24px">인라인 스타일</h1>
</body>

 

3. CSS 선택자 다루기

1. 기본 선택자 사용하기

• 전체 선택자
  : 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법으로, * 기호 사용하여 표시

<style>
    *{
        color:red;
    }
</style>
<h1>전체 선택자</h1>
<p>전체 선택자는 모든 요소를 한 번에 선택할 수 있습니다.</p>

• 태그 선택자
  : 선택자를 지정하는 방법

<style>
    p{
        color:blue;
    }
</style>
<h1>태그 선택자</h1>

• 아이디 선택자
  : 사용할 수 있는 id 속성값을 이용해 선택자를 지정, 속성값 앞에는 # 기호를 붙여 구분

<style>
    #title{
        color:green;
    }
</style>
<h1 id="title">아이디 선택자</h1>
<p>아이디 선택자는 id 속성값을 이용해 선택자를 지정하는 방법입니다.</p>

• 클래스 선택자
  : class 속성값을 이용해 선택자를 지정하는 방법, 속성값 앞에 .기호 붙임

<style>
    .red{
        color:red;
    }
    .blue{
        color:blue;
    }
</style>
<h1 class="red">클래스 선택자</h1>

• 기본 속성 선택자
  : 사용할 수 있는 속성과 값을 사용해 선택자를 지정하는 방법

<style>
    a[href]{
        color:red;
    }
</style>

<a href="#">기본 a 태그</a>
<a href="#" target="_blank">새 창으로 열리는 a 태그</a>

<style>
    a[target="_blank"]{
        color:red;
    }
</style>

<a href="#">기본 a 태그</a>
<a href="#" target="_blank">새 창으로 열리는 a 태그</a>