HTML(Hyper Text Markup Language)관련

HTML (Hyper Text Markup Language)

웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어

태그 (Tag)

정보를 정의 하는 형식, 컨탠츠를 감싸서 그 성격과 의미를 정의한다.

열리는 태그가 있으면 닫히는 태그도 있어야한다.
닫히는 태그는 /가 붙는다.
닫히는 태그가 필요없는 태그도 있다, (ex. <br />)

요소 (element)

태그와 태그 사이 내용을 포함하여 요소라고 한다.

<h1>내용</h1>

부모와 자식 요소

<div class="1"> /* 2의 부모 요소, 3의 상위 요소 */
    <div class="2"> /*1의 자식 요소, 3의 부모 요소*/
    	<div class="3"></div> /* 2의 자식 요소, 3의 하위 요소 */
    </div>
</div>

속성 (Attribute)

태그가 가질 수 있는 정보, 태그 내부에 값을 넣을 수 있으며, 속성을 부여할 수 있다.

<div background-color="blue">내용</div> <!-- div에 background-color라는 속성을 넣음 -->

1. title

요소의 정보 또는 설명을 작성

<a href="www.ksmart.or.kr" title="교육원 혼페이지로 이동">ksmart</a>

2. style

요소의 스타일(CSS) 지정

<div style=""></div>

3. class="이름"

요소를 가르키는 이름
중복 사용 가능
선택자를 이용해서 요소를 명확히 선택하기 위함

<div class="이름"></div>

4. id="이름"

요소를 가르키는 이름
중복 사용 불가능

<div id="이름"></div>

5. data

요소의 데이터를 지정
data속성은 대부분 자바 스크립트에서 주로 사용
실제 속성의 값은 대부분 문자 데이터이다.
지정한 데이터는 자바스크립트에 가져와 활용 가능

<tag data-원하는 이름="실제 속성의 값"></tag>

블록 요소

기본적으로 레이아웃 작업에 많이 사용되며, 특별한 의미는 없고 구분을 위해 사용(div, p, h ...)

특징

한줄에 한개만 배치 가능
기본 너비값은 100% (한줄 차지)
크기값을 가질 수 있음
상, 하, 좌, 우 마진(외부 여백)을 가질 수 있음

div(Division) : 특정 영역을 잡을 때 자주 사용

h(Heading) : 제목을 의미하며 숫자(1 ~ 6)가 작을 수록 더 중요한 제목을 정의, 단일 글자가 아니라 블록 요소

p(Paragraph) : 문장을 의미하는 요소, 문장을 다루므로 블록요소

ul(Unordered List) : 순서가 필요 없는 목록을 의미

ol(Ordered List) : 순서가 필요한 목록을 의미

인라인 요소

텍스트 처럼 취급 (span, small, a, bog....)

특징

한 줄에 여러개 배치 가능
기본 너비값은 콘텐츠 너비값(텍스트가 들어간 양만큼 차지)
크기 값을 가질 수 없음
상, 하 마진은 가질 수 없음

span : 대표적인 인라인요소, 아무것도 나타내지 않고, 콘텐츠 영역을 설정하는 용도로 사용 (div와 차이점은 블록요소가 아닌 인라인 요소인 점)

인라인 블록 요소

인라인 요소와 블록 요소 모두의 특징을 가짐 (img, input, button)

특징

인라인 요소의 특징과 블록 요소의 특징을 같이가짐
한 줄에 여러 개 배치 가능
크기 값을 가짐
상, 하, 좌, 우 마진을 다 가짐

img (image) : 이미지를 삽입하는 태그로 필수 속성인 src(source)라는 속성으로 이미지 경로 명시, 필수 속성인 alternate속성은 출력되지 않은 이미지에게 설명을 명시

a (anchor) : 하이퍼 링크를 지정하는 요소, href(Hypertext Reference) 라는 속성을 통해 특정 텍스트를 선택하면, 이동할 경로를 명확히 명시

br (Break) : 줄 바꿈 요소 (실제 화면을 구현할 경우 사용하지 않음)

input Type

사용자가 데이터를 입력하는 요소, type 속성으로 입력 받을 데이터의 타입을 정할 수 있다.

