SMALL CSS5 자바스크립트 javascript 7. 서브메뉴만들기 5 (심화편) (1) html menu 1 menu 2 menu 3 menu 4 menu 5 css * { margin: 0; padding: 0; box-sizing: border-box; } .hbox { height: 100px; background-color: #ccc; } .list { width: 1000px; display: flex; margin: 0 auto; } .list > li { flex: none; width: 200px; list-style: none; } .list > li >a { display: block; height: 100px; text-align: center; line-height: 100px; text-decoration: none; color: #333; font-size: 30p.. 2023. 4. 4. html 레이아웃 만들기 HTML 삽입 미리보기할 수 없는 소스 DOCTYPE html> display .box1, .box2, .box3 { border:10px solid #000; margin-bottom: 20px; } .box1 * { border:5px solid #f00; display: none; } .box2 * { border:5px solid #0f0; display:inline; /* 아래값은 적용불가 */ width: 200px; height: 200px; } .box3 * { border:5px solid #00f; display: block; /* 인라인에서 블록으로 변경, w,h적용가능 */ width: 200px; height: 100px; } .list1 { border: 5px solid #33.. 2023. 3. 14. html css display 속성 display element -> 화면에 어떻게 표시?? block -> 줄바꿈 inline -> 줄바꿈X - none : 화면에서 제거 화면에서 다시 보이게 만들때는 block, inine등의 표시속성을 작성하면 됨. - block -->줄바꿈, w, h적용 - inline ---> 줄바꿈X w,h 적용불가 block ---> inline (거의사용하지 않음) inline ---> block (많이 사용) - inline-block : 화면표시는 inline으로 하고 : 속성은 block처럼 동작 사용순위 1) none으로 바꾸기 (이벤트 발생 요소의 show/hide 제어시) 2) inline ---> block으로 바꾸기 ( w, h적용) 3) block -> inline-block으로 바꾸기 ( .. 2023. 3. 13. Css 레이아웃 구성, Typography 폰트 구성 레이아웃 구성 Header : Logo , Menu ( Gnb , lnb ) GNb ( Global Navigation Bar)전체메뉴 lNB ( Local Navigation Bar) 서브페이지메뉴 Main : 주요 컨텐츠 Footer : 사이트정보, 연락처, 저작권, : 왼쪽정렬X : 가운데정렬O 브라우저가로폭 100% 가로크기설정후 가운데정렬 : block요소 width 결정 ---> 부모의 width값을 그대로 적용 height ---> 컨텐츠(자식) : 배경색 ---w , h + 패딩 HTML Layout Tag Header Main Footer nav section article aside 그룹요소 class name wrap wrapper container main-wrap inner-wra.. 2023. 3. 9. 이전 1 2 다음 LIST
