23_10_11 CSS공부정리

https://nomadcoders.co/javascript-for-beginners-2/lectures/3753

All Courses – 노마드 코더 Nomad Coders

[노마드코더] 3.4강~

 

body {

    display : flex;

    gap : 20px;

    justify-content: space-between;

    align-items : flex-start;

}

-gap은 요소들 사이의 너비를 의미함

https://developer.mozilla.org/en-US/docs/Web/CSS/gap#constituent_properties

gap - CSS: Cascading Style Sheets | MDN

-align-items : flex-start는 보조축방향의 배치를 flex-start로 하는것(그냥 start랑 뭐가 다른지 모르겠다)

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

align-items - CSS: Cascading Style Sheets | MDN

 

.color-option {

    border-radius : 25px;

    width : 50px;

    height: 50px;

    cursor: pointer;

    transition : transform ease-in-out .3s; 

}

.color-option:hover{

    transform : scale(1.5)

}

 

button {

    transition : opacity linear .1s;

}

button:hover {

    opacity : 0.7;

}

-transition : 속성, 변형속도패턴 , 딜레이시간

-transform : 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여

-opacity : 투명도

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

transition - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

transform - CSS: Cascading Style Sheets | MDN

-all : unset / 상속값을 제외하고 모든 설정을 초기화시키는 기능

button {

    all : unset;

}

https://developer.mozilla.org/ko/docs/Web/CSS/all

all - CSS: Cascading Style Sheets | MDN

 

-lable의 for속성을 통해서 input type="file"을 실행시킬 수 있음.

-이를 이용해 file버튼을 꾸밀 수 있다.

        <label for="file">Add Photo</label>  //for은 input태그의 id값을 가리켜야 연결될 수 있음.

        <input type="file" accept="image/*" id="file"/>

 

-checkbox의 이벤트는 checked로 확인 가능. 체크되어있을때 true. 아니면 false.

function onFontStrokeChange(event){

    console.log(event.target.checked)

}

event.target.checked : false (체크가 해제된 경우)