체크박스 아이콘의 테두리가 잘려 보인다는 QA 요청이 왔습니다. 이슈 재현을 해보니 사파리 브라우저에서만 발생하는 이슈였습니다. (특정 브라우저에서만 발생하는 이슈는 정말 귀찮다고 생각해요..ㅠ) 개발자 도구로 스타일 조작을 해봐도 요지부동이었습니다. 검색을 통해 발견한 방법들은 다 적용해 본 것 같습니다 🫠 그러면 제가 찾아 보았던 방법과 결과를 정리해 보겠습니다. 문제 Safari에서 SVG 아이콘 픽셀이 깨짐 (정상 렌더링이 되지 않음) 원인 Safari 자체에서 SVG 지원이 완벽하지 않음 해결 방법 img 태그 사용하기 svg view box 수정 svg에 attribute 추가 svg width와 height 단위 변경 아이콘의 border만 css로 처리하기 svg 디자인 직접 수정하기 (✅..
시멘팁 웹 시맨틱 웹(Semantic Web)이란 시맨틱 태그를 이용하여 웹 페이지를 의미있는 데이터 조합으로 만들도록 하는 웹으로 검색엔진의 크롤링을 돕는다. 간략히 하면 논리적인 구조이고 구글링 잘되는 좋은 웹이란 뜻입니다😓 이 글에서 다룰 헤딩태그도 시맨틱 태그 중 하나입니다. HTML5와 SEO의 단짝친구입니다. 같은 헤딩태그입니다. 제목태그란? 제목태그(헤딩태그,heading tag)는 h1부터 h6까지 총 6개가 있습니다. h는 heading, 머릿말 또는 제목을 의미하며 뒤에 숫자는 제목의 계층구조를 의미합니다. 그렇다면 h1은 대제목이고 h6은 제일 하위 소제목이 됩니다. 태그 글씨 크기 = 구조 브라우저 별로 헤딩태그는 글씨 크기가 다릅니다. 크롬 브라우저는 태그의 글씨크기가 font-s..
⚓ #, javascript:, void(0); 차이점 이 글은 anchor tag의 href 속성만 다룹니다. 링크로 이동시켜주는 앵커태그의 href 속성은 작성된 value값으로 이동시켜주는 HTML태그입니다. 간단하게 속성 살펴보기 URL 이동 특정 주소를 작성하면 해당 페이지로 이동해주는 역할을 합니다. 네이버 이동 이렇게 작성했을 경우, 화면에 렌더링 된 네이버 이동 텍스트를 클릭하면 네이버로 이동합니다. 스크롤 이동 다른 태그에 작성된 아이디 값을 추가하여 스크롤을 해당 위치로 이동시킬 수 있습니다. OBJ로 이동 이같은 경우는 다른 페이지로 이동하는 것이 아니라, 열려진 페이지에서 obj라는 id값을 가진 요소 위치로 스크롤을 이동시킵니다. href="#, #none, javascript:v..
이메일 코딩은 보통의 코딩 방식과 다릅니다. 이메일 서비스(아웃룩, 지메일, 네이버 등)마다 아웃룩의 버전마다 렌더링 되는 화면은 상이합니다. 테스트를 하며 디자인과 맞춰야 하기 때문에 생각보다 쉽지 않은 작업입니다. 이 글은 최근에 아웃룩 이메일 템플릿 작업을 하며 느꼈던 특징들을 정리합니다. 👮🏻♀️ 공통 규칙 Inline Style 스타일시트를 별도로 작성하지 않고 인라인 스타일로 작성합니다. Table 가 아니라 로 레이아웃을 설계해야 합니다. 코드가 길어지는 단점이 있지만 대부분의 이메일 서비스들이 를 지원하지 않습니다. border와 table 사이 공간 제거를 해줍니다. Width width는 버전마다 인라인 스타일 적용 여부가 다르기 때문에 table 태그의 속성으로도 기재하여 명확하게 ..
