SW Academy 2기 프론트엔드 과정

6 minute read

HTML 기초

1. HTML/CSS/JS

  • 강사 : 캐스퍼
  • HTML(Hypertext Markup Language) : 웹 브라우저가 이해할 수 있는 언어
  • CSS(Cascading Style Sheet) : 문서를 예쁘게 꾸미는 언어
  • JavaScript : 문서에 다양한 기능을 만들어주는 언어

2. Windows 환경 구축

  • Visual Studio Code 설치

  • Extensions

    extensions

  • vscode에서 ctrl + ,를 입력한 후 Compact folders 체크 해제

3. HTML 태그들

HTML

  1. HTML 기본 문법
    • 콘텐츠를 가지는 태그 <div> 콘텐츠 </div>
    • 콘텐츠를 가지지 않는 태그 <br />
    • 기본 작성법 <태그 이름>
  2. 속성과 값
    • <div 속성="값"> Content </div> 으로 적용
  3. HTML 기본 문서 ```html <!DOCTYPE>
문서 제목 안녕하세요!

```

  1. 부모요소와 자식요소

    parent_child

  2. 주석(Comment)

    • 개발자가 코드 내에 입력한 메모 <!-- 주석 내용 -->, 줄바꿈 가능, 주석 내의 주석은 불가능
  • <head> : 사람 눈에 보이지 않는 문서의 정보가 담기는 영역
    1. <title> : 문서의 제목, 탭에 표시
    2. <meta>
      1. charset : 인코딩 정보
      2. name : 문서 작성자
      3. content : 문서 설명
  • <style> : 문서에 적용될 스타일이 css 문법으로 기입되는 곳
  • <link rel="stylesheet" href="css 파일 경로"> : 외부 CSS 파일을 문서에 적용하는 태그
  • <script> : 문서에 적용될 기능이 js문법으로 기입되는 곳, <script src="js 파일 경로></script>로 외부 js파일 적용 가능

BODY

  • <body> : 사람 눈에 실제로 보이는 콘텐츠 영역
  • block(블록 레벨 요소)
    • 레고 블록처럼 차곡차곡 쌓이고 화면 너비가 꽉 차는 요소
    • 블록의 크기와 내/외부에 여백을 지정할 수 있고 일반적으로 페이지의 구조적 요소를 나타낸다.
    • 인라인 요소를 포함할 수 있으나, 인라인 요소에 포함될 수 없다.
    • ex) <div>, <article>, <section>, …
  • inline(인라인 레벨 요소)
    • 블록 요소 내에 포함되는 요소
    • 주로 문장, 단어 같은 작은 부분에서 사용되며 한 줄로 나열된다.
    • 좌/우에 여백을 넣는 것만 허용된다.
    • ex) <span>, <a>, <strong>
  • inline-block
    • 글자처럼 취급되나 block 태그의 성질을 가지는 요소
    • block과 마찬가지로 크기와 내/외부 여백을 지정할 수 있다.
    • CSS로 성질을 바꾼 것이기 때문에 의미상 인라인 레벨 요소이다.

레이아웃

  • <div> : 가장 흔히 사용되는 레이아웃 태그로 단순히 구역을 나누기 위한 태그
  • <header> : 블로그 글 제목, 작성일 등의 주요 정보를 담는 태그
  • <footer> : 페이지의 바닥줄에 사용되며 저작권, 연락처등의 부차적인 정보를 담는 태그
  • <main> : 페이지의 가장 큰 부분으로 사이트의 내용 즉, 주요 콘텐츠를 담는 태그
  • <section> : 콘텐츠의 구역을 나누는 태그로, 신문지에서 여러 기사가 각자의 구역으로 각자의 정보를 전달하는 의미와 비슷한 역할을 하는 태그
  • <article> : 블로그 포스트, 뉴스 기사와 같은 독립적인 문서를 전달하는 태그
  • <aside> : 문서의 주요 내용에 간접적인 정보를 전달하는 태그, 쇼핑몰에 따라다니는 “오늘 본 상품” 같은 걸로 사용됨.
  • 레이아웃 태그의 필요성
    • HTML5 부터 태그를 의미있게 사용하기 위해 Semantic(시멘틱) 태그를 사용하여 문서 구조를 작성
    • 단순히 의미 구분자인 <div>를 남발하지 않고 적절한 태그를 사용하여 웹 문서가 담은 정보와 구조를 의미있게 전달
    • 시멘틱하게 마크업 함으로써 검색 엔진의 검색 순위에 가산점을 얻거나 홈페이지의 로딩 속도를 높인다.

