카테고리 없음

HTML AWS 클라우드 기반 Devops 개발자 과정 영역관리, 하이퍼링크, 입력양식폼 관련 태그

minkhinformation 2025. 2. 23. 12:00

 블록요소(Block Element) : 한 줄 단위로 영역을 차지한다. 줄바뿜이 적용되어 이미 존재하는 태그의 다음 줄에 다음 영역이 잡힌다.

(p, pre, div, section, article, header, footer) 등

인라인 요소(Inline Element) : content(내용) 영역에 해당하는 부분만 영역을 차지하는 요소. 줄 바꿈이 적용되지 않아 다른 영역이 바로 옆으로 잡힌다.

                   

영역관리태그

div태그와 span태그의 차이점1 : 줄바꿈처리

첫번째 영역
두번째 영역
세번째 영역

span태그

span 태그는 온라인 요소로 content영역만 차지(줄바꿈 발생x)

첫번째 영역 두번째 영역 세번째 영역
<h3>영역관리태그</h3>
    <h4>div태그와 span태그의 차이점1 : 줄바꿈처리</h4>

    <div style="background-color: red;">첫번째 영역</div>
    <div style="background-color: orange;">두번째 영역</div>
    <div style="background-color: yellow;">세번째 영역</div>

    <h3>span태그</h3>
    <p>span 태그는 온라인 요소로 content영역만 차지(줄바꿈 발생x)</p>

    <span style="background-color: red;">첫번째 영역</span>
    <span style="background-color: orange;">두번째 영역</span>
    <spans style="background-color: yellow;">세번째 영역</spans>

 

iframe : 웹페이지 안에 다른 웹페이지를 삽입할 때 사용하는 HTML 태그

<iframe src="https://www.tistory.com/" width="800" height="500"></iframe>

 

 

 

하이퍼링크 관련 태그

하이퍼링크 기능은 웹문서의 가장 핵심적인 기능이다.

클릭을 통해 연결된 곳으로 이동하여 사용을 편리하게 해주는 기능

텍스트를 클릭해 링크를 이동하는 방법과 이미지를 클릭해 넘어가는 방법, 페이지 내에서의 링크를 통한 이동도 가능하다.

'a' 태그의 href속성으로 링크를 만들 수 있다.

<ul>
    <li><a href="https://www.naver.com/">네이버</a></li>
    <li><a href="https://www.google.co.kr/">구글</a></li>
    <li><a href=".https://www.tistory.com/">티스토리</a></li>
</ul>

target = "_blank"를 사용한다면 새로운 창에서 실행된다.

ratget : 연결된 페이지를 어느 탭에서 열 것인지를 지정한다.(_self(기본값), _blank)

<ul>
    <li><a href="https://www.naver.com/"  target="_blank">네이버</a></li>
    <li><a href="https://www.google.co.kr/"  target="_blank">구글</a></li>
    <li><a href=".https://www.tistory.com/" target="_self">티스토리</a></li>
</ul>

 

 

입력양식폼 관련 태그

input태그 : 사용자에게 값을 입력받을 수 있는 텍스트 상자 또는 체크박스 등을 만들 수 있다.

아이디:
비밀번호
성별 남 여 
    아이디: <input type="text"> <br>
    비밀번호 <input type="password"> <br>
    성별    <input type="radio" name = "gender"> 남
            <input type="radio" name = "gender"> 여
    <input type="button" value="회원가입">

 

폼(form) 관련 태그

form 태그 내에 submit버튼 클릭 시 해당 form안에 작성된 사용자가 입력한 값들을 서버로 넘기면서 요청하는 역할을 수행한다.

<form action= "" method = ""></form>

actioin : 해당 form에 사용자가 입력한 값들을 전달하면서 요청을 보낼 서버의 경로

method : 요청 전송방식을 지정하는 속성(get(기본값), post)

> get : 요청 시 사용자가 입력한 값들을 head에 담아 전송한다. ->url에 값이 전부 노출

