몽땅뚝딱 개발자

- 반응형으로 만들 때 필요한 태그이다. 사이즈는 아래와 같이 맞추면 된다. /* PC */ @media (min-width: 1024px) { ... css 작성 } /* 태블릿/아이패드 */ @media (min-width: 768px) and {max-width: 1023px} { ... css 작성 } /* 모바일 */ @media (max-width: 767px) { ... css 작성 } /* 세로모니터 판별 */ @media (orientation: portrait) { } 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

- 텍스트와 이미지가 같이 있는 경우엔 text-align: center;로 중간정렬을 할 수 있다. - 이미지만 있는 경우엔 text-align 속성이 적용되지 않는다. 그럴 땐 margin: 0 auto;를 사용하여 중간정렬을 하자. - 코드가 반복되는 경우에는 줄여서 쓸 수 있도록 한다. 예를 들어, #aabbcc일 경우 #abc로 줄여쓰는 것이 좋다. color: #fff; // 하얀색 color: #000; // 검정색 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

- 메뉴에서 구분선을 넣을때는 img 태그와 span 태그 모두 사용해도 되지만 좀 더 깔끔한 구현을 위해서는 :before를 사용한다. - 반대되는 개념인 :after도 있다. - display와 content는 꼭 넣어줘야하는 요소이다. - content 항목: 글자를 넣는다. (여기서는 선만 넣기때문에 영역만 지정해주는 용도로 공백이다.) .util > li:before { display: inline-block; content: ""; width: 1px; height: 10px; background-color: #e1e1e1; margin-right: 10px; } 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

- z-index이 같은 값일 경우 HTML상 아래인 것이 먼저 적용된다. 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

- 부모는 relative, 자식은 absolute로 설정한다. 박스위치 선정 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

스크롤 기능은 유지하되 스크롤바만 숨기기 구현 스크롤 있는 버전 스크롤 숨긴 버전 코드 body { -ms-overflow-style: none; } ::-webkit-scrollbar { display: none; } 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.