[부스트코스]비전공자를 위한 HTML/CSS 2. HTML 태그

21106 단어 TIL부스트코스비전공자를 위한 HTML/CSSTIL

제목과 단락요소

  • 제목 태그(Heading Tag)
    • 문서 내 제목을 표현할 때 사용
    • <h1>부터 <h6>까지 있고 숫자가 올라갈수록 더 낮은 수준의 소제목을 나타냄
    • 일반 텍스트보다 더 굵고 크게 강조되는 스타일 적용
  • 단락 태그(Paragraph Tag)
    • <p>를 사용해서 단락으로 구분
  • Linebreak Tag
    • <p> 내부에서 강제로 개행을 하기 위해 <br> 이용
    • 닫기 태그와 내용이 존재하지 않는 빈 태그

텍스트 표현 태그

  • <b> : bold tag, 글자를 굵게 표현하는 태그
  • <i> : italic tag, 글자를 기울여서 표현하는 태그
  • <u> : underline tag, 글자의 밑줄을 표현하는 태그
  • <s> : strike tag, 글자의 중간선을 표현하는 태그

앵커 요소

  • <a> : anchor tag, 다른 페이지로 이동하거나 현재 페이지 내에서 특정 위치로 초점 이동 가능
    • href 속성
      • 링크의 목적지가 되는 URL
    • target 속성
      • 링크된 리소스를 어디에 표시할지 나타내는 속성
      • _self : 현재 화면에 표시한다는 의미, target 속성이 선언되지 않아도 기본적으로 self와 같이 동작
      • _blank : 새로운 창에 표시한다는 의미, 외부페이지가 나타나게끔 하는 속성
      • _parent, _top : 프레임이라는 특정 조건에서만 동작
    • 내부 링크
      • 페이지 내부의 특정 요소로 초점 이동 가능
      • href 속성값에 #을 쓰고 그 뒤에 페이지 내에서 이동하고자 하는 요소의 id 속성값을 적으면 됨
      • 웹페이지에 화면 하단의 'top'이나 '맨 위로 이동하기' 버튼이 이에 해당

의미가 없는 컨테이너 요소

  • 태그 자체에 아무 의미가 없으며 단순히 요소들을 묶기 위해 사용되는 태그
  • 스타일을 주거나 서버에 보내는 데이터를 담기위한 용도로 사용
  • <div> : 블록 레벨 태그, 기본적으로 한 줄을 생성해서 내용 표현
  • <span> : 인라인 레벨 태그, 블록 레벨 요소의 한 줄 안에서 표현되는 요소

리스트 요소

  • <ul> (unordered list)
    • 순서가 없는 리스트 표현
    • <ul>내부에서 <il>을 이용해 각 항목을 나타냄
  • <ol> (ordered list)
    • 순서가 있는 리스트 표현
    • <ol>내부에서 <il>을 이용해 각 항목을 나타냄
  • <dl> (definition/description list)
    • 용어와 설명이 하나의 세트로 항목을 이루고 있는 구조
    • <dt> : 용어를 나타내는 태그
    • <dd> : 용어에 대한 정의 또는 설명을 나타내는 태그, 용어 하나에 여러 정의 가능(<dd> 여러개 쓰는 것 가능)

이미지 요소

  • <img> : 문서에 이미지를 삽입하는 태그, 닫는 태그가 없는 빈 태그
    • src 속성
      • <img>의 필수 속성
      • 이미지의 경로를 나타내는 속성
    • alt 속성
      • <img>의 필수 속성
      • 이미지의 대체 텍스트를 나타내는 속성
      • 웹 접근성 측면에서 중요한 속성
    • width/height 속성
      • 이미지의 가로/세로 크기를 나타내는 속성
      • 값의 단위를 적지 않아도 되며, 자동으로 픽셀 단위로 계산
      • 이 속성이 없으면 이미지는 원본 크기대로 노출됨
      • 둘 중 하나만 선언하면 나머지 한 속성은 선언한 속성의 크기에 맞춰 자동으로 비율에 맞게 변경됨
      • 두 속성 모두 선언하면 비율과 무관하게 선언한 크기대로 변경
    • 상대경로와 절대경로
      • 상대경로 : 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로 ('./'는 페이지가 있는 현재 폴더를 나타냄)
      • 절대경로 : 실제 그 이미지가 위치한 곳의 전체 경로
    • 이미지 파일 형식
      • gif : 제한적인 색 사용, 용량이 적으며 투명이미지와 애니메이션 이미지 지원
      • jpg : 사진이나 일반적인 그림에 쓰이고 높은 압축률과 자연스러운 색상 표현을 지원하나 투명이미지를 지원하지 않음
      • png : 이미지 손실이 적으며 투명과 반투명이미지를 모두 지원

