[데브코스 TIL] DAY7 파이썬으로 웹다루기 (1)

May·2024년 4월 1일

데이터 엔지니어링 데브코스

목록 보기
4/22

오늘의 학습 주제

1. HTML
2. HEAD
3. BODY
4. 레이아웃
5. 콘텐츠
6. 양식 태그
7. HTML 주의사항

 

1.HTML

  1. HTML 기본 문법
# 콘텐츠를 가지는 태그 (열리는 태그 = 시작 태그, 닫히는 태그 = 종료 태그)
  <div> content </div> 

# 콘텐츠를 가지지 않는 태그 (단일 태그 = Empty Element)
  <br></br> ← Self Closing
  1. 속성과 값
<div title="제목">content</div> #title:속성(Attribute), "제목":값(Value)
<a href="https://naver.com">네이버 바로가기</a>
  1. HTML 기본 문서
<!DOCTYPE html> ------------ 1.문서 버전
<html lang="ko"> ----------- 2.HTML 문서 시작 선언 및 문서 기본 언어 설정
<head> --------------------- 3.문서에 필요한 정보가 기입되는 곳 <head>
    <title>문서 제목</title> - 4.문서의 제목
  </head>

  <body> ------------------- 5.실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳
    안녕하세요.
  </body>
</html>
  1. 부모요소 자식요소
# HTML에는 부모요소와 자식요소라는 개념이 있기 때문에, 코드 작성 시 depth를 지키는 게 중요하다.
  1. HTML 주석
# 주석(Commnet) : 개발자가 코드 내에 입력한 메모

# 기본 사용법 : <!-- 시작 태그 / 종료 태그 -->

  <!-- 주석 내용 -->

1. 주석 안에 주석은 안돼요!
2. 사용자에게는 보이지 않는 주석이지만, 소스보기나 개발자 도구로 보면 코드가 보이니 주의해주세요!

2. HEAD

  1. head : 사람 눈에 보이지 않는, "문서의 정보"가 담기는 영역
# <head>가 가질 수 있는 정보의 종류

  1. 타이틀
  
  2. 메타 데이터
  	1. 인코딩 정보
  	"charset(character set)"은 "문서에서 허용하는 문자의 집합" 이다,
  	charset에 선언된 "문자의 집합" 규칙에 따라 문서에서 사용할 수 있는 문자가 제한된다. 
	2. 문서 설명
  	3. 문서 작성자
    
  3. CSS, Script
  1. style, link, script : 문서 내용의 외형에 영향을 주는 태그들 (실습 파일 참고)
  1. style
  2. link
    <!DOCTYPE html>
    <html lang="ko">
        <head>
            <title>문서 제목</title>
            <link rel="stylesheet" href="style.css"/>
        </head>

        <body>
            문서의 내용
        </body>
    </html>

  3.script
      1.콘텐츠 방식
      2.링크 방식 : 콘텐츠를 갖지 않지만, 종료 태그를 작성해야 한다.

3. BODY

  1. body : 사람 눈에 실제로 보이는 콘텐츠 영역
  2. block, inline, inline-block
  1. block(블록 레벨 요소) : 레고 블록처럼 차곡차곡 쌓이고 화면 너비가 꽉 차는 요소
  - 블록 크기와 내/외부에 여백을 지정할 수 있고 일반적으로 페이지의 구조적 요소를 나타낸다.
  - 인라인 요소를 포함할 수 있으나, 인라인 요소에 포함될 수 없다.

  # 대표적인 블록 레벨요소
      <div>, <article>, <section>, ...
  
  2. inline(인라인 레벨 요소) : 블록 요소 내에 포함되는 요소
  - 주로 문장, 단어 같은 작은 부분에 사용되며 한 줄에 나열된다.
  - 좌/우 여백을 넣는 것만 허용된다.

  # 대표적인 인라인 레벨 요소
      <span>, <a>, <strong>, ...
  
  3. inline-block : 글자처럼 취급되나, block 태그의 성질을 가지는 요소
  - block과 마찬가지로 크기와 내/외부 여백을 지정할 수 있다.
  - CSS로 성질을 바꾼 것이기 때문에 의미상 인라인 레벨 요소이다.

4. 레이아웃

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

5. 콘텐츠

  1. 제목 태그 (h1~h6)
- 문서 구획 제목을 나타내는 태그로 Heading 태그라고 부른다.
- h1부터 h6까지 사용 가능
- h1 태그는 페이지 내에 "한번만" 사용되어야 하고 "구획의 순서"는 지켜져야 한다. (h1→h6)
  1. 문단 태그 (p)
