wooweee

1. summary 기능 : 마우스 올리면 해당 link background color 변경 가능하도록 하기 출처 : https://www.w3schools.com/howto/howto_css_icon_bar.asp 2. 적용 이미지 가로 세로 3. 코드 html css /* 세로 모드 */ .icon-bar { width: 90px; background-color: #555; } /* 해당 class의 모든 a tag */ .icon-bar a { display: block; /* a : inline -> icon-bar div 내에서 위치 수정을 위해 block 처리 */ text-align: center; /*a : block -> 내부 img(inline) 요소 중간 정렬 */ padding: 1..

1. position, opacitoy position: fixed: web page 스클로을 내려도 계속 유지할 수 있도록 해주는 것. 고정 위치는 초기 설정되었던 div를 기준으로 한다. 가장 위에 차지한다. opacity: 투명도 position static(defalut) relative : 적용할 때 현 위치에서 좌우 상하 이동 absolute : position: relative가 되어있는 부모 중 가장 가까운 부모를 기준으로 이동, 만약 부모중 position relative가 없으면 body가 position relative이다. fixed most important : postition-absolute 1) use a lot 2) mistake - that need postition-re..

1. css margin 상쇄 collapse margin : 부모 border와 내부 border이 서로 붙어있으면 상하 margin은 적용이 안된다. 그래서 padding이란 개념이 도입 2. id, padding id -> # { } padding : border 반댓말 // id 지정 3. border border: block의 경계 의미 block, inline 모두 적용 4. class class : .으로 나타냄 class 내부에 여러개 지정이 가능하다. class="btn hello bye" id는 여러개 쓸수 없다. span에서는 좌우 : margin은 적용가능 - 상하 안됨 span에서는 상하좌우 : padding 적용 가능 5. inline-block div { display: inl..

1. html - css 2가지 방법 존재 우선권은 html 내부 작성이 가지고 있다. 1. html 내부에 작성 © 주식회사 느낌 낼수 있다. span1 a span2 p hello hello 4. display display property default value가 'inline'과 'block' 인 tag의 inline, block 변경 가능 div inline으로 변경시 inline 특성상 height와 width가 존재하지 않아서 사라지게 된다. 글자를 넣어도 height와 width 없다 block margin, padding, border 3가지 특성 margin: block 경계면의 바깥 공간 border: block 경계면 padding: block 경계면의 내부 공간 margin ..

1. 용어, 개념 element: html 시작 태그와 tag: element를 기반으로 작동 html layout layout은 결국 div div만 사용하면 너무 헷갈리니깐 이름을 넣어준 div라고 생각하면 된다. 이 중 head와 body는 의미 있는 div이다. 의미 없는 body 내부 div는 자신이 구성하고 싶은 layout에 맞춰서 div를 사용하면 된다. html layout 이미지를 보면 이해가 쉽다. head : meta 정보 담기 body : 실제 ui 꾸미는 전체 창 header main footer aside nav attribute: 속성으로 어떤 기능을 나타낸다. argument: attrubute에 들어가는 값으로 변경되는 값 html dom : html file 기준 att..