정보모음/WEB20 meta 종류와 설명 출처 : http://cafe.naver.com/hacosa/14832 meta 종류 설명 Author : 제작자의 이름이 NOLS라는 뜻 페이지를 프론트 페이지로 제작 저작권에 관한 정보 검색엔진에서 검색되는 키워드 페이지에 대한 정보 문자 인코딩 60초마다 새로고침 주소로 5초후 이동 캐쉬가 되지 않게 캐쉬 만료(파기)일 페이지 들어갈때 트랜지션 효과(장면 전화 효과) 페이지 나갈때 트랜지션 효과(장면 전환 효과) 이미지 마우스 오버시 이미툴바 생기지 않게 해줌 2013. 3. 5. DTD(Document Type Definition) DTD란? 반드시 (X)HTML 문서 첫머리에는 DOCTYPE선언 Strict /Transitional /Frameset 중 하나 선택 필요성 1. 문서의 가독성 증가 2. 브라우저 별 호환성 증가(크로스 브라우징) 3. 문서 제작의 효율성 증가 종류 가장많이 사용하는 4가지 1. HTML4.01 Transitional(호환모드) 2. HTML4.01 strict(엄격모드) 3. XHTML1.0 Transitional(호환모드) 4. XHTML1.0 Strict(업격모드) 2013. 2. 22. 웹표준의 정의 웹표준이란 우리가 많든 사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 이용하더라도 같은 결과를 볼 수 있도록W3C라는 단체에서 권고한 표준안을 이용하여 웹페이지를 만들어 나가는 것 1. 누가 웹표준안을 만들어서 누구나 같은 결과물을 볼 수 있도록 지정했습니까? W3C 2. 왜 웹표준을 지켜야 합니까? 어떠한 운영체제나 브라우저를 이용하더라도 같은 결과물을 볼 수 있도록 하기 위해 장점 1. 마크업 용량 감소 2. 컨텐츠와 CSS의 분리 3. 미래에 나올 브라우저에 대한 상위 버전 호환성 4. 검색 엔진에 대한 최적화 방안 5. 웹 접근성 용이 - 크리에이티브 디자이너를 위한 웹표준 - 2013. 2. 22. 웹표준 리스트 부모태그 아래로 태그를 사용 줄바뀜 문제로 하나의 인라인 문구를 구분지어보일수 있도록 사용 순서가 있는 리스트(ordered lists) 태그 ※블록레벨 對 인라인 : HTML엘리먼트는 블록레벨과 인라인으로 구분 블록레벨 엘리먼트는 줄을 바꿔 각각 독립된 줄에 표시하는 반면, 인라인 엘리먼트는 다른 인라인 엘리먼트와 같은 줄에 표시 블록레벨 엘리먼트는 블록레벨과 인라인 엘리먼트를 모두 포함 할 수 있는 반면, 인라인 엘리먼트는 블록레벨 엘리먼트를 포함 할 수 없습니다 ※블록레벨 엘리먼트 : ,~, 등 ※인라인 엘리먼트 : ,,, 등 블릿모양 표시 블릿모양 숨기기 소개하고픈 링크 즐겨읽는 책 좋아하는 영화 함께듣는 음악 .css ul{ list-style-image :none; >>블릿 감추기 pa.. 2013. 2. 17. 반응형웹 디자인 구현에 필요한 지식 및 기술[펌] 출처 : http://blog.naver.com/jundolssabu?Redirect=Log&logNo=80167427103 반응형웹 디자인 구현에 필요한 지식 및 기술 1. 기획 모든기기에 최적화 될 수 있도록 심플하게 기획 페이지 내의 요소별로 %로 고려하여 리사이즈 할 것인지? 사진의 객수를 줄이는 것과 같이 배치를 바꿀 것인지? 모바일 버전에서 요소를 없앨 것인지? 그때 구현은 어떻 기술을 사용할 것인지? 구체적인 플랜을 기획 2. 퍼블리싱 기본적으로 웹 표준에 대한 스킬을 보유하고, HTML5, 미디어쿼리에 대한 기술 습득 3. 디자인 그 동안 넓은 화면에 맘껏 표현하는 자유를 누려왔지만, 이제는 최소한의 내용으로 최대한의 내용을 전달해야 하는 고통과 더불어, 모든 디바이스에서 하나의 웹페이지를.. 2013. 2. 7. 반응형웹 핵심속성 요약 핵심속성요소1 가변적인 그리드 기반의 레이아웃 Target÷Context=Result 비례와 퍼센트 시스템으로 픽셀을 사용하지않고도 사이트 제작 디자인된 파일을 감싸고 있는 레이아웃의 크기를 사용하고자 하는 컨텍스트 사이즈로 나눈 결과값을 em, % 사이즈로 적용해 유동적인 사이즈로 만든다 핵심속성요소2 가변적인 이미지와 미디어 max-width:100% 파이어폭스2.0/IE7.0이하 AlphaimageLoader → IE에서 이미지 렌더링 품질 향상 이미지와 미디어들도 감싸고 있는 그리드에 맞게 max-width:100% 넣어줍니다 파이어폭스2.0과 익스플로7.0이하에서는 CSS필터 중 하나인 알파이미지로더를 사용해 다른 브라우저와 동등한 수준의 효과를 줍니다 핵심속성요소3 미디어쿼리 장치특성에 따라 .. 2013. 1. 20. 이전 1 2 3 4 다음
