2주차 월요일, 6일차 Today I Learned
웹 데이터 크롤 및 분석 (1)
: 기본 HTML/CSS/JS
✏️ 학습 내용
개요
Visual Studio Code 다운로드 받기
1. Command + 콤마 (,) => 설정 기능 활용하기
- '설정' 검색 후 'Compact Folders' 옵션을 끄면 폴더 안에 내용이 없으면 한 줄로 표시되는 것을 막을 수 있다.
2. 좌측 메뉴 중 확장 기능 활용하기
- Material Icon Theme : 파일을 시각적으로 표현
- Live Server : 실시간 코딩 내용 확인, 자동 업데이트 등
- Indent-rainbow : 들여쓰기에 컬러 설정
HTML (Hypertext Markup Language) : 웹 브라우저가 이해할 수 있는 언어
CSS (Cascading Style Sheets) : 문서를 예쁘게 꾸미는 언어
JavaScript : 문서에 기능을 만들어주는 언어
1. HTML
<!DOCTYPE html> <!--문서 버전-->
<html lang="ko"> <!--HTML 문서 시작 선언, 문서 기본 언어 설정-->
<head> <!--문서에 필요한 정보가 기입되는 곳-->
<title>문서 제목<title>
</head>
<body>
문서의 내용
</body>
</html><HTML> 기본 문법 :
1) 콘텐츠를 가지는 태그
- 열린 태그와 닫힌 태그 필요
- 속성과 값, 콘텐츠 존재
2) 콘텐츠를 가지지 않는 태그 (단일 태그, Empty Element)
부모 요소, 자식 요소가 있으니 가독성 및 효율성을 위해서 들여쓰기를 잘 해주어야 한다. 주석 (Comment)은 개발자가 쓴 메모 내용이다.
<HEAD>는 사람 눈에 보이지 않는 문서의 정보가 담기는 영역으로, 가질 수 있는 정보의 종류는 타이틀, 메타 데이터 (인코딩 정보, 문서 설명, 문서 작성자), CSS, Script와 같다. 인코딩(Charset)은 문서에서 허용하는 문서의 집합니다. 선언된 문서의 집합 규칙에 따라 문서에서 사용할 수 있는 문자가 제한된다.
<head>
<title>문서 제목</title>
<meta charset="uft-8">
<meta name="desctiption" content="">
<meta name="authoe" content="K">
</head><HEAD>가 가질 수 있는 태그는 스타일링을 할 수 있는 콘텐츠 방식의 <style> 태그, 파일 링크를 연결시킬 수 있는 링크 방식의 <link rel="name" href"url />, 콘텐츠 방식과 링크 방식으로 모두 사용할 수 있는 <script> 태그가 있다.
<BODY>는 사람 눈에 실제로 보이는 내용의 영역으로, 크게 block 요소와 inline 요소가 있다. block (블록 레벨 요소)는 레고 블록처럼 차곡차곡 쌓이고 화면 너비가 꽉 차는 요소이다. 블록의 크기와 내/외부에 여백을 지정할 수 있고 일반적으로 페이지의 구조적 요소를 나타낸다. 인라인 요소를 포함할 수는 있으나, 인라인 요소에 포함될 수는 없다. 대표적인 블록 레벨 요소에는 <div>, <article>, <section> 등이 있다. inline (인라인 레벨 요소)는 블록 요소 내에 포함되는 요소로, 주로 문장이나 단어 같은 작은 부분에 사용되며, 한 줄에 나열된다. 좌/우에 여백을 넣는 것만 허용된다. 대표적인 인라인 레벨 요소에는 <span>, <a>, <strong> 등이 있다. inline은 block을 자식으로 가질 수 없는데, 이러한 불편함을 해결하기 위해 inline-block 요소가 있다. 이는 글자처럼 취급되나 block 태그의 성질을 가지는 요소로, block과 마찬가지로 크기와 내/외부 여백을 지정할 수 있지만, CSS로 성질을 바꾼 것이기 때문에 의미상으로는 inline 요소라는 것을 명심해야 한다.
레이아웃에는 콘텐츠 분할 요소인 <div>와 레이아웃 태그인 header, footer, main, section, article, aside가 있다. <div>는 가장 흔히 사용되는 레이아웃 태그로, 단순히 구역을 나누기 위한 태그이다. <header>는 블로그 글 제목과 작성일 등의 주요 정보를 담는 태그이고, <footer>는 페이지의 바닥줄에 사용되며 저작권 정보나 연락처 등 부차적인 정보를 담는 태그이며, <main>은 페이지의 가장 큰 부분으로 사이트의 내용인 주요 콘텐츠를 담는 태그이다. main은 한 페이지에 한 번만 나와야 한다. <section>은 콘텐츠의 구역을 나누는 태그로, 신문지에서 여러 기사가 각자의 구역에서 각자의 정보를 전달하는 의미와 비슷한 역할을 하는 태그이다. <article>은 그 구역 안에서 정보를 전달하는 독립적인 역할로, 블로그 포스트나 뉴스 기사와 같은 독립적인 문서를 전달하는 태그이다. <aside> 태그는 문서의 주요 내용에 간접적인 정보를 전달하는 태그로, 블로그 위젯 같은 것들이다.
HTML5 부터 태그를 의미 있게 사용하기 위해 Semantic(시멘틱) 태그를 사용하여 문서 구조를 작성하는 것을 지향하기로 하였다. 이를 사용하면 단순히 의미 구분자인 <div>를 남발하지 않고 적절한 태그를 사용하여 웹 문서가 담은 정보와 구조를 의미 있게 전달할 수 있다. 또한 시멘틱하게 마크업함으로써 검색엔진의 검색 순위에 가산점을 얻거나 홈페이지의 로딩 속도를 높일 수 있다.
2. 콘텐츠
콘텐츠는 많은 내용을 담고 있다.
우선 <h1>~<h6>는 문서 구획 제목을 나타내는 태그로 Heading (헤딩) 태그라고 한다. 각각 태그는 페이지 내에 한 번만 사용되어야 하고, 구획의 순서를 지켜야 한다. <p>는 문서에 하나의 문단을 나타내는 태그이다. 문단 태그인 <p>는 제목 태그와 함께 사용되기도 하고 단독으로 사용되기도 한다. 레이아웃처럼 사용해서는 안 된다.
서식 태그에 <b>, <strong>, <i>, <em>, <u>, <s>, <del>이 있다. <b>와 <strong>은 글씨의 두께를 조절할 수 있는데, <b>는 의미를 가지지 않고 단순히 굵은 글씨로만 변경해주며, <strong>은 굵은 글씨로 변경 후에 강조의 의미를 부여한다. 이 둘은 시각적으로는 같은 효과를 내지만 의미가 다르다는 것을 주의해서 사용해야 한다. <i>와 <em>도 글씨의 기울기를 조절할 수 있는데, 의미가 다르다. <i>는 기울임과 동시에 텍스트가 문단의 내용과 구분되어야 하는 등장인물, 외국어 구절, 기술 용어 등에 사용할 수 있고, <em>은 기울임과 강조를 나타낸다. <u>는 글씨에 밑줄을 넣고 주석을 가지는 단어임을 나타낼 수 있다. 단순하게 밑줄만 긋는 용도로 사용해선 안 되고, CSS로 스타일링하여 빨간 밑줄을 넣는 것으로 오타를 나타내는 것처럼 사용할 수 있다. <s>와 <del>은 글씨에 취소선을 추가할 수 있다. <s>는 단순히 시각적인 취소선만 추가되고 접근성 기기에 취소에 대한 안내는 하지 않는다. 반면 <del>은 문서에서 제거된 텍스트를 나타낼 수 있다. <ins> 태그를 함께 사용하면 제거된 텍스트 옆에 추가된 텍스트를 표현할 수 있다.
볼드 태그
스트롱 태그
기울임 i 태그
기울임 em 태그
밑줄 u 태그
취소선 s
취소선, 삭제된 글자추가될 글자
<p>
<b>볼드 태그</b><br>
<strong>스트롱 태그</strong><br>
<i>기울임 i 태그</i><br>
<em>기울임 em 태그</em><br>
<u>밑줄 u 태그</u><br>
<s>취소선 s</s><br>
<del>취소선, 삭제된 글자</del><ins>추가될 글자</ins>
</p>
링크 이동 <a>태그는 클릭하면 페이지를 이동할 수 있는 링크 요소를 만들 수 있다. href 속성을 사용해서 이동하고자 하는 파일 혹은 url을 작성하고, target 속성을 사용해서 이동해야 할 링크를 새창(_blank), 현재창(_self) 등 원하는 타겟을 지정할 수 있다.
이미지, 비디오 및 오디오, SVG (Scalable Vector Graphics)와 같은 멀티미디어도 넣을 수 있다.
<img>는 문서 내에 이미지를 넣을 수 있는 태그로, 가장 기본적인 이미지 넣는 방법이다. src 속성으로 이미지 경로를 넣고, alt 속성으로 이미지 로딩에 문제가 발생했을 때 대체 텍스트를 띄울 수 있다. <figure>는 하나의 독립적인 콘텐츠로 분리하고 그에 대한 설명을 넣을 수 있는 태그이며, <figcaption> 태그를 제일 처음이나 제일 아래에 사용하여 콘텐츠의 설명 혹은 범례를 추가할 수 있다.
<video>는 문서 내에 영상을 첨부할 수 있는 태그로, src 속성으로 링크를 넣고, poster 속성으로 비디오가 로드되기 전에 포스터를 보여줄 수도 있으며, <video> 태그 하위에 <source> 태그를 사용하면 여러 타입의 비디오를 제공할 수 있다. <source> 태그에는 src="경로"와 type="video/mp4" 등과 같은 속성을 줄 수 있다. <video> 태그 내에 작성한 글자는 비디오 태그가 실행되지 않을 때 보이게 된다. <audio>는 문서 내에 소리를 첨부할 수 있고, src 속성 외에 control 속성을 사용하면 재생/정지 버튼 등이 있는 컨트롤러를 띄울 수 있다. 마찬가지로 <source>태그를 사용하면 여러 타입의 오디오를 제공할 수 있고, 이 때 type은 "audio/mp3" 등의 형태이다. <audio> 태그 내에 작성한 글자는 오디오가 실행되지 않을 때 보인다.
<svg>는 그래픽으로 만들어진 이미지인데, 일반 이미지(래터스 이미지)와 다르게 수학 공식을 사용하여 그려지기 때문에 해상도의 영향을 받지 않아 확대/축소가 자유롭다. 주로 크기를 자주 바꾸어야 하는 작은 아이콘이나 로고 등 주요 이미지에 많이 사용된다. <img> 태그처럼 svg 파일을 불러올 수도 있고 태그를 그대로 사용할 수도 있다. 이 외에도 많은 사용 방식이 존재한다. 또한 코드로 이루어져 있기 때문에 스타일을 변경하거나 자바스크립트를 사용해 간단한 기능을 추가할 수도 있다.
리스트 태그는 정렬되지 않은, 순서가 없는 목록 <ul> 태그와 정렬된, 순서가 있는 목록 <ol> 태그, 설명 목록 <dl> 태그가 있다. 정렬되지 않은 목록 <ul> 태그는 기본 불릿 형식으로 목록을 그린다. 정렬된 목록 <ol> 태그는 기본 숫자 형식으로 목록을 그린다. <ul>과 <ol> 태그는 <li> 태그를 사용해 목록을 구성할 수 있고 다양한 태그를 포함할 수 있다. 설명 목록 <dl> 태그 안에는 <dt> 태그와 <dd> 태그가 있다. <dt> 태그에 사용된 단어 혹은 내용의 설명을 <dd> 태그에 작성할 수 있다. 주로 용어사전이나 "키-값"이 있는 쌍의 목록을 나타낼 때 사용한다. <dt> 태그는 여러 개 작성하고 하나의 <dd> 태그를 작성하는 것으로 여러 개의 용어를 설명할 수 있다. 위와 반대로, <dt> 태그 하나에 여러 개의 <dd> 태그를 가질 수도 있다.
표는 <table> 태그 안에 <tr> 태그로 행(row)을 구분하여, <td> 태그로 열(cell)을 생성할 수 있다. tr에 속성으로 rowspan을 넣으면 행을 병합할 수 있고, td에 속성으로 colspan을 넣으면 열을 병합할 수 있다. <th> 태그로 열의 제목을 만들 수도 있다. <thead> 태그는 제목 그룹 태그로, 열 제목의 행을 넣으며 그룹을 지을 수 있고, <tbody> 표 본문 요소이다. 이 둘은 표 내에서 한 번만 작성되어야 한다. <tfoot>는 표 바닥글 요소 태그로, 이 태그 안에 여러 열의 행을 넣음으로써 표의 바닥글 요소를 넣을 수 있다. html4의 경우 tfoot 다음에 tbody가 작성되어야 했는데, html5에서는 <thead>, <tbody>, <tfoot> 순으로 배치되어도 된다. <caption> 태그는 필수값은 아니지만 표를 설명을 넣을 수 있는 태그이다.
문서 내에 외부 콘텐츠를 불러오는 아이프레임 태그도 있다. <iframe> 태그는 현재 문서 안에 다른 HTML 페이지를 삽입할 수 있는 태그로, src에 html 문서 또는 url을 넣을 수 있고, name 속성을 지정하면 <a> 태그의 "target" 속성을 사용해 iframe에서 문서 또는 url이 열리게 할 수 있다. iframe은 외부 페이지를 불러올 수 있기 때문에 불러온 외부 페이지의 영향을 받을 수 있다.
3. 양식 태그
<form>은 정보를 제출하기 위한 태그이다. 정보를 입력하고 선택할 수 있는 input, selectbox, textarea 등을 가질 수 있고, 정보를 제출하기 위한 button을 갖는다. "action" 속성으로 정보 제출 시 페이지 이동을 결정하고, "methon" 속성으로 정보 제출 처리 방식을 결정할 수 있다.
<input>은 사용자에게 데이터를 입력받을 수 있는 대화형 태그이다. "type" 속성의 값에 따라 받을 수 있는 input의 유형이 달라진다. type 속성의 기본 값은 text이다. 그리고 "value" 속성으로 기본 내용을 입력 해놓을 수 있고, "name" 속성으로 input의 이름을 지정할 수도 있다. 자주 사용되는 input 타입은 체크박스 형태의 checkbox, 라디오 버튼 형태인 radio, 파일 첨부가 가능한 file, value 속성에 입력된 값을 이름으로 갖는 버튼인 button, 시각적으로 input을 숨겨주고 정보 제출 시 value 속성에 입력된 값은 전송시키는 hidden이 있다.
<textarea>는 여러 줄을 입력할 수 있는 대화형 태그이다. 태그 안에 콘텐츠를 넣으면 사용자가 입력하지 않아도 기본적으로 표시되는 내용으로 보인다. "cols"와 "rows" 속성으로 기본 너비와 높이를 지정할 수 있고, 이는 글자 크기 기준으로 정의된다.
<select>는 옵션 메뉴를 제공하는 테그이다. 하위에 <option> 태그로 옵션을 정의할 수 있고, 첫번째 option은 이름이 되며, 버튼명이기 때문에 "placeholder" 속성을 사용할 수 없다. "value" 속성을 선언하지 않은 경우 그 옵션 태그의 콘텐츠가 기본값이 된다.
input, selectbox, textarea에 공통으로 사용될 수 있는 속성들은 다음과 같다. readonly는 사용자가 수정할 수 없는 '읽기 전용'으로 만들고, required는 form이 제출될 때 '필수 입력 사항'으로 만든다. 이 때 필수 입력에 대한 태그에 따른 안내 문구나 행동 등은 브라우저가 자동으로 처리해준다. placholder는 부가 설명을 입력해둘 수 있고, disabled는 요소가 비활성화 되며 정보 제출 시 값이 제출되지 않는다.
<label>은 input, selectbox, textarea의 설명을 작성할 수 있는 태그이다. "for" 속성으로 연결하고자 하는 태그에 "id" 속성을 지정하면, label을 클릭할 때 연결된 태그가 선택된다. label 태그 안에 input 태그를 넣으면 자동으로 for->id 연결과 같은 처리를 해준다. label에서 id 속성은 값이 절대로 중복되면 안 된다.
<button>은 클릭 가능한 버튼 태그로, <form> 내에 아무 곳에서나 사용 가능하다. "type" 속성을 "reset"으로 지정하면 버튼이 눌릴 시 입력한 양식은 모두 초기화되고, "submit"으로 지정하면 form 양식을 제출할 수 있으며, 이것이 기본 타입이다. <button> 태그 내 콘텐츠에 태그의 입력은 가능하나, 블록 레벨 태그는 사용하면 안 되고, disabled 속성을 가질 수 있다.
<form action="//submit.html method="get">
<label for="name">이름</label>
<input id="name" type-"text" name="name">
<select>
<option>선택하세요.</option>
<option value="op1">옵션1</option>
<option value="op2">옵션2</option>
</select>
<button type="submit">전송</button>
</form>
4. 마크업 주의사항
우선 대소문자를 주의해야 한다. 태그는 대문자도 가능하지만, 소문자로 작성하는 것을 지향한다. 열린 태그와 닫힌 태그가 다른 문자로 인식될 수도 있다. 그리고 닫는 태그를 주의해야 한다. 태그가 단순할 경우 브라우저에서 알아서 수정해줄 수도 있지만, 코드가 복잡해질 경우 에러가 발생할 수도 있다. 클래스나 아이디 이름은 가급적 영어를 사용해야 한다. 한글로 사용할 수도 있지만, 영어가 좋다. 또한 이름은 중복되면 안된다는 것도 잊지 말아야 한다. 그리고 태그 중첩의 오류를 주의해야 한다. 태그를 여러 개 중첩하여 사용할 경우 태그가 꼬이지 않게 열리고 닫히는 순서를 잘 지켜야 한다. 또한, 같은 역할의 태그를 중복시키면 안 된다. <a> 태그 안에 <button> 태그를 넣으면 페이지 이동과 버튼 클릭(하여 이동)되며 의미가 중첩된다. 계층 유지도 잘 해야 한다. 코드가 가독성이 좋아야 하며, 유지 보수하기 훨씬 수월해진다.
이와 같은 기본적인 주의사항을 잘 지켜야 한다.
5. 추천 사이트
1. TCP School
2. MDN
3. W3School
☁️ 소감
기본적인 HTML/CSS/JS에 대해서 배웠다. 오늘 강의 내용은 기존에 알고 있던 내용들이라 다시 한 번 복습하는 차원으로 수업을 들어서 큰 어려움이 없었다. 지난 주에 공부하느라 어려웠던 자료구조와 알고리즘 공부를 좀 더 이어서 해야 할 것 같다.
공부 내용과는 별개로 초반에 일부 영상의 음질이 별로 안 좋아서 실망했다.
