미미 공부/취미방

이 전 게시글 내용으로는 이메일 코딩 하는데 부족해서 추가로 작성하게 됐습니다. 이메일을 홈페이지 처럼 디테일하게 디자인/코딩 하려고 하면 모바일 대응형으로 작업하기 정말 어려워요.😥 그래서 최대한 간단하게 1, 2단 그리드로 작업하길 추천합니다. 우선, 이메일은 테이블 태그로 작업해야 혹시나 콘텐츠 가로값이 뷰포트를 넘어가도 콘텐츠가 잘리지 않고 뷰포트에 꾸역꾸역 맞춰져서 내용을 볼 수 있어요. 그리고 미디어쿼리(@media (max-width: xxxpx) {}) 이게 먹히지 않는 경우가 있으니 PC나 모바일, 어디서 봐도 문제가 없게 작업해야되요. 즉, 미디어쿼리 없이 PC/모바일에서 둘 다 문제 없이 잘 보이게 작업을 해야한다는거. 그러기 위해서 폰트 사이즈가 제일 문제였는데... vw단위를 사용..

일반적으로 html에 들어가는 코드랑 비교하면서 코드에 대한 설명을 시작하겠어용. (회색 마크는 일반적으로 쓰는 코드입니다!) . . 1 DOCTYPE html 유형을 알려주려고 적는 건데 이거를 토대로 규격검사 등을 하기 때문에 우리가 이메일 코딩에 사용할 XHTML을 잘 명시해야 검사하고 렌더링하는데 도움이 되겠죠? . . 2 HTML 태그 . . 3 HEAD 태그 Head에서는 title, viewport 관련 코드는 다 똑같은데 xhtml로 doctype을 설정해서 content-type을 포함해 주야 한데요. . . 4 Body 태그 어떤 이메일 플랫폼은 를 지워버리니까 태그로 전체 구조를 한 번 감싸줘야지 안전해요. 이메일 플랫폼 해상도가 다 달라서 가로 넓이는 600px ~ 700px정도로 ..

WARNING 정말 번거롭고 번거롭고 번거로움 시작 전 알아야 할 것 일반 웹사이트 코딩을 위한 HTML, CSS를 생각하면 절.대. 안되요...옛날 HTML (XHTML)으로 코딩해야 된다고 합니다. 그래서 안에 들어갈게 많아요! JavaScript는 사용하지 않아서 어떻게 동작할지 모르겠네요.🤔 . . . 그럼 지금부터 설명 시작!!! . . 1 내부 CSS / 인라인 CSS 둘 다 작성해야 됩니다 이메일 플랫폼에 따라서 어떤곳(Gmail)은 인라인 CSS를 또 어떤곳(네이버/다음)은 내부 CSS를 삭제해서 둘 다 작성해야 안전해요! 안그럼 어디선가 깨집니다😭 참고로 내부 CSS는 html 안에서 로 작성하고 인라인 CSS는 이렇게 태그에 같이 작성됩니다. . . 2 어떤 CSS 속성은 적용되지 않아..

META 태그 : metadata 안에 들어가는 태그는 검색엔진에 본 페이지가 무엇에 대한 것인지 한 단락으로 묘사한 것이다. SEO와 META 태그 : Search Engine Optimization(검색엔진최적화) 단, 여러가지 meta 태그 중, 모든 태그가 항상 SEO에 도움이 되는건 아니다. META 태그 알아보기 1. meta 키워드 속성 (Meta keywords attribution) - 키워드를 설정해 사용자가 검색엔진에서 검색할 때, 매칭되는 키워드를 비교하고 검색창에 노출시킨다. BUT, 관련없는 키워드를 무작위로 넣어 검색결과 노출 빈도를 높이는 사례가 많아 부정확한 결과를 얻게 되면서 구글은 이 태그의 스캔을 멈추게 되었다. 2. 타이틀 태그 (Title tag) - 브라우저 탭에..