HTML - 요소! - confinalst

html 요소

참고 사이트: http://koxo.com/

html 요소(html element) 는 웹페이지를 이루는 개별적인 요소를 뜻한다.
모든 html 요소는 속성(attribute)을 가지며 속성은 html 요소의 추가 정보를 제공한다.

자주 사용하는 html 요소에 대해 알아본다.

img 태그

이미지 태그,

<img alt="" src="">

alt: 사진이 없을때 대신 출력하는 문자열.

src: url 데이터 타입으로 이미지 링크문자열. 사진의 절대주소, 상대주소, URL이 들어갈 수 있다.

URL(Uniform Resource Locators)

schema://prefix.domain:port/path/filename

URL은 ASCII 문자 집합을 사용하여 인터넷을 통해서만 전송할 수 있다.
그외 문자는 16진수값으로 대체된다.

URL은 공백을 포함할 수 없다. + 또는 %20 대체된다.

width, height

너비와 높이를 지정할 수 있는 속성

width와 height중 하나만 지정할 경우 나머지 하나의 값은 비율에 맞게 자동 조정된다.

<img width="200" alt="" src="">
height의 값은 200너비에 맞춰 알아서 조정됨.

단위 생략시 기본 px로 설정됨.

style 속성

왠만하면 width, height 보다 style 속성을 사용하는 것을 권장.

<img style="width:141px; height:46px">

width나 height를 사용하면 head에서 정의된 css로 태그속성으로 적용한 이미지 크기변경이 덮어씌어질 수 있다.

a 태그

a 태그는 클릭시에 url주소로 이동하거나 javascript를 호출, 문서내에서 이동하는 기능을 가지고 있다.
<a title="" href="" target="">

title: 풍선도움말 속성

target: 새창에서 띄울건지(_blank), 현재 창에서 이동할건지(_self)

href: URL 주소값, 혹은 JavaScript가 들어간다.

<a title="경고창 띄웁니다." href="javascript:window.alert('경고창');">클릭</a>

a 태그 쓰임새는 굉장히 많은데 흔히 사이트에서 보이는 “맨 위로”버튼을 구현할 때 도 쓰인다.

<a href="#top" id="top_box">맨 위로</a>

top_box라는 id를 부여하고 style sheet에서 top_box를 다음과 같이 설정

모든 태그에는 고유의 id를 부여할 수 있다.

#top_box{
    border: solid 1px gray;
    background-color: black;
    color:yellow;
    width:100px;
    height:100px;
    text-align: center;
    
    position: fixed;
    bottom:10px;
    right:10px;
}

position: fixed와 bottom:10px, right:10px로 화면 우측 하단 10px만큼 띄어진 공간에 고정시켜놓고 누르면 id가 top 태그위치로 이동한다.

a태그의 기본기능이 링크 역할을 하기때문에 메뉴, 사진에 링크를 더한다던지 다양한 방법으로 쓰임.

stong(bord), em(기울임), ins(밑줄) 태그

Strong태그는 b태그와 같고
em태그는 i태그와 같고
ins태그는 u태그와 같다.

같은 역할을 하는 태그가 굳이 2개나 있는 이유는 나중에 style sheet에서 바꾸기 용이하게 하기 위해서…

strong{
      border:dotted 1px red;
}
em{
    background: black;
    color:yellow;
}
ins{
    color:red;
    background: yellow;
}

이런식으로 모든 strong, em, ins 태그의 style을 한꺼번에 바꿀 수 있다.

font 태그

널리 알려져있는 색(red, blue 등)은 영문자로 바로 적용할수 있고 세밀한 조정은 rgb를 통해 조절 가능하다.

<font color="Orange" size="2" face="궁서체">안녕하세요. 홍길동입니다.</font><br>

<!-- rgb(0~255,0~255,0~255) -->
<font color="rgb(255, 0, 0)" size="3" face="궁서체">안녕하세요. 홍길동입니다.</font><br>

<!-- hex values   : #00FF00   -->
<font color="#00FF00" size="4" face="궁서체">안녕하세요. 홍길동입니다.</font><br>

