@charset "UTF-8";
/* css_basic_01.css */

.size_check {
  width: 800px;
  height: 800px;
  margin: auto;
  background-color: #ccc;
}

h3{margin: 0; padding: 1rem;
  background-color: #fff}


.size_check > p {
  width: 80%; min-width: 400px; max-width: 700px;
  height: 200px;
  background-color: #0cc;
}

/* ------------ */

.size_check>ul{margin: 0; padding:0; width: 100%; height: 300px; background-color: #fa0; }

.size_check>ul>li{ display:block; float: left;
  width: 50px; border-width:5px; border-style: solid; border-color: #333;
text-align: center; line-height: 50px; list-style: none;}
/* 
display: 속성은 형태를 변형 처리할때 사용
- block: 크기를 가지지만, 아래로 쌓인다.
- inline: 옆으로 나열되지만 크기를 가질수 없다.
- inline block: 크기와 옆으로 나열, 알수없는 공백이 생긴다.
- none : 강제로 사라지게 만드는 기능 (글씨도 사라짐)
[해결]
float: 옆으로 나열하게 만드는 기능, 인라인 요소일 경우에 float 사용하면 강제로 block 요소로 변경 (display: block 생략가능)
값) left(부모의 크기를 기준으로 왼쪽부터 정렬) || right (부모의 크기를 기준으로 오른쪽부터 정렬)
*/

.size_check>ul>li:first-child{background-color: #f07;}
.size_check>ul>li:nth-child(2){display: none; background-color: #afa;}
.size_check>ul>li:nth-child(3n-1){visibility: visible; background-color: #f6f;}
.size_check>ul>li:nth-child(3n){visibility: hidden; background-color: #777;}
.size_check>ul>li:last-child{visibility: hidden; background-color: #777;}

/* :first-child쓰면 li중 첫번째 하나 선택가능
nth-child(숫자) 몇번째
nth-child(3n) 3번째마다
nth-childe(3n-1) 3번째마다에서 -1
nth-childe(3n+1) 3번째마다에서 +1
last-child 쓰면 마지막 
*/

/* visibility: display속성과 유사한 기능을 가지고 있다 하지만 기본 2가지의 속성을 가진다.

visible - display:block 과 같은 보여지게 만드는 기능
hidden - display: none과 같음 사라지는 기능 - display와 다른점은 위치하던 아이는 그대로 남아있다. 

*/