주니어 데이터 엔지니어 우솨's 개발일지

데이터 엔지니어링 6일차 TIL 본문

데브코스

데이터 엔지니어링 6일차 TIL

우솨 2024. 4. 1. 17:24

학습 내용

HTML(Hypertext Markup Language)
웹 브라우저가 이해할 수 있는 언어
CSS(Cascading Style Sheets)
문서를 예쁘게 꾸미는 언어
Java Script
문서에 기능을 만들어주는 언어

HTML
콘테츠를 가지는 태그
<div> 콘텐츠 </div>

콘텐츠를 가지지 않는 태그 두가지로 구분된다.
<br />

속성과 값
<div title = '제목'> Content</div>
a태그 - 링크
href속성을 사용해서 이동하고자 하는 파일 혹은 url을 작성한다.
target속성을 사용해서 이동해야 할 링크를 새창(_blank), (_self)등 원하는 타겟을 지정할 수 있다.

HTML의 기본 문서
<!DOCTYPE html> #문서버전
    <html lang='ko'> #기본언어설정
        <head>
            <title>문서 제목</title> #제목
        </head>

        <body> #실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳
            안녕하세요 !
        </body>
    </html>
들여쓰기를 통해 부모, 자식의 관계를 파악이 가능하다.

주석(Comment)
-개발자가 코드 내에 입력한 메모, 주석 안에 주석을 또 넣을순 없다!
<!-- 주석내용 -->


<head> 태그
사람의 눈에 보이지 않는 문서의 정보가 담기는 영역
1. 타이틀
2. 메타 데이터
-인코딩 정보 : 'charset'은 문서에서 허용하는 문자의 집합으로 charset에 선언된 문자의 집합 규칙에 따라 문서에서 사용할수 있는 문자가 제한된다. (꼭 UTF-8사용)
-문서 설명
-문서 작성자
3. CSS,Script
<style>, <link>, <script>
-문서 내용의 외형에 영향을 주는 태그들

<body> 태그
실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳

1. block(블록 레벨 요소)
레고 블록처러 차곡차곡 쌓이고 화면 너비가 꽉 차는 요소
-블록의 크기와 내/외부에 여백을 지정할 수 있고 일반적으로 페이지의 구조적 요소를 나타낸다.
-인라인 요소를 포함할 수 있으나, 인라인 요소에 포함될 수 없다.
ex) <div>, <article>, <section>

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

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

레이아웃
-HTML5부터 태그를 의미 있게 사용하기 위해 'Semantic'태그를 사용하여 문서 구조를 작성
-단순히 의미 구분자인 <div>를 남발하지 않고 적절한 태그를 사용하여 웹 문서가 담은 정보와 구조를 의미있게 전달
-시멘틱하게 마크업을 함으로써 검색엔진의 검색 순위에 가산점을 얻거나 홈페이지의 로딩속도를 높인다.

콘텐츠
-div : 가장 흔히 사용되는 레이아웃 태그로 단순히 구역을 나누기 위한 태그
레이아웃 태그 #1
-header : 블로그 글 제목, 작성일 등의 주요 정보를 담는 태그
-footer : 페이지의 바닥줄에 사용되며 저작권 정보, 연락처 등 부차적인 정보를 담는 태그
-main : 페이지의 가장 큰 부분으로 사이트의 내용 즉, 주요 콘텐츠를 담는 태그
레이아웃 태그 #2
-section : 콘텐츠의 구역을 나누는 태그로, 신문지에서 여러 기사가 각자의 구역에서 각자의 정보를 전달하는 의미와 비슷한 역할을 하는 태그
-article : 블로그 포스트, 뉴스 기사와 같은 독립적인 문서를 전달하는 태그
-aside : 문서의 주요 내용에 간접적인 정보를 전달하는 태그로, 쇼핑몰의 오른쪽에 따라다니는 '오늘 본 상품' 같은 것으로도 사용할 수 있다.

제목 태그
<h1> ~<h6>
문서 구획 제목을 나타내는 태그로 Heading태그라고 부른다.
h1태그는 한번만 사용되어야 하고 구획의 순서는 지켜져야 한다.

문단태그
<p>
문서에서 하나의 문단으로 나타내는 태그이다.
제목 태그와 함께 사용되기도 하고 단독으로 사용되기도 한다.
<b> 볼드태그
굵은 글씨로만 변경
<strong>
굵은 글씨로 변경후 강조의 의미를 부여
<b>와 <strong>의 굵은 효과는 같지만 의미가 다르다.
<i>
기울기
<em>
<i>처럼 기울기 처리를 하며 강조의 의미를 가진다.
<u>
밑줄을 넣고 주석을 가지는 단어임을 나타낸다.
단순하게 밑줄만 긋는 용도로 사용X
<s>
취소선 추가, 단순히 시각적인 효과
<del>
취소선 추가, 문서에서 제거된 텍스트를 나타낼 수 있다, <ins>태그를 함께 사용하여 제거된 텍스트 옆에 추가된 텍스트를 표현할 수 있다.

 

