Web/Markup | WEB
[웹접근성] 꾸밈 요소의 이미지 처리
이미지에는 alt값이 필수이다. 하지만 내용이 없는 꾸밈 요소의 이미지는 어떻게 처리하면 좋을까? 스크린리더가 이미지를 무시하는 좋은 방법 css의 background 속성 사용 태그에 alt 속성을 빈 값으로 사용 태그에 aria-hidden 사용 태그에 role="presentation" 사용 스크린리더가 아이프레임을 무시하는 좋은 방법 이미지 폰트 사용시 주의 css의 가상 선택자의 content는 스크린리더가 읽는다. 이미지 폰트를 스크린리더가 읽지 못하도록 aria-hudden="true" 속성을 삽입하고 숨김 텍스트로 그 의미를 삽입한다. address 출처: https://aoa.gitbook.io/skymimo/aoa-2019/tips-2/ignore
[eDM] 이메일 정보성 메일 html 만들때 참고
eDM이란 이메일 코딩을 말한다. 이메일 서비스(gmail, naver, daum, outlook등)나 아웃룻의 버전마다 렌더링 되는 화면이 다르다. 테스트를 하며 디자인과 맞춰야 하기 때문에 쉽지 않은 작업이다. 아래는 아웃룩 이메일 템플릿 작업을 하며 경험한 특징들을 공유하고자 정리한 내용이다. 인라인 스타일 스타일 시트를 별도로 사용하지 않고 태그에 인라인 스타일로 작성한다. table 레이아웃은 div가 아니라 table로 설계해야 한다. 코드가 길어지는 단점이 있지만 대부분의 이메일 서비스들(특히 아웃룩)이 이를 지원하지 않는다. width, height, align 너비, 높이, 정렬들은 HTML 속성으로 지정해줘야 한다. image 이미지 태그는 렌더링되면서 이미지 아래에 여백이 생긴다. 이..
[HTML] 태그
쓰던것만 쓰다보니.. 분위기도 전환시키고 좀 더 탄탄한 마크업을 위해 주기적으로 봐야할 html 태그들.. HTML 태그(tag)는 HTML 요소(element)라고도 부르며, HTML 문서를 구성하는 기본 단위입니다. : HTML5에서 새롭게 추가된 태그 태그 설명 주석(comment)을 정의함. 해당 문서(document)의 타입을 정의함. 다른 콘텐츠와 연결되는 하이퍼링크(hyperlink)를 정의함. 축약형(abbreviation)이나 머리글자로만 된 단어(acronym)를 정의함. 머리글자로만 된 단어(acronym)를 정의함. HTML5에서는 더 이상 지원하지 않으며, 대신 요소를 사용함. 문서나 글의 저자 또는 회사와 연락할 수 있는 정보를 명시함. 문서에 포함되는 애플릿(웹 페이지에 포함되..
[SEO] 메타태그 최적화
🔎 SEO SEO 작업은 검색환경에 맞게 내 웹사이트를 최적화하는것을 뜻한다. SEO 작업이 잘 되어 있을 수록 내 웹사이트의 검색 결과가 더 좋은곳에 위치할 수 있다. 이는 곧 유입률과 연관있기 때문에 SEO 최적화는 중요하다. SEO를 위한 메타 태그 최적화 작업중 가장 기본은 메타태그 설정(최적화)이다. 메타태그란, 웹페이지의 정보를 담고 있는 태그라고 생각하면 된다. 사이트맵 제출 이는 간단하게 말하면 웹사이트의 설계도면과 같다. 보통 XML 파일형식으로 사이트맵을 구성하게 된다. 처음 SEO를 하는 사람들은 직접 셋팅하기에는 힘들기 때문에 XML 자동생성 사이트의 도움을 받는 것이 좋다. robots.txt 설정 이는 현실로 따지면 문지기와 같다. 내 웹사이트에 검색로봇이 들어올 수 있게 허가를..
[퍼블리싱] 퍼블리셔
평소에 잘못알고 있었던것들을 바로 잡아보자. / 웹 퍼블리셔 디자이너가 기획에 맞게 구성한 화면 디자인 파일(psd)을 받아 웹 브라우저에서 동일하게 보일 수 있게 구성합니다. 하지만 단순히 디자인 파일대로 웹 브라우저에 옮기는 일만 하는 것은 아닙니다. 구조화된 내용 으로 웹 페이지를 만들어 웹 브라우저에게 우리가 만드는 사이트가 무엇을 전달하고자 하는지 정보를 전달 하는 일을 합니다. 웹 퍼블리셔는 콘텐츠를 다루는 사람이다. 웹 페이지에서 전달하려는 내용을 제대로 해석하고 그 콘텐츠 해석에 맞게 HTML,CSS,자바스크립트를 작성하는 콘텐츠 전문가이다. 웹 개발자 웹 사이트 뒤쪽에 있는 여러 시스템(서버, 데이터베이스)을 다루고 개발하는 사람입니다. 서버 구성이나 데이터 처리 등 눈에 보이지는 않지만..
파비콘
파비콘은 웹페이지 상단 태베 보여지는 아이콘이다. 이 아이콘은 즐겨찾기 등록시 대표 아이콘으로도 사용된다. 웹사이트를 대표하는 로고(logo)의 개념과 비슷하다. 파비콘은 ico 파일을 쓰지만 요즘엔 png 파일도 지원하고 있어서 나는 png 파일을 주로 쓴다. 즐겨찾기 등록시(주로 모바일) 생기는 아이콘의 화질에 많은 영향을 미치기 때문이다. PNG 파비콘을 사용시에 브라우저는 어떠한 파비콘을 사용할지 어떻게 결정하는가? Firefox와 Safari는 마지막에 제공되는 파비콘을 사용한다. 맥(Mac) 용 Chrome은 ICO 포맷의 파비콘이 아니라면 32x32 파비콘을 사용한다. 윈도우즈(Windows) 용 Chrome은 16x16이 먼저 선언되지 않는다면 ICO 파비콘이 사용된다. 상기 옵션 중 아무..
[HTML] View Port(뷰포트 설정)
- 뷰포트란 전체 웹 페이지 가운데 브라우저 창에 보이는 부분을 말한다.- 모바일 브라우저에 대응하는 html문서의 head안에 viewport를 설정한다.- 브라우저와 해상도에 따라 다르게 설정한다. - width=device-width; 가로 화면 전환시 화면에 맞게 페이지 폭이 넓어지게 된다. 쓰지 않을 경우 화면이 폭에 맞추어 확대됨. device-width 옵션은 iPhone OS 1.1.1 이후 적용. - initial-scale=1.0; 초기화면을 해당 비율로 확대하여 보여주는 옵션- maximum-scale=1.0; 확대할 수 있는 최대값 (범위 0~10.0) 디폴트값은 1.6- user-scalable=yes; 사용자가 화면을 확대할 수 있도록 허용 - 등록되는 웹 사이트의 아이콘 지정...
[HTML] html5 tag 정리
: 주석 // a : 링크연결target="" _blank : 새창열기 _parent : 부모창에 열기 _self : 자신의 창에서 열기 _top : 화면이 여러 프레임으로 이루어져 있을 시 모든 프레임을 지우고 전체 화면에 열기 [name] : 지정된 이름에 링크 열기 : 생략어/스펠링(요소 위에 마우스를 올리면 title속성의 내용이 툴팁으로 나옴)The WHO was founded in 1948. : 두문자어/단어 (요소 위에 마우스를 올리면 title속성의 내용이 툴팁으로 나옴)Can I get this ASAP? : 연락처 : 이미지맵의 영역 : 문서내에서 독립적인 컨텐츠 : 사이드 바 : 오디오 파일 재생 // b : 텍스트 굵게 : html문서의 기준 URL을 명시(head요소 안에서 사용)..
[HTML] 시맨틱태그
header위에서 언급한 는 바로 밑에 쓰이지만 는 안에 있기 때문에 둘은 전혀 다릅니다. 는 주로 머리말, 제목을 표현하기 위해 쓰입니다. navHTML5에서 새롭게 생긴 시맨틱 태그이고 네비게이션이라고 불립니다. 콘텐츠를 담고 있는 문서를 사이트간에 서로 연결하는 링크의 역활을 담당합니다. 는 주로 메뉴에 사용되고 위치에 영향을 받지 않아 어디에서든 사용이 가능합니다. section영역은 콘텐츠를 ,,의 3가지 공간에 콘텐츠를 저장하는데요. 그 중 은 본문 콘텐츠를 담고 있습니다. 안에 을 넣는 것도 가능합니다. 그리고 반드시 제목 요소(h1~h6)을 가져야 합니다. article이 콘텐츠를 분류한다면 이 태그안에는 실질적인 내용을 넣습니다. 뉴스로 예를 들면 정치/ 연예/ 사회의 대분류는 이고, 정..