Search
📝

TIL 22/08/01 (월)

TIL (Today I Learned)

Web?

웹 사이트의 구성 요소

웹 사이트
브라우저를 통해 접속하는 웹 페이지(문서)들의 모음
글, 그림, 영상 등 여러 정보를 담고 있고, 마우스를 클릭하여 다른 웹 페이지로 이동할 수 있는 링크들도 있음.
링크를 통해 여러 웹 페이지를 연결한 것이 바로 웹 사이트
HTML + CSS + Javascript: 구조 + 표현 + 동작

웹 사이트와 브라우저

웹 사이트는 브라우저를 통해 동작
브라우저마다 동작이 조금씩 다르기 때문에 문제가 생겼고(파편화),
해결을 위해 웹 표준이 등장

웹 표준

웹에서 표준으로 사용되는 기술이나 규칙
어떤 브라우저에서도 웹 페이지가 동일하게 보이도록 → 크로스 브라우징

HTML (Hyper Text Markup Language)

HTML?

하이퍼링크(참조)를 통해 한 문서에서 다른 문서로 즉시 접근 가능한 텍스트
웹 페이지를 작성(구조화)하기 위한 언어

Markup Language

태그 등을 이용해 문서나 데이터 구조를 명시하는 언어
HTML, Markdown

HTML 스타일 가이드

마크업 스타일 가이드(2 space)

HTML 기본 구조

HTML 기본 구조

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello, HTML</title> </head> <body> </body> </html>
HTML
html: 문서의 최상위(root) 요소
head: 문서 메타데이터 요소
문서 제목, 인코딩, 스타일, 외부 파일 로딩 등
일반적으로 브라우저에 나타나지 않는 내용
body: 문서 본문 요소
실제 화면 구성과 관련된 내용

head 예시

<head> <meta charset="UTF-8"> <title>Hello, HTML</title> <link href="style.css" rel="stylesheet"> <script src ="javascript.js"></script> <style> p { color: black; } <style> </head>
HTML
<title>: 브라우저 상단 타이틀
<meta>: 문자 레벨 메타데이터 요소
<link>: 외부 리소스 연결 요소(CSS 파일, favicon 등)
<script>: 스크립트 요소(JavaScript 파일/코드)
<style>: CSS 직접 작성

Open Graph Protocol

메타 데이터를 표현하는 새로운 규악
HTML 문서의 메타 데이터를 통해 문서의 정보 전달
메타정보에 해당하는 제목, 설명 등을 쓸 수 있도록 정의

요소 (element)

시작 태그 + 내용 + 종료 태그로 구성
요소는 태그로 컨텐츠(내용)을 감싼 것으로 데이터의 성ㄱ격과 의미를 정의
내용이 없는 태그들도 존재(닫는 태그 또한 없음)
br, hr, img, input, link, meta
요소는 중첩(nested) 가능
요소의 중첩을 통해 하나의 문서를 구조화
여는 태그와 닫는 태그의 페어를 주의 깊게 확인해야 함
에러 반환이 아닌, 레이아웃이 깨진 상태로 화면을 출력 → 디버깅이 힘들어짐

속성 (attribute)

속성을 통해 태의 부가 정보 설정 가능
요소는 속성을 가질 수 있으며, 경로나 크기와 같은 추가 정보 제공
요소의 시작 태그에 작성하며, 보통 이름과 값이 하나의 페어로 존재
태그 상관없이 사용 가능한 속성(HTML Global Attribute)도 있음.

HTML Global Attritue

모든 HTML 요소가 공통으로 사용 가능한 대표 속성
id: 문서 전체에서 유일한 고유 식별자 지정
class: 공백으로 구분된 해당 요소의 클래스의 목록(CSS, JS에서 요소를 선택하거나 접근)
data-*: 페이지에 개인 사용자 정의 데이터를 저장
style: inline 스타일
title: 요소에 대한 추가 정보 지정
tabindex: 요소의 탭 순서

시맨틱 태그

HTML 태그가 특정 목적, 역할 및 의미적 가치(semantic value)를 가지는 것
Non semantic 요소로는 div, span 등이 있으며, a, form, table 태그들도 시민택 태그로 간주 가능
HTML5에서는 기존에 단순히 컨텐츠의 구획을 나타내기 위해 사용한 div 태그를 대체하여 사용하기 위해 의미론적 요소를 담은 태그들이 추가됨
대표적인 시맨틱 태그 목록
header: 문서 전체나 식션의 헤더(머리말)
nav: 네비게이션
aside: 사이드에 위치한 공간, 메인 컨텐츠와 관련성 적은 컨텐츠
section: 문서의 일반적인 구분, 컨텐츠의 그룹을 표현
article: 문서, 페이지, 사이트 안에서 독립적으로 구분되는 영역
footer: 문서 전체나 섹션의 푸터(마지막)