테이블 요소

  • 표 구성 요소
    • <table> : 표를 나타내는 태그
    • <tr> : 행을 나타내는 태그
    • <th> : 제목 셀을 나타내는 태그
    • <td> : 셀을 나타내는 태그
  • 표 구조와 관련된 태그
    • <caption> : 표 제목을 나타내는 태그
    • <thead> : 제목 행을 그룹화하는 태그
    • <tbody> : 본문 행을 그룹화하는 태그
    • <tfoot> : 바닥 행을 그룹화하는 태그
  • 기타
    • rowspan 속성 : rowspan="" 형식으로 쓰며 ""안에 들어간 숫자만큼 행을 병합(아래로 병합)
    • colspan 속성 : colspan="" 형식으로 쓰며 ""안의 숫자만큼 열을 병합(오른쪽으로 병합)

폼 요소

  • <input>

    • 서버에 데이터를 전달하기 위한 대표적인 폼 요소이고 내용이 없는 빈 요소, 주로 type속성으로 여러 종류의 입력 양식 표현
    • type="text" : 단순한 텍스트를 입력할 때 사용하며, placeholder=""를 이용해 ""안의 값을 미리 화면에 노출시켜 입력 양식 표현할 수 있음
    • type="password" : 암호와 같이 공개할 수 없는 내용을 입력할 때 사용
    • type="radio" : 중복 선택이 불가능한 라디오 버튼, name속성으로 그룹화할 수 있고 checked 속성으로 미리 체크가 되어 있는 항목을 표시할 수 있음
    • type="file" : 파일을 서버에 올릴 때 사용
    • type="submit/reset/image/button" : 클릭 가능한 버튼을 생성, submit은 form 값을 전송하고 reset은 form 값을 초기화하며 image는 이미지 값을 삽입하고 button은 아무 기능이 없음(커스텀 가능한 버튼)

  • <select>

    • 선택 목록 상자, 콤보박스
    • 선택지를 리스트 형태로 노출하고 그 중 하나 선택
    • <option>으로 항목을 나타내며 <selected>속성으로 이미 선택된 항목 표시 가능

  • <textarea>

    • 여러 줄의 텍스트를 입력하 때 사용
    • rows와 cols 속성을 이용해 세로, 가로 크기 조절 가능

  • <button>

    • type="submit/reset/button" : input 타입의 submit, rest, button와 같은 기능
    • 빈 태그가 아니며 내용을 직접 안에 넣을 수 있음

  • <label>

    • form 요소의 이름과 form 요소를 명시적으로 연결시켜주기 위해 사용
    • form 요소의 id 속성값과 <label>의 for 속성값을 같게 적어주어야 함
    • 이를 클릭했을 때 해당 form 요소를 클릭한 것처럼 동작

  • <fieldset>

    • 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용
    • <legend>는 <fieldset>의 자식 태그로 반드시 최상단에 위치해야 하고 폼 요소의 제목을 나타냄

  • <form>

    • 데이터를 묶어서 실제 서버로 전송해주는 역할을 하는 태그
    • action 속성 : 데이터를 처리하기 위한 서버의 주소
    • method 속성 : 데이터를 전송하는 방식을 지정, get/post 두 가지 방식이 존재하며 get은 주소창에 데이터가 노출되어 전송되고 post는 노출되지 않음

💻 코드 실습

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>form</title>
</head>
<body>
	<form action="">
		<h1>Form 관련 요소</h1>
		<fieldset>
			<legend>기본 정보</legend>
			<label for="userid">아이디 : </label> <input type="text" placeholder="영문으로만 써주세요" id="userid"><br>
			<label for="userpw">비밀번호 : </label> <input type="password" id="userpw"><br>
			성별 : <label for="male">남자</label> <input type="radio" name="gender" id="male" checked>, <label for="female">여자</label> <input type="radio" name="gender" id="female"><br>
		</fieldset>
		<fieldset>
			<legend>부가 정보</legend>
			취미 : 영화 감상 <input type="checkbox" name="hobby" checked>, 음악 감상 <input type="checkbox" name="hobby">, 독서 <input type="checkbox" name="hobby"><br>
			프로필 사진 업로드 : <input type="file"><br>
			사는 지역 : <select>
				<option>서울</option>
				<option>경기</option>
				<option>강원</option>
				<option selected>제주</option>
			</select><br>
			자기소개 : <textarea cols="30" rows="5" placeholder="자기소개는 짧게 해주세요."></textarea><br>
			<button type="submit">전송</button>
			<button type="reset">취소</button>
		</fieldset>
	</form>
</body>
</html>

코드 실행시 아래와 같이 나타남⬇

출처: https://www.boostcourse.org/cs120/joinLectures/33588?isDesc=false

미로 - 오른손법칙 개선
front-mockup(5)ul user agent style

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage