웹프로그래밍/HTML

개발자 환경 구축 4일차(24/11/14)

wkun 2024. 11. 14. 18:00

CONTENTS

 

HTML Practice

1. 랠리 테스트

2. HTML  예시 대로 짜보기

3. 블록 나누기

4. 홈페이지 레이아웃 태그 연습

 

참고사이트) GoFullPage, ezPDF Editor, Theme Wagon

 

--------------------------------------------------------------------------------

 

 

HTML Practice

 

1. 랠리 테스트

  문항  답변
1 다음의 태그중 인라인과 블록을 선별할 수있다.
p
ul
ol
dl
li
h1 ~ h6
address
hr
label
b,strong
mark
i
br
span
small
sub
sup
s
인라인 : label b strong mark i br span small sub sup s

블록 : p ul ol dl li h1~h6 address hr
2 인라인의 특징을 설명할 수 있다. 요소를 가로로 쌓음 width, height 크기조절 사용x
3 블록의 특징을 설명할 수 있다. 요소를 세로로 쌓음 크기 조절 사용o
4 a 태그의 속성값은 무엇이 있는가? href <a href="url"><a>
5 img의 속성값은 무엇이 있는가? src <img src="img.jpg">
6 절대경로란 무엇인가? 특정파일이나 폴더의 위치를 나타내는 전체경로
7 상대경로란 무엇인가? 현재 작업 위치 폴더 기준으로 특정 파일 이나 폴더를 나타내는 경로
8 폼태그의 속성은 무엇인있는가? (3가지 이상)
action, method(get, post), name
<form action="/progress"> <form method="post"><form name="formdata">
9 폼의 하위태그를 제어하기 위한 속성중 널값을 허용하지 않는 것은? requird <input type="text" required>
10 폼의 하위태그를 제어하기 위한 속성중 최대글자수를 제한하는 것은? maxlength <input type="text" maxlength="10">
11 폼의 하위태그를 제어하기 위한 속성중 최소글자수를 제한하는 것은? minlength <input type="txet" minlength="10">
12 폼의 하위태그를 제어하기 위한 속성중 특정내용을 미리 표시하는것은? placehoder<input type="text" placehoder>
13 폼의 하위태그를 제어하기 위한 속성중 읽기전용으로 변환하는 것은? readonly<input type="text" readonly>
14 폼의 하위태그를 제어하기 위한 속성중 숫자의 최소값을 제어하는 것은? min <input type="number" min="1">
15 폼의 하위태그를 제어하기 위한 속성중 숫자의 최대값을 제어하는 것은? max <input type="text" max="10">
16 폼의 하위태그를 제어하기 위한 속성중 input의 길이를 제어하는 것은? size <<input type="text" size="10">
17 폼의 하위태그 중 라디오버튼이나 체크박스를 미리 체크되게 하는 속성은? checked <input type="text" checked>
18 다음의 폼하위태그의 입력받는 데이터의 특징을 서술할수있다.
input:text
input:password
input:email
input:radio
input:checkbox
input:submit
input:reset
input:button
input:file
input:number
input:text : 텍스트 입력
input:password : 텍스트 입력, 보이지 않게 처리
input:email : email 양식에 맞게 입력, @없을시 submit되지 않음
input:radio : 여러개중 하나를 선택하게 지정 가능
input:checkbox : 여러개중 다양하게 선택할 수 있게 지정 가능
input:submit : 지정된 action으로 입력데이터를 전달
input:reset : 입력 내용 초기화
input:button : 함수를 작성하여 이벤트를 연결
input:file : 파일 첨부
input:number : 숫자값 입력

 

2. HTML  예시 대로 짜보기

 

1)test_table.html

<body>
  <section>
    <article>
       <header>
        <h1>강의 시간표</h1>
      </header>
      <table border="1">
        <tr>
          <td style="text-align: center;">구분</td>
          <td style="text-align: center;"></td>
          <td style="text-align: center;"></td>
          <td style="text-align: center;"></td>
          <td style="text-align: center;"></td>
          <td style="text-align: center;"></td>
        </tr>
        <tr>
          <td style="text-align: center;">1교시</td>
          <td rowspan="2">웹 기획</td>
          <td rowspan="2">웹 디자인</td>
          <td rowspan="2">HTML</td>
          <td rowspan="2">웹 디자인</td>
          <td>영어</td>
        </tr>
        <tr>
          <td style="text-align: center;">2교시</td>
          <td rowspan="4">야외수업</td>
        </tr>
        <tr>
          <td style="text-align: center;">3교시</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td style="text-align: center;">4교시</td>
          <td rowspan="2">UI 디자인</td>
          <td rowspan="2">자바스크립트</td>
          <td rowspan="2">모바일 디자인</td>
          <td rowspan="2">HTML</td>
        </tr>
        <tr>
          <td style="text-align: center;">5교시</td>
        </tr>      
      </table>
    </article>
  </section>
</body>

 

* table내용 가운데 정렬 style="text=align: center;" 사용

 

