📌 웹과 HTML&CSS에서 놓치기 쉬운 개념들

제론·2022년 4월 5일

헷갈리기 쉬운 HTML&CSS&JS 개념들😤

목록 보기

1/6

HTML, CSS 그거 쉽잖아?

과연 그럴까...!?

처음 웹 개발 공부를 시작하고 먼저 배우는 것이 html, css의 기본적인 내용들이다. 눈으로 바로 보이고 간단하게 웹을 설계하고 꾸밀 수 있어서 접근가능성이 낮다고 생각한다. 즉 진입장벽이 낮은데, 그래서 많이들 이 부분은 흥미롭게 공부한다(자바스크립트를 만나기 전까진...) 하지만 모든 공부에는 기본 개념, 지식들이 중요하듯이 html, css가 이해하기 쉽다고 해서 중요하지 않은 것은 아니다(쉽다고 생각하지도 않는다). 오히려 더 까다롭고 들여다 봐야할 내용들이 많은데 개발자지망생들은 프론트에서 js가 중요하다고 하니까 빨리 js로 넘어가려고 html, css는 훅 건너 뛴다. 여기서 나중에 차이가 나지 않을까 생각한다.

html에서 태그를 어떻게 만들고, class 설정, id 설정, 구조 설계 등등
css에서 선택자, 우선순위, flex, grid, 여러 프레임워크 등등

이런 지식들을 숙지하지 못하고 js로 넘어가고 웹 개발을 하다보면 분명 다시 돌아오게 된다. 그리고 내가 이런 것도 못하나... 하면서 자괴감이 느껴진다. 그리고 위 개념들을 명확하게 작성해야 웹의 완성도가 올라가고 js와의 시너지도 훨씬 좋아진다.

결국 html, css에서의 기본 개념을 단단히 다져놔야 시간 낭비를 하지 않을 수 있고 깔끔한 웹 개발이 가능하다. 사실 html, css 개념은 외우는 것이 대부분이라 약간 문과틱 하기도 하다. 그래서 비전공자들도 쉽게 배울 수 있지 않을까(also js를 만나기 전까지...).

그럼 오늘은 html, css에서 놓치기 쉽고 많이 간화하는 중요한 개념들을 설명해 보겠다!

웹에 대한 개념들

HTML(Hper Text Markup Language)

페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당.

CSS(Cascading Style Sheets)

실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당.

JS(JavaScript)

콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적처리를 담당.

웹 표준

웹 표준이란 ‘웹에서 사용되는 표준 기술이나규칙'을 의미
W3C의 표준화 제정 단계의 ‘권고안(REC)’에 해당하는 기술

cf) 브라우저 공급업체(Browser Venders) ex Chorme, firefox, safari ...

크로스 브라우징

크로스 브라우징(Cross Browsing)이란 조금은 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법.

--> 따라서 다양한 웹 브라우저에서 동일한 기능들이 작동할 수 있게 만들어야 함. 요즘은 크로스 브라우징이 잘 되어있어서 크게 신경을 쓰지 않아도 되지만. 그래도 버전별로 다를 수 있어서 mdn에서 체크해야할 필요가 있다!

브라우저의 기본적인 인터페이스

- 창(Window)
- 탭(Tab)
- 주소창(Address bar)
- 뷰포트(viewport) : 하나의 웹페이지가 출력되는 전체 영역(렌더링 되는 영역)

웹 이미지

이미지 첨부할 때 이 개념을 모르면 풍경사진을 svg 파일로 올리거나 jpg는 왤케 깨지는 거지 하고 머리를 뜯을 수 있다. 😰

비트맵

정교하고 다양한 색상을 자연스럽게 표현

확대/축소 시 계단 현상, 품질 저하

이미지 확장자(포맷)

JPG:

Full-color와 Gray-scale의 압축을 위해 만들어짐, 압축률이 훌륭해 사진이나 예술 분야에서 많이사용

손실 압축 방식

표현색상도(24비트, 약 1600만 색상)가 뛰어남

이미지의 품질과 용량을 쉽게 조절 가능

