본문 바로가기

분류 전체보기204

7. 전체 타이틀 1. class와 id는 대부분 div태그나 블록태그에 쓰지, a태그같은 인라인 에는 대부분 잘 쓰지 않고 직접 style.css에서 a태그를 직접 작성하여 이용한다..!(중요!!! 기억!!!) 2. 포지션 position:absolute .tit .btn{position:absolute; /*말 그대로 절대적인 위치로 이동이 가능하지만, 영역을 차지하지 않는다는 것! */ } absolute relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면, absolute는 position: static 속성을 가지고 있지 않은 조상을 기준으로 움직입니다. 만약 조상 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다 3. .. 2021. 12. 15.
6. 전체 메뉴 수정 HTML 태그(Tag) 블록 요소/인라인 요소 DTD 선언 언어 속성 설정 HTML HTML 특수문자 하이퍼 링크 HTML HTML HTML HTML HTML HTML 1. 여기서, ol태그의 숫자를 어떻게 없애나? Unordered List 이나, Ordered List 의 하위에 속한 List 에 기호나, 숫자를 표시 되지 않게 하는 CSS 스타일 list-style:none 속성 "list-style: none" CSS를 추가하면, unordered list () or ordered list ()의 bullet or number제거됨 2. 팁: 1. 태그전체에 css를 적용한 경우 따로 class 또는 id를 선언하고 적용시킬 경우 적용이 안된다. 예) #top dl {font-size:11px; .. 2021. 12. 15.
5. reset.css 기본 템플릿~! /* reset */ body, div, ul, li, dl, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table, th, td, tr, textarea, button, form { margin: 0; padding: 0; } a { text-decoration: none; } .ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우 */ .ir_wa {display: block; overflow: hidden; position: relative; z-index:.. 2021. 12. 12.
4. 웹 표준 사이트 만들기 - 헤더 아이콘 수정 https://alonehistory.tistory.com/13 HTML 과 CSS로 이미지를 표현하는 방법(Img/Background/이미지 스프라이트 기법) 다음의 세 가지 방법으로 이미지를 표현 할 수 있습니다. Img 태그 - 이미지의 의미가 있을 때 Img 태그를 사용합니다. - Alt 태그를 이용해서 대체 문자를 적어야 합니다. Background 속성 - 이미지가 alonehistory.tistory.com 이 링크를 참조하자..! 문제는 이미지 스프라이트를 쓰면 웹 접근성을 따라갈수 없다. 그래서 가상으로 대체를 문자를 만들어줌. 이것을 IR 효과 라고 한다. 이미지 스프라이트 효과 기억하자..! 팁(?): background: url("")을 해서 이미지를 넣으면 흰색으로 배경이 변하고 .. 2021. 12. 12.
반응형

티스토리툴바