콘텐츠

  1. 제목 태그(h1~h6)
    • 문서 구획 제목을 나타내는 태그로 Heading Tag라고 부른다.
    • h1부터 h6까지 사용 가능.
    • h1 태그는 페이지 내에 “한번만” 사용되어야 하고 “구획의 순서”는 지켜져야 한다.
  2. 문단 태그
    • 문서에서 하나의 문단(paragraph)를 나타내는 문단이다.
    • 제목 태그와 함께 사용되기도 하고 단독으로 사용되기도 한다.
  3. 서식 태그
    • <b>, <strong>
      • 글씨의 두께를 조절할 수 있다.
      • <b> 태그는 의미를 가지지 않고 단순히 굵은 글씨로 “변경만” 해준다.
      • <strong> 태그는 굵은 글씨로 “변경 후 강조” 해준다..
    • <i>, <em>
      • 글씨의 기울기를 조절할 수 있다.
      • <em> 태그는 기울임과 내용의 “강조” 를 나타낸다.
    • <u>
      • 글씨에 밑줄을 넣고 주석을 가지는 단어임을 나타낼 수 있다.
      • CSS로 스타일링하여 빨같 밑줄을 넣어서 오타를 표현할 수 있다.
    • <s>, <del>
      • 글씨에 취소선을 추가할 수 있다.
      • <s> 태그는 단순히 시각적인 취소선만 추가되고 접근성 기기에 취소에 대한 안내는 하지 않는다.
      • <del> 태그는 문서에서 제거된 텍스트를 나타낼 수 있다.
      • <ins> 태그를 함께 사용하면 제거된 텍스트 옆에 추가된 텍스트를 표현할 수 있다.
    • <br>
      • 개행, 엔터
    • <hr>
      • 수평선
    • <a>
      • 클릭하면 페이지를 이동할 수 있는 링크 요소를 만들 수 있다.
      • href 속성을 사용해서 이동하고자 하는 파일 혹은 URL을 작성한다.
      • target 속성을 사용해서 이동해야할 링크를 새 창(_blank), 현재창(_self)등 원하는 target을 지정할 수 있다.
  4. 멀티미디어
    1. 이미지
      • <img>
        • 문서 내에 이미지를 넣는 태그
        • src : 이미지의 경로 속성
        • alt : 이미지의 대체 텍스트 속성
      • <figure>
        • 하나의 독립적인 콘텐츠로 분리하고 그에 대한 설명을 넣을 수 있는 태그
        • <figcaption> : 콘텐츠의 설명 혹은 범례를 추가할 수 있고 제일 처음이나 제일 아래에 추가해서 사용할 수 있다, 콘텐츠 태그가 여러 줄 있을 때 중간에 들어가면 안된다.
        • 보통 이미지를 넣는데 인용문, 비디오/오디오 등의 문서 흐름에 참조되지만 독립적으로 분리되어도 되는 내용을 담을 수 있다.
        • block 레벨 요소
    2. 비디오
      • 문서 내에 영상을 첨부할 수 있는 태그
      • inline 레벨 요소
        • src : 비디오의 경로 속성
        • poster : 비디오가 로드되기 전 포스터를 보여주는 속성
        • controls : 재생/정지 버튼 등이 있는 컨트롤러를 띄울 수 있다.
        • autoplay : 화면이 로드된 후에 자동으로 재생해주는 속성
        • <source> : 태그를 사용하면 여러 타입의 비디오를 제공할 수 있다.

      video태그

    3. 오디오
      • 문서 내에 소리를 첨부할 수 있는 태그
      • inline 레벨 요소
        • src : 오디오의 경로 속성
        • controls : 재생/정지 버튼 등이 있는 컨트롤러를 띄울 수 있다.
        • autoplay : 화면이 로드된 후에 자동으로 재생해주는 속성
        • <source> : 태그를 사용하면 여러 타입의 오디오를 제공할 수 있다.

      audio태그

    4. SVG(Scalable Vector Graphics)
      • 그래픽으로 만들어진 이미지
      • 일반 이미지와는 다르게 수학 공식을 사용하여 그려지기 때문에 화면 해상도의 영향을 받지 않아서 확대/축소가 자유롭다.
      • 코드로 이루어져 있기 때문에 스타일을 변경하거나 javascript 를 사용해 간단한 기능을 추가할 수도 있다.
  5. 리스트
    1. <ul>, <li>
      • 순서가 없는 목록
      • 기본 불릿 형식으로 목록을 그린다.
      • <li> 태그를 활용하여 목록을 구성할 수 있다.
    2. <ol>, <li>
      • 순서가 있는 목록
      • 기본 숫자 형식으로 목록을 그린다.
      • <li> 태그를 활용하여 목록을 구성할 수 있다.
    3. <dl>, <dt>, <dd>
      • <dl> : 설명 목록 태그, 이 안에 <dt>, <dd>를 사용한다.
      • <dt> 태그에 사용된 단어에 대한 설명을 <dd> 태그에 작성할 수 있다.
      • 주로 용어사전이나 “키-값”이 있는 쌍의 목록을 나타낼 때 사용한다.
      • 여러개의 <dt>에 대한 설명을 하나의 <dd> 태그에 할 수 있다.
      • 하나의 <dt>에 대한 설명을 여러개의 <dd> 태그에 할 수 있다.
  6. 표(table)
    • 표를 만드는 태그
    • <tr> : 행을 생성할 수 있다.
    • <td> : 열을 생성할 수 있다.
      • colspan : 열을 병합하는 속성
      • rowspan : 행을 병합하는 속성
    • <th> : 제목 행을 생성할 수 있다.
    • <thead> : 제목 행을 그룹화할 수 있다.
    • <tbody> : 본문 행을 그룹화할 수 있다.
    • <tfooter> : 바닥 행을 그룹화 할 수 있다.
    • <thead>, <tbody>, <tfooter> 순으로 배치하는 것이 좋다.
    • <caption> : 표에 대한 설명을 넣을 수 있는 태그
  7. 아이프레임(iframe)
    • 현재 문서 안에서 다른 HTML 페이지를 삽입할 수 있는 태그
    • src 속성에 원하는 HTML 문서 또는 URL을 넣을 수 있다.
    • 외부 페이지를 불러올 수 있기 때문에 외부 페이지의 영향을 받을 수 있다.
    • name 속성을 지정하면, <a> 태그의 target 속성을 사용해 iframe에서 문서 또는 URL이 열리게 할 수 있다.

