choi95의 TIL📝

리팩토링해야 될 사항 다음과 같이 동일한 Feed Style 속성 값을 지니고 있지만 안에 들어가는 이미지의 Layout만이 다른 두 UI 요소가 있다. 전자의 Feed에는 단일 이미지만이 들어가는 반면에 후자의 Feed에는 Grid Layout 형식으로 총 4장의 이미지가 들어간다. 들어가는 이미지의 갯수가 다르기 때문에 이미지의 크기와 더불어 세부 속성 값을 달리 해주어야 되기 때문에 처음에는 아래와 같이 각 Feed 속성 값에 Style 값을 주었다. .moviePosterQuarter { // Grid 형식의 Feed width: 95%; height: 95%; border-radius: 4px; background-size: cover; background-position: center; } (..

학습의 필요성 브라우저가 랜더링을 하는 과정 중 operation 단계에 관해서 제대로 짚고 넘어가야 할 필요가 있어 본 포스팅을 작성하게 되었다. operation과 관련되어서는 이전 포스팅에서도 한 번 기록해둔 적은 있으나, 개념적으로만 접근하여 다시 보니 제대로 이해가 되지않아 본 포스팅에서 몇 개의 예시를 토대로 다시 설명해보고자 한다. https://choi95.tistory.com/5?category=857835 Critical Rendering Path_성능 보장 렌더링 오브젝트를 마우스 커서에 따라 움직이는 스크립트를 다음과 같이 작성하였다. top과 left 속성이 아닌 translate 속성을 이용하여 이를 구현하였는데, 이는 랜더링 성능에서 차이가 있기 때문이 choi95.tistor..

기초적인 내용이지만 마크업 상에서 가장 중요한 position 속성에 대해서 짧게 포스팅하고자 한다. 위치가 정적인 경우 relative, absolute, fixed를 알기 위해서는 우선적으로 기본 상태인 static에 대해서 설명할 필요가 있다. static 모든 태그들은 처음 상태가 static 기본 상태이기 때문에 따로 position을 지정해주지 않아도 됨 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓임 위치가 동적인 경우 앞서 살펴 본 static은 별도의 변경 없이 요소가 그대로 순서대로 쌓이는 반면에 아래 3개의 position들은 사용자가 임의의 위치 값(top, right, bottom, left)을 지정해줘야 한다. relative 별도의 프로퍼티를 지정하지 않는 이상 static과 동..

문제 header의 각 메뉴를 양쪽으로 띄어놓기 위해서 float 속성을 사용하였더니, 그 다음 오는 요소가 순차적으로 쌓이는 것이 아니라 현재 header가 위치하고 있는 영역에 중첩되어 랜더링되는 문제가 발생하였다. 문제해결_float 속성과 clearfix 결과적으로 float 속성에 대해서 얕게 알고 사용하여 발생한 실수였다. float element에 부유 속성을 주어 배치할 수 있는 방법 float으로 컨텐츠를 띄울 시 다음 내용은 빈 자리를 채우기 위해 포지션닝_브라우저 상의 오류 즉, 현재 문제가 발생한 화면 상에서 float-left와 float-right 속성을 준 두 개의 menu-container를 감싸고 있는 부모 태그인 inner 클래스 태그에 float값을 해제해 주는 추가 과..

예시 다음과 같이 각기 다른 두 개의 태그인 div와 img를 사용하여 배경 이미지를 랜더링하였다. 두 태그를 사용하였을 경우에 동일하게 화면에 랜더링되는 결과를 확인할 수 있다. 그렇다면 배경 이미지를 지정할 때 두 개의 태그 중에 아무 태그나 무분별하게 사용해도 괜찮을 것인가? 이와 관련되어 궁금증이 생겨 관련 사항에 대해서 검색해 보았고 마크업 언어에서 다음과 같이 중요한 개념이 선제됨을 알 수 있었다. Semantic-Web과 SemanticTags의 차이 시맨틱 웹(Semantic-Web) World-wide-web을 창안한 팀 버너스리가 제안한 차세대 웹 기술 웹 상에 존재하는 정보를 사람 뿐만 아니라 기계가 의미(Semantic)를 파악 및 사용자의 요구에 적합한 결과를 서비스 부여받은 자동..

다음과 같이 버튼을 클릭하면 팝업창이 새로 뜨도록 구현하였다. 하지만 다음과 같이 팝업창 컨테이너의 가시성 여부를 결정해주는 것을 CSS 상의 Opacity를 이용한다면, .popup-modal.is--visible { //해당 클래스를 추가할 경우 Opacity 값의 변화로 보이게 함 opacity: 1; } 현재 뷰 상에서 요소가 사라져 보이지는 않게 되지만 해당 영역의 이벤트는 응답을 하게 되고 작동한다. 이를 강제로 제어하기 위해서 다음과 같이 pointer-events 속성을 활용하였다. .popup-modal { (...) opacity: 0; pointer-events: none; //요소가 보이지 않을 경우에는 이벤트 또한 발생하지 않도록 제어 } .popup-modal.is--visibl..

Tabs 동적 생성 위와 같이 Tabs-Content를 만들 때 각 Tab의 너비는 200px로 일정하고 박스 내에 들어가는 Tab은 가변적이다.즉, CSS 상에서 Width의 값을 정적으로 주게 되면 정적인 Tabs를 만들지 못한다. 이를 위해 다음과 같은 단계를 걸쳐 전체 가로 너비가 받아 온 데이터에 따라 동적으로 결정되는 Tab을 구현하였다. 사용자 지정 속성(CSS 변수, 종속 변수) 사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 제작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고,(--main-color: black;) var() 함수를 사용해 접근할 수 있습니다. (color: var(--main-color);)..

문제 #container { width: 100%; height: 100%; position: relative; max-width: 1200px; margin: 0 auto; } 다음과 같이 콘텐츠에 해당하는 영역을 묶어주기 위해 id가 container인 태그를 만들어 주었다. 영역의 크기를 화면 전체에서 header와 footer 영역을 제외 한 나머지로 잡기 위해 width와 height를 100%로 설정해 주었다. 하지만 브라우저 상에선 아무런 변화도 없는 문제가 생겼다. 문제해결 #wrap { width: 100%; height: 100%; padding-right: 180px; } 현재 #container인 태그의 부모 태그는 #wrap이다. 너비나 높이를 비율(%단위)로 주게 될 경우 해당 ..