ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • HTML(2) Tag
      Frontend/HTML 2023. 6. 1. 22:51

      1)HTML Tag 소개

      신뢰도 높은 사이트 3개

      2)제목과 단락요소

      h1 ~ h6 : Heading Tag. 제목 Tag. 문서 내 제목을 표현, 숫자가 클수록 작은 크기. 일반 텍스트보다 크고 굵게 표시되어 강조 효과를 볼 수 있다.

      <p>: Paragraph Tag. 단락 Tag. p Tag 단락을 표현. p Tag로 묶인 각 단락은 자동 개행되어 표시된다.

      <br>: Linebreak. 개행을 표현할 때 사용하는 빈 Tag. 특히 p Tag 내부에서 개행이 필요할 사용하면 좋다.

      3)텍스트를 꾸며주는 요소

      Inline Text

      <b>: Bold Tag.

      <i>: Italic Tag. HTML5 에서 i는 단순 표현용 Tag에서 의미를 가지는 Tag로 변경됨. (Q. 단순 표현용 Tag와 의미를 가지는 Tag 의 차이는? 시멘틱마크업을 할 수 있는지 없는지 차이)

      <u>: Underline Tag.

      <s>: Strike Tag. 중간선을 표현

      4)앵커 태그 (Anchor Tag)

      <a> a Tag라고도 부르는 빈 Tag.

      <a href="www.naver.com" target="_blank">
<a href="#top"> <!--top은 내부 페이지에 존재하는 다른 요소의 id-->

      속성

      • href: Hyper Reference. 필수 속성으로 항상 반드시 사용되어야 함. 실제로 이동하게 목적지를 값으로 갖게 됨. ex) URL(외부링크), #{요소의id}(내부링크)
      • target: 링크된 리소스를 어디에 표시할 지 나타내는 속성. 정해진 다음의 값들을 갖음. “_self” : default 값, 현재 보고 있는 페이지 / “_blank” : 새 탭을 열어 표시 / 등등…

      스크롤 위치 고정

      <a id="{value}"></a> 를 HTML 파일에 추가한 뒤 URL 뒤에 "#{value}" 를 붙이면 해당 value를 id로 갖는 앵커 태그 위치로 스크롤이 이동한다.

      Tip: 장고를 활용할 경우 템플릿 파일에서 for문을 이용하면 자동으로 원하는 요소 근처에 앵커 태그를 삽입할 수 있다.

      장고에서는 resolve_url 함수를 제공하는데(from django.shorcuts import resolve_url) 해당 함수는 실제 호출되는 URL 문자열을 반환한다. ex) resolve_url("pybo:detail", question_id=question_id) -> "pybo:detail"에 해당하는 URL "localhost:8000/pybo/detail" 과 해당 urlpath가 요구하는 question_id 값이 합쳐진 "localhost:8000/pybo/detail/{question_id}" 문자열이 반환된다.

      이 함수를 이용하여 redirect 함수에 앵커태그를 포함한 URL을 넘겨주면 원하는 시점에 원하는 위치로 스크롤된 화면을 출력할 수 있다. => redirect(f"{resolve_url("pybo:detail", question_id=question_id)}#answer_{answer.id}")

      5) 의미가 없는 컨테이너 요소

      <div> : block-level, 한 줄 통째로 표시

      <span> : inline-level, 줄 내부의 각 요소별로 표시

      6) 리스트 요소

      <ul>: Unordered list. 순서가 없는 리스트.

      <ol>: Ordered list. 순서가 있는 리스트 자동으로 번호가 매겨져 표시됨.

      <li>: <ul>이나 <ol> Tag 내부에 사용되는 Tag. 각 요소를 <li>로 감싸면 자동으로 리스트로 나열되어 표현된다.

      <dl>: Definition/Description list. 내부에 <dt>/<dd> 를 갖는다. <dt>는 정의할 대상, <dd>는 대상을 정의하는 설명.

      7) 이미지

      <img> 빈 태그

      속성

      • src: img의 필수 속성. 그리려는 이미지의 위치를 값으로 갖는다. 상대경로와 절대경로 모두 가능. URL은 절대경로에 속한다.
      • alt: 그리고자하는 이미지에 대한 설명. 이미지 대체 텍스트(이미지를 텍스트로 표현해야 할 때 사용됨.)
      • width/height: 고정된 크기를 갖는 이미지일 때 사용. 둘 중 하나만 선언하면 남은 하나는 원본 이미지 크기의 비율을 유지하여 자동 조절됨.

      .gif: 256색만 지원. 투명 지원.

      .jpg: 좀 더 선명한 색상 지원, 투명 비지원.

      .png: 좀 더 선명, 투명과 반투명 지원.

      8) 테이블 요소1, 2

      <table>

      <caption>

      <thead> / <tbody>/<tfoot>

      <tr>, <th>/<td>

      속성

      colspan / rowspan

      표에 선 그릴 때 : CSS

      <head>
	<style media="screen">
      th, td{ border: 1px solid; width: 50px; height: 20px}
  </style>
