[새싹x코딩온] 웹 개발자 부트캠프 과정 2주차 회고 | HTML(2) + CSS

1. 서론

• form 태그와 form 요소에 대해 알아보기
• input 태그, Input 태그의 type에 따른 기능 알아보기
• table 태그에 알아보고 만들어보기
• 시맨틱 태그에 대해 알아보기
• CSS 에 대해 알아보기

2. 본론

Form 태그

form 태그는 사용자로부터 입력받는 요소들을 감싸는 태그다.

흔히 우리가 포탈사이트에서 사용하는 검색창이나 로그인창, 그리고 설문조사 등에서 form를 사용한다.

구글 검색창에서 사용하는 form 태그

 

form 태그는 태그 내에서 input 태그를 통해 사용자가 입력한 데이터를 묶어서 서버로 전송하는 역할을 한다.

사용되는 속성은 action 과 method 가 있는데 서버에 전달할 방식을 지정해준다.

• action : 사용자가 폼에 입력한 값을 서버에 전달할 주소
• method : 사용자가 폼에 입력한 값을 서버에 전달할 방법(get 방식과 post 방식이 있다.)

위의 두가지 속성은 서버와 관련된 속성이므로 이번 강의 시간에 다루지 않고 다음에 서버에 대해 배울 때 다시 한 번 다루기로 하셨다!

form 태그 내부에서 사용하는 요소들로는 input, textarea, select 등이 있다.(각 요소들은 name이라는 속성을 가지는데 이 또한 서버와 연관되어 있다.)

이제 아래에서 각 요소들이 어떤 역할을 하는지 하나씩 살펴보자. 

 

Input 태그

input 태그는 사용자가 입력한 정보를 받을 때 사용하는 태그다.

웹사이트에서 로그인창이나 검색창에서 input태그를 사용한 것을 찾아볼 수 있다. 

페이스북 로그인창에서 사용하는 input 태그

 

<input type="text">

input 태그는 위와 같이 작성하며,  type이라는 속성을 통해 여러가지 입력양식을 선택할 수 있다.

이 중 자주 쓰이는 몇개의 예시를 살펴보자

 

1) type="text"와 type="password"

text 는 주로 아이디나 이름, 주소 등 한 줄 짜리 일반 텍스트를 입력할 때 사용한다. 

password는 입력하는 내용을 화면에 보여주지 않아야 하므로 *나 ●로 표시된다.

아래는 사용한 예시다.

<label for="nm">아이디</label>
<input type="text" name="nm" id="nm" placeholder="아이디를 입력하세요"><br>
<label for="pwd">비밀번호</label>
<input type="password" name="pwd" id="pwd" placeholder="비밀번호를 입력하세요">

 

아이디
비밀번호

 

※  label 태그

label 태그는 폼 요소에 레이블을 붙일 때 사용하는 요소다.

label 태그의 for 속성과 input 태그의 id 속성을 이용해 서로 연결할 수 있다. 

둘의 속성값을 같게 하면 label요소를 클릭할 때 input 요소로 자동으로 포커싱이 들어간다.

 

2) type="checkbox"와 type="radio"

여러 항목 중 원하는 항목을 선택할 때 사용하는 폼요소다.

아래는 사용한 예시다.

    <h4>성별</h4>
    <input type="radio" name="gender" id="female" value="female" checked><label for="female">여성</label>
    <input type="radio" name="gender" id="male" value="male"><label for="male">남성</label>
    <h4>좋아하는 과일(복수선택 가능)</h4>
    <input type="checkbox" name="fruits" id="apple" value="apple" checked>
    <label for="apple">사과</label>
    <input type="checkbox" name="fruits" id="peach" value="peach">
    <label for="peach">복숭아</label>
    <input type="checkbox" name="fruits" id="melon" value="melon">
    <label for="melon">메론</label>

성별

여성 남성

좋아하는 과일(복수선택 가능)

사과 복숭아 메론

 

radio와 checkbox은 name 속성을 이용해서 카테고리화 할 수 있다.

radio 버튼에서 하나의 버튼만 선택할 수 있게하려면 name값을 똑같이 지정해야한다.

 

3) type="submit" 와 type="button" 그리고 <button> 태그

submit 은 폼에 입력한 정보를 서버로 전송하는 역할을 한다.

button 은 단순 버튼을 생성하는 기능을 한다. 주로 자바스크립트를 실행할 때 사용한다.

button 태그는 form 요소 내에서 submit 과 같은 역할을 한다.(form요소 외부에서는 단순 버튼 기능을 한다.)

<input type="submit" value="제출">
<input type="button" value="버튼">
<button>버튼</button>

