프레임워크/CSS66 [생활코딩] 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. [생활코딩] 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 마진(margin)이란 여백, 테두리와 다른 element 테두리 사이의 간격을 의미합니다. 그 마진이 어떤 경우에 사라져 버리는 현상이 있습니다. 이를 마진 겹침 현상이라고 합니다. 만약 마진 겹침 현상이 없었다면 위에 있는 h1과 아래에 있는 h1의 간격은 지금 중간에 위치하는 부분의 2배가 되어야 합니다. "위에 있는 태그와 아래에 있는 태그의 마진 값 중에 더 큰 값이 두 개의 태그 사이의 간격이 된다." 이것이 가장 전형적인 형태의 마진 겹침 현상입니다. 만약에 마진 겹침 현상이 없었다면? 우리는 특정 px만큼만 띄우고 싶은 건데 양쪽 다 같은 마진을 먹는 다면 두 배의 간격이 생기기 때문에 보기 안좋아 집니다. 2022. 1. 30. [생활코딩] box-sizing 어떤 element의 width, height를 사용하여 크기를 지정 할 때 해당 element에 padding, border와 같은 속성을 가지고 있을 경우 내가 지정한 사이즈가 예상과 다르게 적용되는 경우가 생깁니다. 어떤 element의 크기를 예측하기 쉽게 해주는 box-sizing을 알아 보겠습니다! Hello Hello Hello Hello [ 결론 ] box-sizing : border-box는 "box(태그)의 크기를 border에 맞춰서 지정한다" 2022. 1. 29. 이전 1 2 3 4 5 6 7 8 다음 728x90
