HTML

기본 문법

  • 콘텐츠를 가지는 태그 : <div>콘텐츠</div>
  • 콘텐츠를 가지지 않는 태그 : <br /> 
  • 속성과 값 : <div title="제목">콘텐츠</div>
                              ↑ 속성  ↑ 값
    • 태그 안에 속성 = 값 형태
    • 전역 속성 : 모든 태그에서 쓸 수 있는 속성
  • 기본 문서 형태
    1. <!DOCTYPE html> : 문서 버전
    2. <html lang="ko"> : 문서 시작 선언 및 문서 기본 언어 설정
    3. <head> : 문서에 필요한 정보가 기입되는 곳(메타 데이터나 css 링크 등)
    4. <title> : 문서의 제목
    5. <body> : 실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳
     

<title> 에 입력한 값은 브라우저 탭에 노출된다.

주요 태그

  • <head>
    • 가질 수 있는 정보의 종류
      1. 타이틀
      2. 메타데이터
        1. 인코딩 정보 <meta charset="utf-8">
        2. 문서 설명 <meta name="description" content="이 문서는 실습 문서입니다">
        3. 문서 작성자 <meta name="author" content="out_of_anjoong"> 
      3. CSS, Script(JavaScript) 
        • CSS
          • 콘텐츠 방식
            <style> : . html 문서 안에서 스타일을 줄 때
          • 링크 방식
            <link rel="stylesheet" href="style.css"> : style.css를 연결해 해당 태그를 선언한 html 문서에 style.css에서 정의한 스타일 반영
        • <script>
          • 콘텐츠 방식
            <script>
                const hello = 'world'
                console.log(hello)
            </script>
          • 링크 방식
            <script src="script.js"></script>
  • <body>
    1. <body> : 사람 눈에 실제로 보이는 콘텐츠 영역
    2. 요소 종류
      • block (블록 레벨 요소)
        • 레고 블록처럼 차곡차곡 쌓이고 화면 너비가 꽉 차는 요소
        • 블록의 크기와 내/외부 여백을 지정할 수 있고 일반적으로 페이지의 구조적 요소를 나타낸다
        • 인라인 요소를 포함할 수 있으나, 인라인 요소는 블록 요소를 포함할 수 없다.
        • 대표적인 블록 레벨 요소 : <div>, <article>, <section>, <h1> .....
      • inline (인라인 레벨 요소)
        • 블록 요소 내에 포함되는 요소
        • 주로 문장, 단어 같은 작은 부분에 사용되며 한 줄에 나열된다.
        • 좌/우에 여백을 넣는 것만 허용된다.
        • 대표적인 인라인 레벨 요소 : <span>, <a>, <strong>
      • inline-block (인라인 블록 레벨 요소)
        • 글자처럼 취급되나, 블록의 성질을 가지는 요소
        • 블록과 마찬가지로 크기와 내/외부 여백을 지정할 수 있다.
        • CSS로 성질을 바꾼 것이기 때문에 의미상 인라인 레벨 요소이다.(<button>은 인라인 블록)
  • 레이아웃 태그
    • HTML5 부터 태그를 의미 있게 사용하기 위해 Semantic 태그를 사용하여 문서 구조를 작성
    • 단순히 구역을 나누기 위해 사용하는 <div>를 남발하지 않고 웹 문서가 담은 정보와 구조를 의미있게 전달하기 위해서
    • 시멘틱하게 마크업을 함으로써 검색엔진의 검색 순위에 가산점을 얻거나 홈페이지의 로딩 속도를 높임.
    • 주요 태그
      • <div> : 가장 흔히 사용되는 태그로 단순히 구역을 나누기 위한 태그
      • <header> : 블로그 글 제목, 작성일 등, 주요 정보를 담는 태그
      • <footer> : 페이지의 바닥줄에 사용되며 저작권 정보, 연락처 등, 부차적인 정보를 담는 태그
      • <main> : 페이지의 가장 큰 부분으로 사이트의 내용 즉, 주요 콘텐츠를 담는 태그
      • <section> : 콘텐츠의 구역을 나누는 태그.
      • <article> : 독립적인 문서를 전달하는 태그.
      • <aside> : 문서의 주요 내용에 간접적인 정보를 더하는 태그.
  • 콘텐츠 태그
    • 제목 태그(h1 ~ h6)
      • 문서 구획 제목을 나타내는 태그로 Heading(헤딩) 태그라고 부른다.
      • h1태그는 페이지 내에 한번만 사용되어야 하고 구획의 순서는 지켜져야 한다.(h2 다음 h1 X)
    • 단락 태그(p)
      • 문서에서 하나의 문단을 나타내는 태그.
    • <b>, <strong>
      • 콘텐츠를 굵은 글씨로 해준다.
      • <b>는 단순 태그, <strong>은 강조의 의미가 있는 시멘틱태그
    • <i>, <em>
      • 글씨의 기울기를 조절함.
      • <i>는 단순 태그, <em>은 강조의 의미를 가진 시멘틱태그
    • <u>
      • 글씨에 밑줄을 넣음.
      • 오타를 나타내는 용도로 사용 가능.
    • <s>, <del>
      • 글씨에 취소선을 추가
      • <s>는 단순 태그, <del>은 시멘틱 태그, <ins>태그를 함께 사용하면 제거된 텍스트 옆에 추가된 텍스트를 표현할 수 있음.
    • <br>
      • 단일 태그로 줄바꿈을 해줌.
    • <a>
      • 클릭하면 페이지를 이동할 수 있는 링크 요소를 만들 수 있다.
      • href 속성 : 이동하고자 하는 파일이나 url
      • target 속성 : 이동해야 할 링크를 새창으로 열기(_blank), 현재 창에서 이동(_self)
  • 멀티미디어
    • <img>
      • 문서 내에 이미지 삽입.
      • src 속성 : 이미지의 경로를 넣으면 이미지 출력
      • alt 속성 : 이미지 로딩에 이슈가 있을 시 대체 텍스트를 띄움
    • <figure>, <figcaption>
      • 하나의 독립적인 콘텐츠로 분리하고 그에 대한 설명을 넣어주는 태그
      • <figcaption> : 콘텐츠의 설명 혹은 범례를 추가, 제일 처음이나 아래에 추가하는 방식.
      • 보통 이미지, 비디오 등 문서의 흐름에 참조는 되지만 독립적으로 분리되어도 되는 내용을 담음. 
    •  <video>
      • 문서 내에 영상 삽입.
      • src 속성 : 영상의 경로를 넣으면 영상 출력
      • poster 속성 : 비디오가 로드되기 전에 포스터를 보여줄 수 있음.
      • 콘텐츠 영역에 <source> 태그를 사용하면 여러 타입의 비디오를 제공할 수 있음.
      • 콘텐츠 영역에 글자를 넣으면 해당 글자를 대체텍스트로 사용.
    • <audio>
      • 문서 내에 소리를 첨부하는 태그
      • src 속성 : 음성 파일의 경로를 넣으면 소리 츨력
      • <source> 태그를 사용하면 여러 확장자의 음성 파일 사용
      • controls 속성 : 재생/정지 버튼 등이 있는 컨트롤러를 띄움.
      • 콘텐츠 영역에 글자를 넣으면 해당 글자를 대체텍스트로 사용.
    • <svg>
      • 그래픽으로 만들어진 이미지
      • 일반 이미지와 다르게 수학 공식을 사용하여 그려지기 때문에 해상도의 영향을 받지 않아 확대/축소가 자유롭다.
      • 주로 크기를 자주 바꾸어야 하는 이미지에서 많이 사용(아이콘)
      • 해상도가 다양하게 변화하는 최근 기기들로 인해 아이콘 외에 로고 등 주요 이미지에도 사용됨.
      • <img> 태그 처럼 svg 파일을 불러올 수도 있고 태그를 그대로 사용할 수도 있다.
      • 코드로 이루어져 있기 때문에 스타일을 변경하거나 JS를 사용해 간단한 기능 추가도 가능하다.
  • 리스트
    • <ul>, <ol>, <li>
      • <ul> 
        • 정렬되지 않은 목록 태그
        • 기본 불릿 형식으로 랜더링 됨.
      • <ol>
        • 정렬된 목록 태그
        • 기분 숫자 형식으로 랜더링 됨.
      • <li> 
        • 목록의 아이템을 구성하는 태그. 다양한 태그를 포함할 수 있다.
        • <ul>, <ol>은 <li>태그만을 자식요소로 둘 수 있다.
    • <dl>, <dt>, <dd>
      • 설명 목록 태그
      • <dt>에 사용된 단어 혹은 내용의 설명을 <dd>에 작성.
      • 용어의 설명이나 key : value 형식으로 사용.
      •  <dt>를 여러개 작성하고 하나 이상의 <dd>로 여러 용어 설명 가능.
      • 하나의 <dt>를 여러개의 <dd>로 하나의 용어를 여러 의미로 설명 가능.
  • 표
    • <table>
      • 표를 만드는 태그
      • <table>에서 쓰이는 태그들
        • <th> : 열의 제목 태그
        • <tr> : 표의 행을 구분하는 태그
        • <td> : 표의 셀을 의미하는 태그
        • <thead> : 제목 그룹 태그, 해당 태그 안에 <th>를 넣음으로써 그룹을 지을 수 있다.
        • <tfoot> : 표 바닥글 요소 태그. 해당 태그 안에 <td>를 넣음으로 써 표의 바닥글 요소를 넣을 수 있다.
                          HTML4 에서는 <tfoot> <tbody> 순으로, HTML5에서는 <thead> <tbody> <tfoot> 순으로 작성.
        • <caption> : 표가 가진 데이터에 대한 설명을 하는 태그.
  • 아이프레임 <iframe>
    • 현재 문서 안에 다른 html 페이지를 삽입할 수 있는 태그
    • src 속성으로 html 문서의 경로 혹은 URL을 넣는 방식.
    • 외부 페이지를 불러올 수 있기 때문에 불러온 외부 페이지의 영향을 받을 수 있다.(보안 이슈로 iframe으로 다 불러올 수 있는 것은 아니다.)
    • name 속성을 지정하면 <a> 태그의 target을 사용하여 iframe 에서 문서 혹은 URL이 열리게 할 수 있다.
    • 콘텐츠를 가지는 태그이이며 <iframe>을 지원하지 않을 때 대체택스트 처럼 쓰인다.
  • 양식 태그
    • <form>
      • 정보를 제출하기 위한 태그
      • <input>, <select>, <textarea> 등을 가질 수 있다.
      • action 속성 : 정보가 제출되었을 때 페이지를 이동시킬 수 있음.
      • method 속성 : 정보가 제출될 때 처리 방식을 결정할 수 있다.(get, post)
    • <input>
      • 사용자에게 데이터를 입력 받을 수 있는 대화형 태그
      • type 속성 : 값에 따라 받을 수 있는 데이터의 유형이 달라진다.(default : text)
        • checkbox, radio, file, button, hidden 등 여러 타입이 있음.
      • value 속성 : 기본 내용을 입력해 둘 수 있음.
      • name 속성 : input의 이름을 지정
    • <button>
      • 클릭 가능한 버튼을 나타내는 태그
      • type="reset" : 버튼이 눌리면 입력한 양식이 모두 초기화된다.
      • type="submit" : form 양식을 제출할 수 있다. form 내 button의 기본 타입.
      • 자식 요소로 블록 레벨 태그는 사용하면 안된다.
      • disabled 속성도 가질 수 있다.
    • <label>
      • <input>, <textarea> 등 태그의 설명을 작성할 수 있는 태그
      • for 속성을 사용하여 연결하고자 하는 태그의 id 태그 값을 지정하면 연결됨.
      • 해당 태그 안에 <input> 을 넣으면 자동으로 for -> id 같은 처리를 해준다.
    • <select>
      • 옵션 메뉴를 제공하는 태그
      • <option> 태그를 사용해 옵션을 정의할 수 있다.
      • 첫번째 option은 이름이 된다.
      • value 속성을 선언하지 않은 경우 <option>의 콘텐츠가 기본값이 된다.
    • <textarea>
      • 여러 줄의 텍스트를 입력할 수 있는 태그
      • 콘텐츠를 넣으면 사용자가 입력하지 않아도 표시되는 기본값이 된다.
      • cols/rows 속성으로 기본 너비와 높이 지정 가능.
    • 알아두면 좋은 속성
      • readonly : 사용자가 수정할 수 없는 "읽기 전용" 으로 만듦.
      • required : form이 제출될 때 필수로 입력되어야 하는 양식 태그를 지정할 때 사용.
      • placeholder : input, textarea에 사용되며, 해당 입력란에 무엇을 입력할 지 부가 설명을 할 수 있다.
      • disabled : 요소가 비활성화 되며 값이 제출되지 않는다.
  • 참조 사이트

 

 

다음 시간에 계속....

'데브코스 > Week 3' 카테고리의 다른 글

Week 3 - 5  (0) 2024.04.05
Week 3 - 4  (0) 2024.04.04
Week 3 - 3  (0) 2024.04.03
Week 3 - 2  (0) 2024.04.02

+ Recent posts

티스토리툴바