CSS 복습(7일차)

<!-- <h1>grid</h1> <p>그리드 아이템과 아이템 병합을 활용하여 다양한 레이아웃을 만들 수 있다</p> <pre>   1 그리드 기본형   2 그리드 아이템 병합 </pre> --> <!-- <h1>grid 기본형</h1> <style>   .container {     border: 1px solid;   }   .grid {     /* grid 컨테이너 */     display: grid;   }      .grid-cols-3 {     /* repeat(컬럼갯수, minmax 함수) */     grid-template-columns: repeat(3, minmax(0, 1fr));   }      .gap-2 {     /* 아이템 사이의 공간 */     gap: 0.5rem;   }   /* grid 아이템 */   .item {     background-color: #ddd;     padding: 0.5rem;   } </style> <div class="container grid grid-cols-3 gap-2">   <div class="item">item 1</div>   <div class="item">item 2</div>   <div class="item">item 3</div>   <div class="item">item 4</div>   <div class="item">item 5</div>   <div class="item">item 6</div>   <div class="item">item 7</div>   <div class="item">item 8</div>   <div class="item">item 9</div> </div> -->

grid를 사용하면 grid아이템을 사용할수 있어 다양한 레이아웃을 만들수있게 되는것이다. grid-template-columns:repeat(3,minmax(0,1fr)) 속성을 사용하면 한열에 몇개의 아이템을 사용할것인지 정할수있다. 위의 코드에서는 3이라고 써있으니 한줄에 3개까지  이어 쓸수있다는것이다. minmax는 다음에 알아보도록하자 gap을 사용해서 아이템간의 공간을 만들어주었다.

 

<!-- <h1>grid 아이템 병합</h1> <style>   .container {     border: 1px solid;   }      .grid {     display: grid;   }   .grid-cols-3 {     grid-template-columns: repeat(3, minmax(0, 1fr));   }      .gap-2 {     gap: 0.5rem;   }      .item {     padding: 0.5rem;     background-color: #ddd;   }      .col-span-2 {     /* span + 병합할 컬럼 수 */     grid-column-start: span 2;   } </style> <div class="container grid gap-2 grid-cols-3">   <div class="item">item 1</div>   <div class="item">item 2</div>   <div class="item">item 3</div>   <div class="item col-span-2">item 4</div>   <div class="item">item 5</div>   <div class="item">item 6</div>   <div class="item col-span-2">item 7</div> </div> -->

grid-column-start:span 2 를 사용해서 아이템들을 병합시킬수도 있다. 위의 코드에서는 span 뒤에 2를 붙여주었다.  그럼 두개의 아이템을 병합시킨다는 뜻이다. grid-cols-3 클래스를 사용해서 한열에 3개의 아이템이  만들어지도록 설정해주었다. 1번째 줄에는 3개의 아이템이 생기게된다. 2번째 줄에는 2개가 병합된 아이템하나와 1개의 아이템이  만들어진다.   여기서 또하나 알아야하는것이있다. 2개의 아이템이 병합되어 하나의 아이템으로 보인다고해도 결국은 2개의 아이템인것 그래서 결국은 병합을 한다고해서 아이템이 더들어갈수 있지않다. 그래서 2번째 줄은 병합된 아이템하나와 일반아이템 하나이다 3번째 줄은 하나의 아이템과 2개가 병합된 아이템이다.

 

<!-- <h1>Q. grid</h1> <style>       .grid {     display: grid;   }      .grid-cols-4 {     grid-template-columns: repeat(4, minmax(0, 1fr));   }      .gap-2 {     gap: 0.5rem;   }   .item {     padding: 0.5rem;     background-color: #ddd;   }   .col-span-2 {     grid-column-start: span 2;   }   .col-span-4 {     grid-column-start: span 4;   } </style> <div class="container grid gap-2 grid-cols-4">   <div class="item col-span-2">item</div>   <div class="item col-span-2">item</div>   <div class="item col-span-4">item</div>   <div class="item">item</div>   <div class="item col-span-2">item</div>   <div class="item">item</div> </div> -->

앞에서 배운것들을 활용해서 위와 같은 레이아웃을 만들어보았다. grid-template-columns: repeat 속성은 컨테이너 하나당  한번밖에 사용하지못한다. 그래서 결정할때 가장작은 아이템 블럭을 보고 결정하면된다. 위의 사진에서는 가장 작은 아이템 블럭은 3번째 줄에 있었다. 4등분한 크기라서 바로   grid-template-columns: repeat(4, minmax(0, 1fr)); 해주었다. 그리고 1줄에는 각각 4등분한 아이템을 2개로 병합해주었다. 그리고 2번째 줄에는 4등분한 아이템을 1개로 병합해주었다. 마지막으로 3번째줄은 1/2/1 비율로 병합해주었다.

 

<!-- <h1>가상 엘리먼트</h1> <pre>   CSS에서 정의된 컨텐츠   HTML 트리상에 존재하지 않는다   코드의 재사용성을 증가시킨다   1 사용방법   선택자::가상 엘리먼트   2 종류   1) before - 가상 엘리먼트가 선택자의 컨텐츠 앞에 위치한다   2) after - 가상 엘리먼트가 선택자의 컨텐츠 뒤에 위치한다   3) marker - 가상 엘리먼트가 before 앞에 위치한다 </pre> <style>   li::after {     content: "%";   } </style> <ul>   <li>0</li>   <li>50</li>   <li>100</li> </ul> -->