작은용량 but 이미지 새로 저장시 품질 저하가 일어남

가장 널리 쓰이는 이미지 포맷

PNG:

Gif의 대체 포맷을 개발됨.

비손실 압축

8비트(256 색상) / 24비트(약 1600만 색상) 컬러 이미지 처리

용량은 jpg 보다 큼

Alpha Channel의 지원(투명도) → 원하는 이미지 영역이외 투명하게 출력가능

W3C 권장 포맷

GIF:

이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장

비손실 압축

여러 장의 이미지를 한 개의 파일에 담을 수 있음

(움짤, 애니메이션)

8비트 색상만 지원(다양한 색상 표현에는 적합하지 않음)

WEBP:

JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷

완벽한 손실/비손실 압축 지원

GIF 같은 애니메이션 지원

Alpha Channel 지원(손실, 비손실 모두)

하위호환성 확인 필요

벡터

확대/축소에서 자유로음, 용량 변화가 없음

정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움

이미지 확장자(포맷)

SVG:

마크업언어 기반의 벡터 그래픽을 표현하는 포맷.

해상도의 영향에서 자유로움 → 이미지가 자주 바뀐다면 사용

CSS와 JS로 제어 가능

파일 및 코드 삽입 가능

특수 문자 용어 정리

이 개념도 은근 잘 모르는 경우가 많다. 용어도 확실히 알아두자! 🧐

그레이브, 백틱(Grave, Backtick) → `
틸드, 물결표시(Tilde) → ~
느낌표(Exclamation mark) → !
골뱅이(At sign) → @
샵(Sharp, Number sign)→ #
캐럿(Caret) → ^
엠퍼센드(Ampersand) → &
별표(Asterisk) → *
하이픈, 대시(Hyphen, Dash) → -
언더스코어, 로대시, 밑줄(Underscore, Low dash) → _
쿼테이션, 큰 따옴표(Quotation mark) → “
아포스트로피, 작은 따옴표(Apostrophe) → ‘
콜론(Colon) → :
세미콜론(Semicolon) → ;
피리어드, 닷, 점, 마침표(Period, Dot) → .
슬래시(Slash) → /
버티컬 바(Vertical bar) → |
백슬래시, 역 슬래시(Backslash) → \
퍼렌서시스, 소괄호, 괄호(Parenthesis) → ()
브레이스, 중괄호(Brace) → {}
브래킷, 대괄호(Bracket) → []
앵글 브래킷, 꺽쇠괄호(Angle Bracket) → <>

오픈 소스 라이센스

어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를, 누구나 접근해서 열람할 수 있도록 공개하는 것

오픈소스

Apache License

아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이센스

개인적/상업적 이용, 배포, 수정, 특허 신청이 가능

MIT License

MIT에서 소프트웨어 학생들을 위해 개발한 라이센스

개인 소스에 이 라이센스를 사용하고 있다는 표시만 지켜주면 됨, 나머지 사용에 대한 제약은 없음

BSD License

버클리 캘리포니아에서 소프트웨어 학생들을 위해 개발한 라이센스

MIT랑 비슷

Beerware

오픈소스 개발자에게 맥주를 사줘야 하는 라이센스

물론 만날 수 있는 경우...

cf) Material Design: 고품질 디지털 경험을 구축할 수 있도록 Google에서 만든 디자인 시스템(방식)

HTML

Doctype(DTD)
- 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도
Tag(태그)

- <html> → **문서의 전체 범위**: HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할
- <head> → **문서의 정보를 나타내는 범위**: 웹 브라우저가 해석해야 할 웹페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 같은, 웹페이지의 보이지 않는 정보를 작성하는 범위
- <body> → **문서의 구조를 나타내는 범위**: 사용자 화면을 통해 보여주는 로고, 헤더, 푸터, 네비게이션, 메뉴, 버튼, 이미지 같은 웹페이지의 보여지는 구조를 작성하는 범위

cf) <html lang=”ko”> : 지정할 문서의 언어를 명시하는 html 속성

정보를 의미하는 태그
- title 태그 → html 문서의 제목을 정의, 웹 브라우저 탭에 표시됨!
- meta 태그 → 다른 태그로 설명할 수 없는 이외의 정보 html 문서의 제작자, 내용, 키워드 같은, 여러 정보를 검색엔진이나 브라우에게 제공
- 모바일에서 적용되는 정보, viewport에서 처음 보여질 때 너비를 디바이스의 길이로 맞추고 1.0으로 확대하라는 내용
- charset(Character Set): 문자 인코딩 방식을 지정하는 html 속성
  
  cf) 문자인코딩: 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것
```
			<meta charset=”UTF-8” />
	
