728x90 프레임워크160 [생활코딩] flex : holy grail layout [ holy grail layout ] : 성배 레이아웃은 일반적으로 5개의 영역으로 구성이 되는데요. 회면 최상단에 각각 헤더(header)와 풋터(footer) 영역이 위치하고, 그 사이의 영역이 다시 네비게이션(nav), 메인(main), 사이드바(aside) 영역으로 나누어지게 됩니다. 시멘틱(semantic) HTML을 이용해서 성배 레이아웃을 마크업을 해보면 다음과 같은 구조를 가지게 됩니다. 비오는 날 개구리 html css js 비오는 날 개구리 블로그 AD 홈페이지 2022. 2. 3. [생활코딩] flex : basis & grow & shrink [ flex-basis ] : flex의 방향에 해당하는 엘리먼트의 크기를 결정 해주는 속성이다. [ flex-grow ] : 각각의 item 요소들이 container 요소 내부에서 할당 가능한 공간의 정보를 말합니다. 즉, flex-grow : 1을 할당하면 container 영역에 맞춰 item들이 1/n의 부피를 가집니다. [ flex-shrink ] : flex-shrink가 0일 경우 화면에 작아지더라도 해당 속성을 가진 엘리먼트는 작아지지 않고 기본값을 유지합니다. flex-shrink가 1일 경우 화면이 작아짐에 따라 엘리먼트도 작아집니다. flex-shrink을 값이 클수록 더 빠르게 작아집니다. flex-shrink를 사용하기 위해서는 flex-basis을 사용해서 엘리먼트의 기본값을 .. 2022. 2. 3. [생활코딩] flex : basic 블록 레벨 엘리먼트들을 자유자재로 배치 하기 위한 방법 중 하나로 flex를 사용한다. 위는 가장 기본적인 방법이고, flex에는 다양한 속성들이 존재한다. 그 중 하나는 flex-direcion이다. flex-direction : row flex-direction : row-reverse flex-direction : column flex-direction : column-reverse 2022. 2. 3. [생활코딩] flex : intro 주로 레이아웃을 잡을 때 사용하는 기능입니다. (레이아웃 : 어떤 컨텐츠를 만들 때 잘 정리 정돈해서 구조화 시킬 때 사용하는 기능) Layout의 흑역사 레이아웃은 아름답지 못한 역사를 가지고 있었습니다. 인류가 레이아웃을 코드로 잘 표현하는 방법을 몰랐기 때문입니다. 1. 테이블(표) 격자 모양, 그리드 모양처럼 생긴 테이블 태그를 사용해서 레이아웃을 잡았습니다. 이 방법에는 구조화된 정보, 많은 정보를 잘 정리 정돈 하기 위한 정보로써의 의미를 지니고 있는 데 그것을 의미가 없는 레이아웃에 사용하다 보니 검색 엔진이나 스크린 리더, 여러 가지 HTML을 해석하는 여러 가지 소프트웨어들의 입장에서 이것이 표로 사용된 것인 지, 레이아웃에 사용된 것인 지 구분하기 어렵다는 치명적인 문제가 있었습니다. .. 2022. 2. 3. [React] useMemo 컴포넌트 최적화를 위해 사용되는 대표적인 Hook에는 useMemo와 useCallback이 있습니다. [ useMemo란? ] useMemo에서 memo란 Momoization(메모이제이션)을 뜻합니다. 메모이제이션은 동일한 값을 return 하는 함수를 반복적으로 호출 해야 한다면 맨 처음 값을 계산 할 때 해당 값을 메모리에 저장 해서 필요할 때마다 또다시 계산하지 않고 메모리에서 꺼내서 재사용하는 기법을 말합니다. 즉, 자주 사용하는(필요한) 값을 맨 처음 계산 할 때 캐싱을 해두고 값이 필요할 때마다 다시 계산을 하는 게 아니라 캐시에서 꺼내서 사용한다는 것입니다. 이때 함수형 컴포넌트는 말 그대로 함수라는 사실을 기억 해야 합니다! 함수형 컴포넌트가 렌더링이 된다는 건 그 함수가 호출 된다는 .. 2022. 1. 31. [생활코딩] fixed 고정된 → fixed fixed는 특정한 element를 화면에 어떤 위치에 고정 시켜서 스크롤로 부터 완전히 독립 되게 하는 것을 말합니다. + fixed도 absolute처럼 width와 heifht 값을 지정하지 않으면 부모가 없어지기 때문에 부피가 100%가 되기 애매하여 자기 컨텐츠 크기가 됩니다. 2022. 1. 31. [생활코딩] absoulte 절대 포지션(위치) → absolute 어떤 element에 position : absolute로 지정 시 그 element는 더 이상 부모의 소속이 아닙니다. 링크가 끊기면서 더이상 부모와는 상관이 없어집니다. 상대 포지션(위치) → relative 2022. 1. 31. [생활코딩] relative vs static HTML 태그, element가 화면상에 어디에 위치 할 것인가를 결정하는 속성입니다. box model이 부피감, element와 element 사이의 간격을 결정하는 속성이었다면 position은 각각의 element의 위치를 결정 할 수 있는 속성입니다. other parent me left > right / top > bottom의 우선 순위를 가집니다. static 기본적으로 CSS의 각각의 element들은 position의 기본값으로 static을 가지고 있습니다. 각각의 element들은 left, right, top, bottom과 같은 offset 값을 무시하고 딱 자기가 원래 위치 해야 하는 곳에 정적으로(static 하게) 위치 하게 됩니다. (또는 위치와 관련된 설정을 하지 않은 .. 2022. 1. 31. [생활코딩] 마진 겹침 2 [생활코딩] 마진 겹침 1 마진(margin)이란 여백, 테두리와 다른 element 테두리 사이의 간격을 의미합니다. 그 마진이 어떤 경우에 사라져 버리는 현상이 있습니다. 이를 마진 겹침 현상이라고 합니다. 만약 마진 겹침 현상 eundol1113.tistory.com 이번에 살펴볼 마진 겹침 현상은 부모 element와 자식 element 모두가 마진(margin)값이 있는 경우에 발생 할 수 있는 겹침 현상입니다. hello world hello world 이로써 알 수 있는 사실은 부모 태그의 시작적인 효과(ex border)가 사라지면(투명해지는 순간) 자식 태그의 위치가 변합니다. 이것이 부모 태그와 자식 태그 사이에서 일어날 수 있는 마진 겹침 현상입니다. 즉, 부모 태그가 시각적으로 아무.. 2022. 1. 30. 이전 1 ··· 8 9 10 11 12 13 14 ··· 18 다음 728x90
