Muscardinus

기존의 flex 보다 조금 더 유연하고 편리하게 Element를 구성하기 위해서 Grid가 나왔다. Column & Row column은 '열'을 의미하고 row는 '행'을 의미한다. 하지만, 혼란을 없애기 위해서 앞으로는 column은 세로, row는 가로라고 이해를 하자. Template 가로 세로 구획을 나눌 때 부모요소에 우리는 template을 사용할 수 있다. grid-template-column -> 세로를 몇 개로 나눌지 결정 grid-template-row -> 가로를 몇 개로 나눌지 결정 각가을 나눌때는 auto 혹은 단위(fr: Fraction)을 사용한다. .parentNormal { display: grid; grid-template-columns: auto auto; grid-t..

대부분의 인터넷 사용자들은 원하는 정보를 취득하기 위해 Google/ Naver 와 같은 검색사이트를 이용한다. 웹사이트는 검색엔진에서의 노출은 중요하다. 당연한 것이 검색엔진에 노출되지 않는 웹사이트에는 접속하는 이도 없기 때문이다. (마치 나의 블로그 처럼.....) SEO(검색엔진 최적화: Search Engine Optimization) 같은 마케팅 도구를 사용하여 검색엔진이 본인의 웹사이트를 검색하여 알 맞은 구조로 웹사이트를 조정하기도 하는데, 이것은 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로 부터 시작된다. 검색엔진은 Robot이라는 프로그램을 이요해 매일 전세계의 웹사이트 정보를 수집한다. 이것을 클롤링이라하며 검색엔진의 크롤러가 이를 수행한다. 그리고 검색 사이트..

float 요소 none(기본값)/ left/ right float로 인하여 부모가 잃은 height는 overflow:hidden으로 보완

인라인 요소 한줄에 여러 개 배치 기본 너비값은 컨텐츠의 너비값 크기값을 가질 수 없음 상하 margin은 가질 수 없음 좌우는 가능 블록 요소 한줄에 한개만 배치 기본 너비값은 전체(부모 width) 크기값을 가질 수 있음 상하좌우 margin가질 수 있음 인라인 블록 요소 한줄에 여러 개 배치 기본 너비값은 컨텐츠의 너비값 크기값을 가질 수 있음 상하좌우 margin은 가질 수 있음

Position에는 static, fixed, relative, absolute가 들어갈 수 있다 Position: fixed 현 위치에 무조건 고정이 된다 Position : absolute display가 inline-block으로 바뀜 inline-block에서는 width와 height가 없으므로 설정 해 줘야한다 absolute를 주면 부모의 height가 사라짐(부모에게 height 값이 설정 되어 있지 않으면 자식의 크기에 따라 유동적으로 변함) -> 부모에게 height를 선언해주거나 overflow: hidden을 줘서 height를 다시 살려 줌 Position: relative absolute를 위해서 존재한다. absolute의 부모로 보면 된다 absolute 선언 된 elemen..