[2주차-1] 파이썬으로 웹 다루기

HTML은 콘텐츠를 가지는 태그와 가지지 않는 태그로 나뉜다.

1) 콘텐츠를 가지는 태그: 열리는 태그(시작태그) + 콘텐츠 + 닫히는 태그(종료테그)

ex) <div> 콘텐츠 </div>

2)콘텐츠를 가지지 않는 태그: 단일 태그

<br /> cf) />: 단일태그를 위한 셀프 클로징

html의 기본구조는 다음과 같다.

<!DOCTYPE html> <!-- 1. 문서 버전 -->
<html lang = 'ko'> <!-- 2. HTML 문서 시작 선언 및 문서 기본 언어 설정 -->
    <head> <!-- 3. 문서에 필요한 정보가 기입되는 곳 -->
        <title>문서 제목</title> <!-- 4. 문서의 제목-->

        <link rel="stylesheet" href="style.css" />

    </head>

    <body> <!-- 5. 실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳-->
        <span>인라인</span>인라인 옆에 글자
        <div>나는 블록</div>

    </body>
</html>

이제부터 head, body, 레이아웃, 콘텐츠 순서로 살펴보자.

<head>

사람 눈에 보이지 않는 “문서의 정보”가 담기는 영역

1) 타이틀: 제목

2) 메타 데이터: 인코딩 정보, 문서 설명, 문서 작성자

*charset은 문서에서 허용하는 문자의 집합이다. charset에 선언된 “문자의 집합” 규칙에 따라 문서에서 사용할 수 있는 문자가 제한된다. 따라서 모든 언어를 사용할 수 있는 인코딩을 뮤티에프 8로 설정해야 한다.

*style 헤드 안에서 스타일을 바꿔줌

*link태그는 컨텐츠를 가지지 않는 단일 태그이다.

*script태그: 셀프 클로징이 아닌 종료태그를 작성해야 한다.

1) 콘텐츠 방식

const hello = ‘world’;

consle.log(hello);

</script>

2) 링크 방식

* script파일은 파일 확장자명을 줄임말로 사용함 .html이나 .css가 아닌 .js로 사용함

<body>

사람 눈에 실제로 보이는 콘텐츠 영역

body 태그는 block레벨 요소와 inline레벨 요소로 나뉜다.

1) block레벨 요소는 브라우져 가로 너비에 꽉 차게 되며 여백을 지정할 수 있고 일반적으로 페이지의 구조적 요소를 나타낸다. 인라인 요소를 포함할 수 있으나, 인라인 요소에 포함된 ㄹ수 없다.

ex) <div>, <article>, <section>, ...

2) inline레벨 요소는 블록과 다르게 크기를 조절할 수 없고 좌/우로만 여백을 넣는 것이 가능하다.

ex) <span>, <a>, <strong>, ...

레이아웃

1) div: 콘텐츠 분할 요소

2) <header>: 블로그 글 제목, 작성일 등의 주요 정보를 담는 태그

3) <footer>: 페이지의 바닥줄에 사용되며 저작권 정보, 연락처 등 부차적인 정보를 담는 태그

4) <main>: 페이지의 가장 큰 부분으로 사이트의 내용 즉, 주요 콘텐츠를 담는 태그, 한 번만 사용 가능

5) <section>: 콘텐츠의 구역을 나누는 태그로, 신문지에서 여러 기사가 각자의 구역에서 각자의 정보를 전달하는 의미와 비슷한 역할을 하는 태그

6) <article>: 블로그 포스트 같이 정보를 전달하는 독립적인 태그

7) <aside>: 문서의 주요 내용에 간접적인 정보를 전달하는 태그로 쇼핑몰의 오른쪽에 따라다니는 “오늘 본 상품” 같은 것으로도 사용할 수 있다.

<p> 문단태그

문단에서 하나의 문단을 나타내는 태그이다. 제목 태그와 함께 사용하기도 하고 단독으로 사용되기도 한다. <p>태그는 레이아웃처럼 사용하면 안 된다.

서식태그

<b>: 단순히 굵은 글씨로만 변경

<strong>: 굵은 글씨로 변경 후 강조의 의미를 부여한다.

<i>: 기울임과 동시에 텍스트가 문단의 내용과 구분되어야 하는 경우 사용할 수 있다.

<em>: 기울임과 내용에 강조를 나타낸다.

<u>: 밑줄을 넣고 주석을 가지는 단어임을 나타낼 수 있다. 단순하게 밑줄만 긋는 용도로만 사용하면 안된다.

<s>: 단순히 시각적인 취소선만 추가된다.

<del>: 문서에서 제거된 텍스트를 나타낼 수 있다. <ins>태그를 함께 사용하면 제거된 텍스트 옆에 추가된 텍스트를 표현할 수 있다.

링크 이동

<a>: 클릭하면 페이지를 이동할 수 있는 링크 요소를 만들 수 있다.

멀티미디어

<img>: 문서 내에 이미지를 넣을 수 있는 태그

<figure>,<figcaption>: 하나의 독립적인 콘텐츠로 분리하고 그에 대한 설명을 넣을 수 있는

태그

<video>: 문서 내에 영상을 첨부할 수 있는 태그

<audio>: 문서 내에 소리를 첨부할 수 있는 태그

리스트

<ul>: 정렬되지 않은 목록 태그, 태그의 자식요소로 <li>태그만 들어와야 한다.

<li>: 목록을 구성하고 다양한 태그를 포함할 수 있다.

<ol>: 정렬된 목록 태그, 태그의 자식요소로 <li>태그만 들어와야 한다.

<dl>,<dt>,<dd>: 설명 목록 태그

표

<table>: 표를 만드는 태그

<tr>태그로 행을 구분할 수 있다.

<td>태그로 열을 생성할 수 있다.

<th>태그를 사용하면 셀의 제목을 만들 수 있다.

<thead>는 제목 그룹 태그이다.

<tbodty>는 표 본문 요소 태그이다.

<tfoot>는 표 바닥글 요소 태그이다.

<caption>은 표 설명 태그이다.

외부 콘텐츠

양식태그

<form>: 정보를 제출하기 위한 태그, 정보를 입력하고 선택할 수 있는 input,selectbox, textarea등을 가질 수 있다.

설명과 입력

<lable>: input, textarea, selectbox의 설명을 작성할 수 있는 태그

<input>: 사용자에게 데이터를 입력 받을 수 있는 대화형 태그

저작자표시 (새창열림)

'AI > 데이터 엔지니어링 데브코스' 카테고리의 다른 글

[2주차-3] 파이썬으로 웹 다루기 - 원하는 요소 가져오기 (0)	2023.04.19
[2주차-2] 파이썬으로 웹 다루기 - HTTP (0)	2023.04.19
[1주차-5] 코딩테스트 연습 - 힙, DFS/BFS, 동적 계획법(Dynamic Programming) (2)	2023.04.14
[1주차-4] 코딩테스트 연습 - 해시, 그리디, 정렬 알고리즘 (0)	2023.04.13
[1주차-3] 코딩테스트 연습 - 큐, 트리, 힙(3) (0)	2023.04.13

AI 공부하는 개미