<!-- rgba()    a:  100% transparent 투명도 -->
<font color="rgba(255,99,71, 0.5)" size="5" face="궁서체">안녕하세요. 홍길동입니다.</font><br>

안녕하세요. 홍길동입니다.

여러 방법을 통해 color 초기화 가능.

div, span 태그

div는 블럭 모드, span은 인라인 모드이다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
  span{
    border: solid 1px blue;
  }
  div{
    border: dotted 1px red;
  }
</style>
</head>
<body>
<div>홍길동</div>
<div>홍길동</div>
<div>홍길동</div>

<span>김길동</span>
<span>김길동</span>
<span>김길동</span>
</body>
</html>

출력형식을 보면 인라인과 블럭모드의 차이를 알 수 있다.

블록모드는 가로길이가 브라우저 크기만큼 할당되고 아래로 쌓이는 반면
인라인모드는 가로길이가 안의 내용(content)길이에 맞춰진다.

이런식으로 div에 싸인 모든 부분을 style 속성으로 꾸밀 수 있다.

<div style="background-color: black;color:white;padding: 20px">
  <h3>div 설명</h3>
  <p>
     div : 블럭모드<br>
     html 요소 용기<br>
     기타 특징<br>
  </p>
</div>

table 태그

현재까지도 레이아웃잡는 용도로 많이 쓰이는 table…
사용법은 간단하지만 레이아웃 잡으려면 테이블안에 테이블, 안에 테이블… 반복… 복잡해진다.

cellpadding, cellspacing 속성

<table style="width: 200px" border="1" cellpadding="10" cellspacing="20">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

1	2
3	4

이런식으로 셀간 간격을 20px로, 셀안의 내용물간의 공백을 10px로 설정 가능.

caption 태그

해당 테이블에 대한 설명글로 default로 위에 추가되지만 양옆, 아래에 추가할 수 도 있다.

<table>
<caption align="bottom">deptno</caption>
...
</table>

thead, tbody, tfoot

보통 thead에 속성명, tbody에 내용, tfoot에 결과가 적용되기 때문에 CSS 구조화가 편함 아래와같이 tbody의 td 만 골라서 디자인 가능

tbody td {
    border-bottom: dotted 2px;/* 제일 밑의 td */
}

th 태그

일반적으로 thead에 쓰이는 태그, <td align="center"><b>의 효과를 default로 가지고 있다.
(bold, 가운데 정렬하는 효과)

ol, ul 태그

ol은 ordered list의 약자로 순서있는 리스트.

<ol start="5" type="a">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ol>

deafult는 숫자이지만 알파벳으로 지정 가능, 이외에도 로마숫자, 스타일 속성을 사용하면 그리스 문자등으로도 가능함.

<ol start="5" style="list-style-type: lower-greek;">

ul은 unordered list의 약자로 순서없는 리스트.
네모, 동그라미가 앞에 붙는 태그.

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>

기본 동그라미가 붙지만 style태그를 사용하면 다양한 도형으로 변경 가능.

<ul style="list-style-type:square;">

순서가 필요하다면 ol을 필요없다면 ul 사용을 권장
스타일 태그로 ul을 ol처럼, ol을 ul처럼 구분없이 사용 가능하다.

스타일시트와 함께 디자인적으로 많이 쓰인다, 메뉴바를 표시할때 효과적

iframe 태그

html 문서 안에서 또 다른 html 문서를 출력하기 위한 태그.

네이버 홈페이지에서도 로그인 영역, 각종 광고영역등을 iframe으로 설정해서 사용중.

<a href=https://www.daum.net/ target="content">daum</a><br>
<iframe name="content" width="100%" height="200px" src="" frameborder="0"></iframe>

a태그 등에서 target에 iframe name을 지정해놓고 클릭하면
iframe의 공간에서 다른 웹페이지를 표시 가능,

frameborder와 scrolling(스크롤바)를 없에고 style 조금 수정하면 깔끔하게 출력 가능하다.

<iframe src="" 
style="width: 108px; height: 20px; border: solid 2px red" 
frameborder="0" scrolling="no"></iframe>

회원가입할 때 자주보이는 동의문 등에서 iframe을 사용한다.