input 태그를 사용해서 만드는 버튼은 value라는 속성값을 사용하여 버튼 내에 글씨를 기재할 수 있다.

button 태그는 태그내에 문자를 기입하면 된다.

 

그 외 다른 여러가지 input 타입들이 있다. 

 

참고사이트 : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

 

Type	설명
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스
password	비밀번호를 입력할 수 있는 필드(비밀번호는 숨김 표시)
search	검색할 떄 입력하는 필드
email	이메일 주소를 입력하는 필드
checkbox	여러 선택지 중 여러개 선택 가능한 체크박스(2개 이상 선택 가능)
radio	여러 선택지 중 하나만 선택 가능한 체크박스(단일 선택)
range	숫자를 조절할 수 있는 슬라이드 막대
date	특정 날짜 입력
color	색상정보를 입력할 수 있는 컬러픽커
submit	form 요소의 입력값을 전송하는 버튼
button	버튼 기능
reset	폼 양식의 데이터 초기화(리셋) 버튼
file	파일을 첨부할 수 있는 버튼
hidden	사용자에는 보이지 않지만 서버로 넘겨주는 값이 있는 필드 생성

 

위의 종류말고도 mdn 사이트에 가면 여러 종류의 type이 나와 있으니 참고하도록 하자.

 

Textarea 태그

textarea 태그는 여러 줄을 입력하는 영역을 만들때 사용하는 태그다. 

주로 게시판에 글을 입력하거나 문의사항을 입력하거나 할 때 자주 사용한다.

쿠키런 홈페이지 건의사항란에 사용한 textarea태그

 

Select 태그

select 태그는 선택메뉴(드롭다운)을 만들때 사용하는 태그다.

사용자가 내용을 직접 입력하지 않고 여러 옵션 중 선택하게 할때 사용한다.

오늘의 집 회원가입 페이지에서 사용하는 select 태그

select 태그로 드롭다운 목록의 시작과 끝을 표시하고

option 태그로 선택 항목을 표시한다.

optgroup은 option을 그룹화하는 역할을 한다,

아래는 사용한 예시다

    <select name="color" id="color">
        <option value="red">빨간색</option>
        <option value="orange">주황색</option>
        <option value="yellow">노란색</option>
        <option value="green">초록색</option>
        <option value="blue">파란색</option>
    </select>

빨간색 주황색 노란색 초록색 파란색

 

Table 태그

table 태그는 표를 만드는 태그다. 

엑셀을 사용하든 워드를 사용하든 표를 만들어야 할때가 있다.

웹에서도 사용자가 보기 편하게 표를 만들어서 제공하는 경우가 있다.

이럴 때 table 태그를 사용하여 표를 만들 수 있다.

표의 가로방향을 행(row)라 하고 세로방향을 열(column)이라 한다.

 

다음은 테이블을 만들 때 사용하는 태그들이다.

1. <table> : 테이블 전체의 부모요소, 표를 감싸는 태그
2. <tr> : 행을 만드는 태그(table row)
3. <td> : 칸을 만드는 태그(table data)
4. <th> : 테이블 내부의 제목(머릿부분)에서 사용할 경우 사용하는 태그
5. <caption> : 테이블의 제목
6. <thead> : 테이블의 머리부분
7. <tbody> : 테이블 중앙 내용 부분
8. <tfoot> : 테이블 하단부분

  ※ tbody는 일반적으로 table tr td 로 구성하는 테이블일 경우 자동으로 생성되어 표시된다.

 

 

다음은 html 코드로 직접 테이블을 만드는 방법이다.

html에서 표는 행(row)을 기준으로 만들어진다.

먼저 행을 쓰고 행의 자식 요소로 칸을 넣어준다.

    <table border="1">
        <caption>테이블</caption>
        <tr>
            <td>1행 1열</td>
            <td>1행 2열</td>
        </tr>
        <tr>
            <td>2행 1열</td>
            <td>2행 2열</td>
        </tr>
        <tr>
            <td>3행 1열</td>
            <td>3행 2열</td>
        </tr>
    </table>

 

테이블

1행 1열	1행 2열
2행 1열	2행 2열
3행 1열	3행 2열

표를 만들다 보면 표의 행이나 열을 합쳐야 하는 경우가 생긴다,

그럴때 <td> 태그에서 rowspan 이나 colspan 속성을 사용한다.

rowspan : 해당 칸이 점유하는 행의 수를 지정(행 병합)

colspan : 해당 칸이 점유하는 열의 수를 지정(열 병합)