</head>

      9) 폼 요소1 ~ 3

      사용자로부터 입력 값을 받을 때 입력 방식을 정의

      <input> : 빈 Tag

      속성

      • type : 값 - “text”, “password”, “radio”, “checkbox”, “file”, “submit”, “reset”, “button”, “image” 등…
      • name: type 의 값이 “radio” 이거나 “checkbox”인 여러 요소를 하나의 그룹으로 묶을 때 사용. 같은 값을 갖는 요소끼리 같은 그룹
      • placeholder: type이 “text”나 “password”일 때 사용자가 입력하기 전 표시되는 텍스트를 선언한다. 사용자가 값을 입력하면 사라짐.
      • checked: boolean 속성. 있으면 true, 없으면 false, “radio”와 “checkbox”에서 사용 가능.
      • “submit”/”reset” : 페이지의 값을 Server로 전송하거나(submit) 초기화(reset)하는 기능 제공. 정상동작하려면 <form> Tag가 필요
      • value : 특정 type에서 버튼의 내용을 정할 수 있는 속성
      • “image” : 이미지를 표시. <img>Tag에서 사용가능한 속성을 사용할 수 있음. src와 alt는 필수

       

      <select>: 여러 요소 중 하나를 선택할 수 있게 하는 Tag

       

      <option>: <select> 내부에 사용되는 Tag. 선택 가능한 여러 요소를 나열하는 데 사용

      속성

      • selected: Boolean 속성. 기본으로 선택될 option에 표시

       

      <textarea>: 두 줄 이상의 텍스트를 입력할 수 있는 박스 제공하는 Tag

      속성

      • cols/rows : 영문 기준으로 가로, 세로 길이를 지정할 수 있게 함.

       

      <button>: <input type=”button”> 보다 Style 측면에서 더 자유로운 Tag.

      속성

      • type : “submit” / “reset”/ “button”

      10) 폼 요소4

      <label> : <input>과 텍스트를 묶어주는 역할을 하는 Tag. <label>Tag로 감싸진 텍스트를 클릭하면 마치 <input> 요소를 직접 클릭한 것과 동일한 효과를 볼 수 있다.

      속성

      • for: 함께 묶으려는 대상 <input> 의 id를 값으로 갖는다.

       

      <fieldset>: 폼 요소들을 그룹화하는 Tag.

      <legend>: 사용한다면 <fieldset> 내부에서 최상단에 위치해야 하는 Tag.(필수 Tag 아님.) 그룹의 제목을 정의함.

      <form>: 폼 요소를 그룹화하여 서버에 전송하는 Tag. 폼 요소를 가장 크게 감싸는 Tag. 데이터를 다루는 특징때문에 서버 개발자가 주로 관리.

      속성

      • action: 폼 데이터를 처리할 서버의 주소
      • method: 데이터 전송 방식 결정. get/post. get은 주소창에 파라미터 형태로 붙어 데이터가 노출되므로 get보다는 post가 보안에 탁월

       

      참고 자료

      비전공자를 위한 HTML/CSS (Boostcourse)

      저작자표시 비영리 변경금지

      'Frontend > HTML' 카테고리의 다른 글

      HTML(3) 콘텐츠모델, 시멘틱마크업,블록인라인  (0) 2023.07.11
      HTML(1) HTML 이해하기  (0) 2023.05.29

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바