이진욱의코딩

폼(form)태그응용, (블락,인라인)요소, 이미지그룹화에 대해 알아봅시다. 본문

HTML

폼(form)태그응용, (블락,인라인)요소, 이미지그룹화에 대해 알아봅시다.

Crucifi 2019. 9. 19. 01:43

이번 시간에는 저번 시간에 했던 폼 태그를 응용하는 모습을 보여드리겠습니다.

우선 우리가 이번시간에 만들 것을 미리 보도록 하겠습니다.

 

어제 했던 거랑 비슷하죠?

그러니 바뀐부분이나 추가된 부분만 설명하겠습니다.

  <legend>신청자</legend>
  <label for="name">이름</label>
  <input type="text" id="name" required autofocus> <br>

autofocus는 자동으로 포커스를 맞춰주는 역할을 합니다. required는 반드시 작성해야 하는 칸으로 바뀌게 하는 역할을 합니다.

 

  <input type="text" id="학번" maxlength="7" placeholder="7가지 숫자만 입력" required><br>

placeholder은 미리 회색으로 텍스트가 뜨게만드는 역할을 합니다. 물론 마우스를 갖다 대면 사라지죠.

 

</select>-<input type="tel" maxlength="4">-<input type="tel" maxlength="4">

이런 구조로 보통 연락처를 기입할때 사용하는 방식입니다.

 

  <datalist id="interest_list">
    <option value="grammar" label="문법"></option>
    <option value="voca" label="어휘"></option>
    <option value="speaking" label="회화"></option>
    <option value="listening " label="리스닝"></option>
  </datalist>

datalist는 input type text한테 리스트를 부여해주는 태그입니다.

 

이런 식으로 말이죠.

 

<input type="reset">

input type 중 reset은 기입한 내용을 모두 초기화시키는 역할을 합니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>form 예제</title>
</head>
<body>
  <h1>여름방학 특강 신청</h1>
  <form>
<fieldset>
<legend>수강과목</legend>
<label for="class">영어회화(초급)</label>
<input id="class" type="text" value=" 오전~오후" readonly>
</fieldset>
<fieldset>
  <legend>신청자</legend>
  <label for="name">이름</label>
  <input type="text" id="name" required autofocus> <br>
  <!-- autofocus -> 자동으로 포커스가 맞춰짐 -->
  <!-- required -> 반드시 작성해야하는 칸으로 바뀜 -->
  <label for="학번">학번</label>
  <input type="text" id="학번" maxlength="7" placeholder="7가지 숫자만 입력" required><br>
  <!-- placeholder -> 미리 회색으로 텍스트가 뜸, 마우스 갖다대면 없어짐 -->
  <label for="faculty">학과</label>
  <select id="faculty">
    <option value="machine_faculty">간호학과</option>
    <option value="industry_faculty"selected>통계학과</option>
    <option value="electronic_faculty">경제금융학과</option>
    <option value="computer_faculty" >컴퓨터공학과</option>
    <option value="chemical_faculty">화학공학과</option>
  </select> <br>
  <label for="tel">연락처</label>
<select id="tel">
  <option value="010">010</option>
  <option value="019">019</option>
  <option value="011">011</option>
</select>-<input type="tel" maxlength="4">-<input type="tel" maxlength="4">
<!-- <input type="tel" id="tel" maxlength="11" required> 으로 대신해도됨-->
</fieldset>

<fieldset>
  <legend>교재주문</legend>
  <label for="textbook">교재</label>
  <input type="range" min="0" max="5" id="textbook" value="1"><br>
  <label for="sheet">워크시트</label>
  <input type="number" id="sheet" min="1" max="10" value="1"><br>
  <label for="order">단체주문</label>
  <input type="number" min="10" max="50" step="10" id="order"><br>
  <label for="interest">관심분야 - 문법, 어휘, 회화, 리스닝</label>
  <input type="text" id="interest" list="interest_list">
  <datalist id="interest_list">
    <option value="grammar" label="문법"></option>
    <option value="voca" label="어휘"></option>
    <option value="speaking" label="회화"></option>
    <option value="listening " label="리스닝"></option>
  </datalist>
  <!-- input_type_text한테 리스트를 부여해주는 태그 (datalist) -->