아래는 위의 속성을 사용해서 병합을 한 예시다.

    <table border="1">
        <caption>rowspan</caption>
        <tr>
            <td rowspan="2">에스프레소</td>
            <td>아메리카노</td>
        </tr>
        <tr>
            <td>카페라떼</td>
        </tr>
        <tr>
            <td>피지오</td>
            <td>쿨라임 피지오</td>
        </tr>
        <tr>
            <td rowspan="3">케이크</td>
            <td>더블 초코 무스케이크</td>
        </tr>
        <tr>
            <td>피스타치오 무스케이크</td>
        </tr>
        <tr>
            <td>딸기 크림 쉬폰 케이크</td>
        </tr>
    </table>

 

rowspan

에스프레소	아메리카노
	카페라떼
피지오	쿨라임 피지오
케이크	더블 초코 무스케이크
	피스타치오 무스케이크
	딸기 크림 쉬폰 케이크

<table border="1">
        <caption>colspan</caption>
        <tr>
            <th></th>
            <th>월</th>
            <th>화</th>
            <th>수</th>
            <th>목</th>
            <th>금</th>
        </tr>
        <tr>
            <td>1교시</td>
            <td>국어</td>
            <td>체육</td>
            <td>영어</td>
            <td>사회</td>
            <td>수학</td>
        </tr>
        <tr>
            <td>2교시</td>
            <td>수학</td>
            <td>영어</td>
            <td>체육</td>
            <td>국어</td>
            <td>과학</td>
        </tr>
        <tr>
            <td>3교시</td>
            <td>음악</td>
            <td>국어</td>
            <td>국어</td>
            <td>수학</td>
            <td>도덕</td>
        </tr>
        <tr>
            <td>4교시</td>
            <td>음악</td>
            <td>과학</td>
            <td>음악</td>
            <td>체육</td>
            <td>미술</td>
        </tr>
        <tr>
            <td colspan="6">점심시간</td>
        </tr>
        <tr>
            <td>5교시</td>
            <td>사회</td>
            <td>한문</td>
            <td>미술</td>
            <td>영어</td>
            <td>영어</td>
        </tr>
    </table>

colspan

	월	화	수	목	금
1교시	국어	체육	영어	사회	수학
2교시	수학	영어	체육	국어	과학
3교시	음악	국어	국어	수학	도덕
4교시	음악	과학	음악	체육	미술
점심시간
5교시	사회	한문	미술	영어	영어

 

※ colspan과 rowspan은 병합을 하는거라서 병합이 지정된 개수만큼은 td를 지워줘야 한다. 그렇지 않으면 표가 깨진다.

 

 

Semantic 태그

semantic 은 의미의, 의미론적인 이라는 뜻을 가진 영어단어로

semantic 태그란 말 그래도 그 이름만 봐도 의미를 알 수 있는 태그다.

 

Semantic 태그의 종류

1. header : 웹페이지의 상단 부분
2. footer : 웹페이지의 하단 부분
3. main : 웹페이지의 메인 부분(한 페이지에 한 번만 사용하는 것이 바람직)
4. section : 구체적인 내용 부분
5. article : 구체적인 내용 부분
6. aside : 사이드바 부분
7. nav : 웹 페이지의 네비게이션(다른 곳으로 이동 가능한 링크들)
8. hn : h1~h6태그들로 제목 부분

semantic 태그를 사용하여 웹페이지를 구성하는 것의 자세한 그림을 살펴보면 아래와 같다,

이미지 출처 : 코딩온 강의 자료

semantic 태그를 사용하는 이유

웹 문서는 시맨틱 태그를 사용하지 않더라도 div 태그로만으로도 구성할 수 있다.

사용하든 사용하지 않든 웹페이지의 구조나 기능적인 면이 크게 달라지는 것도 아니다.

그러나 개발자들에게 시맨틱 태그의 사용을 권고하고 있다 이유는 무엇일까?

 

1) SEO(검색최적화)

검색엔진은 HTML코드를 분석해서 사이트를 노출시킨다. 

크롤러가 페이지의 구성 요소들이 무엇을 의미하는지 이해해서 사이트 노출에 영향을 준다.

즉 검색을 더욱 정교하고 분석적으로 수행할 수 있는 바탕이 마련된다.

 

2) 유지보수성

웹 페이지를 유지보수할 때 div 태그로만 이루어져 있다면 요소를 찾기 힘들어서 나중에 코드를 고치거나 추가할때 애를 먹는다.

이미지 출처 : 코딩온 강의 자료

위의 그림과 같이 시맨틱 태그를 사용해서 컨텐츠를 구분하는것이 개발자 입장에서 어떤 요소가 어디에 배치되어있는지 알기 쉽기 때문에 유지보수가 쉬워진다.

 

