처음부터 다시보는 WEB

예빈·2023년 7월 26일
CSShtml
0

ETC

목록 보기
14/15
post-thumbnail

HTML

🔖 head 태그

head 태그에는 무엇이 있을까? 사용자에게 직접적으로 보이진 않지만, 웹 브라우저와 검색 엔진이 페이지를 처리하고 해석하는 데에 중요한 역할을 한다. 일반적으로 title, icon, meta를 포함한다. 

<head>
    <meta charset="UTF-8">
    <title>웹 페이지 제목</title>
    <meta name="description" content="이 웹 페이지는 예시 페이지입니다.">
    <meta name="keywords" content="HTML, 웹 페이지, 설명">
    <meta name="author" content="작성자 이름">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" type="image/png" href="favicon.png">
</head>

예시로 NAVER를 살펴보면, 꽤나 많은 정보가 포함되어있다.
그동안 제목과 아이콘, 스크립트 파일을 불러오는 정도로만 사용했었는데, 개발자 도구를 키면 바로 보이는 코드이기도 하고 검색엔진 최적화를 위해서 더 신경써야 겠다는 걸 깨달았다.


HTML 태그 속성

HTML 태그에서 일반적으로 사용하는 class, id, style 말고도 data라는 속성을 사용할 수 있다. 해당 태그에 특정한 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다.

<button class="book-mark" data-count="323">즐겨찾기</button>
const bookMark = document.querySelector('.book-mark');
bookMark.getAttribute('data-count'); // "323"
bookMark.setAttribute('data-count', 423);
bookMark.removeAttribute('data-count');

⚠️ 주의할 점으로는 속성에 들어가면 모두 문자열로 저장되기 때문에, 변환이나 파싱해서 사용해야한다.


CSS

Modern CSS Reset

User-Agent StyleSheet란 각 브라우저마다 정해놓은 CSS의 기본 규칙이다. 각 브라우저에서 동일한 결과물을 보여주는 크로스 브라우징(Cross Browsing)을 위해서 기본 CSS를 모두 없애자는 것이 Reset CSS의 시작이다.

가장 유명한 에릭마이어의 CSS Reset 🎨
https://meyerweb.com/eric/tools/css/reset/

최근에는 주로 쓰이지 않는 태그는 제외하고, 최소한의 CSS Reset만 사용하면서 box-sizing: border-box, table { border-collapse: collapse; } 와 같은 기본보다 좋은 스펙들을 default로 만들어주는 형태를 추구하고 있다.

Google.com