name 속성은 html에서 jsp로 값을 가져올 때 사용
value 속성은 input의 초기값을 명시
placeholder 속성은 input 입력창에 텍스트를 띄움
disabled 속성은 input창을 비활성화

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>input tag type 종류</title>
  </head>
  <body>
    text <input type="text" />
    hidden <input type="hidden" name="Autokey" value="zxc123" />
    password <input type="password" name="upw" />
    email <input type="email" />
    number <input type="number" />
    date <input type="date" />
    time <input type="time" />
    radio
    사용자 에게 체크 여부를 해당 그룹에서 1개만 입력받는다
    <input type="radio" name="memberGender" value="여" />여자
    <input type="radio" name="memberGender" value="남" />남자
    checkbox
    사용자에게 여러개 체크 여부를 입력 받는다.
    <input type="checkbox" name="userAddr" value="전주" />전주
    <input type="checkbox" name="userAddr" value="광주" />광주
    <input type="checkbox" name="userAddr" value="군산" checked />군산
    <!-- checked는 초기값이 체크된 것 -->

    label
    label은 input tag가 무었을 말하는지 명시한다.
    사용방법
    1. input tag 감싸기
    <label> <input type="checkbox" name="userAddr" id="전주" /> 전주 </label>
    2. input tag id 값과 label for 매칭
    <label for="san">군산2</label>
    <input type="checkbox" name="userAddr" value="군산" id="san" />군산

    select
    - 사용자가 여러 데이터 중 1개를 선택할 수 있다.
    - radio와 다르게 드롭 다운 기능을 제공
    - option tag와 함께 사용
    - select는 name속성을 가질 수 있다. but value 속성은 가질 수 없다.
    - oprion은 value 속성을 가질 수 있다.

    <select name="birthplace">
      <option>::출생지를 입력해 주세요.::</option>
      <option value="전주">전주</option>
      <option value="서울">서울</option>
    </select>

    textarea
    장문의 텍스트를 입력 받을 때 사용
    <textarea name="" id="" cols="30" rows="5">
	  있음으로써 같이, 관현악이며, 봄바람을 청춘에서만 이상 거친 품으며, 
      약동하다. 없으면, 소금이라 피어나기 그리하였는가? 
      그림자는 때까지 천고에 피어나기 대한 동력은 것이다. 
      이성은 전인 설산에서 그들은 피다. 때까지 갑 소담스러운 있다. 
      뭇 주는 많이 얼마나 두기 청춘 못할 사랑의 것이다.

	  피는 못할 그들의 발휘하기 천지는 더운지라 곳이 같이, 
      쓸쓸하랴? 무엇을 동력은 이 아름다우냐? 
      오아이스도 듣기만 인생의 말이다. 
      못하다 보이는 그들의 얼음 바로 위하여서, 힘있다. 피가 품에 이성은 황금시대다.
    </textarea>
  </body>
</html>

table

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>테이블 요소, table</title>
  </head>
  <body>
    테이블 행과 열로 구성된 표를 만들 떄 사용한다. 
    thead는 표 상단을 담당합니다.
    th는 표 상단의 칸을 나타낼 때 사용합니다. 
    tbody는 표의 본문을 나타낼 때 사용합니다. 
    tr(table row) 테이블의 행(줄)을 나타낼 떄 사용합니다. 
    td(table date) 한 칸을 표현합니다.(cell date)
    
    <table border="2px solid">
      <thead>
        <th>번호</th>
        <th>이름</th>
        <th>주소</th>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>james</td>
          <td>전주</td>
        </tr>
        <tr>
          <td>2</td>
          <td>jack</td>
          <td>군산</td>
        </tr>
        <tr>
          <td>3</td>
          <td>kim</td>
          <td>광주</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

행 병합

표에 보여지는 셀이 세로로 합쳐지기 때문에 정보를 옆으로(가로) 읽을 수 있다

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>테이블 요소, table</title>
  </head>
  <body>
    <br />
    <table border="2px solid">
      <thead>
        <th>번호</th>
        <th>제목</th>
        <th>이름</th>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>자바</td>
          <td rowspan="3">이순신</td> <!-- 행병합 -->
        </tr>
        <tr>
          <td>2</td>
          <td>DB</td>
        </tr>
        <tr>
          <td>3</td>
          <td>HTML</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

열병합

정보를 가로로 합쳐서 세로로 읽을 수 있습니다.

   <table border="2">
      <thead>
        <th>이름</th>
        <th colspan="2">나라와 도시</th> <!-- 열 병합 -->
      </thead>
      <tbody>
        <tr>
          <td>박철수</td>
          <td rowspan="3">대한민국</td>
          <td>서울</td>
        </tr>
        <tr>
          <td>김동민</td>
          <td>대전</td>
        </tr>
        <tr>
          <td>김하나</td>
          <td>전주</td>
        </tr>
      </tbody>
    </table>

button

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>form</title>
  </head>
  <body>
    form은 서버에 데이터를 전송하기 위한 태그입니다. 
    사용자에게 데이터를 입력 받아 서버에 작성된 데이터를 전송할 수 있습니다. 
    예시 : 로그인 폼, 회원가입
    
    폼 속성 
    action : 폼 데이터가 전송될 경로 
    method : 폼 데이터가 전달 방식(POST, GET) 
    POST : 데이터를 감춰서 서버에 전송 
    GET : 호출되는 주소에 값을 등록해서 전송 

    button 
    이벤트를 발동시키는 태그 

    Type 
    1. button : 클릭이 가능한 버튼임을 명시 
    2. submit : form 데이터를 전송하는 버튼 
    3. reset : form date를 초기값으로 리셋

    <button type="submit">전송</button>
    <button type="button">버튼</button>
    <button type="button" onclick="alert('버튼 클릭')">버튼</button>
  </body>
</html>

Form

    <form action=".....경로......" method="post"> <!-- method는 전송 방식 -->
      아이디 : <input type="text" name="userID" /> <br />
      비밀번호 : <input type="text" name="userPW" />
      <button type="submit">가입</button> <!-- submit으로 전송 -->
    </form>

POST : 전송 값들을 감추어서 전송

GET : 전송 값들을 감추지 않고 전송

'코딩 공부 > web & Java' 카테고리의 다른 글

웹 표준, 웹 접근성과 웹 호환성 (0)	2022.09.07
시멘틱 태그 (0)	2022.09.07
[JAVA] 변수관련 (0)	2022.09.05
데이터 베이스 설계 (0)	2022.09.02
스키마 (0)	2022.09.02

HTML(Hyper Text Markup Language)관련