개발새발 로그

이전에 repeat함수를 사용했었다. 만약 반복이 일정하지 않으면 어떻게 할까? 예제 grid-template-columns : 100px 200px 100px 200px; 만약 위와 같이 일정한 패턴이 반복될 때도 아래와 같이 사용이 가능하다. grid-template-columns : repeat(2,100px 200px); minmax() grid-template를 이용해 명시적으로 너비를 지정하면 빈 공간이 생길 수 있다. grid-template-cloumns : 100px 200px 그러면 아래와 같이 minmax()함수를 이용해서 빈 공간을 채울 수 있다. minmax()의 첫번째 인수는 최솟값이고, 두번째 인수는 최대 값이다. grid-template-columns : minmax(100p..

Grid Items 개발자도구에서 위 사진에 있는 grid를 클릭하면 아래와 같이 나오게 된다. -만약 정상적으로 보이지 않는다면 아래 설정을 확인해보자 grid-row-start - 행에서 몇 번 라인에서 grid가 시작할 것인지 지정할 수 있다. grid-row-end - grid-row-start에서 몇 번 라인까지 frid가 끝날 것인지 지정할 수 있다. grid-row-start: 2; grid-row-end: 4; grid-row-start와 grid-row-end의 단축 속성 grid-row : 2 / 4 justify-self와 align-self .itme:nth-child(1){ justify-self : center; aling-self : end; } 그리드 요소 겹치기 - 아래 처..

flex는 1차원 레이아웃 구조를 만들 수 있고, Grid는 2차원 레이아웃 구조를 만들 수 있다. Grid container에서 사용하는 CSS 그리드 사용법 display : grid 인라인 그리드 dsiplay : inline-grid 행과 열 지정하는 방법 grid-template-rows : 100px 100px; grid-template-columns : 200px 200px 200px; 전체 컨테이너의 비율로 행과 열을 지정하는 방법 grid-template-columns: 1fr 1fr 1fr; 위 방식을 간편하게 사용하는 방법 grid-template-columns: repeat(3,1fr); 1fr을 사용하면서 만약 grid요소에 내용이 없다면 grid요소는 자동으로 최소 높이가 지정이..

1차원 레이아웃 구조를 작업할 때 사용(수평정렬, 수직정렬을 할 때 사용한다) 2차원 레이아웃 구조는 Grid와 같은 경우가 있다. display : flex block요소의 특성과 유사 block요소는 수직정렬이 되고, 가로가 최대한 넓어진다. display: inline-flex inline요소의 특성과 유사 inline요소는 수평정렬되고, 가로가 최대한 줄어든다. 사이의 공간은 띄어쓰기 부분이다. flex 컨테이너 자체는 inline요소가 되어있는 것이다. html 요소마다 띄어쓰기를 지우게 되면 아래처럼 붙어서 나오게 된다. flex요소의 주축과 교차축 주축(main-axis) - 주가 되는 축 - flex direction이 row면 x축이 주축이 된다. 교차 축(cross-axis) - 주가 ..

absolute position : absolute 를 사용할 때는 위치의 기준이 될 수 있는 상위 요소에 relative,absolute,fixed, sticky 등을 부여해야 힌다. 만약 position이 지정된 부모가 없다면 계속해서 상위 요소를 탐색하여 찾는다, 없다면 마지막으로 최상위 요소인 body를 기준으로 위치하게 된다. fixed transform 속성이 부여된 부모를 기준을 배치될 수 있는 주의점이 있다. 아래 이미지의 설명을 보자. perspective 3D 위치의 요소 에 원근감을 주기 위해 z=0 평면과 사용자 사이의 거리를 결정합니다. 부모요소에 적용하고 자식요소에서 3차원효과를 주는 속성을 사용하면 된다(transform) 부모 요소에 perspective를 주고, 자식요소에 ..

float 요소의 수평정렬을 위해 많이 사용했지만 flex가 생김으로인해 사용이 많이 줄어들었다. border : 4px solid; border 속성에 색상을 지정안하면 텍스트 색상을 따라간다. float의 주의점 1. float의 마지막요소에 float을 더이상 사용하지않겠다는 해제 속성을 넣어야한다. 만약 넣지 않으면 원하는 방향으로 출력되지않는다. clear: left; 하지만 위 방법은 필요없는 마지막요소가 있어야하기 때문에 적절하지 않다. overflow : hidden; 가상요소 ::after 3. float한 요소는 float한 요소끼리만 있어야 한다. 일치 선택자 div.container{ color : pink; } 선택자와 선택자가 붙어있는 형태를 일치 선택자라 한다. 위 코드는 di..

Bootstrap은 빠르고 간편한 반응형 웹 디자인(responsive web design)을 위한 open-source front-end framework이다. HTML, CSS, JavaScript로 만들어진 typography, 입력 양식(forms), 버튼, 테이블, 탭, 내비게이션, 모달, 이미지 캐러셀(image carousel) 등을 제공하며 추가적으로 JavaScript plugin들을 제공한다. Twitter의 Mark Otto와 Jacob Thornton이 개발한 오픈 소스로 2011년 공개되었다. http://bootstrapk.com/ 부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크. 프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것..

컨테이너 요소로 img 요소를 래핑하면 img 요소 아래에 의도하지 않은 여분의 공간이 패딩된다. See the Pen Untitled by 신준혁 (@miduksdl-the-lessful) on CodePen. 이 문제가 발생하는 이유에 대해 살펴보자. 단순히 문제 해결 방법을 외우지 않고 문제가 발생하는 이유를 이해하면 문제 해결 방법을 기억하는 것에 도움이 된다. image 요소는 inline 요소이다. 다시 말해 image 요소는 텍스트로 취급된다. 브라우저는 요소 내의 텍스트를 렌더링할 때 나름의 방식이 있는데 이를 이해하려면 타이포그래피(Typography)에 대해 어느 정도 이해해야 한다. image 요소는 inline 요소이며 텍스트로 취급된다고 하였다. 이것은 image 요소 또한 위 그..