여기까지 html 기본을 알아보았다. 

아래에서부터는 웹페이지를 꾸며주는 CSS 에 대해서 알아보자

CSS

CSS는 Cascading Style Sheet 의 약자로 웹 페이지를 디자인하기 위해 사용하는 언어다.

html이 웹페이지의 뼈대에 해당하는 부분이라면 

css는 웹페이지의 레이아웃이나 색상, 스타일 등을 지정하여 웹페이지를 꾸며주는 역할을 한다.

cascading 는 폭포같은, 위에서 아래로 흐르는 이라는 뜻을 가지고 있다.

css에서 작성된 스타일 중에서 어떤 스타일로 브라우저에 표현할지 결정해주는 원리를 나타낸다.

즉, 스타일 우선순위를 나타낸다.

 

CSS 참조 방식

css 적용방식에는 아래의 세가지 방법이 있다.

• 인라인 방식
• 내장 방식(인터널 방식)
• 링크 방식(익스터널 방식)

1) 인라인 방식

인라인 방식은 html 태그 내에서 style 속성을 사용하여 직접 스타일을 적용하는 방법이다.

<h1 style="color: blue; background-color :pink;">제목 예시</h1>

제목 예시

 

인라인 방식은 각 요소에 스타일을 직접 적어줘야 하기 때문에 불편하기도 하고, 그렇기 때문에 재사용을 할 수 없다.

또한, 고쳐야 할 일이 있을 때 요소에 있는 스타일을 하나하나 다 수정해야기 때문에 굉장히 불편하다.

 

2) 내장 방식(인터널방식)

HTML의 <head> 태그 내부에 사용한 스타일을 <style> 태그로 선언하여 사용하는 방법이다.

이런식으로 같은 태그에 한꺼번에 같은 스타일을 적용시킬 수 있다.

같은 html 사이에서는 재사용이 가능하지만 다른 html 파일에서는 재사용이 불가능하다.

 

3) 링크 방식(익스터널 방식)

확장자가 css 파일을 만들고 그 안에 style을 작성한 후, 해당 css 파일을 필요한 html 파일에 링크해서 사용하는 방식이다.

HTML의 태그 내부에 link 태그를 사용하여 아래와 같이 css 파일을 연결해주는 것이다.

<link rel="stylesheet" href="파일.css">

링크 방식을 사용하면 같은 html 파일내에서 재사용뿐만 아니라 서로 다른 html 파일에서 같은 css 파일을 연결하면 해당 스타일을 다른 html 파일도 공유하여 재사용할 수가 있다.

 

우선 순위

CSS는 가장 밑에 입력된 값이 우선으로 적용된다.

따라서 아래와 같은 css 코드가 있으면 가장 밑에 적힌 스타일인 분홍색 스타일이 li 태그에 적용된다.

li {
  background-color: black;
  color: aqua;
}
li {
  color : pink;
}

참조방식 사이에도 우선 순위가 있다.

우선 순위가 가장 높은 것은 태그에 직접 스타일 속성값을 적는 인라인 방식이다.

내장과 링크 방식은 늦게 쓰여진 것이 우선순위가 높다.

    <style>
        li {
            background-color: black;
            color: aqua;
        }
        li {
            color : pink;
        }
    </style>
    <link rel="stylesheet" href="./test.css">

위와 같이 되어 있다면 가장 밑에 적혀진 링크방식의 스타일이 적용된다.

반대로 스타일 태그가 가장 밑에 있다면 내장 방식의 스타일이 적용된다.

 

3. 결론

 

table 은 엑셀 같은 곳에서 사용할때는 쉬웠는데 그걸 컴퓨터 코드로 치려니 좀 어렵다.

특히 셀병합하고 데이터를 입력할 떄 너무 헷갈린다,

그래도 행을 기준으로 생성된다고 기억하니 조금 덜 헷갈렸다.

훈련을 통해서 그나마 좀 덜헷갈리게 된거 같아서 다행스럽게 느껴졌다.

그리고 이제 css 배우게 되었는데 개인적으로 꾸미는 것을 좋아해서 그런지 웹페이지를 꾸밀 수 있는 요소를 배운다고 생각하니 벌써부터 설렌다

 

4. Reference

1. 코딩온 강의 자료

 

2. Do it! HTML+CSS+자바스크립트 웹 표준의 정석

https://product.kyobobook.co.kr/detail/S000001818002

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 | 고경희 - 교보문고

 

3.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

<input>: The Input (Form Input) element - HTML: HyperText Markup Language | MDN

 

4.

https://makinghome.tistory.com/67

Cascading 캐스케이딩의 뜻 - 1. 스타일 우선순위