'엘리스 ai 트랙/FE' 카테고리의 글 목록 (2 Page)

Block Formatting Context? (블록 형식 지정 컨텍스트)

웹페이지의 블록 레벨 요소를 렌더링하는 데 사용되는 CSS의 비주얼 서식 모델 중 하나.

=> 웹 페이지를 렌더링하는 시각적인 CSS의 일부로서 블록 박스의 레이아웃이 발생하는 지점과 floating 요소의 상호작용 범위를 결정하는 범위라고 볼 수 있습니다.

다음 조건 중 하나만 만족한다면 새로운 BFC를 생성할 수 있습니다

루트 혹은 이를 포함하는 요소
float가 none이 아니면서 clear 되지 않은 경우
position이 absolute / fixed
display가 inline-block / tabel-cell / tabel-caption
overflow가 visible이 아님
display가 flex / inline-flex

잠깐 설명드리자면..!

overflow: hidden //부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리

float: left //요소를 왼쪽으로 밀고 다른 요소가 주위를 둘러싸게 함

활용

1. 마진겹침 제거하기

https://codepen.io/BaeHaram/pen/YzXGZBd

마진 상쇄? 요소의 margin 값이 겹칠 경우, 더 큰 margin만 적용되고 같다면 한 번만 적용되는 현상

마진 상쇄라는 특성 때문에 top 과 bottom에 각각 마진을 부여했지만 마진끼리 겹쳐서 10px만큼의 마진만 생기게 된다
=> BFC를 적용시키면 마진 상쇄효과가 없어지게 돼서 총 20px만큼의 마진이 생길 수 있다!

2. 부모가 자식을 모두 담지 못하는 경우 (float 사용)

https://codepen.io/BaeHaram/pen/oNXZBXJ

float을 사용하고 부모가 자식을 담지 못하는 경우에 BFC를 생성하게 해주는 코드를 넣으면 컨테이너가 담지 못했던 float을 담게 되고 float 크기만큼 커지게 됩니다!

float된 요소를 포함하는 컨테이너가 있는 경우가 많을 수 있는데 이 경우엔 보통 container를 clear시키는 방법을 사용합니다. 그런데 그것 말고도 BFC를 정의함으로써도 이것을 해결할 수 있는 것입니다!
=> float을 clear 시키는 다양한 방법 중에 여러가지가 있을 수 있는데 overfloe: hidden이 BFC를 생성하게 한 것입니다. 그래서 BFC는 float과의 상호작용에 영향을 미쳐서 float를 clear시키는 효과를 가져옵니다

BFC는 레이아웃 안의 작은 레이아웃이라고 생각하기
=> BFC 내부의 모든 요소는 설령 내부 요소가 float 상태라 하더라도 이 블록 안에 속한다. 그래서 float요소는 container 높이에 영향을 주게 된다.

3. float된 요소를 감싸는 텍스트를 분리하기

https://codepen.io/BaeHaram/pen/VwLpPvN

Figure 1
p태그의 블록상자가 float 요소를 위한 공간을 만들기 위해 수평으로 좁아지게 됩니다.

BFC에서 각 상자의 왼쪽 가장자리는 container 블록의 왼쪽 가장자리에 닿게 됩니다. 그래서 새로운 BFC를 생성하지 않는다면 p태그의 텍스트가 증가한다면 float 요소 밑으로 이동될 것입니다.

In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
참고: WSC

전체 요소를 이동할 수 있다면 이 감싸지는 문제는 해결될 것입니다.

Figure 2
p태그에 새로운 BFC를 생성하기!
=> 더이상 container 박스의 왼쪽 가장자리로 닿게 되는 문제가 사라지게 되므로 간단하게 감싸는 문제를 해결할 수 있게 됩니다!

출처:
https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
https://www.w3.org/TR/CSS21/visuren.html#block-formatting
https://tesseractjh.tistory.com/m/145
https://velog.io/@seod0209/TIL-14.-overflow
https://velog.io/@1-blue/%EB%B8%94%EB%A1%9D-%EC%84%9C%EC%8B%9D-%EB%A7%A5%EB%9D%BD

저작자표시

'엘리스 ai 트랙 > FE' 카테고리의 다른 글