form 태그

form 태그 안의 내용을 서버로 보낼때 사용.
get, post 방식 사용 가능

<form action="ex01_ok.jsp" method="get" target="_blank">

action: 데이터 전송할 URL
target: 속성값에 따라 새창에서 띄울건지, 현재창에서 이동한건지 지정 가능.

만약 form 태그 안에 <input type="text"> 하나뿐이라면 submit 버튼이 없더라도 엔터로 전송가능. input 태그가 2개 이상이라면 submit기능을 하는 input태그가 필요하다.

novalidate 속성

submit 시에 유효성 검사하는 기능이 있는데
novalidate 속성값이 있을 경우 유효성검사를 하지 않는다.

<form action="" novalidate="novalidate">

input 태그

input 태그의 type 속성값은 default text

데이터 입력을 위한 태그로 type 속성을 통해 다양한 방식의 입력형식 제공한다.

text: 텍스르
email: 이메일전용 텍스트
number: 숫자전용 텍스트
radio: 라디오버튼
checkbox: 체크박스
button: 버튼
data: 달력
select: 선택리스트
image: 이미지버튼
password: 비밀번호
submit: 폼데이터 전송 버튼
reset: 폼데이터 초기화 버튼
file: 파일전송
range: 슬라이더

input 태그들은 type 에 따라 여러속성을 가지는데
아래 속성들은 대부분 type 의 input 태그가 가지고 있음

name 속성
값을 구분하기 위한 name, 없으면 내부값은 무시된다. name 은 중복될 수 있으며 , 로 구분되어 전송된다.

autofocus 속성
자동으로 커서가 선택되어지는 속성,
<input type="text" autofocus> (속성명 속성값이 같으면 생략가능)

value 속성
default 값 지정가능, checkbox나 select 태그에선 기존 선택값을 지정 가능.

tabindex 속성
tab 누르면 이동하는 순서.

size 속성
입력바길이, 문자크기단위로 길이가 들어나진 않는다.
(style로 맞추는 것을 권장)

<!-- image -->
<input type="image" src="/WebPro/html/days03/images/item03.gif"/>

<!-- number -->
<input type="number" name="age" step="3" min="20" max="150"/>

<!-- range -->
<input type="range" name="kor" min="0" max="100" value="40"/>

<!-- radio -->
성별: 
<input type="radio" name="gen" value="m" checked="checked"/> 남자
<input type="radio" name="gen" value="f"/> 여자 
<br>
팀:
<input type="radio" name="team" value="1" checked/>1조
<input type="radio" name="team" value="2"/>2조
<input type="radio" name="team" value="3"/>3조
<input type="radio" name="team" value="4"/>4조

<!-- checkbox -->
<input type="checkbox" name="cars" value="g"/>그랜저<br>
<input type="checkbox" name="cars" value="e" checked="checked"/>에쿠스<br>
<input type="checkbox" name="cars" value="s"/>소나타<br>
<input type="checkbox" name="cars" value="b" checked/>BMW<br>
<input type="checkbox" name="cars" />기타<br>
<input type="text" style="visibility: hidden"/> 

<!-- hidden -->
<input type = "hidden" name="country" value="norway">

<!-- selected -->
부서선택
<select name="deptno" id="">
    <option value="10">account</option>
    <option value="20" selected>research</option>
    <option value="30">sales</option>
    <option value="40">operations</option>
</select>
여러개 선택 가능
<select name="cars" id="" size=4 multiple="multiple">
    <option value="volvo">volvo</option>
    <option value="saab">saan</option>
    <option value="bmw">bmw</option>
    <option value="audi">audi</option>
</select>

type=text 속성

maxlength 속성 최대 허용 문자 길이

readonly 속성 readonly또한 autofocus처럼 속성값이 하나라 생략가능하다, 읽기 전용이란 뜻으로 수정 불가능,
글번호, 게시자 같은 수정되면 안되는 공간을 표시만 하기 위해 readonly속성 사용

aotocomplete 속성 자동완성 기능 , off하면 자동완성 기능을 사용하지 않는다.

