[포스코x코딩온] 웹개발자 풀스택 과정 1주차 회고록 - HTML

1️⃣ 무엇을 배웠지?

3일차 되는 날이다. 아직까지는 따라가기 쉬워서 여유가 있지만 순간순가에 모르는 내용이 나오거나 개발 팁들이 나올 때마다 깜짝 놀라서 노션에 적어 놓는다.

 

이 블로그는 나를 위한 공간이니깐 내가 모르는 내용만 적을 것이다.(아는 내용은 Pass😎)

지금까지 배운것은 HTML과 CSS이다. 먼저 HTML부터 다뤄보겠다.

 

2️⃣HTML

1. <h1> 태그의 중요성

<h1> 태그는 페이지의 제목을 쓸 때 사용되는데 이것이 구글 검색엔진에 도움을 준다는 말을 하셨다. 

지금까지는 왜쓰는지 몰랐지만 이제는 이유를 알았으니 꼭!! 써야겠다고 다짐했다.

 

2.  <img> 태그의 title속성

<img src="./../img/너구리.jpg" alt="너구리" title="너구리 이미지" width="100">

<img> 태그 속성중에 title이라는 속성이 있다는 것을 알았다.

이미지에 마우스를 1초정도 호버하면 title 속성의 값이 나온다. 

지금까지는 src, alt만 썻다면 이제는 title 속성까지 사용하자!

 

3. <input> 태그의 name속성

<input type="text" name="phone">

릴리 리더님이 아주 강조 하셨던 내용이다. 지금까지는 필요없지만 백엔드와 연동할 때는 name 속성을 꼭 써줘야 한다고 하셨다. 

 

4. <input type="checkbox> 태그의 value속성들

<input type="checkbox" name="hobby" value="야구" checked /> 야구
<input type="checkbox" name="hobby" value="축구" /> 축구

그리고 체크박스에 체크된 요소를 백엔드에 보내주려면 value값이 꼭 있어야 한다. 

 

5. <label> 태그의 기능

<input type="radio" name="favorite" value="야구" /> 야구
<input type="radio" name="favorite" value="축구" /> 축구
<input type="radio" name="favorite" value="줄넘기" id="줄넘기" />
<label for="줄넘기">줄넘기</label>

우리에겐 체크박스나 라디오 버튼은 너무 작다. 글씨를 클릭해도 체크가 되게 하고 싶다면 label 태그를 사용하면 된다. 

 

-사용방법-

1. 만들고 싶은 태그에 id 속성을 적어준다.

2. label 태그를 만들고 for 속성에 이전에 만든 id 값을 넣어준다. 

 

label 태그는 radio 뿐아니라 checkbox에서도 적용된다. (확인 했음!)

 

6. <select> 태그 옵션 그룹화하기

<select name="select-name">
    <optgroup label="옵션1~2">
        <option value="옵션1">옵션1</option>
        <option value="옵션2">옵션2</option>
    </optgroup>
    <optgroup label="옵션3~4">
        <option value="옵션3" selected>옵션3</option>
        <option value="옵션4" selected>옵션4</option>
    </optgroup>
</select>

음.. 그냥 이렇게 하면 된다.

 

7. readonly, disabled 속성

readonly 는 읽기만 가능하고 변경은 불가능하다.

disabled 는 데이터 전송이 안된다. 

 

이 둘의 공통점은 사용자가 값을 변경할 수 없다.

 

8. Table을 이루는 여러 태그들

Table을 이루는 태그들은 여러개가 있다. 여러 프로젝트를 해봤지만 Table태그를 사용한 적은 없었다. 

이 참에 다 마스터하겠다는 목표를 가지고 수업을 들었던 것 같다.

<table border="1" cellspacing="0" celloadding="10" align="center" width="100%" bordercolor="red" bgcolor="yellow">
    <tbody>
        <tr>
            <th>이름</th>
            <th>전화번호</th>
            <th>내용</th>
        </tr>
        <tr>
            <td colspan="2">홍길동</td>
            <!-- <td>010-1111-1111</td> -->
            <td>안녕하세요</td>
        </tr>
        <tr>
            <td rowspan="2">조진형</td>
            <td>010-1111-1111</td>
            <td>안녕</td>
        </tr>
        <tr>
            <!-- <td>조진형</td> -->
            <td>010-1111-1111</td>
            <td>안녕</td>
        </tr>
    </tbody>
 </table>

 

table > thead,tbody > tr > th, td 순으로 쓰인다. 

thead : 제목 행을 구분 할 때 쓰이지만 안써도 상관없다.

tbody : 안쓰면 저절로 생성된다. 

tr : 행을 뜻하는 태그이다. (필수)

td : 열을 뜻하는 태그이다. (필수)

th : 열을 뜻하는데, 제목을 쓸 때 사용한다. (안써도 됨)

 

-Table 태그의 속성들 - 

border : 표의 각 칸들을 나눠줌

cellspacing : 셀의 border 값의 두께를 정해준다. (값이 0이면 1줄 , 1이면 2줄이 됨)

cellpadding : 셀 내부의 padding값을 정해준다. 

align : 표의 정렬 방법

---

colspan, rowspan이란? 

: 행이나 열을 병합해주는 역할을 한다.

colspan을 쓰면 열을 병합해주기 때문에 다음 열을 주석 처리 해줘야 한다.

반대로 

rowspan을 쓰면 행을 병합해주기 때문에 다음 행을 주석 처리 해줘야 한다.