> post : 요청 시 사용자가 입력한 값들을 url에 노출되지 않는 형식으로 전달

 

fieldset : 그룹을 묶는 태그(기본적인 테두리가 존재한다)

legend : 해당 그룹에 제목을 붙여주는 태그

 

제목 입력: 입력: 
<fieldset>
  <legend> 제목</legend>
  입력: <input type="text">
  입력: <input type="text">
</fieldset>

 

text와 관련된 input태그의 타입

input 유형은 닫는 태그가 없으며 type, value, name 속성이 있다.

 

button : 클릭할 수 있는 버튼을 정의한다.
checkbox : 체크박스를 정의한다.
color : 색을 선택할 수 있는 입력 필드를 정의한다.
date : 날짜를 선택할 수 있는 입력필드를 정의한다.
datetime : 날짜와 시간을 입력할 수 있는 필드(현재 대부분의 브라우저에서 지원되지 않는다. UTC기준)
datetime-loacl 날짜와 시간을 선택할 수 있는 입력 필드를 정의한다.(현재 대부분의 브라우저에서 지원된다. 사용자 로컬 시간 기준)
email : 이메일 주소를 입력할 수 있는 입력 필드를 정의한다.
업로드할 파일을 선택할 수 있는 입력 필드와 "파일 선택"버튼을 정의한다.
사용자에게는 보이지 않는 숨겨진 입력필드를 정의한다.
image : 제출 버튼(submit button)으로 사용될 이미지를 정의한다.
month : 날짜를 선택할 수 있는 입력 필드를 정의한다.(year, month)
number : 숫자를 입력할 수 있는 입력 필드를 정의한다.
password : 비밀번호를 입력할 수 있는 입력 필드를 정의한다.
radio : 라디오버튼(radio)을 정의한다.(name 속성의 값을 일치하게 하여 중복체크를 허용하지 않음)
range : 슬라이드 바를 조정하여 범위 내의 숫자를 선택할 수 있는 입력 필드를 정의한다.
reset : 모든 폼(form) 요소의 값을 초깃값으로 되돌리는 리셋버튼을 정의한다.
submit : 제출 버튼을 정의한다.
search : 검색어를 입력할 수 있는 텍스트 필드를 정의한다.
text : type 속성의 기본값으로, 한 줄로 된 텍스트 필드를 정의한다.
tel : 전화번호를 입력할 수 있는 입력 필드를 정의한다.
time : 시간을 선택할 수 있는 입력 필드를 정의한다.
url : URL 주소를 입력할 수 있는 입력 필드를 정의한다.
week : 날짜를 선택할 수 있는 입력 필드를 정의한다.(year, week)
    <style>
        .area{
        width: 100%

            
        }
        .area2{
            display: inline;
 
        }
        .area3{
            height: 60px;
            border: 1px solid gray;
            
           

        }

    </style>