특정 컨텐츠의 다양한위치에 원하는 것을 붙일수있다. brefore은 앞에 after은 뒤에  marker은 before앞에 위치한다.(맨앞에 위치한다.) <li> 태그도 사용할때 marker로 사용한다.

 

<!-- <h1>initial, inherit</h1> <pre>   상속과 관련된 키워드   모든 속성의 값이 될 수있다   1 inherit   부모로부터 속성값을 물려받는다   2 initial   상속받은 속성값을 초기화한다 </pre> <style>   ul {     color: #888;   }   .inherit {     color: inherit;   }   .initial {     color: initial;   } </style> <h1>dsf</h1> <ul>   <li>list item</li>   <li class="inherit">list item (inherit)</li>   <li class="initial">list item (initial)</li> </ul> -->

자식은 부모로부터의 속성값을 물려받는데  이것을 원치않으면 initial을 사용하면된다. 물려받길원하면 inherit를 사용하면되는데 이것은 기본값이다.

 

<!-- <h1>CSS 변수</h1> <style>   /* root element */   :root {     --midnight: rgb(4, 15, 53);   }   ul {     background-color: var(--midnight);     color: #fff;   } </style> <ul>   <li>list item</li>   <li>list item</li>   <li>list item</li> </ul> -->

CSS에서도 변수를 만들수가있다. root를 사용해서 변수를 지정하고  var을 사용해서 변수를 사용한다. root를 사용해서 midnight이라는 변수를 만들어주었다. midnight 변수는 rbg(4,15,53) 색삭을 가지고있다. ul엘리먼트를 만들어주고 배경색을 midnight변수를 넣어주었다.

 

<!-- <h1>반응형 레이아웃</h1> <pre>   화면의 크기에 따라 레이아웃을 바꾼다   media 쿼리를 사용하여 레이아웃 기준점을 설정한다 </pre> <style>   .item {     background-color: #ddd;     padding: 0.5rem;   }   .grid {     display: grid;   }   .gap-2 {     gap: 0.5rem;   }   /* base */   .grid-cols-n {     grid-template-columns: repeat(1, minmax(0, 1fr));   }   @media (min-width: 640px) {     .grid-cols-n {       grid-template-columns: repeat(2, minmax(0, 1fr));     }   }   @media (min-width: 768px) {     .grid-cols-n {       grid-template-columns: repeat(3, minmax(0, 1fr));     }   }   @media (min-width: 1024px) {     .grid-cols-n {       grid-template-columns: repeat(4, minmax(0, 1fr));     }   }   @media (min-width: 1280px) {     .grid-cols-n {       grid-template-columns: repeat(5, minmax(0, 1fr));     }   }   @media (min-width: 1536px) {     .grid-cols-n {       grid-template-columns: repeat(6, minmax(0, 1fr));     }   } </style> <h3>Layout 기준점</h3> <ul>   <li>S: 641px - 767px</li>   <li>M: 768px - 1023px</li>   <li>L: 1024px - 1279px</li>   <li>XL: 1280px - 1535px</li>   <li>XXL: 1536px - </li> </ul> <div class="container grid gap-2 grid-cols-n">   <div class="item">item</div>   <div class="item">item</div>   <div class="item">item</div>   <div class="item">item</div>   <div class="item">item</div>   <div class="item">item</div> </div> -->

미디어 쿼리라는것을 사용할것이다.  사용하기 위해서는 선언을 해주어야하는데 선언방법이 독특하다 @media를 붙여주고 아이템의 넓이가 뒤에붙은 px 넘어갈때  사용된다는것이다. 처음시작은 한줄로 아이템들이 정렬된다. (column) 640px 미만이라면 말이다. 640px 이상이 되는 순간 한열에 2줄씩 아이템이 만들어지고  768px 이상이 되면 3줄 1024px 이상이면 4줄 1280px 이상이면 5줄 1536px  이상이면 6줄이된다.

 

<!-- <h1>Q. Breakpoints</h1>   <p>It has 3 columns from medium size</p>   <style>     .grid {       display: grid;     }          .grid-cols-n {       grid-template-columns: repeat(1, minmax(0, 1fr));     }     .gap-4 {       gap: 1rem;     }     p {       margin: 0;     }     @media (min-width: 768px) {       .grid-cols-n {         grid-template-columns: repeat(3, minmax(0, 1fr));       }     }   </style>   <div class="grid grid-cols-n gap-4">     <div class="item">       <h3>section 1</h3>       <p>         Lorem ipsum dolor sit, amet consectetur adipisicing elit.          Velit incidunt, quisquam consequatur, obcaecati repudiandae          consequuntur ipsam a in optio culpa placeat quae libero quaerat          nihil soluta dolores natus nobis quasi.       </p>     </div>     <div class="item">       <h3>section 2</h3>       <p>         Lorem ipsum dolor sit, amet consectetur adipisicing elit.          Velit incidunt, quisquam consequatur, obcaecati repudiandae          consequuntur ipsam a in optio culpa placeat quae libero quaerat          nihil soluta dolores natus nobis quasi.       </p>     </div>     <div class="item">       <h3>section 3</h3>       <p>         Lorem ipsum dolor sit, amet consectetur adipisicing elit.          Velit incidunt, quisquam consequatur, obcaecati repudiandae          consequuntur ipsam a in optio culpa placeat quae libero quaerat          nihil soluta dolores natus nobis quasi.       </p>     </div>   </div> -->

앞에서 배운것으로 새로운 문제를 풀어보았다. base 로 지정된 속성은 한열에 아이템이 한개 지만 768px 이상 되는순간 3개로 바뀌게된다.

 

 

 

 

 

 

Example 파일업로드 만들어보기

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>CSS 예제</title> </head> <body> <h1>파일 업로드 버튼</h1> <style> #file-input { display: none; } .btn { /* 컨테이너가 아이템에 필요한 만큼만 넓이를 가진다. 나머지는 flex와 동일 */ display: inline-flex; /* top/bottom left/right */ padding: 0.5rem 0.75rem; /* width style color */ border: 2px solid #0bf; color: #0bf; /* 모서리를 둥글게 처리한다 */ border-radius: 0.5rem; font-weight: 600; /* 손가락 모양 커서 */ cursor: pointer; } .icon { width: 1.5rem; /* 색 */ fill: #0bf; } .text { margin-left: 0.5rem; } /* 반전 효과 */ .btn:hover { background-color: #0bf; color: #fff; } .btn:hover .icon { fill: #fff; } </style> <input type="file" id="file-input" name=""> <label for="file-input" class="btn"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"> <path d="M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128H144zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39V392c0 13.3 10.7 24 24 24s24-10.7 24-24V257.9l39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80z" /> </svg> <span class="text"> Choose File(s) </span> </label>      </body> </html>

btn 엘리먼트를 만들어주었다. display:inline-flex 속성을 주었다.  padding 을 0.5rem과 0.75rem을 주었다. border을 사용해서 2px의 테두리를 만들어주었다. border-radius를 사용해서 테두리의 모서리 부분을 동그랗게 만들어주었다. font-weight 속성으로 글자의 두께를 두껍게 만들어주었다. cursor:pointer 속성을 주어서 커서가 아이템의 범위에 들어올때 커서의 모양을 손가락모양으로 바꿔주었다. 그리고 hover을 사용해서 반전효과도 주었다. 그리고 파일을 업로드 받기위해서 input 과 svg를 사용해주었다. 그리고 path를 통해서 아이콘을 자유롭게 사용할수있다.