</fieldset>
<fieldset>
  <legend>신청과 재입력</legend>
  <input type="submit" value="가입하기">
  <input type="reset">
</fieldset>
  </form>

</body>
</html>

최종 코드입니다. 코드 하나하나 직접 적어보면서 이해하시면 훨씬 수월합니다.

 

그다음은 블락,인라인 요소에 대해 설명드리겠습니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>블락, 인라인</title>
  <style>
div{
  margin-left:100px;
}
h1 span{
  color:red;
}
  </style>
</head>
<body>
<div>
  <h1><span>Lorem Ipsum</span></h1>
  <h1>Lorem Ipsum</h1>
  <a href="#">Lorem Ipsum1</a>
  <a href="#">Lorem Ipsum1</a>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
</div>
</body>
</html>

블록 요소 (block element)

블록 요소는 모든 인라인 요소를 포함할 수 있고 다른 블록 요소도 일부 포함할 수 있습니다. 그리고 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 width, height, margin, padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있습니다. 그리고 블룍 요소 다음에는 줄 바꿈이 이루어집니다.

display:inline CSS명령어로 블록 요소를 인라인 요소의 속성으로 변경할 수 있습니다.

div {display:inline}

▲ 모든 DIV태그를 inline요소로 변경함

 

인라인 요소 (inline element)

인라인 요소는 항상 블록 요소 안에 포함되어 있으며 인라인 요소안에 다른 인라인 요소가 포함될 수 있습니다. 그리고 기본적으로 콘텐츠가 끝나는 지점까지를 넓이로 가지게 됩니다. 그래서 임의로 width, height로 변형을 줄 수가 없습니다. 인라인 요소는 line-height로 줄의 높낮이를 조절할 수 있고 text-align으로 텍스트의 종앙, 좌, 우측 정렬을 할 수 있습니다. 그리고 인라인 요소 다음에는 줄 바꿈이 없고 우측으로 바로 이어서 표시가 됩니다.

display:block CSS명령어로 인라인 요소를 블록 요소의 속성으로 변경할 수 있습니다.

div {display:block}

▲ 모든 DIV태그를 inline요소로 변경함

div {display:inline-block}

▲ inline-block으로 인라인 요소와 블록 요소의 속성을 모두 갖는 속성으로 변경이 가능합니다.

 

이것이 블락과 인라인 요소에 대해 설명과 실제 사용하는 코드를 기입해봤습니다.

 

마지막으로 이미지 그룹화와 설명 다는 법을 알려드리겠습니다.

 

<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>이미지 그룹화와 설명달기</title>
</head>
<body>
  <figure>
  <figcaption>전주 한옥마을의 한컷</figcaption>
    <img src="images/jeonju.jpg" alt="어느 한옥집 사랑방 문앞">
      </figure>
  <figure>
    <img src="images/waiting.jpg">
    <figcaption>요즘에는 보기힘든 빨간 우체통</figcaption>
  </figure>
</body>
</html>

figure태그는 왼쪽이 약간 들여 쓰기가 됩니다. 그리고 이 figure태그는 이미지를 묶어줄 때 사용되는 태그입니다.

 

figcaption태그는 이미지를 설명할 때 쓰는 태그입니다. figure태그의 안에서라면 어디에 넣어도 상관이 없습니다.

(figcaption태그가 있고, 이미지가 하나만 있으면 alt속성은 없애도 상관없습니다. 근데 이미지가 2개 이상이면 따로 넣어줘야 합니다.

 

html태그의 dir속성에는 ltr과 rtl이 있는데 ltr은 왼쪽에서 오른쪽으로 문서를 읽겠다는 것이고, rtl은 오른쪽에서 왼쪽으로 읽겠다는 겁니다.

 

오늘 여기까지가 제가 공부한 내용입니다.

'HTML' 카테고리의 다른 글

섹션(section)요소에 대해 알아봅시다.  (0) 2019.09.22
오디오, 비디오태그, 기타택스트관련태그, 특수기호에 대해 알아봅시다.  (0) 2019.09.19
폼(form)태그에 대해 알아봅시다.  (0) 2019.09.18
table태그 기초~응용까지  (0) 2019.09.17
하이퍼링크사용법 + 이미지태그에 대해 알아봅시다.  (0) 2019.09.12
'HTML' Related Articles more