var vs let vs const (0)	2022.02.21
스코프 (0)	2022.02.14
z-index (0)	2022.02.02
표준모드(standards mode)와 호환모드(quirks mode) (0)	2022.01.23
사용할 링크 모음! (0)	2022.01.23

z-index 속성은 다른 요소와 겹치게 될 때 요소의 순서를 지정하기 위해 사용됩니다.

요소들의 우선순위를 z-index가 정하고 숫자가 커질수록 렌더링 순서가 느려지므로 더 앞에 위치됩니다.

특정 요소의 렌더링 순서는 stacking context(쌓임맥락)을 생성하면서 자신의 z-index 값에 영향을 받게 됩니다.

그래서 z-index를 알기 위해선 먼저 stacking context(쌓임맥락)을 이해해야 합니다.

쌓임 맥락이란, HTML 요소들에 사용자가 바라보는 기준으로 가상의 z축을 생성하여 3차원 개념으로 보는 것

간단히 말해서, stacking context는 공통 부모가 있는 페이지의 "요소 그룹"입니다.

부모는 stacking context의 루트이며, 요소는 해당 요소 내부의 스택 순서로 배치됩니다.

예를 들어서 루트 요소( <html> )은 페이지의 모든 요소와 기타 stacking context를 포함하는 "전역" stacking context입니다.

x축은 화면의 오른쪽, y축은 화면의 왼쪽, z축의 방향은 보는 사람을 향함 (stacking context의 3차원 좌표계)

=> 웹 페이지와 그 안의 모든 요소에는 좌표 시스템이 있습니다. 그 시스템에 요소가 스택되는 3차원 z축이 포함됩니다.

z축 상에서 z-index에 따라 각 요소들이 "쌓이게" 된다.

이러한 쌓임맥락을 형성하는 조건들

position이 relative/absolute이면서 z-index가 auto가 아닌 요소
position이 fixed/sticky인 요소
opacity가 1보다 작은 요소
transform이 none이 아닌 요소

위 4가지는 가장 많이 쓰이는 속성들이니 따로 기억해두시는 게 좋을 것 같습니다!!

쌓임맥락의 특징들

한 쌓임맥락이 다른 쌓임맥락을 포함할 수 있고, 함께 계층 구조를 이룹니다
쌓임맥락에서 쌓임을 고려하는 것은 오직 자식요소들에 대해서 만이다.
각 쌓임맥락은 독립적입니다. 요소의 콘텐츠를 쌓은 후에는 그 요소를 통째로 부모 쌓임맥락 안으로 배치합니다

일반적으로 브라우저는 DOM 트리에서 먼저 오는 요소가 먼저 배치되고 뒤에 오는 요소가 이전 요소 위에 배치되게 됩니다. (페이지가 자연스럽게 흐른다면.)

z-index가 없는 경우에는 모든 요소들의 z-index 값이 none이 되게 됩니다.

간단하게 stacking order는 기본적으로 html의 노출 순서와 같다고 볼 수 있습니다.

그리고 그중에서 포지션이 사용된 요소는 그렇지 않은 요소보다 앞에서 노출되게 됩니다.

z-index를 사용하는 순간은?

예를 들어, 어떤 지점에서 겹치는 절대 위치에 있는 두 요소가 있고 그중 하나가 소스코드상에서 앞에서 작성되어도 다른 하나 앞에 표시되도록 한다면 z-index 속성을 사용하면 됩니다. 즉, z축에서 렌더링되는 순서를 변경하려는 경우!

하지만,

여기서 가장 중요한 사항은 z-index는 position이 지정된 요소에서만 작동한다는 것입니다!

그래서 z-index에 따라서 요소에 값을 지정하여 다른 요소의 앞에 가져 오더라도 position이 되어있지 않는 한, 요소에 영향을 주지 않습니다.

설정된 z-index에 따라서, 해당 요소가 속한 쌓임 맥락에서 순서를 먼저 지정하고 위에서 언급한 단계에 따라서 화면에 렌더링하게 됩니다.

참고: https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/css/z-index.md

GitHub - baeharam/Must-Know-About-Frontend: 취준생이라면 알면 좋을 프론트엔드 관련 지식들