2)test_join.html

   <head></head>
   <title></title>
   <body>
      <!-- table 사용 줄 맞춤 -->
  <h1>회원 가입 양식</h1>
  <form>
    <table>
      <tr>
      <td>- 아이디</td>
      <td><input type="text" name="id"></td>
      </tr>
      <tr>
       <td>- 비밀번호</td>
       <td><input type="password" name="psw"></td>
      </tr>
      <tr>
       <td>- 비밀번호 확인</td>
      <td><input type="password" name="psw_re"></td>
      </tr>
      <tr>
       <td>- 이름</td>
      <td><input type="text" name="user_name" maxlength="3"></td>
      </tr>
      <tr>
       <td>- 성별</td>
       <td><input type="radio" name="sex" id="sex1" value="female">여성
              <input type="radio" name="sex" id="sex2" value="male">남성</td>
      </tr>
      <tr>
       <td>- 전화번호</td>
       <td>
         <select name="number">
         <option value="1" selected>02</option>
         <option value="2">051</option>
         <option value="3">055</option></select>
       - <input type="tel" name="tel1">
       - <input type="tel" name="tel2"></td>
      </tr>
      <tr>
      <td>- 이메일</td>
      <td>
       <input type="text" name="email">@
       <select name="mail" id="mail">
        <option value="1">선택</option>
        <option value="2">gmail.com</option>
        <option value="3">naver.com</option>
       </select></td>
     </tr>
    <tr>
      <td>- 자기소개</td>
      <td><textarea name="introduce" rows="5" cols="50"></textarea></td>
    </tr>  
    </table>
  </form>
</body>

 

3. 블록 나누기

 

-홈페이지 제작시 참고 

 

<웹페이지 전체화면 캡쳐>

 

 GoFullPage 다운로드

https://chromewebstore.google.com/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl?pli=1

 

GoFullPage - Full Page Screen Capture - Chrome 웹 스토어

추가 권한을 요청하지 않고 현재 페이지의 스크린샷을 전체적으로 캡처하고 신뢰할 수 있습니다!

chromewebstore.google.com

 

*구글 크롬 확장 프로그램 설치-> 카메라 아이콘 안 보일시 핀 고정 후 사용

 

 

<PDF 편집프로그램>

 

 

ezPDF Editor 3.0 다운로드

http://www.ezpdf.co.kr/main/downPage/downPage.jsp

 

ezPDF Solution

디지털 업무 환경, PDF 전자문서 선두기업 유니닥스의 ezPDF 솔루션과 함께하세요.

www.ezpdf.co.kr

 

<무료 템플릿 페이지>

 

Theme Wagon 다운로드

https://themewagon.com/

 

Home

Download the Best Free & Premium Responsive Bootstrap Templates from a hand-picked collection of over 1000 responsive Bootstrap themes & templates

themewagon.com

 

예시)

 

* ezPDF Editor사용법: PDF 파일 우클릭 ->연결프로그램->ezPDF Editor 으로 열기

 화면이 짤릴 경우 'PNG' 다운->'주석'->사각형으로 구분

 

4. 태그 이용해서 홈페이지 만들어보기

 

예시) 참고

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=header, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <header>
    <div>
      <span>hello@colorlib.comㅣ</span>
      <span>free shpping for all Order of &99</span>
    </div>
    <div>
      페이스북 트위터 링크드인 핀터레스트ㅣ
      국가아이콘  EnglishㅣLogin
    </div>
  </header>
  <nav>
    <div>
     <img src="" alt="logo">
    </div>
    <ul>
      <li style="list-style-type: none;"><a href="#">HOME</a></li>
      <li style="list-style-type: none;"><a href="#">SHOP</a></li>
      <li style="list-style-type: none;"><a href="#">PAGES</a></li>
      <li style="list-style-type: none;"><a href="#">BLOG</a></li>
      <li style="list-style-type: none;"><a href="#">CONTACT</a></li>      
    </ul>
    <div>
      하트 장바구니 item: $150.00
    </div>
  </nav>
  <section id="main">
    <div>
      <table border="1" width="20%">
        <td>
      <select name="" id="">
        <option value="" selected>All departments</option>
        <option value=""></option>
        <option value=""></option>
      </select>
      <ul>
        <li style="list-style-type: none;">Fresh Meat</li>
        <li style="list-style-type: none;">Vegetables</li>
        <li style="list-style-type: none;">Fruit&Nut Gifts</li>
        <li style="list-style-type: none;">Fresh Berries</li>
        <li style="list-style-type: none;">Ocean Foods</li>
        <li style="list-style-type: none;">Butter&Eggs</li>
        <li style="list-style-type: none;">Fastfood</li>
        <li style="list-style-type: none;">Fresh Onion</li>
        <li style="list-style-type: none;">Papayaya&Crisps</li>
        <li style="list-style-type: none;">iOatmeal</li>
        <li style="list-style-type: none;">Fresh Bananas</li>
      </ul></td>
      </table>
    </div>
      <select name="" id="">
        <option value="" selected>All catagories</option>
        <option value=""></option>
        <option value=""></option>
      </select>
    ㅣ <input type="text" placeholder="What do you need?">
    <div>SEARCH</div>
    <div>
      전화 +65 11.188.888
    </div>
    <div>
      support 24/7 time
    </div>
  <img src="" alt="">
    <div>
      FRUIT Fresh
      <h2>Vegrtable</h2>
      <h2>100% Organic</h2>
    <div>Free Pickup and Delivery Available</div>
    </div>
    <div>SHOP NOW</div>
        .
'       .
.       .