프로그래밍/HTML,CSS 썸네일형 리스트형 HTML5에서 구조를 위한 태그 HTML5에서는 구조를 위한 태그가 새로 생겼습니다. 기존에는 를 이용해서 내용적으로 구분하였지만, 사실 이는 기계가 이해할 수 있는 구조가 아니였지요. 아래에서 소개하는 구조 태그들을 사용하는 웹 문서들이 늘어난다면 다양한 애플리케이션이 등장할 수 있을겁니다.출처: http://m5designstudio.com/2013/orlando-web-design/html5-for-beginners-2/SECTION 요소는 테마별로 연관된 콘텐츠를 한데 묶어서 더 큰 논리적인 단위를 형성할 수 있게 도와주며 하나의 페이지 안에서 주제가 다른 영역을 구분짓거나 하나의 글을 부분으로 나누기도 한다. 주로 제목과(h) 함께 사용한다. 스타일링이나 스크립트를 위해서 감싸는 요소가 필요하다면 문서 구조상 특별한 의미가 없.. 사이트 구축시 고려하는 프로파일러 클라이언트의 사이트를 구축할 때 일반적으로 고려하는 프로파일러입니다. 단순히 홈페이지를 제작하는 일은 디자인 회사에서 하는 일이고, 그것은 사이트 구축의 일부임은 잘 알고 계실 것입니다. Internet Business Site 설계를 위한 프로파일러 [1] 배경과 목표 *profiler Q. 이 사이트의 기본적인 목표는 무엇입니까? Q. 원하는 작업 일정은 언제부터 언제까지입니까? Q. 로고, 폰트 등 아이덴티티 제작을 완료하신 상태입니까? 아니면 따로 제작해야 합니까? [2] contents 설계 -contents 설계란 : 사이트에서 제공되는 정보의 연관성과 관계를 제공하기 위한 설계 -contents 설계에 포함되는 요소들 : . 사이트에 대한 설명 . 경영이념 . 상품정보 . 이용약관 . 사이트.. css js head 추가 하는 CDN 링크 css js head head에 자주 추가하는 부분은 다음과 같다. CSS Sprites 자동화 CSS Sprites란?CSS Sprites라는 기법은 충분히 보편화한 기술이지만 간단히 설명하면 작은 이미지를 하나의 이미지로 합치는 방법을 말한다. 웹사이트에서 아이콘 등을 사용할 때 작은 이미지들이 다수 필요한데 네트워크에서 다운로드 받을 때 작은 파일 다수를 다운로드 받는 것보다는 큰 파일을 한번에 다운로드 받는 것이 더 빠르므로 여러 이미지를 한 파일로 합치고 이를 한번에 다운로드 받은 뒤에 CSS로 위치를 조절해서 표현하는 것이다.Gmail 같은 경우도 위 이미지처럼 아이콘을 하나로 합쳐서 사용하고 있고 이를 다음과 같은 CSS로 제어하고 있다.CSS.aos { background: no-repeat url(//ssl.gstatic.com/mail/sprites/general_black-16b.. CSS 가운데(중앙) 정렬 콘텐츠를 가운데 정렬하는 일은 굉장히 빈번한 일입니다. 부모 혹은 자식 요소에 따라 이를 구현하는 방법이 상이하니 염두해 둡시다. 기본적인 내용 정렬 가운데 정렬을 알아보기 앞서, 가장 간단한 정렬방법을 알아봅니다. 내용 가로 정렬 내용을 같은 종결 블록 요소의 왼쪽, 중앙, 오른쪽, 양쪽에 정렬한다. CSS.align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-justify { text-align: justify; } 내용이 든 종결 블록 요소에만 적용된다. 인라인 요소에 적용되지 않으며, 구조 블록 요소에는 제대로 적용되지 않는다. 구조 블록 요소에 t.. 화면설계 & 프로토타이핑 툴 한 번쯤 들어봤던 화면설계 & 프로토타이핑 툴 총정리 categoryIT 기획서비스 구축 2년 전 by 웹기획자 조영수 IT 현장에서는 화면 UI를 설계할 때 대부분 파워포인트를 사용합니다. 저 또한 파워포인트로 수많은 스토리보드를 제작했는데요. 파워포인트로 화면을 설계하면서 다음과 같은 불편함을 느꼈습니다. 파워포인트 설계의 불편한 점 1. 제한된 공간에 페이지 경로, 화면 UI, 디스크립션 등 다양한 내용을 담아야 한다. 그러다 보니 화면이 점점 복잡해진다. 개인적으로는 다음 페이지로 넘기지 않기 위해 최대한 욱여넣었고 폰트 사이즈는 점점 작아졌다. 2. 수정사항이 발생하면 모든 화면을 일일이 수정해야 한다. 페이지가 적으면 크게 문제 되지 않지만, 페이지가 많아지면 메뉴명 하나만 수정해도 모든 페이.. NHN_Coding_Conventions_for_Markup_Languages-v2.75_open.pdf 이전 1 다음