css3 (스타벅스)헤더_ LOGO + Submenu 포인트 HTML **display:block 을 사용하여 인라인요소 (img) 하단에 baseline 공백을 제거 **CSS JS를 이용하여 input box를 클릭하면 돋보기아이콘이 사라지고, 검색창이 확장되며 '통합검색'이 나타난다. ** position: relative / absolute를 사용하여 자식요소가 부모요소 중간에 위치 CSS ** 가상클래스선택자를 사용하여 sub menu 사이에 세로줄 표현 (:: before) ** display:flex를 사용하여 가로정렬 ** box-sizing:border-box를 사용하여 요소의 크기를 유지하면서 내부여백과 테두리선이 추가될수 있게 해줌. ** outline:none을 사용하여 input box를 클릭했을때 나타나는 border 삭제. ** .. 2022. 6. 2. div 구조잡기_가운데 정렬 1. 구역확인 2. 구조잡기 3. 세밀하게 조정 .box { width: 1000px; display: flex; flex-direction: row; align-items: center; justify-content: center; margin: 40px auto 0px auto; } .map { width: 500px; height: 500px; background-color: red; margin-right: 30px; } .story { width: 450px; height: 500px; background-color: blue; } ▶위아래로 가운데 정렬 display: flex; flex-direction: column; align-items: center; justify-content: ce.. 2022. 5. 19. 1-5 CSS 기초_사용방법( 파일분리,인라인) CSS 사용방법 3가지 ✔️ 태그안에 - 인라인 CSS ✔️ 안에 로 공간을 만들어 작성 ✔️ style.css 파일을 같은 폴더아래 만들고, head 태그에서 불러오기 → 2022. 5. 11. 이전 1 다음