placeholder 입려하기 전짜기 얕게 깔려있는 배경 글자를 설정 가능.
<input type="text" placeholder="입력하세요.." />

required 필수 입력으로 설정, 입력하지 않으면 submit되지 않는다.

type=data 속성

사실 날짜를 선택하기 위한 type 속성은 아래 4개 존재

<input type="date">
<input type="datetime-local">
<input type="month">
<input type="week">

type="date"은 평범한 달력을 표시, 년,월,일 선택 가능

type="datetime-local"은 년,월,일 뿐 아니라 시간, 분까지 입력가능

type="month"은 ‘달’까지 선택 가능

type="week"은 해당 년도의 몇번째 주인지 선택가능

value 속성
다른 태그처럼 value로 특정 날짜를 선택시켜 놓을 수 있음.
value="2019-03-28"

min, max 속성
선택할 수 있는 최저, 최대 날짜를 지정 가능하다.
submit시 브라우저에서 간단한 유효성 체크를 진행해준다.
<input type="date" min="1990-01-01" max="2019-03-28">

button 태그

<button type="submit">서브밋 버튼</button>
<button type="reset">리셋 버튼</button>
<button type="button">일반 버튼</button>

<input type="submit"> 과 <button type="submit"> 은 서로 똑같은 기능을 한다.

<button type="button">은 보통 JS와 연동해서 자주 사용함.

datalist 태그

<datalist id="browsers">
    <option value="ie"></option>
    <option value="firefox"></option>
    <option value="chrome"></option>
    <option value="opera"></option>
    <option value="safari"></option>
</datalist>

그냥 <input type=text> 태그와 비슷하게 생겼지만
option 태그의 value 값들이 자동완성처럼 떠오른다.

기타 잡다 태그

abbr 태그

약어(abbreviation)를 표시할때 사용하는 태그

<abbr title="hypertext markup language">html</abbr><br>

마우스를 가져다 대면 title 속성에 설정한 문자가 떠오른다.

q, blockquote 태그

인용문(quote)을 출력할때 사용 <q></q>로 감싸지면 쌍따옴표가 붙는다.

blockquote를 사용하면 문단자체를 인용문으로 설정 가능, 문단이 통째로 들여쓰기 되어짐.

mark 태그

<mark>강조</mark>

글자 백그라운드로 노랑색을 칠해 강조함.

bdo 태그

역순으로 출력할 수 있다.

<bdo dir="ltr">This is Text.</bdo>
<bdo dir="rtl">This is Text.</bdo><!-- 역순출력 -->

dl, dt, dd 태그

<dl>
<dt>html이란?</dt><!-- 설명제목 -->
<dd>html은 웨프로그래밍 기본 언어이다.</dd><!-- 들여쓰기됨 -->
</dl>

단어에 대해 설명할 때 사용, 들여쓰기와 레이아웃이 조금 추가된 것 외엔 별다를 거 없다.

fieldset, legend

그룹화 켜주는 태그, 주위에 태두리가 생긴다.
<legend>와 함께 사용해서 테두리의 범주를 적을 수 있다.

picture 태그(Recursive img)

html5에 들어오면서 생긴 태그, 브라우저 크기에 따라 사진을 변경할 수 있다.
반응형 웹에서 그림을 표시하기 위해 CSS나 자바스크립트를 써오다가 편하게 사용하라고 최근에 나온 태그이다.

참고: https://googlechrome.github.io/samples/picture-element/

<picture>
    <source srcset="/WebPro/css/images/img_smallflower.jpg" media="(max-width:600px)"></source>
    <source srcset="/WebPro/css/images/flowers.jpg" media="(max-width:900px)"></source>
    <source srcset="/WebPro/css/images/img_flowers.jpg" media="(max-width:1200px)"></source>
    <img src="/WebPro/css/images/img_smallflower.jpg" alt="무궁화" />
</picture>

만약 브라우저에서 picture 태그를 지원하지 않는다면 img 태그의 그림 출력

600px까지는 img_smallflower가 출력

600~900px까지는 flowers 출력

900~1200px까지는 img_flowers 출력

1200이후부턴 출력될 그림이 없음으로 img_smallflower가 출력된다