다른 어떤 것보다 무조건 위에 출력해야한다 그러면 z 인덱스를 그냥 9999 이런 식으로 큰 숫자를 준다 그럴 때 주로 쓰임 광고 같은 것들, 위에 뜨게 하고 싶을 때 - 연습코드 더보기

▷ sticky position 요소를 Normal Flow에 따라 배치한다 요소가 일반적인 문서 흐름에 따라 배치되다가 스크롤이 특정 임계점에 도달하면 그 위치에 고정된다(fixed로 바뀜) 만약 다음 sticky 요소가 나오면 sticky 요소가 이전 sticky 요소의 자리를 대체한다 (이전 sticky요소가 고정되어 있던 위치와 다음 sticky 요소가 고정되어야 할 위치가 겹치게 되기 때문이다) 더보기 Sticky positioning 1번 Sticky An apple is delicious1 An apple is delicious2 An apple is delicious3 2번 Sticky An apple is delicious4 An apple is delicious5 An apple is ..

▶ Fixed Position 요소를 Normal Flow에서 제거한다 사람이 보는 화면영역(viewport)를 기준으로 이동한다 요소가 차지하는 공간이 없어진다 본인의 집을 버리고, 어딘가에 박혀버리는 것 절대로 움직이지 않는다 우리가 보는 화면 기준으로 움직이게 되고, 화면이 움직이더라도 그 위치를 벗어나지 않는다 보통 웹툰에서 계속 떠 있는 리모콘 같은 거 어떤 브라우저 화면의 특정 위치에 고정시키는 것 상태 코드 위치 원래상태 position fixed 설정 위랑 똑같이 보이긴 하지만, 여기서는 fixed가 자기 위치를 버렸다 fixed 설정 top 0 Fix가 위로 올라가버림 fixed 설정 top 0 right 0 fixed가 오른쪽 위에 짱박혀버렸다. 스크롤을 내려도 fixed 위치는 그대로..

▶ Absolute position 요소를 Normal Flow에서 제거한다 가장 가까운 relative 부모 요소를 기준으로 이동한다 문서에서 요소가 차지하는 공간이 없어진다 나의 과거 위치를 다 버리겠다 집을 나갔기 때문에, 본인이 가졌던 영역을 버린다 그 영역이 없어졌기 때문에, 위로 올라가게 된 것 그래서 Absolute는 레이아웃 자체가 깨질 위험이 있다. 결국 이동하려면 새로운 기준점을 찾아야한다. 이거는 부모를 찾아간다 (하지만, 그 부모가 static이면 안됨) 그래서 Absolute가 움직일 수 있는 부모 영역을 잘 설정해야한다. 부모에서 position : relative; 로 두면 된다. 그래서 Absolute를 움직일 때는 움직일 수 있는 영역을 잘 설정해야한다. 설계 자체를 잘 해..

▷Relative position 요소를 Normal Flow에 따라 배치한다 자기 자신을 기준으로 이동한다 요소가 차지하는 공간은 static일 때와 같다 Relative position은 상대적인 위치이다 상하좌우 4방향에 대해서 움직이지 않으면, 그대로 있다. 본인의 static의 위치를 기준으로 움직이는 것이다. static을 기준으로 100px, 100px 움직이는 것이기 때문에 Relative는 본인의 과거 위치를 버리지 않는다 코드 결과 아무것도 하지 않은 static 상태 position을 relative로 바꿔주었다. top에 100px을 넣어주었다. 영역 관점에서 생각을 해야한다. top 100px이라는 건, 위쪽에 100px만큼 준다는 뜻이다. 결국 얘가 움직이는 방향은 아래가 된다...

▷ static position 기본 값 static은 아무런 값을 주지 않았을 때, 본인의 기본 위치이다. 요소들이 Normal Flow에 따라 배치된 상황 .static { position: static; background-color: lightcoral; } 더보기 Static Absolute Relative Fixed

▷ CSS Layout 각 요소의 위치와 크기를 조정하여, 웹 페이지의 디자인을 결정하는 것 Display, Position, Float(이건 오래된 기술이라 요즘 안씀), Flexbox(최신기술) 등 * Layout : 배치, 설계 ▷ CSS Position 요소를 Normal Flow에서 제거하여 다른 위치로 배치하는 것 레이아웃은 일단 Normal Flow에서 벗어나야한다. 그래야 우리가 원하는 위치에 배치할 수 있음 * Normal Flow : css를 적용하지 않았을 때, 웹 페이지가 기본적으로 어디로 배치되느냐. Inline은 오른쪽으로, Block은 아래쪽으로 흐른다 위, 아래, 좌, 우, Z축이 있다. * Z축 : 모니터, 우리 얼굴쪽 방향/ 요소끼리 겹칠 때 어디를 위로 할 것이냐 ▷ C..

CSS는 모든 HTML 요소를 예외없이, 사각형 박스의 형태로 바라본다. * 참고 CSS Box Model 모든 HTML 요소를 사각형 박스로 표현하는 개념이다. content(내용), padding(안쪽 여백), border(테두리), margin(외부 간격)으로 구성된다 Margin : 가장 바깥쪽 영역, 이 박스와 다른 요소 사이의 공백 Border : 콘텐츠와 padding을 감싸는 테두리 영역 Padding : 콘텐츠 주위에 위치하는 공백 영역 Content : 콘텐츠가 표시되는 영역 ▶ Box 구성의 방향 별 별칭 margin-top, margin-right, margin-left, margin-bottom border-top, border-right, border-left, border-bo..

📕 Problem https://leetcode.com/problems/sort-characters-by-frequency/description/ - LeetCode Can you solve this real interview question? - Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 💡 My Solution This problem is about DAT (Direct Address Table). Because This concept is useful to sort l..

📕 문제 https://leetcode.com/problems/sort-an-array/ Sort an Array - LeetCode Can you solve this real interview question? Sort an Array - Given an array of integers nums, sort the array in ascending order and return it. You must solve the problem without using any built-in functions in O(nlog(n)) time complexity and with the smalles leetcode.com 💡 문제 풀이 DIrect Address Table을 활용한 기본적인 문제이다. 보통, 숫자를 ..