html, body, h1, input, select {font-family:'Apple SD Gothic Neo', arial, sans-serif}
body, h1 {font-size:14px;}
h1 {font-weight:normal;margin:0;padding:0}
h3 {font-weight:normal;margin:0;padding:0;font-size:20px;line-height:1.3}
body {margin:0;background:#fff;color:#202124;}
a {color:#1a0dab;text-decoration:none;-webkit-tap-highlight-color:rgba(0, 0, 0, .10)}
a:visited {color:#609}
a:hover {text-decoration:underline}
cite, cite a:link, cite a:visited {color:#202124;font-style:normal}
button {margin:0}
ol li {list-style:none}
ol, ul, li {margin:0;padding:0}
input {font-size:14px}
em {font-weight:bold;font-style:normal}
body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, select, table, td, textarea, th, ul {margin:0;padding:0}
body, button, input, select, table, textarea {font-size:12px;line-height:16px;color:#202020;font-family:-apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif}
h1, h2, h3, h4, h5, h6 {font-size:inherit;line-height:inherit}
textarea {-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:transparent;border:0;word-break:keep-all;word-wrap:break-word}
button, input {-webkit-border-radius:0;border-radius:0;border:0}
button {background-color:transparent}
fieldset, img {border:0}
img {vertical-align:top}
ol, ul {list-style:none}
address, em {font-style:normal}
a {color:inherit;text-decoration:none}
a:hover {text-decoration:underline}
iframe {overflow:hidden;margin:0;border:0;padding:0;vertical-align:top}
mark {background-color:transparent}
i {font-style:normal}

어떤 Reset CSS를 사용해야하는지 고민이 된다면, Minireset을 참고해보거나 기본으로 reset.css가 적용되어있는 Tailwind와 같은 CSS 프레임워크를 사용하는 것도 하나의 방법인 것 같다. 💭


CSS Cascading

여러개의 스타일이 중복되어도 브라우저는 어떠한 오류도 일으키지 않는다. 브라우저는 우선순위에 따라서 최종적으로 어떤 스타일을 렌더링하는지 결정한다.

❤️‍🔥 중요도 Importance

CSS가 어디에서 선언 되었는지에 따라서 중요도가 결정된다.

1. <head>의 <style>
2. <head>의 <style> 내의 @import
3. <link>로 연결된 CSS 파일
4. <link>로 연결된 CSS 파일 내의 @import
5. 브라우저의 기본 CSS

중요도를 끌어올리고 싶다면 !important 속성을 사용하면 된다.

h2 {
    background-color: red !important; // red가 적용됨.
}

h2 {
    background-color: blue;
}

❤️‍🔥 명시도 Specificity

Selector가 가리키는 것이 명확할수록 우선순위를 높게 주는 것을 의미한다. important, inline이 높은 순위를 갖고 있지만, 유지보수와 코드의 가독성을 위해 정말로 필요할 때만 사용하는 것이 좋다.

important > inline > id > class, 가상요소 > tag > 상속

  <h2>Element</h2>
  <h2 class='class'>Class</h2>
  <h2 id='id' class='class'>Id</h2>
  <h2 class='class' style='background-color: green'>Inline</h2>

❤️‍🔥 코드 순서 Source Order

일반적으로 코드의 가장 마지막에 등장한 속성을 최우선으로 적용한다. 나중에 선언된 스타일이 먼저 선언된 스타일을 덮어쓴다.

span {
	color : red;
}

span {
	color : blue;
}

CSS 코드를 붙여넣으면, 우선순위를 그래프로 보여준다. 📊
https://isellsoap.github.io/specificity-visualizer/


CSS LAYOUT

display: block

항상 새로운 줄에서 시작하며, width, height, margin, padding으로 크기와 간격을 조정할 수 있다.
대표적으로 <div>, <p>, <h1>, <h6>, <ul>, <li> 등이 있다.

display: inline

새로운 줄에서 시작하지 않고, width, height, margin-top, margin-bottom 등의 세로 관련 CSS 속성이 적용되지 않는다. 대부분 텍스트와 함께 사용된다.
대표적으로 <span>, <a>, <strong>, <em>, <img> 등이 있다.


position: static

static은 position의 기본 값으로 순서대로 배치된다.
top, right, bottom, left, z-index의 속성 값들은 static일때 무시된다.

position: relative

요소들을 원래 위치에서 상대적으로 움직일 수 있게 해준다.
배치흐름(normal flow)에 포함되어, 다른 엘리먼트가 그 공간을 차지할 수 없다.

position: absolute

상위 엘리멘트 중에서 position 속성이 relative, absolute, fixed, sticky인 기준을 찾아 절대적인 위치를 지정한다. 배치흐름(normal flow)에서 제외되어, 아래 다른 엘리먼트가 그 공간을 차지할 수 있다.

position: fixed

viewport(전체화면)는 좌측, 맨위를 기준으로 동작한다.
스크롤을 해도 항상 뷰포트 내에 고정된 위치에 유지하기 위해서 사용한다.

position: sticky

스크롤이 특정 지점에 도달하면 지정된 오프셋까지 fixed처럼 고정된다.
부모 요소가 스크롤 가능한 overflow: auto, overflow: scroll 속성을 가져야 적용이 된다.


Browser Rendering

✂️ Parsing

HTML 파싱(HTML Parsing)

렌더링 과정은 HTML 문서의 내용을 이해하기 위해서 시작한다. 브라우저는 웹 서버로부터 전달받은 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성한다.

1. 토큰화(Tokenization)

HTML 파서는 입력된 HTML 문서를 읽고, 각각의 문자를 토큰(Token)이라 불리는 작은 조각들로 분리한다. 토큰은 태그, 속성, 텍스트 등과 같이 문서의 구성 요소들을 나타낸다.

2. 렉싱(Lexing)

토큰화된 각 토큰들이 의미 있는 정보를 갖도록 렉싱 과정을 거친다. 이 단계에서는 토큰들의 유형을 식별하고, 각 토큰의 내용을 파악한다.

3. 파싱(Parsing)

렉싱된 토큰들은 파서에 의해 파싱되어 DOM 트리로 변환된다. 파서는 HTML 문서의 문법 규칙에 따라 토큰들을 해석하고, 트리 구조로 변환하는 역할을 수행한다.

4. DOM 트리 생성

파서가 토큰들을 파싱하여 DOM 트리로 변환하면, 웹 페이지의 구조와 내용이 표현되는 DOM 트리가 생성된다. DOM 트리는 문서의 요소들을 노드(Node)라 불리는 객체로 표현한다.

5. 스크립트 로드 및 실행

HTML 문서에 포함된 <script> 태그들은 파싱된 후 스크립트 파일들을 로드하고, 해당 스크립트들이 실행된다. 스크립트 실행은 DOM 조작, 이벤트 처리 등의 동적인 기능을 수행하며, DOM 트리의 내용이 변경되는 경우 다시 파싱과 렌더링이 진행된다.


CSS 파싱(CSS Parsing)

브라우저는 HTML 파싱 후에 CSS(Cascading Style Sheets) 파일을 파싱한다. 파싱된 CSS는 Cascading에 따라 적용되어 요소의 스타일과 레이아웃을 정의한다.

1. 토큰화(Tokenization)

CSS 파서는 입력된 CSS 코드를 읽고, 각각의 문자를 토큰(Token)이라 불리는 작은 조각들로 분리한다. 토큰은 선택자(Selector), 속성(Property), 값(Value) 등과 같이 CSS 코드의 구성 요소들을 나타낸다.

2. 렉싱(Lexing):
토큰화된 각 토큰들이 의미 있는 정보를 갖도록 렉싱 과정을 거친다. 예를 들어, 선택자는 어떤 요소들을 스타일링할지를 식별하며, 속성과 값은 스타일 정보를 정의한다.

3. 파싱(Parsing):

렉싱된 토큰들은 파서에 의해 파싱되어 CSS 스타일 규칙으로 변환된다. CSS 파서는 CSS 코드의 문법 규칙에 따라 토큰들을 해석하고, 스타일 규칙을 생성한다. 스타일 규칙은 선택자와 해당 선택자에 적용될 스타일들의 집합으로 이루어져 있다.

4. 스타일 규칙 적용(Styling):

파싱된 CSS 규칙들은 DOM(Document Object Model) 트리의 각 요소에 적용된다. CSS 규칙은 선택자가 지정한 요소에 해당 스타일을 적용하는 역할을 한다.


📍 Layout

DOM 트리와 CSS 규칙이 결합되어 요소들의 레이아웃을 계산한다. 루트부터 노드를 순회하면서 노드의 정확한 크기와 위치를 계산하고 Render Tree에 반영한다.

1. 블록 배치 계산(Block Formatting Context)

브라우저는 HTML 문서를 DOM트리로 변환한 후, 각 요소들의 레이아웃 배치를 결정하기 위해 블록 배치 계산을 수행한다. 블록 배치 계산은 브라우저가 블록 레벨 요소들의 흐름을 결정하는데 중요한 역할을 한다.

2. 플로팅 요소와 위치 지정(Floating and Positioning)

CSS의 float 속성이나 position 속성을 사용하여 요소들을 배치한다. floating은 노멀 플로우(Normal flow)를 벗어나서 다른 요소들에 영향을 주게 되고, static으로 지정된 요소는 해당 위치에 고정되어 배치된다.

3. 라인 박스 배치(Line Box Layout)

텍스트와 인라인 요소들은 라인 박스(Line box)에 배치된다. 라인 박스는 요소들의 높이와 베이스 라인(base line) 등을 정의하여 텍스트 레이아웃을 관리한다.

4. 플렉스 박스 배치(Flexbox Layout)

CSS의 display: flex 속성을 사용하여 요소들을 유연하게 배치하는 플렉스 레이아웃을 적용한다. 플렉스 레이아웃은 요소들을 유연하게 배치하여 레이아웃을 조정할 수 있는 기능을 제공한다.

5. 그리드 배치(Grid Layout)

CSS의 display: grid 속성을 사용하여 그리드 레이아웃을 적용한다. 그리드 레이아웃은 요소들을 행과 열의 그리드로 배치하여 복잡한 레이아웃을 구성하는 기능을 제공한다.


🎨 Painting

Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 사용자에게 표시한다. 이때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리된다.

1. 페인팅(Paint)
렌더링 트리의 각 요소에 대해 페인팅이 수행된다. 각 요소의 스타일 정보에 따라 배경 색상, 이미지, 텍스트 등이 화면에 픽셀로 그려진다.

2. 레이어 구성(Layer Composition)
페인팅이 끝난 후에 레이어들이 합성되어 최종 화면이 구성된다. 레이어를 구성함으로써 렌더링 성능이 향상되고, 요소의 변경이 필요한 부분만 다시 페인팅하여 리페인트(Repaint)와 리플로우(Reflow)를 최소화한다.


🛠 Reflow & Repaint

사용자의 상호작용이나 동적인 변경으로 인해 레이아웃이 바뀌는 경우, 브라우저는 해당 요소의 위치와 크기를 재계산해야 한다. 이를 Reflow(리플로우) 또는 Layout 이라고 부른다. 변경된 부분만 다시 페인팅하면 되는 경우, 브라우저는 Repaint(리페인트)만 수행하여 성능을 향상시킨다.


Q&A

💭 css selector 에서 자손과 자식을 표현하는 방법은?

자손 선택자 (Descendant selector)는 하위 요소를 선택하는 데 사용된다.
선택자와 하위 요소 사이에 공백을 사용해서 표현한다.

/* 모든 <p> 요소 선택 */
body p {
  /* 스타일 지정 */
}

자식 선택자 (Child selector)는 직접적인 하위 요소를 선택하는 데 사용된다.
선택자와 자식 요소 사이에 > 기호를 사용하여 표현한다.

/* <ul>의 자식 <li> 요소들 선택 */
ul > li {
  /* 스타일 지정 */
}

💭 flexbox을 활용해서 3단 컬럼 레이아웃을 구성하는 방법은?

HTML

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

CSS

.container {
  display: flex;
}

.column {
  flex: 1;
  padding: 20px;
  border: 1px solid #ccc;
}

💭 querySelectorAll의 반환타입은?

querySelectorAll 메서드의 반환 타입은 NodeList이다. querySelectorAll 메서드는 문서 내에서 주어진 CSS 선택자와 일치하는 모든 요소를 찾아 NodeList 객체로 반환한다.

NodeList는 유사 배열 객체로, 반복 가능(iterable)하며 인덱스를 통해 각 요소에 접근할 수 있다. 하지만 배열이 아니므로 map, filter, reduce 등의 배열의 메서드를 사용할 수 없다.

⚠️ forEach는 ES6부터 NodeList에 대해서 사용할 수 있게 구현되었다 !


💭 addEventListener에 전달되는 함수는 무엇이며, 그 함수에 포함되는 파라미터는?

addEventListener 메서드에 전달되는 함수는 이벤트 핸들러(event handler)또는 이벤트 리스너(event listener)라고 한다. 이벤트 핸들러는 특정 이벤트가 발생했을 때 실행되는 JavaScript 함수를 의미한다. 

function handleClick(event) {
  // 이벤트 객체의 정보 사용
  console.log('클릭 이벤트 발생!');
  console.log('클릭한 요소:', event.target);
}

element.addEventListener('click', handleClick);

이벤트 핸들러 함수는 일반적으로 이벤트 객체(event object)를 파라미터로 받을 수 있다. 발생한 이벤트와 관련된 정보를 포함하고 있으며, 이벤트 핸들러 함수 내에서 이 정보를 사용하여 원하는 동작을 수행할 수 있다. 주로 event 또는 e라는 매개변수를 사용하여 이벤트 객체에 접근한다.


💭 div를 너무 많이 사용하면 안좋은 이유는?

<div> 를 많이 사용하면 의미론적인 구조가 부족해지고, 웹 페이지의 구조를 명확하게 표현하기 힘들다. 또한, 접근성을 고려하지 않은 요소이므로, 스크린 리더 등의 보조 기술 사용자들에게 정보를 전달하기 힘들다.

그러므로 HTML5에서 제공하는 시맨틱한 요소들 <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> 등을 사용하여 웹 페이지의 의미론적인 구조를 확립하는 것이 좋다. 이를 통해 코드의 가독성과 유지보수성을 향상시킬 수 있으며, 접근성 측면에서도 개선된다.


💭 commonJS는 무엇이며 왜 필요한가?

CommonJS는 JavaScript 모듈화를 위한 표준 방식 중 하나로, 코드의 구조화와 유지보수를 위해서 주로 사용된다. CommonJS는 자바스크립트 코드를 모듈(module)로 분리하고 필요한 모듈을 다른 파일에서 가져와 사용할 수 있게 해준다.

profile
예빈
작전명 청춘 💫
이전 포스트

궁금증 모음집

다음 포스트

처음부터 다시보는 JS

1개의 댓글

comment-user-thumbnail
이승현
2023년 7월 27일

공부했던 내용에 대해 다시한번 회고할 수 있는 글인 것 같아요 ~ 잘 읽고 갑니다 ^^

답글 달기