CSS margin 겹침 (통합) 현상 (margin-collapsing) 두 개 이상의 margin 값이 세로 방향으로 만났을 때 하나의 margin으로 합쳐지는 현상이다. 이런 게 있는지 이번에 처음 알았는데 그동안 디자인할 때 왜 그렇게 margin이 안 맞았는지 이제야 알았🤣🤬 div가 위 아래로 위치해있다 가정하고, 위 div의 margin-bottom이 20px이고, 아래 div의 margin-top이 30px 일 때 두 개가 만나면 bottom, top이 합쳐진 50px가 아닌 둘 중 큰 값인 30px가 된다. line-height 폰트는 그대로 있고 폰트 위 아래의 행간이 넓어진다. background color | image | repeat | position | attachment | ..
2개월 동안 HTML부터 Spring까지 다시 복습하는 시간을 가져본다 ! 근데 어제는 정리를 안 했기 때문에 TIL가 아닌 YIL (Yesterday I Learned) HTML XML 구조 언어로 인터넷에서 기존에 사용하던 HTML의 한계를 극복하고 SGML(Standard Generalized Markup Language)의 복잡함을 해결하기 위해 만들어졌다. !DOCTYPE (문서형 선언 DTD) 문서형 선언 Document Type Definition 줄여서 DTD이다. (오 한글로 치면 ㅇㅅㅇ) !DOCTYPE을 사용해 브라우저가 현재 HTML5 또는 HTML4 또는 XHTML로 작업할 거라는 걸 알려준다. 브라우저가 해당 문서는 웹 버전이라는 것을 인식시키게 하므로 필수적으로 넣어야 한다. ..
jQuery 메소드 정리 클래스 관련 // name이라는 id를 가진 태그에 up이라는 클래스 추가 $('#name').addClass('up'); // name이라는 id를 가진 태그에 down이라는 클래스 제거 $('#name').removeClass('down'); // name이라는 id를 가진 태그에 up이라는 클래스가 없으면 추가, 있으면 제거 $('#name').toggleClass('up'); // item에 down이라는 클래스가 있으면 true, 없으면 false 리턴 $("#name").hasClass('down'); 속성 관련 // 이미지 태그의 src 속성 받아오기 $('img').attr('src'); // 이미지 태그의 src 속성 지정하기 $('img').attr('src',..
태그 이름 h1 { ... } 아이디 #name { ... } 클래스 .name { ... } 자식 .name a { ... } 직속 자식 .name > a { ... } 복수 선택 /* name1 클래스를 가지고 있는 모든 태그와 name2 클래스를 가지고 있는 모든 태그 */ .name1, .name2 { ... } 여러 조건 /* name1 클래스와 동시에 name2 아이디를 가지고 있는 모든 태그*/ .name1#name2 { ... } 가상 클래스 자식 /* .name의 자식인 태그 중 첫 번째 태그 */ .name p:first-child { ... } /* .name의 자식인 태그 중 마지막 태그 */ .name p:last-child { ... } /* .name의 자식인 태그 중 n 번째..