```
이미지 출력하기

<img src=”https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcStVcg-sYLXVNKqoLGgWSRECNTBbosf8Yt05A&usqp=CAU” alt=”bitcoin”>

alt: 이미지가 출력되지 못하는 경우 대신 출력할 텍스트라고 해서 대체 텍스트라 불림

상대 경로 vs 절대 경로
상대경로
- 주변: ./ (생략가능)
- 상위폴더: ../
절대경로
- http: 원격
- / : 루트경로(최상위경로 → 프로젝트로 들어오자마자 보이는 위치) / 로컬호스트 경로가 생략되어 있음
cf) 브라우저는 자동으로 index.html 파일을 찾아 웹사이트를 띄어줌(⇒폴더 경로만 제시해도됨)

- 브라우저 스타일 초기화

브라우저에서 기본적으로 설정되어 있는 css 스타일을 초기화
reset.css cdn → jsDeliver github 들어가서 reset.css 확인

cf) 파일명.min.확장자와 같이 min(Minify)키워드는 파일이 난독화나 경량화되었다는 것을 의미

https://www.jsdelivr.com/package/npm/reset-css
-> 여기서 브라우저 스타일 초기화하는 코드 가져올 수 있음.

- 부모 자식 관계

상위(조상)요소: 부모요소를 포함한 나를 감싸고 있는 모든 요소
하위(후손)요소: 자식요소를 포함한 내가 감싸고 있는 모든 요소

- 빈 태그

빈 태그들은 내용을 채울 수 없기 때문에 기능을 명확하게 하기 위해 속성과 값을 필요로 함

방식

<태그> - 편리함
<태그/> - 안전함, 프레임워크 사용시속성, 값
<태그 속성=”값">내용</태그>
ex) <input type=”checkbox”/>

- 글자와 상자

요소가 화면에 출력되는 특성, 크게 2가지로 구분

인라인(inline)요소: 글자를 만들기 위한 요소들, 글자처럼 취급
- <span></span>: 본질적으로 아무것도 나타내지 않음, 콘텐츠 영역을 설정하는 용도, 인라인 특성을 가짐 ⇒ 요소가 수평으로 쌓임, 하나의 글자처럼 취급
  - html에서 줄바꿈으로 span 태그 연속으로 작성시 띄어쓰기 생김
  - html에서 줄바꾸지 않고 span태그 연속으로 작성시 띄어쓰기 없음
- 포함한 콘텐츠 크기만큼 자동으로 가로 세로가 줄어듬
- 글자요소는 가로 세로 사이즈(width, height)를 지정할 수 없음
- margin, padding 적용시 좌우만 가능
- 인라인 요소의 자식요소로 블록 요소를 사용불가, 인라인 요소는 가능
블록(block)요소: 상자(레이아웃)를 만들기 위한 요소들
- : 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도
- 가로너비는 부모 요소의 크기만큼 자동으로 늘어나는 특성
- 세로너비는 자동으로 줄어드는 특성
- 상하좌우 사이즈 설정 가능
- margin, padding 상하좌우 사이즈 설정 가능
- 자식으로 블록요소, 인라인요소 가능

제론

Software Developer

다음 포스트

📌 웹과 HTML&CSS에서 놓치기 쉬운 개념들: html 요소와 css 선택자!

3개의 댓글

명이

2022년 7월 5일

위에 웹에 대한 개념들에 Javascript를 Jacascript라고 작성하셨네요. 오타 수정 부탁드려용

2개의 답글