스마트인재개발원 HTML&CSS 수업 끝!

HTML(Hyper Text Markup Language)

웹페이지에 정보를 담아 표시하기 위한 마크업 언어

Hyper Text
현재 문서에서 다른 문서로 즉시! 접근할 수 있는 텍스트

Mark Up
어딘가에 표시를 해두는 것.

CSS(Cascading Style Sheets)

HTML문서의 스타일을 꾸밀 때 사용하는 스타일시트 언어

Visual Studio Code를 이용해서 실습해보자!

예제1. 회원가입 폼 만들기!

입력받아야 하니까 form 태그 만들기!
form 태그에는 aciton과 method가 필요한데 이 중에서 우리가 살펴볼 것은 method중에,

get : 기본값. 보안에 취약, 적은 양의 데이터 전송, 빠르다! ex)form태그, a태그에 주로 사용.
post : 보안에 강함, 많은 양의 데이터 전송, 느림! ex)회원가입, 로그인창에 주로 사용.

회원가입 창이니까 method = "post"로 주었다.

table태그 만들기!
1번을 완료 한 뒤, table 태그를 열어준다.
table 태그 안에는 tr, td 태그가 있는데 잠시 살펴보자면,

tr : table row로, 테이블의 행을 담당한다.
td : table data로, 그 행의 데이터를 담당한다.
그러니까, table 태그 안에 tr태그가 있고 그 안에 td태그가 있는 형태!

이 회원가입창 같은 경우에는, td태그 안에 입력을 할 수 있는 input태그가 들어갔다.
그렇다면 input태그에 대해서 조금 설명하자면,

input : 클라이언트가 내용을 입력할 수 있는 칸. input 태그는 끝태그가 없다.
input태그 안에는 꼭! 들어가야 하는 요소가 있는데 바로 type과 name. + value까지!
예제에서 쓴 type으로는,
"text" "password" "radio" "checkbox" "color" "date" "submit" "reset" 이렇게 있다.
이 중, value를 꼭 줘야 하는 것들로는
"radio" "checkbox" 이 정도가 있는데 공통점은 클라이언트가 선택을 하고, 그 값을 건네받아야 하는 점이다.

select태그와 option태그
이 예제에는 혈액형 선택을 select과 option태그를 사용했다. select태그와 option태그는 짝꿍처럼 생각하자!
select태그를 열고, 선택요소 하나하나를 option태그 안에 넣어주면 된다.
위에서 말한 것처럼, 클라이언트가 선택하고 그 값을 건네받아야 하는 option태그도 value값은 필수로 지정해야한다!
style속성 주기!
이제 전체적으로 큰 틀은 만들었으니 스타일 속성을 줘서 좀 더 가독성 좋게, 예쁘게 페이지를 만들어보자!
style태그는 css로, head태그 안에 써야한다.
모든 태그에 공통적인 속성을 줄 땐 태그 이름만 명시해주고 중괄호를 열고, 그 안에서 여러 요소를 바꿀 수 있다.
여기에서 또 알아야 할 게 있는데,

class : 태그에 클래스이름을 붙여준 것으로, .class로 명시해서 중괄호를 열어준다.
이 경우엔 클래스에 포함된 모든 요소에 스타일 속성이 적용된다.
id : 태그에 이름값을 붙여준 걸로 #id로 명시해서 중괄호를 열어준다.
이 경우에는 이름을 지정해준 태그에만 스타일 속성이 적용된다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      table {
        border-collapse: collapse;
      }

      .title {
        background-color: gray;
        color: black;
        width: 400px;
        height: 50px;
        border: 2px solid white;
      }

      tr {
        height: 35px;
        background-color: whitesmoke;
        border: 2px solid white;
      }
      td {
        border: 2px solid white;
      }

      .td1 {
        text-align: right;
      }
    </style>
  </head>

  <body>
    <form action="#" method="post">
      <table>
        <tr class="title">
          <th colspan="2">Step1 : 아이디 / 비밀번호 입력</th>
        </tr>

        <tr>
          <td class="td1">
            <span>아이디 :</span>
          </td>
          <td>
            <input type="text" name="id" autofocus />
          </td>
        </tr>

        <tr>
          <td class="td1">
            <span>비밀번호 : </span>
          </td>
          <td>
            <input type="password" name="pw" maxlength="8" />
          </td>
        </tr>

        <tr>
          <td class="td1">
            <span>비밀번호 확인 : </span>
          </td>
          <td>
            <input type="password Check" name="pwc" maxlength="8" />
          </td>
        </tr>

        <tr class="title">
          <th colspan="2">Step2 : 개인정보 입력</th>
        </tr>

        <tr>
          <td class="td1">
            <span>성별 : </span>
          </td>
          <td>
            남 <input type="radio" name="gender" value="man" /> 여
            <input type="radio" name="gender" value="woman" />
          </td>
        </tr>

        <tr>
          <td class="td1">
            <span>혈액형 : </span>
          </td>

          <td>
            <select>
              <option value="A">A형</option>
              <option value="B">B형</option>
              <option value="O">O형</option>
              <option value="AB">AB형</option>
            </select>
          </td>
        </tr>

        <tr>
          <td class="td1">
            <span>생일 : </span>
          </td>
          <td>
            <input type="date" />
          </td>
        </tr>

        <tr class="title">
          <th colspan="2">Step3 : 선호도</th>
        </tr>

        <tr>
          <td class="td1">
            <span>취미 : </span>
          </td>
          <td>
            축구 <input type="checkbox" value="soccer" /> 야구
            <input type="checkbox" value="baseball" /> 농구
            <input type="checkbox" value="basketball" />
          </td>
        </tr>

        <tr>
          <td class="td1">
            <span>좋아하는 색깔 : </span>
          </td>
          <td>
            <input type="color" />
          </td>
        </tr>

        <tr class="title">
          <th colspan="2">Step4 : 적고싶은 말</th>
        </tr>

        <tr>
          <td colspan="2">
            <textarea cols="60" rows="5"></textarea>
          </td>
        </tr>
      </table>
      <div style="text-align: center">
        <input type="submit" name="제출" />
        <input type="reset" name="초기화" />
      </div>
    </form>
  </body>
</html>

/

난 HTML과 CSS는 정말 하나도 모른 채로 수업에 들어갔는데, 강사님이 설명을 쉽게 잘해주셔서 3일이라는 단기간 동안 수업을 듣고 간단한 회원가입창을 만들어 볼 수 있었다!
지금까지 배운 언어들과는 다르게 변화를 바로바로 볼 수 있어서 재밌었다.
HTML/CSS수업이 끝나고, 현재 자바스크립트와 서버수업을 진행하고 있는데 생각보다 수업에서 들은 태그들을 아주아주 많이 쓰고 있어서 한번 정리를 해놔야겠다는 생각이 들었다... ㅜㅜ...
강사님 말씀으로는 150개 정도의 태그가 있다는데 혼자 차근차근 알아가며 공부를 마저 진행해야겠다.

Author And Source

이 문제에 관하여(스마트인재개발원 HTML&CSS 수업 끝!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@0808yeonghye/HTMLCSS

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

스마트인재개발원 HTML&CSS 수업 끝!

HTML(Hyper Text Markup Language)

CSS(Cascading Style Sheets)

/

Author And Source

좋은 웹페이지 즐겨찾기