- 문서에서 하나의 문단(Paragraph)을 나타내는 태그이다.
- 제목 태그와 함께 사용되기도 하고 단독으로 사용되기도 한다.
  1. 서식 태그 (b/strong, i/em, u, s/del)
  1. <b>, <strong>
  - 글씨의 두께를 조절할 수 있다.
  - <b> 태그는 의미를 가지지 않고 단순히 굵은 글씨로 변경만 해준다.
  - <strong> 태그는 굵은 글씨로 변경 후 "강조"의 의미를 부여한다.
  - ! <b>와 <strong>은 시각적으로 굵은 효과는 같지만 의미가 다름으로 사용에 주의

  2. <i>, <em> 
  - 글씨의 기울기를 조절할 수 있다.
  - <i> 태그는 기울임과 동시에 텍스트가 문단의 내용과 구분되어야 하는 경우 사용할 수 있다.
    ex) 등장인물, 외국어 구절, 기술 용어 등
  - <em> 태그는 기울임과 내용에 "강조"를 나타낸다.
  - ! <i>와 <em>은 시각적으로 기울임은 같지만 의미가 다름으로 사용에 주의

  3. <s>, <del> 
  - 글씨에 취소선을 추가할 수 있다.
  - <s> 태그는 단순히 시각적인 취소선만 추가되고 접근성 기기에 취소에 대한 안내는 하지 않는다.
  - <del> 태그는 문서에서 제거된 텍스르를 나타낼 수 있다. 
  	<ins> 태그를 함께 사용하면 제거된 텍스트 옆에 추가된 텍스트를 표현할 수 있다.
  1. 링크 이동 (a)
 <a>
 - 클릭하면 페이지를 이동할 수 있는 링크 요소를 만들 수 있다.
 - href 속성을 사용해서 이동하고자 하는 파일 혹은 URL을 작성한다.
 - target 속성을 사용해서 이동해야 할 링크를 새 창(_blank), 현재창(_self) 등 원하는 타겟을 지정할 수 있다.
 - blank 속성을 쓰려면 _를 앞에 적어야 한다.
  1. 멀티미디어
  1. <img>
  - 문서 내에 이미지를 넣을 수 있는 태그
  - 가장 기본적인 이미지 넣는 방법
  - "src" 속성을 사용해 이미지의 경로를 넣으면 이미지가 출력됨
  - "alt" 속성을 사용해 로딩에 문제가 발생했을 때 대체 텍스트를 띄울 수 있음

  2. <figure>, <figcaption>
  - 하나의 독립적인 콘텐츠로 분리하고 그에 대한 설명을 넣을 수 있는 태그
  - <figcaption> 태그를 사용해 콘텐츠의 설명 혹은 범례를 추가할 수 있고 제일 처음이나 제일 아래에 추가해서 사용할 수 있다. (중간은 불가능)
  - 보통 이미지를 넣는데 인용문, 비디오/오디오 등 문서의 흐름에 참조는 되지만 독립적으로 분리되어도 되는 내용을 담을 수 있다.

  3. <video>
  - 문서 내에 영상을 첨부할 수 있는 태그
  - "src" 속성을 사용하면 비디오를 문서 내에 첨부할 수 있다.
  - "poster" 속성을 사용하면 비디오가 로드되기 전에 포스터를 보여줄 수 있다.
  - <source> 태그를 사용하면 여러 타입의 비디오를 제공할 수 있다.

  4. <audio>
  - 문서 내에 소리를 첨부할 수 있는 태그
  - "src" 속성을 사용하면 소리를 문서 내에 첨부할 수 있다.
  - <source> 태그를 사용하면 여러 타입의 오디오를 제공할 수 있다.
  - "controls" 속성을 사용하면 재생/정지 버튼 등이 있는 컨트롤러를 띄울 수 있다.

  5. <svg> (Scalable Vector Graphics)
  - 그래픽으로 만들어진 이미지
  - 일반 이미지(래터스 이미지)와 다르게 수학 공식을 사용하여 그려지기 때문에 해상도의 영향을 받지 않아 확대/축소가 자유롭다.
  - 주로 크기를 자주 바꿔야 하는 작은 아이콘에서 많이 사용된다.
  - 해상도가 다양하게 변화하는 최근 기기들로 인해 아이콘 외에 로고 등 주요 이미지에도 사용되고 있다.
  - <img> 태그처럼 svg 파일을 불러올 수도 있고 태그를 그대로 사용할 수도 있다. (더 많은 사용 방식 존재)
  - 코드로 이루어져 있기 때문에 스타일을 변경하거나 자바스크립트를 사용해 간단한 기능을 추가할 수도 있다.
  1. 리스트
  1. <ul>,<li>
  - 정렬되지 않은 (순서가 없는) 목록 태그
  - 기본 불릿(buliet)형식으로 목록을 그린다.
  - <li> 태그를 사용하여 목록을 구성할 수 있고 다양한 태그를 포함할 수 있다.
  - <ul> 태그의 자식요소로는 <li> 태그만 들어와야 한다.
   	하위 리스트를 만드려면 <li> 태그 안에 <ul>, <ol> 태그를 사용하면 된다.

  2. <ol>,<li>
  - 정렬된 (순서가 있는) 목록 태그
  - 기본 숫자(1,2,3...) 형식으로 목록을 그린다.
  - <li> 태그를 사용하여 목록을 구성할 수 있고 다양한 태그를 포함할 수 있다.
  - <ol> 태그의 자식요소로는 <li> 태그만 들어와야 한다.
   	하위 리스트를 만드려면 <li> 태그 안에 <ol>, <ul> 태그를 사용하면 된다.

  3. <dl>, <dt>, <dd>
  - 설명 목록 태그
  - <dt> 태그에 사용된 단어 혹은 내용의 설명을 <dd> 태그에 작성할 수 있다.
  - 주로 용어사전이나 "키 값"이 있는 쌍의 목록을 나타낼 때 사용한다.
  - <dt> 태그를 여러개 작성하고 하나의 <dd> 태그를 작성하는 것으로 여러 개의 용어를 설명할 수 있다.
  - 위와 반대로, <dt> 태그 하나에 여러개의 <dd> 태그를 가질 수 있다.
  1. 표(table)
  2. 외부 콘텐츠(iframe)

6. 양식 태그

7. HTML 주의사항

profile
May
이전 포스트

[데브코스 TIL] DAY6 자료구조/알고리즘 풀기(5)

다음 포스트

[데브코스 TIL] DAY8 파이썬으로 웹다루기 (2)

0개의 댓글