개발/Web 썸네일형 리스트형 HTML로 구현된 화면에서 글자(text)가 보이지 않아야 할 때 적용할 CSS HTML로 구현된 화면에서 글자(text)가 보이지 않아야 할 때 적용할 CSS 들여쓰기를 사용하는 방법 text-indent: -9999em; 위치 지정을 사용하는 방법 position: absolute;left: 0;top:-9999em; 보이는 대로 생각하는 일을 넘어서기 미관을 위해서 제목이 필요없다면 굳이 제목 태그를 기입하지 않게 되는데...! About Services Portfolio Contact Us 목록을 만들 때에는 제목을 꼭 적는 일이 습관이 되어야 한다. 제목이 미관에 어울리지 않는다면 CSS를 통해서 얼마든지 보여주거나 보여주지 않는 처리를 할 수 있다. 중요한 것은 HTML 상에서 웹 접근성을 위한 구조가 잘 짜여졌는가이다. Main Menu About Services Portfolio Contact Us 크로스 브라우징을 하기 위한 속성 *hack - IE6,7에서만 적용됨 *(asterisk)를 붙이면 IE 하위버젼에서만 적용이 되는 CSS코드를 작성할 수 있게 된다. *position: absolute; *top: 65px; 아래의 코드를 적용하면 IE6,7에서 플롯을 해제할 수 있다. *zoom:1; IE 조건부 주석( Conditional Comment ) reset CSS 자주 적용되는 부분들을 모아서 작성한 reset CSS body에 서체와 글씨크기를 적용했더라도 적용되지 않는 서식 컨트롤들까지 함께 기입 글씨 크기는 12px을 기준으로 한다. 그려면 11px로 글씨를 줄일 수도 있고, 그 이상으로 글씨를 키울 수도 있다. 단, 11px 보다 더 작으면 글씨가 뭉개질 수가 있다. 공백과 세미콜론의 사용을 최소화한다. 맑은 고딕은 많은 브라우저에서 지원하며, 윈도우 비스타이상이면 설치되어 있다. 필드셋의 보더를 0으로 설정한다. 익스플로러 하위 버전에서는 이미지에 a링크를 걸면 테두리가 그려지므로 border를 0으로 설정한다. em, address는 의 폰트스타일은 노말로 변경하고, 이탤릭체가 따로 필요할 때 적용한다. a의 decoration은 none으로 설정한다... overflow: hidden의 중요성... CSS를 이용해서 반응형 웹을 만들 때... overflow: hidden의 중요성을 다시 한 번.. 느끼게 되었다. content 영역에 overflow: hidden을 적용하지 않으면.. 좌우 스크롤 현상이 생긴다... ...! 일단 글감으로 적어놓고 추후에 다시 정리하겠... 블록 레벨 요소 vs 인라인 레벨 요소 블록 레벨 요소 부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소입니다. 양옆으로 다른 요소가 배치되지 않게 박스를 생성하므로 박스의 위아래로 줄 바꿈이 생기게 됩니다. 블록 레벨 요소는 일반적인 모든 요소(블록, 인라인 레벨 등)를 포함할 수 있습니다. " div, h1~h6, p, ul, li, table ..." 인라인 레벨 요소 하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소입니다. 라인의 흐름을 끊지 않으므로 요소 앞뒤로 줄 바꿈이 되지 않아 다른 인라인 요소들이 자리할 수 있습니다. 인라인 레벨 요소는 블록 레벨 요소의 자식으로 분류되기 때문에 자손으로 블록 레벨 요소를 가질 수 없습니다. 즉, 인라인 레벨 요소는 블록 레벨 요소를 포함할 수 없습니다. " span, i, img.. HTML5에서 새로 생긴 Sematic 요소들입니다. HTML5에서 새로 생긴 Sematic 요소들입니다. 독립적으로 배포 또는 재사용되도록 의도 된 문서, 페이지, 애플리케이션, 또는 사이트에 독립적인 조성물을 나타냅니다. 예로는 포럼 게시물, 잡지 또는 신문 기사 또는 블로그 항목이 있습니다. 요소는 콘텐츠 간접적 문서의 메인 콘텐츠와 관련된 문서의 일부를 나타냅니다. 위젯이 "개방" 상태로 전환되는 경우 정보가 표시되는 공개 위젯을 생성합니다. 요소를 사용하여 요약 또는 레이블을 제공 할 수 있습니다 . 요소는 자주 캡션()과 함께, 독립적으로 컨텐츠를 나타내며, 일반적으로 단일 단위로 참조된다. 요소는 부모 요소의 나머지 내용에 대한 캡션 또는 범례를 나타낸다. HTML 요소는 가장 가까운 단면 내용에 대한 바닥글을 나타낸다. 바닥글에는 일반적으로 .. 시멘틱 마크업이란? 시멘틱 마크업이란? 시멘틱 마크업은 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻입니다. 시멘틱은 즉, 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻합니다. 애초에 프로그래밍 언어는 사람과 기계와의 정해진 약속이며 HTML 역시 마찬가지입니다. HTML은 HTML이 가진 철학에 맞게 문서를 구조적으로 나타낼 수 있도록 표현 되어야합니다. 시멘틱 마크업의 사용은 HTML이 가진 철학을 올바르게 표현할 수 있도록 돕습니다. 시멘틱 마크업을 통해서 얻는 것 시멘틱 마크업을 잘 사용하면 브라우저에게 코드가 가진 의미를 정확하게 전달할 수 있습니다. 웹이라는 문서를 표현하기 위해서 의미에 맞는 태그를 사용하며, .. 이전 1 다음
