CodeTech (70) 썸네일형 리스트형 React - [깊은 복사 얕은 복사, 상태변수와 반환형 함수] 투레벨 프로젝트를 진행하고 있다. 그런데 문제가 생겨서 아무리 생각해도 이유를 찾지 못해서 다른 문제들 부터 해결하고 다시 도전해봤다. 문제 const removeToCart = (title) => { if (cart.length === 1) { setCart([]); window.localStorage.removeItem('cart'); return } setCart(cart.filter(product => product.title !== title)); console.log(cart); window.localStorage.setItem('cart', JSON.stringify(cart)); } 페이지를 만들고 있는데 오른쪽의 장바구니 페이지에서 상품 remove 버튼을 누르면 AddToCart컴포넌트.. CSS - Reset.css VS Normalize.css 웹 브라우저마다 각자의 HTML요소의 기본 스타일을 가지고 있다. CSS 스타일링을 적용할때 이러한 기본 스타일링들이 방해를 하기 때문에 초기화기법이 사용된다. Reset.css 모든 브라우저의 형태에서 내장스타일을 모두 없애버린 스타일이 0인 상태에서 시작되는 초기화 기법으로 h1, div, em등 각 태그에 적용되는 모든 스타일링을 처음부터 다시 만들어 나가야하는 초기화기법이다. 스타일링에 대한 시간이 오래걸리며 아얘 초기화를 하는 것이기 때문에 지속적인 업데이트가 필요없다. 또한 각 브라우저마다의 버그를 고치는 것이 아니라서 Reset.css를 만들며 브라우저마다의 버그를 발생시킬수 있다. Nomalize.css 모든 브라우저의 스타일링을 동일하게 유지하는 스타일기법이다. 기존의 기본 스타일링은 유.. CSS - 가로세로 가운데 정렬 position과 margin .position-margin { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } 한 개의 엘레먼트가 있고 position 이 absolute일 경우 margin : auto는 먹히지 않는다. top, left, right, bottom이 없기 때문이다. 바깥여백이 만들어지지 않았다는 이야기이다. 하지만 4방위 속성들을 모두 0으로 맞추면 바깥 여백이 생겨나 버린다. 이때 margin으로 auto 속성을 부여하면 정확히 가운데 정렬이된다. flex .flex { display: flex; justify-content: center; align-items: center; } 상당히 애용하고 있.. CSS - z-index의 동작방식 쌓임맥락 (Stacking Content) 위 이미지를 보게되면 가상의 z-axis를 따라서 z-index가 생성되어 있고 z-index와 가장 먼저 보이는 엘레먼트가 비례하는 것을 볼 수 있다. 하지만 무조건 z-index가 높다고해서 가장 먼저 보이는 것은 아니다. z-index는 같은 레벨(부모 자식)상에서만 작용한다. 쌓임 맥락은 다른 쌓임 맥락을 포함할 수 있다. 쌓임 맥락에서 쌓임을 고려하는 것은 오직 자식 요소들에 대해서 만이다. 즉, 쌓임 맥락에서 여러 부모 자식간의 관계로서 총 쌓임 맥락이 형성되는 것이다. 이러한 관계가 아닌 형제 블록간의 쌓임 맥락의 우선순위는 다음과 같다. 이상태에서 같은 레벨(부모자식 혹은 위 관계에서 대등한)의 관계에서는 z-index에 따라 쌓임맥락이 결정된다... CSS - BFC (Block Formatting Content) BFC (Block Formatting Content) 웹페이지에 나타나 있는 블록들이 보여지는 CSS 렌더링의 일부이다. 너무 어려운 말이지만 그냥 Block의 속성이 다시 부여되어 다르게 렌더링 되는 현상혹은 그러한 컨텐트 라고 이해하면 된다. 블록 컨텐트의 서식 모델이라고 한다. 이러한 컨텐트를 생성하기 위해서는 다양한 속성들이 관여되어있는데 이들 중 하나라도 속성이 들어가 있는 엘레먼트들은 모두 BFC라고 할 수 있다. 문서의 루트 요소(). 플로팅 요소(float이 none이 아님). 절대 위치를 지정한 요소(position이 absolute 또는 fixed). 인라인 블록(display가 inline-block). 표 칸(display가 table-cell, HTML 표 칸의 기본값). 표 주.. CSS - 마진겹침현상 (Margin-Collapsing) 마진겹침현상 (Margin-Collapsing) display 형태가 block인 것들에 한해서 발생하는 현상으로 좌우로는 적용되지 않고 오로지 수직방향으로만 적용된다. 왜 이러한 현상이 일어나는 지는 알수 없으나 일종의 버그라고 생각하면 된다. 형제 블록 사이에서의 마진겹침 div { width: 100px; height: 100px; background-color: red; } .element1 { margin-bottom: 20px; } .element2 { margin-top: 40px; } 위 코드에서 element1, 2 모두 margin값이 주어져 두 블럭 사이의 수직간격은 60px가 되어야 하지만 마진 겹침 현상으로 인해 마진 값이 더 큰 40px로 적용되는 현상이다. 부모와 첫/ 마지막 .. CSS - float float 속성 float 속성은 자식 엘레멘트에 주어지는데 한 부모에 들어있는 자식엘레멘트들의 일반적인 흐름속에 들어가 있지 않고 다른 흐름을 주는 속성이다. 기사의 사진을 넣을때 자주보는 속성이다. 단점 부모가 자식엘레먼트의 높이를 감지할 수 없다. 해결책 부모의 속성에 같은 값의 float를 적용시킨다. (부모가 겹겹이 쌓여 있을경우 계속 위로 올라가며 같은값의 float 부여) 부모에 overflow속성 적용 (overflow 속성은 스크롤바를 생성시킨다) 부모의 display속성을 inline-block으로 적용시킨다. 가상요소로 clear 적용 .parent::after { content: ''; display: block; clear: both; } 이렇게 부모속성에서 자식의 높이를 감지할 .. Semantic 마크업 'semantic' 이란 의미론적인 뜻을 가지며 마크업은 HTML문서 태그로 문서를 작성하는 것을 말한다. 따라서 시멘틱 마크업이란 의미가 잘 전달되도록 HTML문서를 작성하는 것을 말한다. 작성방법 예시들 시맨틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 한다. 즉, 다음과 같은 것들을 말한다. 헤더/푸터에 와 사용 메인 컨텐츠에 과 사용 독립적인 컨텐츠에 사용 최상위 제목으로 사용 순서가 없는 목록으로 과 사용 내비게이션에 사용 이런 식으로 태그가 가지고 있는 의미에 맞게 사용하는 것인데, 이런 점 이외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류이다. 즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자체가 스타일을 갖는 것이기 때문에 .. 이전 1 2 3 4 ··· 9 다음
