국비지원 교육 15일차

Chaehee Sohn·2022년 9월 14일
0

국비 개발교육 일지

목록 보기
14/28

box-shadow

box-shadow: ;

그림자 넣기 기능

border-radius

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)

box-sizing: border-box; 를 쓰는 이유

: 크기가 이미 정해져있는 요소에 padding 을 주면 그대로 요소가 밀려나버린다. 그래서 더이상 정해줬던 크기가 맞지 않아지겠지?
box-sizing: border-box; 를 써주면, 요소의 크기가 변하지 않고 패딩만 들어가게 된다 :)

:nth-child ()

가상선택자 중 하나인데, 부모의 몇번째 자식을 지정해서 스타일을 선언해 줄 수 있다.
예를들면 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 이지만 다른 색상의 스타일을 가질 수 있게된다 !

select

얘는 hmtl 태그인데,

<select>
  <option>선택하기</option>
</select>
선택하기

section 태그를 사용해 option을 넣어주면 클릭해서 값을 고를 수 있게 된다 ! 바로 이렇게 . ^^^^

input

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)


profile
손체리

0개의 댓글