시맨틱 태그를 사용해야 하는 이유

의미론적 마크업
개발자 및 유저 뿐만 아니라 검색 엔진 등에 의미 있는 정보의 그룹을 태그로 표현
단순히 구역을 나누는 것 뿐만 아니라 의미를 가지는 태그들을 활용하기 위한 노력
요소의 의미가 명확해지기 때문에 코드의 가독성을 높이고 유지보수를 용이하게
검색 엔진 최적화(SEO)를 위해 메타 태그, 시맨틱 태그 등을 통한 마크업을 효과적으로 활용해야 함

렌더링과 DOM 트리

렌더링(Rendering)
웹 사이트 코드를 사용자가 보는 웹 사이트로 바꾸는 과정
DOM(document Object Model) 트리
텍스트 파일인 HTML 문서를 브라우저에서 렌더링 하기 위한 구조
HTML 문서에 대한 모델을 구성
HTML 문서 내의 각 요소에 접근/수정이 필요한 프로퍼티와 메서드 제공

HTML 문서 구조화

인라인 / 블록 요소

HTML 요소는 크게 인라인 / 블록 요소로 나뉨
인라인은 글자처럼 취급
블록은 한 줄 모두 사용

텍스트 요소

<a></a>: href 속성을 지정하여 다른 URL로 연결하는 하이퍼링크 생성
<b></b>, <strong></strong>: 굵은 글씨 요소
<i></i>, <em></em>: 기울임 글씨 요소
<br>: 텍스트 내에 줄 바꿈 생성
<img>: src 속성을 활용해 이미지 표현
<span></span>: 의미없는 인라인 컨테이너

그룹 컨텐츠

