Tailwindcss의 Grid와 Order을 사용해서 순서 변경하기
( ↑ SP화면)( ↑ PC화면)아래와 같은 기능을 구현하는데 Grid와 Order를 사용하였다PC화면에선 1 , 2 , 3 요소가 한줄로 표시된다SP화면에선 1 , 3이 첫번째 줄로 표시되며2가 두번째 줄로 표시된다Grid와 Order을 사용하면 위와 같은 기능을
시맨틱 레이아웃 ( Semantic layout )
시맨틱 (semantic)은 '의미론적'이란 뜻을 가지고있다각 태그가 어떤 의미로 쓰이는지 태그만 보고 알수있다 ( 이미지 참조 )구글의 웹크롤러가 해당 페이지를 조금 더 쉽게 이해할수있으므로 SEO에 이점이 있다<header>, <nav>, <article>, <se
tailwindcss의 선택자
1. &: 현재 요소에 적용 ( &: 현재요소 )[&:nth-child(3)]: 이 구문은 현재 요소의 세 번째 요소를 선택합니다.<ul role="list"> {#each items as item} <li class="[&:nth-child(3)]:un
Table에 대해서
(예제를 화면에 표시)table의 속성border와 width,height,cellpadding,cellspacing등이 있다table의 자식태그<caption> 테이블의 타이틀<thead><tbody><tfoot> 테이블의 헤더,바디,푸터를 분할하는 용도로 사용이며
flex의 flex-grow / flex-shrink / flex-basis에 대해서
flex사용이유레이아웃을 만들기 위해서요소의 배치를 쉽게 위해서flex의 컨테이너에서 사용되는 축약형flex-flow : column nowrap; /* 컨테이너 내 아이템들을 세로로 배치하고, 줄바꿈을 하지 않습니다 */flex-growcontainer에 여분의 공간
CSS의 가운데정렬(수직/수평) 방법 및 margin:auto에 대해서
아래의 1번의 예제1.transform의 transition을 이용한 방법 (수직/수평)가장 먼저 position설정후 top:50%와 left:50%를 맞춘다그러면 요소의 왼쪽모서리가 화면 정중앙에 위치하게 되지만 요소는 가운데에 정렬되지 않는다여기서 transfor
Position정리 relative / absolute / fixed / sticky
Sticky예제( 스크롤 하기전 sticky요소가 relative하게 위치한 모습 )( 스크롤 후 sticky요소가 viewport기준으로 top:10px부분 부터 fixed하게 위치한 모습 )Position 설명1.staticposition 속성을 지정하지 않으면,
flex와 inline-flex의 차이
차이flex를 2개 사용할때 차이를 알수있다flex를 사용한 경우아래의 경우 div가 상하로 쌓인다 (wrapper를 block처리)<div style="display:flex">1</div> <div style="display:flex">2</div>inline-
line-height / vertical-align에 대해서
line-height에 대해서line-height는 행과 행의 간격을 제어할수있다line-height는 font-size와 관계가 있다예를 들어 font-size 50px을 주고 line-height를 70px을 줄 경우 font-size를 50px의 높이를 가지면서
white-space속성 / pre태그
pre태그pre태그는 텍스트를 그대로 표시하며, 텍스트 내의 공백, 줄바꿈, 탭 등을 그대로 유지한다스페이스(  ;)/탭(&Tab ;)/엔터(br태그)은 보통 공백하나로 처리되지만 pre를 사용할 경우 그대로 유지되어 표시됨html 태그도 그대로 표시됨width
Position:abolute사용시 넓이 상속문제 / inset / 화면중앙위치
1.Position:abolute사용시 넓이와 높이 ( width & height ) 상속문제넓이를 width:100%로 만들고 abolute를 지정하니 넓이 100%가 적용이 안되었다이 문제의 원인은 position: absolute 속성이 적용된 엘리먼트의 widt
CSS의 height:100%와 height:100vh의 차이 (+width)
height: 100%부모의 높이 값에 의존한다. 부모에게 height가 설정되어있어야한다( 단위가 %일땐 부모의 값에서 높이를 상속받는다)(height와 width는 상속받지 않는다 %라는 단위가 상속을 받을뿐이다)height: 100vh사용기기의 높이에 의존한다.