정의페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의할때 사용기본 문법 One Two Three Four Five Six.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: minmax(100px, auto);}.one { grid-column: 1 / 3; grid-row: 1;}.two { grid-column: 2 / 4; grid-row: 1 / 3;}.three { grid-column: 1; grid-row: 2 / 5;}.four { grid-column: 3..

정의 CSS Flexible Box Layout은 사용자 인터페이스 디자인과 단방향 레이아웃에 최적화된 CSS 모듈이다. css 속성 1. flex - 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다. flex는 flex-grow, flex-shrink, flex-basis의 단축 속성 2. flex-direction - 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정 3. flex-shrink - flex-item 요소의 flex-shrink 값을 설정하는 속성, flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용, 설정된 숫자값에..

정의 media query는 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능이다. 기본 문법 @media (조건) { 스타일 ~~~ } 예시 넓은 화면에서 배경을 red로 @media (min-width: 800px) { .wide-bg-red { /* 화면이 800px 이상이면 배경색이 red로 */ background-color: red; } } 적용 이미지

정의 position 속성은 문서 상에 요소를 배치하는 방법을 지정한다. 값 static - 요소를 일반적인 문서 흐름에 따라 배치합니다. top (en-US), right (en-US), bottom (en-US), left (en-US), z-index 속성이 아무런 영향도 주지 않습니다. 기본값입니다. relative - 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다. - z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성합니다. table-*-group, tabl..

비밀번호 input 설정 input type을 password로 지정 해준다. 전 후 전체 html 로그인 뒤로가기

tailwind class에 !important 적용 시키는 법 클래스 명 앞에 느낌표를 붙이면 된다. 클래스 명 앞에 느낌표를 붙이면 된다.

html - button을 누르면 연결된 link로 이동 시키는 법 같은 탭으로 열기 다른 탭으로 열기 굉장히 간단하지만 모르면 할 수 없다는게 재밌는 것 같다.

rem (root em) em은 현재 font-size를 정의한다. 최상위 태그에서 지정한 font-size를 기준으로 1rem이 설정된다. body에서 font-size를 14px로 지정했다면 하위 태그에서 2rem은 28px을 의미한다. body { font-size: 14px; } div { font-size: 2rem; /* 28px; */ } vh & vw (vertical height & vertical width) vh, vw 요소는 높이, 너비 값의 100분의 1 단위이다. 브라우저의 높이값이 900px 일때 1vh는 9px이다. 브라우저의 너비값이 750px 일때 1vw는 7.5px이다. .slide { height: 100vh /*브라우저에 꽉 차는 높이값*/ } vmin & vmax -