iframe

  1. 양식
    • <form> : 정보를 제출하기 위한 태그
      • 정보를 입력하고 선택할 수 있는 input, selectbox, textarea 등을 가질 수 있다.
      • 정보를 제출하기 위한 button을 가진다.
      • action 속성으로 정보가 제출되었을 때 페이지를 이동시킬 수 있다.
      • method 속성으로 정보가 제출될 때 처리 방식을 결정할 수 있다.
    • <label> : input, textarea, selectbox의 설명을 작성할 수 있는 태그
      • for 속성을 사용하여 연결하고자 하는 태그에 id 속성을 지정하면 <label>을 클릭하면 연결된 태그가 선택된다.
      • label 태그 안으로 <input>을 넣으면 자동으로 for → id 연결과 같은 처리를 해준다.
      • id 속성의 값은 문서 내에서 유일해야 한다!
    • <input> : 사용자에게 데이터를 입력받을 수 있는 대화형 태그
      • type 속성의 값에 따라 받을 수 있는 input의 유형이 달라진다.
      • value 속성을 사용해 기본 값을 지정할 수 있다.
      • name 속성을 사용해 <input>의 이름을 지정할 수 있다.
      • 자주 사용되는 <input> type
    1. checkbox : input을 체크박스 형태로 만든다.
    2. radio : 라디오 버튼을 만든다.
    3. file : 파일을 첨부할 수 있게 만든다.
    4. button : value 속성에 입력된 값을 이름으로 갖는 버튼을 만든다.
    5. hidden : input을 시각적으로 숨겨준다. 정보 제출 시 value 속성에 입력된 값은 전송된다.
      • <select> : 옵션 메뉴를 제공하는 태그
        • <option> 태그를 사용해 옵션을 정의할 수 있다.
        • 첫 option의 이름이 셀렉트 박스에서 제일 처음 보여지는 이름이 된다.
        • value 속성을 선언하지 않은 경우 <option>의 콘텐츠가 기본값이 된다.
        • 첫 번재 옵션이 버튼명이기 때문에 placeholder 속성을 사용할 수 없다.
      • <textarea> : 여러 줄을 입력할 수 있는 대화형 태그
        • 콘텐츠를 넣으면 사용자가 입력하지 않아도 표시되는 기본값이 된다.
        • cols/rows 속성으로 기본 너비와 높이를 지정할 수 있다. 너비와 높이는 글자 크기 기준으로 정의된다.
      • <input>, <select>, <textarea>의 공통 속성
        • readonly : 사용자가 수정할 수 없는 “읽기 전용” 으로 만든다.
        • required : form이 제출될 때 “필수 입력 사항” 으로 만든다. 이때, 필수 입력에 대한 태그에 따른 안내 문구, 행동 등은 브라우저가 자동으로 처리해준다.
        • placeholder : input, textarea의 부가 설명을 입력해둘 수 있다. <select>에선 사용할 수 없다.
        • disabled : 요소가 비활성화되며 정보 제출 시 값이 제출되지 않는다.
      • <button> : 클릭 가능한 버튼을 태그로 <form> 내에 어디서든 사용할 수 있다.
        • type을 reset으로 지정하면 버튼이 눌리면 입력한 양식이 모두 초기화된다.
        • type을 submit으로 지정하면 <form>양식을 제출할 수 있다.
        • <form> 태그 내의 <button>의 기본 type은 submit이다.
        • disabled 속성을 가질 수 있다.

6. HTML 주의사항

  1. 대소 문자를 구별하라!
  2. closing 태그 넣는 걸 잊지마라!
  3. 속성값에는 한글을 사용할 수 있지만 무조건 영어로만 작성하라!
  4. id값은 문서내에서 중복되면 안된다!
  5. 중첩 태그의 순서를 항상 기억하라! 계층 구조 유의!
  6. 동일한 의미의 태그 중첩 사용 금지! ex) <a> 내에 <button>

추천 사이트

  1. TCP School
  2. MDN
  3. w3schools

Categories:

Updated:

You may also enjoy

Nextjs

less than 1 minute read

* 본 강의는 Udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths!)를 바탕으로 제작된 내용입니다. *

Ds06

less than 1 minute read

DS06

Dl06

2 minute read

DL06