2주차 Day1 학습 내용 정리
이번 주차 주제는 파이썬으로 웹다루기로 크롤링 위주로 학습을 진행한다.
본격적으로 웹 프레임워크 학습에 들어간다.
🎈 VScode 학습
UI 측면에서 VScode가 더 좋은 거 같다는 생각이 들었고, HTML, CSS 사용에 있어 Live Server 등 사용으로 좀 더 사용자입장에서 편리하다는 생각이 들었다.
✅ HTML & CSS & JS
✔️ HTML (HyperText Markup Language) : 웹 브라우저가 이해할 수 있는 언어
✔️ CSS (Cascading Style Sheets) : 문서를 예쁘게 꾸미는 언어
✔️ JavaScript : 문서에 기능을 만들어주는 언어
이어서 기본적인 태그 종류가 많은데 어떤 것들이 있는지 코드로 알아보자
🎈 기본 태그 구현 코드
# < 기본 문법 >
# 콘텐츠를 가지는 태그 : 시작태그와 종료태그가 존재
<div title(전역 속성 > 모든 태그에서 사용 가능) = "제목" (값)>Content</div>
# 링크 ex)
<a href = "https://naver.com">네이버 바로가기</a>
>
# 콘텐츠를 가지지 않는 태그 : 열리는 태그(단일 태그)만 존재
<br />
>
# <기본적인 HTML 문서 >
>
# <!DOCTYPE html> -- # 문서버전 (html5를 명시)
<html lang = 'Ko'> -- html 문서 시작 선언 및 문서 기본 언어 설정
<head> -- 문서에 필요한 정보 기입되는 곳
<title>문서 제목</title> -- 문서제목
</head>
<body> --- 사용자가 실제로 눈으로 볼 수 있는 문서 내용 입력
안녕하세요!
</body>
# 주석 다는 법
<!--
중요한 정보는 주석에 포함하지 말자!
-->들여쓰기를 기준으로 부모요소, 자식요소 판단 가능하다.
따라서 head, body 태그는 html의 자식요소, title은 head의 자식요소가 된다.
-> Depth를 지키고 주석을 다는 것(설명을 위한 메모)은 개발에 있어 매우 중요함.
✍️ Head 에 담길 수 있는 정보
- 문서의 제목
- 메타 데이터 (인코딩 정보:UTF-8, name = description 문서 설명, name = 'author' 문서 작성자 등)
- CSS, JavaScript
✔️ style 태그
시작 태그, 종료 태그 사이에 CSS 존재
✔️ link 태그
많은 줄의 style 등으로 head태그가 길어져 편집하기 힘들 때 사용 (contents를 갖지 않는 태그로 별도의 css 파일로 style을 만들어 사용)
ex ) <link rel = 'stylesheet' href = 'style.css(미리 편집해놓은 css파일명)'/ >로 표기
✔️ script 태그
콘텐츠 방식과 링크 방식으로 존재 파일 확장자로 .js 로 표기
✍️ body 에 담길 수 있는 정보
-> 실제 사용자가 볼 수 있는 콘텐츠 영역
- block (블록 레벨 요소)
블록 크기와 내/외부에 여백을 지정할 수 있고 일반적으로 페이지의 구조적 요소를 나타냄
인라인 요소를 포함할 수 있으나, 인라인 요소에 포함될 수는 없음
ex) 꺽새 포함 div, article, section etc.- inline (인라인 레벨 요소) - 블록레벨 요소를 자식요소로 못 가짐
블록 요소 내 포함되는 요소로 좌/우 여백 넣기 허용 가능
주로 문장, 단어 같은 부분에 사용되며 한 줄에 나열
ex) 꺽새 포함 span, a(페이지 넘기는), strong- inline-block
글자처럼 취급되나 블록 태그의 성질을 가지는 요소
블록과 마찬가지로 크기와 내/외부 여백 지정 가능
CSS로 성질을 바꾼 것이기에 의미상 인라인 레벨 요소임
< 실습 예제 코드 >
<!DOCTYPE html>
<html lang = 'ko'>
<head>
<title>문서의 제목</title>
<link rel = "stylesheet" href = 'style.css'/>
</head>
<body>
<!-- 블록은 한 줄 꽉참-->
<!-- chrome -> 도구더보기 -> 개발자 도구로 블록인지 파악 가능-->
<div>블록1</div>
<div>블록2</div>
<div>블록3</div>
<!-- 인라인 요소는 한 줄로 나열 (콘텐츠 크기로만)-->
<span>인라인</span> 인라인 옆에 글자
<!-- padding-left, top, bottom : 100px로 여백 길이 지정 가능 -->
<div> 나는 블록 </div>
</body>
</html>✍️ Layout (block level 요소)
- div (콘텐츠 분할 요소)
-> 가장 흔히 사용되는 layout 태그로 큰 의미 없이 단순히 구역을 나누는 태그
- Layout 태그 (header, footer, main)
header : 글 제목, 작성일 등 주요정보를 담은 태그
footer : 페이지 바닥줄에 사용되며 저작권 정보, 연락처 등 부가적인 정보를 담은 태그
main : 페이지의 가장 큰 부분으로 사이트의 주요 콘텐츠를 담은 태그 (무조건 1번 사용)
- Layout 태그 (section, article, aside)
section : 콘텐츠의 구역을 나누는 태그 (파트 나누는 담당)
article : post, 기사 등 독립적인 문서 전달
aside : 문서 주요 내용에 간접정보를 전달하는 태그-> ✨ Layout 태그를 알아야 하는 이유
: - html5부터 태그를 의미있게 사용하기 위해 semantic 태그를 사용해 문서 구조 작성
- 단순 구분자인 div를 남발하지 않고 웹문서가 담은 정보, 구조를 의미있게 전달
- semantic하게 마크업 진행, 검색엔진의 검색 순위에 가산점을 얻거나 홈페이지의 로딩 속도 높임
✍️ Contents
제목태그, 문단태그, 강조 뭐 등등 내용이 상당히 많은데,, 기본적인 태그 형식들은 코드로 알아보자!
<!DOCTYPE html>
<html lang = 'ko'>
<head>
<title> 문서의 제목 </title>
<!-- <link rel = 'stylesheet' href = 'style.css'/> -->
</head>
<body>
<!-- h1은 1번만 사용되어야 하고 구획의 순서를 반드시 지켜야 함 -->
<h1>제목 1</h1>
<!-- 문서에서 하나의 문단을 나타내는 태그로 제목태그와 함께 or 단독 사용 가능 -->
<p>문단 태그 사용</p>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>
<!-- b는 굵은 글씨로 변경 , strong은 굵은 글씨 변경 후 강조의미 부여 -->
<b>프로그래머스</b>에 오신 <strong>개발자</strong>여러분 환영합니다.
<!-- br 단일 태그는 줄바꿈 해줌 br개수 = 엔터 수와 동일 -->
<br>
<!-- i는 문단 내용 구분할 때(등장인물, 외국어 구절, 용어) em태그는 강조의 의미 -->
<i>fornt-size는</i> CSS 속성명입니다.
<br>
기본 폰트 사이즈는 <em>16px</em>입니다.
<br>
<!-- 밑줄 넣고 주석을 다는 태그로 밑줄 용도로 사용만 하기 X -->
기본 영문 표기명은 <u>Pgrogress</u>입니다.
<br>
<!-- s는 취소선 , del태그는 문서에서 제거된 텍스트 나타내기 가능 -->
<s>취소선</s>
<del>삭제된 단어</del>
<ins>추가된 단어</ins>
<br><br><br>
<!-- 링크 이동 방법으로 blank는 새창, _self는 현재창에서 이동 -->
<a href = 'https://velog.io/@tae__juni' target = "_blank">링크!</a>
</body>
</html>이외에도 여러 태그들이 존재한다
✔️ Contents - 멀티미디어
- img 태그 : 문서 내 이미지를 넣는 방법. src속성은 경로, alt속성은 로딩할 때 문제 발생 시 대체 텍스트
- figure, figcaption 태그 : 하나의 독립적인 콘텐츠로 분리해 설명, 범례 추가 가능
- video 태그 : 문서 내 영상 첨부 가능 src속성, poster속성은 비디오 로드시 텍스트, source태그 사용해 여러 타입 비디오 제공 + a 굉장히 많음
- audio 태그 : 문서 내 소리 첨부 가능 src속성, source태그 사용, controls속성으로 재생, 정비 버튼 있는 컨트롤러 띄우기 가능
✔️ SVG (Scalable Vector Graphics)
-> 그래픽으로 만들어진 이미지, 수학 공식을 사용해 그려지기에 해상도 영향을 받지 않아 확대/축소가 자유로움
+) 코드로 이루어져 스타일 변경, 자바스크립트를 사용해 간단한 기능 추가 가능
< 실습 코드 ><body> <!-- 멀티미디어 실습하는 과정 --> <img srec = '폴더/이미지 명' alt = '이미지 로드 시 설명'/> <br></Br> <video> <source src = '폴더/비디오명.file확장자', type = 'video/확장자' /> <source src = '폴더/비디오명.file확장자', type = 'video2/확장자' /> </video> <audio controls src = '폴더명/오디오.확장자'></audio> <!-- 기존 이미지는 인라인 레벨이지만 figure를 통해 block레벨로 확장 가능 --> <figure> <img src = '폴더명/이미지.확장자' alt = '로드 시 메시지' /> <figcation> image description </figcation> </figure> </body>
✔️ Contents - 리스트 -> 정렬되지 않은 목록 태그
ex) ul, li 태그
- bullet 형식으로 목록을 그린다.
- li 태그를 사용해 목록을 구성할 수 있고 다양한 태그를 포함할 수 있다.
- ul 태그의 자식요소로는 li태그만 들어와야 하며 하위 리스트를 만들고자 하면 li 태그 내부에 ul, ol(목록 X) 태그를 사용해야한다.
ex) dl, dt, dd 태그 -> 설명 목록 태그
- dt 태그에 사용된 단어 혹은 설명을 dd태그에 작성 가능
- 주로 키-값이 있는 쌍 목록 나타낼 때 사용
- dt 태그를 여러 개 작성하고 하나의 dd 태그를 작성함으로써 여러 개의 용어를 설명할 수 있다.
- 위와 반대로 dt태그 하나에 여러 dd태그를 가질 수 있다.
✔️ Contents - 표 (TABLE)
table 태그 : 표를 만드는 태그로 tr로 행구분, td로 열 생성 가능
th 태그 : 열 제목 태그, 기본적으로 글자 bold처리 & 가운데 정렬
thead 태그 : 제목 그룹 태그, 열 제목 행 넣어 그룹화 가능
tbody 태그 : 표 본문 요소 태그
tfoot 태그 : 표 바닥글 요소 태그
✔️ Contents - iframe
- 현재 문서 내 다른 HTML 페이지를 삽입할 수 있는 태그
- src 속성에 원하는 HTML 문서, url 넣기 가능
- 외부 페이지 불러올 수 있기에 외부 영향 받기 힘듬
- name 속성 지정 시 a태그의 target 속성 사용해 iframe에서 문서, url 열리게 가능
✔️ 양식 태그 - form 태그
- 정보를 제출하기 위한 태그
- 정보를 입력하고 선택할 수 있는 input, selectbox, textarea 등 태그로 가짐
- 정보를 제출하기 위해 button 태그 가짐
- action 속성으로 정보 제출 시 새 페이지로 이동 가능
- method 속성으로 정보 제출될 때 처리 방식 결정 가능 (get, post(보안용))
✔️ 양식 태그 - 설명과 입력
label 태그
- input, textarea(여러 줄 입력하는 대화형 태그), selectbox의 설명을 작성할 수 있는 태그
- for속성으로 사용해 연결하고자 하는 태그에 id 속성 지정 시 label클릭하면 연결된 태그 선택
- label 태그 안에 input 넣으면 자동으로 for -> id 연결과 같은 처리 가능
- id 속성은 값 중복 허용 X
input 태그
-> 사용자에게 데이터를 입력받을 수 있는 대화형 태그
- type 속성의 값에 따라 받을 수 있는 input 유형이 달라짐
- value 속성을 사용해 기본 내용 입력 가능
- name 속성 사용해 input 이름 지정 가능
💯 자주 사용되는 input 타입- checkbox : input을 체크박스 형태로 만듬
- radio : 라디오 버튼으로 만든다
- file : 파일 첨부할 수 있게 만든다
- button : value 속성에 입력된 값을 이름으로 갖는 버튼으로 만듬
- hidden : input을 시각적으로 숨겨주고 정보 제출 시 value 속성에 입력된 값은 전송
💯 알아두면 좋은 속성
- readonly : 읽기 전용 (고정 값 시 유용, 드래그도 가능)
- required : 폼 제출 시 필수 입력 사항 만들기
- placeholder : input, textarea에 부가 설명 입력 가능 select는 X
- disabled : 요소가 비활성화 되며 정보 제출 시 값 제출 X
🎇 HTML 주의 사항
- 대소문자 주의 (태그는 소문자로)
- 종료 태그 생략 주의 -> Contents를 갖는 태그는 종료 태그 필수
- 한글 사용 X
- ID 중복 (ID는 한 번만 페이지 내 사용)
- 계층 (depth) 구조 유지
- 동일 의미 태그 중첩 금지 ex) (b, strong), (링크, a 태그, button) 등
금일 html에 대해 학습을 진행해보았는데 처음 접하는 부분이 상당히 많고 태그 종류도 꽤 많아 머리가 복잡하다.. 반복적으로 학습하는 시간을 가져야 할 것 같다는 생각이 들었다.