<div class="area" id="area1">
    <div class="area3">
        <div class="area2"><input type="button"></div>
        <div class="area2">button : 클릭할 수 있는 버튼을 정의한다.</div>
    </div>
    <div class="area3">
        <div class="area2"><input type="checkbox" name="" id=""><input type="checkbox"></div>
        <div class="area2">checkbox : 체크박스를 정의한다.</div>
    </div>
    <div class="area3">
        <div class="area2"><input type="color" name="" id=""></div>
        <div class="area2">color : 색을 선택할 수 있는 입력 필드를 정의한다.</div>
    </div>
    <div class="area3">
        <div class="area2"><input type="date" name="" id=""></div>
        <div class="area2">date : 날짜를 선택할 수 있는 입력필드를 정의한다.</div>
    </div>
    <div class="area3">
        <div class="area2"><input type="datetime" name="" id=""></div>
        <div class="area2">datetime : 날짜와 시간을 입력할 수 있는 필드(현재 대부분의 브라우저에서 지원되지 않는다. UTC기준)</div>
    </div>
    <div class="area3">
        <div class="area2"><input type="datetime-local" name="" id=""></div>
        <div class="area2">datetime-loacl 날짜와 시간을 선택할 수 있는 입력 필드를 정의한다.(현재 대부분의 브라우저에서 지원된다. 사용자 로컬 시간 기준)</div>
    </div>
    <div class="area3">
        <div class="area2"><input type="email" name="" id=""></div>
        <div class="area2">email : 이메일 주소를 입력할 수 있는 입력 필드를 정의한다.</div>
    </div>
    <div class="area3">
        <div class="area2"><input type="file" name="" id=""></div>
        <div class="area2">업로드할 파일을 선택할 수 있는 입력 필드와 "파일 선택"버튼을 정의한다.</div>
    </div>
    <div class="area3">
        <div class="area2"><input type="hidden" name=""></div>
        <div class="area2">사용자에게는 보이지 않는 숨겨진 입력필드를 정의한다.</div>
    </div>
    <div class="area3">
        <div class="area2"><input type="image" src="" alt=""></div>
        <div class="area2">image : 제출 버튼(submit button)으로 사용될 이미지를 정의한다.</div>
    </div>
    <div class="area3">
        <div class="area2"><input type="month" name="" id=""></div>
        <div class="area2">month : 날짜를 선택할 수 있는 입력 필드를 정의한다.(year, month)</div>
    </div>
    <div class="area3">
        <div class="area2"><input type="number" name="" id=""></div>
        <div class="area2">number : 숫자를 입력할 수 있는 입력 필드를 정의한다.</div>
    </div>
    <div class="area3">
        <div class="area2"><input type="password" name="" id=""></div>
        <div class="area2">password : 비밀번호를 입력할 수 있는 입력 필드를 정의한다.</div>
    </div>
    <div class="area3">
        <div class="area2"><input type="radio" name="ab" id=""><input type="radio" name="ab" id=""></div>
        <div class="area2">radio : 라디오버튼(radio)을 정의한다.(name 속성의 값을 일치하게 하여 중복체크를 허용하지 않음)</div>
    </div>
    <div class="area3">
        <div class="area2"><input type="range" name="" id=""></div>
        <div class="area2">range : 슬라이드 바를 조정하여 범위 내의 숫자를 선택할 수 있는 입력 필드를 정의한다.</div>
    </div>
    <div class="area3">
        <div class="area2"><input type="reset" value=""></div>
        <div class="area2">reset : 모든 폼(form) 요소의 값을 초깃값으로 되돌리는 리셋버튼을 정의한다.</div>
    </div>
    <div class="area3">
        <div class="area2"><input type="submit" value=""></div>
        <div class="area2">submit : 제출 버튼을 정의한다.</div>
    </div>
    <div class="area3">
        <div class="area2"><input type="search" name="" id=""></div>
        <div class="area2">search : 검색어를 입력할 수 있는 텍스트 필드를 정의한다.</div>
    </div>
    <div class="area3">
        <div class="area2"><input type="text" name="" id=""></div>
        <div class="area2">text : type 속성의 기본값으로, 한 줄로 된 텍스트 필드를 정의한다.</div>
    </div>
    <div class="area3">
        <div class="area2"><input type="tel" name="" id=""></div>
        <div class="area2">tel : 전화번호를 입력할 수 있는 입력 필드를 정의한다.</div>
    </div>
    <div class="area3">
        <div class="area2"><input type="time" name="" id=""></div>
        <div class="area2">time : 시간을 선택할 수 있는 입력 필드를 정의한다.</div>
    </div>
    <div class="area3">
        <div class="area2"><input type="url" name="" id=""></div>
        <div class="area2">url : URL 주소를 입력할 수 있는 입력 필드를 정의한다.</div>
    </div>
    <div class="area3">
        <div class="area2"><input type="week" name="" id=""></div>
        <div class="area2">week : 날짜를 선택할 수 있는 입력 필드를 정의한다.(year, week)</div>
    </div>
</div>