HTML 기본 개념 정리

devlsn96·2024년 8월 17일
0

프론트엔드 기본 개념 정리

목록 보기
1/11

1. HTML

: 웹사이트를 만들어주는 마크업 언어

📎 HTML의 의미

  • HT : HyperText, 문서와 문서가 링크로
    연결되어 있다.
  • M : Markup, 태그로 이뤄져 있는
  • L : Language, 언어

📎 W3스쿨즈

📎 주석
<!-- 한줄 --> /* 여러줄 */

형식을 나타내는 태그

  • HTML : <abbr> : title속성으로 설명
  • HTML : <b> : **볼드체** 강조
  • 밑줄 : <ins> : 밑줄
  • 취소선 : <del> : 취소선
  • 마크 : <mark> : 마크
  • italic : <i> :이탤릭체
  • 쿼터 표현 : <q> : 쿼터 표현
  • X2, X2 :<sub> 아래 첨자, <sup> : 위 첨자

Style 에 자주 쓰이는 태그

  • <details> <summary> : 요약(summary)/상세보기(details) 메뉴를 만들 때
  • dialog : 알림 팝업 같은 효과... (open 속성으로)

favicon : 이미지를 브라우저 탭에 표시해 주는 이미지

  • `<link rel=icon '의 속성으로 지정

iframe 다른 페이지를 불러오는 태그

<iframe width="" height="" src="" title="제목"></iframe>

2. 글의 구성하는 태그 종류

dl Tag

dt : 항목의 title
dd : dt 하위의 리스트

2-1. 제목 태그

  • <hn> </hn> : n의 크기가 커질수록 글자 작아짐, (n은 1~6까지)

제목에 사용할만한 inline방식의 태그들

  • <strong> </strong> : 강조태그
  • <a> </a> : 랑크태그, href속성으로 url링크 연결 , target속성으로 위치이동 제어 (_parent, _self(기본), _blank)

2-2. 목록 태그

  • <ol> </ol>
    OrderedList : 일련번호 표시 (1, 2, 3, ...)
  • <ul> </ul>
    UnorderedList : 순서없는 목록 (점(.)으로 구분)
  • <li> </li>
    목록의 각 항목을 명시

2-3. 문서 구조를 표현하는 태그

  • 문서의 구조를 표현하는 <div>태그

  • 각 영역의 구분은 <div>태그에 고유한 id값을 부여하여 처리

  • id 는 페이지 내에서 유일한 값

  • <p>
    하나의 문단을 구성하고자 할 때 사용, 본문을 정의하기 위한 태그

문단을 구분한 선을 나타내는 태그 <hr/>

  • 직선을 표시, 레이아웃의 영역을 나누는 과정에서 사용
  • 닫는 태그(/) 없어도 렌더링은 가능

3. HTML 안에서의 특수문자

  • &lt; : <
  • &gt : >
  • &amp : &
  • &copy : (c)

4. 이미지 표시하는 태그

  • 이미지를 표시하기 위한 태그
    <img src="이미지 파일의 경로" alt="이미지 대체텍스트" title="이미지 설명" width="가로px" height="세로px"/>

    절대 경로와 상대경로

    • 경로는 슬래시(/)로 구분하고 절대경로나 상대경로 두가지 방식으로 표현할 수 있다.
      1. 상대경로 : "./img/batman.png"는 현재위치기준, "../day02/img/batman.png"는 상위폴더 기준이다.
      2. 절대경로 : C드라이브의 디렉토리 경로 기준으로 작성한다.

  • 요소에 대한 설명을 할때는 <figure>태그를 사용하여 이미지를 감싸주어 이미지의 범위를 지정하여 <figcaption>태그로 감싸준 이미지의 설명을 담아줄 수 있다.

    • <figure> </figure> : 이미지를 감싸기 위한 범위를 지정하는 태그
    • <figcaption> </figcaption> : 이미지의 설명을 담는 태그
<figure>
	<img src="./img2/spring.jpg" title="봄"/>
    <img src="./img2/summer.jpg" title="여름"/>
    <img src="./img2/autumn.jpg" title="가을"/>
    <img src="./img2/winter.jpg" title="겨울"/>
   	<figcaption>
    	<strong>우리나라의 사계절</strong>
    	- 새싹이 피어나는 이른 아침, 선유도 공원의 푸른 여름, 추수가 끝난 시골 풍경, 눈 쌓인 공원
    </figcaption>
</figure>

5. 테이블 만들기

  • <table> </table> : 테이블 생성
  • <caption> : 테이블제목
  • <colgroup> >> <col> : 각항목 스타일
  • <tr> </tr> : 행을 정의
  • <td> </td> : 열을 정의
  • <th></th> : 제목을 의미, 테이블에서 볼드 처리, 가운데정렬
  • <thead> </thead> : 테이블에서의 head부분을 명시한다.
  • <tbody> </tbody> : 테이블에서의 본문 (body)부분 명시한다.
  • <tfoot> </tfoot> : 표 상 에서 가장 아래쪽 푸터부분을 명시한다.

테이블의 속성

  • border속성 : 테이블 두께 설정 <table border="2">
  • align속성 : <table>, <tr>, <td> 태그 내 요소의 정렬을 의미한다. (left, center, right의 세부 속성 정보가 있다.)

테이블 행과 열 병합하기

  • 행을 병합하기 위한 rowspan
    • rowspan은 현재 열이 아래로 몇 행을 병합할지 결정하는 속성
    • rowsapn="3" 을 지정했다면 그 열은 3줄을 병합하게 된다.
    • 그리고 2,3번째 행은 열을 정의해서는 안된다.
  • 열을 병합하기 위한 colspan
    • 가로로 열을 몇칸 병합할 것인지 설정하는 속성이다.
      colspan = "(옆으로 지정할 행의 수)"

6. 입력양식

6-1. 입력양식 작성을 위한 태그

  • 입력양식을 표시하는 <input /> 태그가 있다.
<input name="이름(영어)" id="식별자(영어)" value="기본값" maxvalue="value의 최대길이, 숫자" placeholder="입력 내용" maxlength="최대입력길이"/>

  • name 속성과 id속성

    • name과 id 값은 같은 값으로 둔다.
    • name 속성은 웹 프로그램과 연계되는 속성으로 한 페이지 안에서 고유한 값을 명시해야 한다.
    • id 속성은 해당 페이지에서 그 요소를 식별하기 위한 값으로 고유한 값을 명시해야 한다.

  • <fieldset> </fieldset> : 입력내용에 대한 그룹을 명시하는 부분이다.

  • <legend> </legend> : 그 그룹의 제목을 명시하는 부분이다.

  • <label> </label> : 입력요소 앞이나 뒤에서 표시되는 제목을 구성한다.

    • for속성 : input요소에 부여한 동일한 id값의 <label> 태그로 감싸면 된다.
    • <label> 태그로 감싸는 것도 가능하다.
    • 단순 텍스트로 처리하는 방법으로 제목을 두는 것과 <label> 태그의 차이는 태그로 처리시에 해당 텍스트만으로 입력박스의 입력이 가능하다. (사용자 편의상 필요)

  • <textarea> </textarea> : 장문을 입력하기위한 요소

  • <form> </form> : 태그 안의 입력양식 전체를 관리하는 태그

    • action="" 속성 : 서버에서 해당 경로로 페이지를 이동시켜준다.
    • <form action="http://localhost/user.jsp"> 의 주소값으로 페이지가 이동한다.
    • 페이지 이동후, ? 다음의 주소값에서 input태그의 name값=입력값 의 형태로 전송되고&로 입력태그를 구분한다.

6-2. 입력양식의 종류

  • <input>태그에는 type속성에 표현되는 디양한 종류의 입력양식이 있다.
  • text : 일반적인 텍스트를 입력하는 형태
    - required 속성 : 서버로 전송시 필수적인 값, 미입력시 입력창 표시
  • password : 패스워드처럼 입력되는 형태
  • hidden : 사용자가 알 필요는 없으나, 개발자가 다음 페이지로 전달하기에 용이한 입력요소가 있는 경우 이 입력요소를 사용한다. (value값에 데이터 담아 이용한다.)
  • submit : form태그 안의 요소를 서버를 통해 전송, 제출하는 버튼의 기능을 한다.
  • reset : 입력값을 초기화하는 기능이다.
  • 기타 입력양식으로 color, date, datetime-local, image(이미지형태 전송기능), number, range, search, time, url, month, week 등이 있다.

💡 button type

  • 버튼 형태만 존재할 때는, 두 가지 방식이다.
    • <input type="button" value="버튼이름"/> :
    • <button type="button">버튼이름</button> : 버튼이름
  • radio 버튼 : 중복 불가한 속성의 버튼, 동일한 name 속성으로 그룹핑해서 표현한다.
    • checked속성 : 기본적으로 체크된 상태를 의미
붉은색 : <input type="radio" name="color3" value="red" checked/>
검은색 : <input type="radio" name="color3" value="black"/>
파란색 : <input type="radio" name="color3" value="blue"/>
  • checkbox 버튼 : 다중선택 기능이 가능한 속성, 동일한 name 속성으로 그룹핑해서 표현한다.
    • checked속성 : 기본적으로 체크된 상태를 의미
95 : <input type="checkbox" name="size" value="95"/>
100 : <input type="checkbox" name="size" value="100" checked/>
105 : <input type="checkbox" name="size" value="105" checked/>
  • 드롭박스 선택옵션 : 옵션이 너무 많은 때, <select> </select> 하위에 <option> </option> 으로 드롭박스 형태로 배열한다.
<select name="color">
    <option value="red">붉은색</option>
    <option value="black">검은색</option>
	<option value="blue">파란색</option>
</select>
  • file : 파일선택하는 입력박스
    • 단, 파일요소가 사용될 경우에는 반드시 form 태그에 enctype="multipart/format-data" 속성이 명시되어야 한다.
    • html5에서 input 태그를 통해 파일을 선택하여 서버로 전송할 때는 반드시 위의 form태그 속성이 명시되어야한다.

참고 속성

  • readonly속성 : 수정불가능한 읽기 전용의 옵션의 텍스트만 입력하고 싶을 때의 속성 <input type="text" readonly/> (우편번호처럼 기존의 필요한 데이터만 가져올때)
  • disabled속성 : 별도의 입력은 불가하게 하는 속성 (더 이상의 입력데이터가 불필요)

7. 의미론적 태그


🎁 semantic 태그
: 문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야 한다. 특히 HTML5에서는 웹페이지에서 통상 많이 사용하는 구조에 의미를 분명히 부여하기 위해서 의미론적 태그를 새롭게 정의하고 있다.

7-1. SEO(Search Engin Optimization)

  • 검색을 최적화 하기 위해서 우리가 제목, 부제목, 시멘틱 태그를 잘 활용한다면
    특정 키워드로 검색했을 때, 내가 만든 웹사이트가 검색창에 노출될 수 있다

7-2. 유지 보수성

  • 단순히 div 태그로만 모든 구조를 짜는것보다 더 한눈에 알아볼 수 있기 때문에, 다른 개발자들이 코드를 유지보수하기가 더 편해진다.
<!--헤더부분-->
<header>
	<h1>HTML</h1>
</header>
<!--메뉴부분-->
<nav>
	<ol>
		<li>기술소개</li>
        <li>기본문법</li>
        <li>하이퍼텍스트와 속성</li>
        <li>리스트와 태그의 중첩</li>
    </ol>
</nav>
<!--일반적 문서의 영역-->
<section>
	<!--본문내용-->
	<article>
    	<h2>선행학습</h2>
    	HTML 태그사용법
    </article>
    <article>
       <h2>선행학습</h2>
       HTML 태그사용법
    </article>
</section>
<!--푸터부분-->
<footer>
	<ul>
		<li><a href="private.html">개인정보 보호법</a></li>
        <li><a href="about.html">회사소개</a></li>
    </ul>
</footer>
profile
devlsn96
Quantum Jump to class for java….
다음 포스트

CSS 기본 개념 정리

0개의 댓글