오늘이라도

https://github.com/upcake/Class_Examples 교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. - box-sizing으로 박스의 크기를 정할 수 있다. - 기본 값은 content-box이며 border와 padding이 box 밖으로 간다. - border-box는 border와 padding 모두 box 안쪽으로 간다. - margin은 box 바깥쪽으로 지정되어 box 크기에 포함 안된다. - border : 테두리 - border-width : 두께 - border-style : 형태 - border-color : 색깔 - 주어진 크기에 이미지 크기를 맞춘다. - background-position : 배경 이미지 위치 지정 - background-repeat 생..

https://github.com/upcake/Class_Examples 교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. - background-image: url('이미지 경로.jpg') - display의 속성 ① block : 넓이와 높이를 모두 갖는다, 크기 지정 가능(width, height, align, margin 속성 적용 됨) ② inline : 넓이와 높이를 최소 값만 갖는다, width, height 적용 안됨, margin은 div 좌우로만 적용 ③ inline-block : 넓이와 높이를 모두 가지면서 인라인 성격을 갖는다. ④ none : 공간 자체를 없앤다. - display: none은 해당 태그의 모든 요소를 없애지만, visibility: hidden은 영역은 남겨..

https://github.com/upcake/Class_Examples 교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. - display로 태그가 어떻게 보일지에 대해서 정할 수 있다. none 태그를없는 것 처럼 만듦 block inline 태그를 block 태그 처럼 만듦 inline block 태그를 inline 태그 처럼 만듦 inline-block inline 처럼 한 줄안에 들어가지만, 줄 안에서 크기를 가질 수 있음 - inline 태그는 width와 height가 안 들어가고 margin이 좌우만 먹힌다. - visibility : hidden 은 자리는 유지하고 보이지만 않게 만든다. - table 태그의 경우 visibility: collapse;를 이용해 display: no..

https://github.com/upcake/Class_Examples 교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. - li:not(XX) : li 중에서 클래스가 XX가 아닌 것을 의미한다.

https://github.com/upcake/Class_Examples 교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. - focus는 해당 input 태그에 초점이 맞추어진 경우에 작동된다. - enabled는 해당 input 태그가 사용 가능할 때 작동된다. - disabled는 해당 input 태그가 사용 불가능할때 작동된다. - input[type=checkbox]:checked로 체크박스가 체크되었을 때 작동하게끔 할 수 있다. - first-child는 하위 태그중 첫째 태그를 지정한다. - last-child는 하위 태그중 마지막 태그를 지정한다. - nth-child는 하위 태그중 n번째 태그를 지정한다. - border-radius로 모서리를 둥글둥글하게 만들 수 있다. - di..