:mortar_board: 취준생이라면 알면 좋을 프론트엔드 관련 지식들. Contribute to baeharam/Must-Know-About-Frontend development by creating an account on GitHub.

github.com

예제

각 쌓임맥락은 독립적이며, 부모 안의 자식 요소들은 부모 안에서만 쌓임이 고려된다

이 쌓임맥락의 계층구조

루트
- DIV #1 - 렌더링순서: 5
- DIV #2 - 렌더링순서: 2
- DIV #3 - 렌더링순서: 4
  - DIV #4 - 렌더링순서: 4.6
  - DIV #5 - 렌더링순서: 4.1
  - DIV #6 - 렌더링순서: 4.3

<div id="div1">
z-index: 5
</div>

<div id="div2">
z-index: 2
</div>

<div id="div3">
    z-index: 4

    <div id="div4">
    z-index: 6
    </div>
    
    <div id="div5">
    z-index: 1
    </div>
    
    <div id="div6">
    z-index: 3
    </div>
    
</div>

그래서 만약 z-index를 부여했는데도 동작하지 않다면 그 요소의 z-index 수준을 제한하는 부모요소가 있는지 먼저 확인해 봐야 합니다. 그것이 z-index의 동작을 제지하는 요인 중 하나일 것입니다.

출처:

https://tympanus.net/codrops/css_reference/z-index/

z-index - Codrops

The z-index property is used to specify the z-order of an element when it overlaps other elements. That is, it specifies whether the element is shown on top of other elements that it overlaps, or behind (or under) them. The z-order is the order of the elem

tympanus.net

https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/css/z-index.md

GitHub - baeharam/Must-Know-About-Frontend: 취준생이라면 알면 좋을 프론트엔드 관련 지식들

:mortar_board: 취준생이라면 알면 좋을 프론트엔드 관련 지식들. Contribute to baeharam/Must-Know-About-Frontend development by creating an account on GitHub.

github.com

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index

z-index가 없는 경우의 쌓임 - CSS: Cascading Style Sheets | MDN

« CSS « CSS z-index 이해하기

developer.mozilla.org

https://dongmin-jang.medium.com/css-stacking-context-172f9bd1af8b

[CSS] Stacking context

Z-Index에 대해서 아무도 알려주지 않은 것

dongmin-jang.medium.com

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

쌓임 맥락 - CSS: Cascading Style Sheets | MDN

쌓임 맥락(stacking context)은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화입니다.

developer.mozilla.org

https://erwinousy.medium.com/z-index%EA%B0%80-%EB%8F%99%EC%9E%91%ED%95%98%EC%A7%80%EC%95%8A%EB%8A%94-%EC%9D%B4%EC%9C%A0-4%EA%B0%80%EC%A7%80-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EA%B3%A0%EC%B9%98%EB%8A%94-%EB%B0%A9%EB%B2%95-d5097572b82f

z-index가 동작하지않는 이유 4가지 (그리고 고치는 방법)

이 글은 https://coder-coder.com/z-index-isnt-working/의 번역글입니다. 오타 및 오역 제보 기쁘게 받도록 하겠습니다.

erwinousy.medium.com

저작자표시

'엘리스 ai 트랙 > FE' 카테고리의 다른 글

var vs let vs const (0)	2022.02.21
스코프 (0)	2022.02.14
BFC (Block Formatting Context) (0)	2022.02.05
표준모드(standards mode)와 호환모드(quirks mode) (0)	2022.01.23
사용할 링크 모음! (0)	2022.01.23

참고 키워드

W3C (World Wide Web Consortium) ? 팀 버너스리를 중심으로 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직

렌더링 ? html, css, javascript 등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정

html, css, js -> DOM -> CSSOM -> Render Tree -> Layout -> Paint -> Composite 과정을 거친 후 웹 페이지가 로드됩니다!

(브라우저마다 렌더링 엔진이 존재하는데 웹프로그래밍을 하면서 사용되는 태그, 선택자들마다 엔진에 호환 범위가 다르기 때문에 엔진마다 웹 페이지가 다르게 동작할 수 있습니다. 하지만 w3c에서 정한 웹 표준 명세가 있기 때문에 대부분 비슷하게 보여줄 것입니다.)