<p</p>: 하나의 문단(paragraph)
<hr>: 문단 레벨 요소에서의 주제의 분리를 의미. 수평선으로 표현(A Horizontal Rule_
<ol></ol>, <ul></ul>: 순서가 있는 리스트(ordered), 순서가 없는 리스트(unordered)
<pre></pre>: HTML에 작성한 내용을 그대로 표현, 보통 고정폭 글꼴을 사용, 공백문자를 유지
<blockquote</blockuote>: 텍스트가 긴 인용문, 주로 들여쓰기를 한 것으로 표현
<div></div>: 의미 없는 블록 렙레 컨테이너

form

데이터를 서버에 제출하기 위해 사용하는 태그
<form action="/search" method="GET"> </form>
HTML
기본 속성
action: form을 처리할 서버의 URL(데이터를 보낼 주소)
method: form을 제출할 때 사용할 HTTP 메서드(GET or POST)
enctype: 메서드가 POST인 경우 데이터의 유형
application/x-www-form-urlencoded: 디폴트
multipart/form-data: 파일 전송시(input type이 file인 경우)
text/plain: HTML5 디버깅용(잘 사용하진 않음)

input

다양한 타입을 가지는 입력 데이터의 유형과 위젯을 제공
<form action="/search" method="GET"> <input type="text" name="q"> </form>
HTML
대표 속성
name: form control에 적용되는 이름(이름/값 페어로 전송)
value: form control에 적용되는 값(이름/값 페어로 전송)
required, readonly, autofocus, autocomplete, disabled

input label

lable을 클릭해 input 자체에 초점을 맞추거나 활성화 가능
유저는 선택 가능한 영역이 늘어나 웹/모바일 환경에서 편하게 사용 가능
labelinput의 입력 관계가 시각적 뿐만 아니라 홤녀 리더기에서도 label을 읽어 쉽게 내용 확인 가능
<input>id 속성을, <label>에는 for 속성을 활용하여 상호 연관을 시킴
<label for="agreement">개인정보 수집에 동의합니다.</label> <input type="checkbox" name="agreement" id="agreement">
HTML

input 유형 - 일반

일반적으로 입력을 받기 위해 제공되며, 타입별로 HTML 기본 검증 or 추가 속성 활용 가능
text: 일반 텍스트 입력
password: 입력 시 값을 감춰 문자를 특수기호(*)로 표현
email: 이메일 형식이 아닌 경우 form 제출 불가
number: min, max, step 속성을 활용하여 숫자 범위 설정 가능
file:accept 속성을 활용하여 파일 타입 지정 가능

input 유형 - 항목 중 선택

일반적으로 label 태그와 함께 사용하여 선택 항목 작성
<div> <p>checkbox</p> <input id="html" type="checkbox" name="language" value="html"> <label for="html">HTML</label> <input id="python" type="checkbox" name="language" value="python"> <label for="python">파이썬</label> <input id="python" type="checkbox" name="language" value="java"> <label for="java">자바</label> <hr> </div>
HTML
동일 항목에 대해서는 name을 지정하여 선택 항목에 대한 value 지정 필요
checkbox: 다중 선택
radio: 단일 선택

input 유형 - 기타

다양한 종류의 input을 위한 picker 제공
color: color picker
date: date picker
hidden input을 활용하여 사용자 입력을 받지 않고 서버에 전송되어야 할 값 설정
hidden: 사용자에게 보이지 않는 input

CSS

CSS (Cascading Style Sheets)

스타일을 지정하기 위한 언어
CSS 구문은 선택자를 통해 스타일을 지정할 HTML 요소를 선택
중괄호 안에서는 속성과 값, 하나의 페어로 이뤄진 선언을 진행
각 페어는 선택한 요소의 속성과 값을 의미
속성(Property): 어떤 스타일 기능을 변경할지 결정
값(Value): 어떻게 스타일 기능을 변경할지 결정

CSS 구문

h1 { /* 선택자 */ color: blue; /* 선언 */ font-size: 15px; # /* 속성: 값; */ }
CSS

CSS 정의 방법 - 인라인

CSS 정의 방법 - 내부 참조

CSS 정의 방법 - 외부 참조

CSS Selectors

선택자(Selector) 유형

기본 선택자
전체 선택자
요소 선택자
HTML 태그를 직접 선택
클래스 선택자
마침표(.)문자로 시작하며, 해당 클래스가 적용된 항목을 선택
아이디 선택자
# 문자로 시작하며, 해당 아이디가 적용된 항목 선택
일반적으로 하나의 문서에 1번만 사용
여러 번 사용해도 동작하지만, 단일 id 사용을 권장
속성 선택자
결합자(Combinators)
자손 결합자, 자식 결합자
일반 형제 결합자, 인접 형제 결합자
의사 클래스/요소(Pseudo Class)
링크, 동적 의사 클래스
구조적 의사 클래스, 기타 의사 클래스, 의사 엘리먼트, 속성 선택자
선택자 예시

CSS 적용 우선순위 (Cascading Order)

1.
중요도(Importance)
!important
2.
우선 순위(Specificity)
inlineidclass, property, pseudo-classelement, pseudo-element
3.
CSS 파일 로딩 순서

CSS 상속

부모 요소의 속성을 자식에게 상속
속성(property) 중 상속되는 것과 되지 않는 것이 존재
상속 되는 것
Text 관련 요소(font, color, text-align), opacity, visiblility
상속 안되는 것
Box model 관련 요소(width, height, margin, padding, border, box-sizing, dispaly)
Position 관련 요소(position, top/right/bottom/left, z-index 등)

CSS 기본 스타일

크기 단위

<style> .font-big { font-size: 36px } .em { font-size: 2em; } .rem { font-size: 2rem; } </style>
HTML
px
모니터 해상도의 한 화소인 픽셀 기준
픽셀의 크기는 변하지 않기 떄문에 고정적인 단위
%
백분율 단위
가변적인 레이아웃에서 자주 사용
em
(바로 위, 부모 요소에 대한) 상속의 영향을 받음
배수 단위, 요소에 지정된 사이즈에 상대적인 사이즈를 거짐
rem
(바로 위, 부모 요소에 대한) 상속의 영향을 받지 않음
최상위 요소(HTML)의 사이즈를 기준으로 배수 단위를 가짐

크기 단위 (viewort)

<style> h1 { color: black; background-color: pink; } .px { width: 200px; } .vw { width: 50vw; } </style>
HTML
웹 페이지를 방문한 유저에게 바로 보이게 되는 웹 컨텐츠의 영역 (디바이스 화면)
디바이스의 viewport를 기준으로 상대적 사이즈가 결정됨
px는 브라우저의 크기를 변경해도 그대로
vw는 브라우저의 크기에 따라 크기가 변화
vw, vh, vmin, vmax

색상 단위

색상 키워드
background-color: red;
대소문자 구별 X
red, blue, black과 같이 특정 색을 직접 글자로 나타냄
RGB 색상
background-color: rgb(0, 255, 0);
16진수 또는 함수형 표기법을 사용해 특정 색을 표현
HSL 색상
background-color: hsl(0, 100%, 50%);
색상, 채도, 명도를 통해 특정 색을 표현

Selectors 심화

결합자 (Conbinators)

자손 결합자(공백)
selectorA 하위의 모든 selectorB 요소
자식 결합자(>)
selectorA 바로 아래의 selectorB 요소
일반 형제 결합자(~)
selectorA의 형제 요소 중 뒤에 위치하는 selectorB 요소를 모두 선택
인접 형제 결합자(+)
selectorA의 형제 요소 바로 뒤에 위치하는 selectorB 요소를 선택

CSS Box model

CSS 원칙 1

모든 요소는 박스 모델이고, 위에서부터 아래로, 왼쪾에서 오른쪽으로 쌓인다.

Box Model

모든 HTML 요소는 Box 형태
하나의 Box네 영역으로 나뉨
margin
border
padding
content
marginpaddingshorthand로 표현 가능
margin: 10px;: 전체
margin: 10px 20px;: 상하 좌우
margin: 10px 20px 30px;: 상 좌우 하
margin: 10px 20px 30px 40px;: 상 우 하 좌
bordershorthand 로 표현 가능
border: 2px dashed black;: 두께 스타일 컬러

box-sizing

기본적으로 모든 요소의 box-sizingcontent-box
padding을 제외한 순수 contents 영역만을 box로 지정
허나 우리가 일반적으로 영역을 볼 땐 border까지의 너비를 100px로 보는 걸 원함
이런 경우 box-sizingborder-box로 설정

CSS Display

CSS 원칙 2

display에 따라 크기와 배치가 달라짐

대표적으로 활용되는 display

display: block
줄 바꿈이 일어나는 요소
화면 크기 전체의 가로 폭을 차지
블록 레벨 요소 안에 인라인 레벨 요소가 들어갈 수 있음
display: inline
줄 바꿈이 일어나지 않는 행의 일부 요소
content 너비만큼 가로 폭을 차지
width, height, margin-top, margin-bottom을 지정 불가능
상하 여백은 line-height

블록 레벨 요소와 인라인 레벨 요소

블록 레벨 요소와 인라인 레벨 요소 구분 (HTML 4.1까지)
대표적인 블록 레벨 요소
div / ul, ol, li / p / hr / form
대표적인 인라인 레벨 요소
span / a / img / input, label / b, em, i, strong

display

display: inline-block
블록과 인라인 레벨 요소의 특징을 모두 가짐
인라인처럼 한 줄에 표시, 블록처럼 width, height, margin 속성 모두 지정 가능
display: none
해당 요소를 화면에 표시하지 않고, 공간조차 부여되지 않음
이와 비슷한 visibility: hidden은 해당 요소가 공간은 차지하나 화면에 표시만 하지 않음

CSS Position

CSS Position

문서 상에서 요소의 위치를 지정
static: 모든 태그의 기본 값(기준 위치)
일반적인 요소의 배치 순서에 따름(좌측 상단)
부모 요소 내에 배치될 때는 부모 요소의 위치 기준으로 배치
다음은 좌표 프로퍼티(top, botoom, left, right)를 사용하여 이동 가능
1.
relative: 상대 위치
자기 자신의 static 위치를 기준으로 이동 (normal flow 유지)
레이아웃에서 요소가 차지하는 공간은 static일 때와 동일 (normal position 대비 offset) → static일 때의 공간은 계속 차지 되고 있기 때문에 사용 불가
2.
absolute: 절대 위치
요소를 일반적인 문서 흐름에서 제거 후 레이아웃에 공간을 차지하지 않음 (normal flow에서 벗어남)
static이 아닌 가장 가까이 있는 부모/조상 요소를 기준으로 이동 (없는 경우 브라우저 화면 기준으로 이동) → 어떤 부모가 static이 아닌지 체크 필요
3.
fixed: 고정 위치
요소를 일반적인 문서 흐름에서 제거 후 레이아웃에 공간을 차지하지 않음 (normal flow에서 벗어남)
부모 요소와 관계없이 viewport 기준으로 이동
스크롤 시에도 항상 같은 곳에 위치
4.
sticky: 스크롤에 따라 staticfixed로 변경

WIF (What I Felt)

정말 방대한 양의 HTML/CSS 지식이 들어온 날이었다.
물론 과거에 풀스택으로 프로젝트 진행하면서 익숙해진 개념들도 있었기 때문에 완전 생소하진 않았다.
CSS Position 같이 새로 알게된 개념들도 있었고, 당장 눈에 보이는 화면을 구현하기 위해 덕지덕지 누더기 코드에 인라인 속성 남발 등.. 참 안좋은 방식으로 프론트를 개발했구나 싶었다..ㅎㅎ
좀 더 정석적으로 익힌 다음, 나중에 시간 내서 기존 프로젝트의 프론트단을 싹다 갈아 엎어야겠다..!