멀티미디어
이미지, 비디오,오디오, SVG(Scalable Vector Graphics)
<img>
문서 내에 이미지를 넣을 수 있는 태그
- 가장 기본적인 이미지 넣는 방법
- 'src'속성을 이용해 이미지의 경로를 넣으면 이미지가 출력됨
- 'alt'속성을 사용해 이미지 로딩에 문제가 발생했을 때 대체 텍스트를 띄울 수 있다. alt태그 작성 필수!

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

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

<audio>
문서 내에 소리를 첨부할 수 있는 태그
- video태그와 사용법이 비슷하다.
- 'control' 속성을 사용하면 재생/정지 버튼 등이 있는 컨트롤러를 띄울 수 있다.

<svg>
- 그래픽으로 만들어진 이미지
- 일반 이미지와 다르게 수학 공식을 사용하여 그려지기 때문에 해상도의 영향을 받지 않아 확대/축소가 자유롭다.
- 주로 크기를 자주 바꾸어야 하는 작은 아이콘에서 많이 사용되다.
- 해상도가 다양하게 변화하는 최근 기기들로 인해 아이콘 외에 로고 등 주요 이미지에도 사용되고 있다.
- <img> 태그 처럼 svg파일을 불러 올수도 있고 태그를 그대로 사용할 수도 있다.
- 코드로 이루어져 있기 때문에 스타일을 변경하거나 자바스크립트를 사용해 간단한 기능을 추가할 수도 있다.

리스트 <ul>, <li>
- 정렬되지 않은 목록 태그
- 기본 불릿형식(점)으로 목록을 그린다.
- <ul>태그의 자식요소로는 <li>태그만 와야한다, 하위 리스트를 만드려면 <li> 태그 안에 <ul>,<ol>태그를 사용하면 된다.
<ol>
기본숫자 방식으로 목록을 그린다.

<dl>,<dt>,<dd>
- 설명목록태그
- <dt> 태그에 사용된 단어 혹은 내용의 설명을 <dd>태그에 작성 할 수 있다.
- 주로 용어사전이나 '키-값'이 있는 쌍의 목록을 나타낼 때 사용.

표 <table>
-<tr> 행 구분(row)
-<td> 태그로 열 생성(cell)
-<th> 열의 제목 태그
-<thead> 본문의 제목

-<tbody> 표의 본문 요소
-<tfoot> 표의 바닥글
-<caption> 표 설명태그

아이프레임(iframe)
현재 문서안에 다른 HTML 페이지를 삽입할 수 있는 태그
ex)유튜브 영상 넣기
-src속성에 원하는 HTML 문서 또는 URL을 넣을 수 있다.
-외부 페이지를 불러올 수 있기 때문에 불러온 외부 페이지의 영향을 받을 수 있다.(보안 이슈)
- 'name'속성을 지정하면, <a> 태그의 'target'속성을 사용해 iframe에서 문서 또는 URL이 열리게 할 수 있다.

양식 태그
Form
-정보를 제출하기 위한 태그 : input, selectbox, textarea등을 가질 수 있다.
-정보를 제출하기 위한 button을 가진다.
-'action' 속성으로 제출되었을 때 페이지를 이동시킬 수 있다.
-'method'속성으로 제출될 때 처리 방식을 결정할 수 있다.

label 
-사용자에게 데이터를 입력 받을 수 있는 대화형 태그
-type속성의 값에 따라 받을 수 있는 input의유형이 달라진다.
-value속성을 사용해 기본내용을 입력 해둘 수 있다.
-name속성을 사용해 input의 이름을 지정할 수 있다.

자주 사용되는 input타입
- checkbox : 체크박스
- radio : 라디오 버튼
- file : 파일을 첨부할 수 있게 만든다.
- button : value속성에 입력된 값을 이름으로 갖는버튼으로 만든다.
- hidden : input을 시각적으로 숨겨준다.

textarea
여러줄을 입력할 수 있는 대화형 태그
-cols/row 속성으로 기본 너비와 높이를 지정할 수 있다.

readonly :읽기전용
required : 입력 필수사항
placeholder : input, textarea에 부가설명 입력
disalbed: 비활성화 시킴.

html 주의사항 
1. 대소문자 구분
2. 받는 태그 생략, 태그 중첩의 오류, 태그가 꼬이지 않게 주의
3. 클래스 속성 생성시 영어사용
4. ID값의 중복
5. 계층(들여쓰기=뎁스) 유지
6.a태그 안에 button태그 넣지 않기

 

느낀 점

html이란 부분은 처음 배워서 어색했지만 생각보다 재미있었다.

데이터 엔지니어링과정을 들으면서 매일 TIL을 쓰는데 기본모드 외에도 html모드로 쓸 수 있는걸 알았다.

이제부터 TIL을 쓸 때 HTML모드로 바꿔 배운 내용들을 써먹을 수 있을 것 같아 유익했다.

'데브코스' 카테고리의 다른 글

데이터 엔지니어링 8일차 TIL  (1) 2024.04.03
데이터 엔지니어링 7일차 TIL  (0) 2024.04.02
데이터 엔지니어링 5일차 TIL  (2) 2024.03.29
데이터 엔지니어링 4일차 TIL  (0) 2024.03.28
데이터 엔지니어링 3일차 TIL  (0) 2024.03.27
'데브코스' Related Articles more