box-shadow: ;
그림자 넣기 기능
border-radius: 5px;
The value(5px; in this case) applies to all four corners, which are rounded equally.
border-radius: 5px 30px;
(top-left & bottom-right) (top-right & bottom-left)
border-radius: 5px 30px 50px;
(top-left) (top-right & bottom-left) (bottom-right)
border-radius: 5px 30px 50px 15px;
(top-left) (top-right) (bottom-right) (bottom-left)
: 크기가 이미 정해져있는 요소에 padding 을 주면 그대로 요소가 밀려나버린다. 그래서 더이상 정해줬던 크기가 맞지 않아지겠지?
box-sizing: border-box; 를 써주면, 요소의 크기가 변하지 않고 패딩만 들어가게 된다 :)
가상선택자 중 하나인데, 부모의 몇번째 자식을 지정해서 스타일을 선언해 줄 수 있다.
예를들면 ul 밑에 3개의 li 로 구성되어 있다고 하자.
1번째 li 는 배경색을 빨간색을,
2번째는 파란색,
3번째는 검정색을 넣고 싶다고 가정해보자.
#header li:nth-child(1) { background-color: red;} #header li:nth-child(2) { background-color: blue;} #header li:nth-child(3) { background-color: black;}
이렇게 지정해주면 같은 ul의 밑에 있는 li 이지만 다른 색상의 스타일을 가질 수 있게된다 !
얘는 hmtl 태그인데,
선택하기<select> <option>선택하기</option> </select>
section 태그를 사용해 option을 넣어주면 클릭해서 값을 고를 수 있게 된다 ! 바로 이렇게 . ^^^^
input의 type은 종류가 엄청 많다 !!
<input type="checkbox"> 나는 오늘 알찬 하루를 보냈다.<br> <input type="text"> => 텍스트 입력창입니다. <br> <input type="time"> => 시간 입력창 입니다. <br> <input type="button"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="time"> <input type="url"> <input type="week">
나는 오늘 알찬 하루를 보냈다.
=> 텍스트 입력창입니다.
=> 시간 입력창 입니다.
(default value)