Grid
123123 Grid Layout Grid 레이아웃에 설명하기 전 개념되는 용어에 대해서 짚고 가려고 합니다. Grid는 Container와 Item으로 구성됩니다.. Container는 Items를 포함한 개념입니다. Grid Container는 행(Column)과 열(Row)로 구성됩니다. Grid Line 행과 열을 구분짓는 선이며, 각 선이 1부터 시작되는 라인 number를 가집니다. Grid Track 그리드 라인 사이의 행 또는 열 공간입니다. Grid Cell 그리드 셀은 그리드 라인 사이에 묶여 있는 가장 작은 단위의 유닛입니다. Grid Area 4개의 그리드 라인이 모여 그려지는 공간으로, 셀으로 이루어진 공간입니다. Grid Gutters 로우와 컬럼 사이 간격을 Grid Gutte..
항상 메인페이지를 코딩할때마다 갖는 고민이다. gnb 항목에 에 hover를 할 때, depth n 항목들을 보이게 하는 효과에서, .gnb-li{ position:relative;}.gnb-li.is-li01 .gnb__depth1{ position:absolute; top:N; left::N; width: N;} 등으로 일일히 width값과 left값을 부여하는 방법을 쓰는데 다른 좋은 방법은 없을까.일일히 직접 재는 것도 비효율적이라고 생각하지만, 유지보수 시에 좋은 코드라고 생각치 않기때문이다. 만일 depth1항목에 몇 글자 추가되거나 항목이 더 들어간다면 또 일일히 width값과 left값을 수정해줘야하기 때문이다.
02약관동의 현재 '약관동의' 과정에 있습니다. /*css*/ .where_you_are__where_you_are__hidden_text{ text-indent: -9999px;} 여기서 text-indent가 먹히지 않는 문제가 발생했다. 원인은 'inline태그에 text-indent가 적용이 안 된다'는 데에 있었다. 이에 대한 해결방법은 inline태그를 block태그로 바꿔주거나, inline태그에 block속성(display: block 혹은 display:inline-block)을 부여해야 한다. 그러나 하위브라우저와의 호환성을 고려하고 있어서 display:block속성을 부여해서 문제를 해결했다. 해결후-- /*css*/ .where_you_are__where_you_are__hidde..