출처: https://simostory.tistory.com/53

과거 웹 페이지는 넷스케이프 네비게이터용과 마이크로소프트 인터넷 익스플로러용 두 가지 버전으로만 만들어졌다.

웹의 모든 잠재력을 이끌어 내기 위해서는 웹 상호 간의 호환성이 있어야 한다는 "웹 상호 운용성"을 목표로, w3c는 웹 표준을 제정했다.

w3c에서 웹 표준을 제정할 당시에는 기존 브라우저들이 새로 만들어진 표준으로 대부분의 웹 사이트를 제대로 표현할 수 없었다.

그래서, 브라우저들은 렌더링을 할 때 표준 모드(새로운 표준으로 제작된 사이트)와 호환 모드(예전 방식으로 제작된 사이트를 렌더링하기 위한) 두 가지 모드를 제정했다.

두 가지 모드를 구분하기 위해 브라우저가 HTML에서 찾는 것 ? DOCTYPE

문서의 첫 부분에 기술된 <!DOCTYPE html>을 기준으로 표준모드와 호환모드 중 무엇으로 렌더링할지 결정됩니다!

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8>
    <title>Hello World!</title>
  </head>
  <body>
  </body>
</html>

익스플로러 9나 이전 버전에서는 DOCTYPE 이전에 주석이나 xml 선언부 등 무엇이든 작성된 상태라면 해당 문서를 호환모드로 렌더링합니다.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

출처: https://webdir.tistory.com/38 [WEBDIR]

오늘날 현존하는 모든 브라우저들은 (옛날 익스플로러 6조차도) DOCTYPE을 표준 모드로 렌더링합니다. 더 복잡한 DOCTYPE을 사용할 필요도 없고 정말 특별한 경우가 아니라면 <!DOCTYPE html>을 명시하여 브라우저가 표준 모드로 렌더링하게 하는 게 권장됩니다!!

저작자표시

'엘리스 ai 트랙 > FE' 카테고리의 다른 글

var vs let vs const (0)	2022.02.21
스코프 (0)	2022.02.14
BFC (Block Formatting Context) (0)	2022.02.05
z-index (0)	2022.02.02
사용할 링크 모음! (0)	2022.01.23

인프런 강의https://www.inflearn.com/course/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%94%A5%EB%8B%A4%EC%9D%B4%EB%B8%8C/dashboard

[무료] 모던 자바스크립트 딥다이브 스터디 - 인프런 | 강의

《모던 자바스크립트 딥다이브》 책 내용을 그대로 따라가는 스터디 영상입니다. 함께 공부하면 훨씬 쉬워질 거에요!, 혼자가 외롭다면 시간차 스터디는 어때요?함께하는 모던 자바스크립트 스

www.inflearn.com

https://poiemaweb.com/

웹 프로그래밍 튜토리얼 | PoiemaWeb

Front-end Development Tutorial

poiemaweb.com

https://github.com/baeharam/Must-Know-About-Frontend

GitHub - baeharam/Must-Know-About-Frontend: 취준생이라면 알면 좋을 프론트엔드 관련 지식들

:mortar_board: 취준생이라면 알면 좋을 프론트엔드 관련 지식들. Contribute to baeharam/Must-Know-About-Frontend development by creating an account on GitHub.

github.com

https://ko.javascript.info/ (코치님께서 추천하신 사이트!!)

모던 JavaScript 튜토리얼

ko.javascript.info

https://google.github.io/styleguide/jsguide.html

Google JavaScript Style Guide

Google JavaScript Style Guide 1 Introduction This document serves as the complete definition of Google’s coding standards for source code in the JavaScript programming language. A JavaScript source file is described as being in Google Style if and only i

google.github.io

저작자표시

'엘리스 ai 트랙 > FE' 카테고리의 다른 글

var vs let vs const (0)	2022.02.21
스코프 (0)	2022.02.14
BFC (Block Formatting Context) (0)	2022.02.05
z-index (0)	2022.02.02
표준모드(standards mode)와 호환모드(quirks mode) (0)	2022.01.23

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

보다 나은 내일, 다이어리