SMALL html6 자바스크립트 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 기본문법 1.CSS - 내부스타일 > head요소안에 작성 - 외부스타일 > CSS파일로 작성하기 ex> 디자인.css 2.스타일작성법 ex> h1 { color:#ff0000; } h1 : 선택자 ( selector ) : HTML element를 지정하는 방법 color : 속성 ( property ) #ff0000 : 값 ( value ) 선택자 1) 기본선택자 - 요소선택자 (가끔사용하나 권장하지 않음) - 아이디선택자 (거의사용하지않음) - 클래스선택자 (중요) 2) 조합선택자 3) 가상요소 4) 가상클래스 HTML과 CSS주석 ( comment ) /* css주석, 자바스크립트 주석 */ id, class 네이밍 규칙 1) 영문소문자로 작성하기 2) 숫자는 사용가능하나 첫글자로 올수 없음 3) 특수문자.. 2023. 3. 9. 이전 1 2 다음 LIST
