CSS
1.[CSS] 마진 겹침 현상
하지만 마진 겹침 현상이 매번 이로운 거는 아니다! 다음 예시를 보자.children한테 margin 50px을 주었다. a와 b사이가 100px이 나와야하는데 50px로 떨어져있다.그리고 a도형 상단과 b도형 하단은 마진이 적용되지 않았다. 이게 바로 마진 겹침 현상
2.[CSS] Inline elements VS Block elements
CSS에는 블록 박스와 인라인 박스가 있다.p, h1-h6, ul, ol, div, blockquote, form, hr, table, figure1.기본 너비값이 100%이다.(폼요소 제외)2.width와 height 속성을 사용할 수 있다.3.패딩과 마진, 보더 속
3.[CSS] 가운데 정렬
!codepenunidagit/embed/JjMZJMq?default-tab=html%2Cresult&theme-id=lightmargin: 40px auto;margin을 주기전에는 아래 화면과 같이 결과가 나온다. 저 상태에서 중앙정렬을 하기 위해서는 margin을
4.[css]flex basis shrink grow
item에게 주는 속성 flex basis!codepenunidagit/embed/popxbwb?default-tab=html%2Cresult&theme-id=lightflex-basis는 item의 크기를 설정한다. 초기값은 auto이다. 또한, flex-direct
5.[CSS] 반응형 웹을 만들때 어떤 단위를 쓰는게 좋을까?
px의 문제점은?container사이즈가 변경되어도 컨텐츠가 그대로 고정된 값으로 유지된다.아래 이미지 처럼 내용이 잘려서 나온다.font size를 px로 쓰게 되면 사용자가 브라우저에서 폰트 사이즈 설정을 바꿔도 전혀 반응하지 않는 것을 볼 수 있다.뷰포트는 보여지
6.grid-template-rows, grid-template-columns
grid-template은 grid-template-area, grid-template-rows, grid-template-columns의 단축속성이다. 1.grid-template-rows 명시적으로 행(가로)의 개수와 크기를 설정한다. 2.grid-templa
7.종찬님 특강 01
화면에 오렌지색상을 가진 div의 영역이 보이지않는다 왜일까?div는 blocklevel element요소이다. with와 height값이 지정되어져 있지않다면, initial value: auto가 지정되어져있다. 그말은 직계부모(body)가 전해주고 있는 컨텐츠영역