프론트 엔드 개발 기록

테스트 default 수정 후

자세히 보기 레이어팝업 내용

다 안다고 생각했는데 막상 들춰 보니 잘 몰랐던 태그도 있어서 정리해 보았다. 아래 태그들에 대한 내용이 담겨있다. 굵은 글씨체 중요의미를 지닌 굵은 텍스트 기울어진 텍스트 강조의미를 지닌 기울어진 텍스트 강조 마킹된 텍스트(형광펜느낌) 좀 더 작은 텍스트 삭제됐다는 의미를 지닌 중간 라인 텍스트 삽입됐다는 의미를 지닌 밑줄 텍스트 아래 첨자 텍스트 위 첨자 텍스트 굵은 글씨체 딱히 의미를 지니진 않은, 시멘틱 요소가 없는 태그예요. 그냥 보이는 글씨를 굵게 보이게 해주는 것 뿐! strong태그와 보이는 것은 같지만 태그의 의미는 훨씬 약하다고 할 수 있어요. *보다 더 적합한 태그가 있는지 고려 해 보고 사용하는 것이 좋아요. *에 의미를 넣기 위해 클래스를 사용하는 것도 좋은 방법입니다! 중요의미를..

*2018. 1. 19 작성된 포스트 이번에 부장님께서 사원들 상대로 과제를 내주셨어요. 오늘 서로 피드백 주고 받는 자리를 가졌는데 부장님께서 알려주셨던 내용들 정리해봅니다! 참고로 저희 부문 실장님은 직도 열심히 공부하시는 멋진 분이예요! 직장 상사분을 이렇게 좋아하고 존경할 수 있는지 부장님을 만나고 알게되었답니당. *block 요소 다음 img와 같은 inline 요소를 바로 사용하는 것을 자제하세요. p와 같은 태그로 한번 감싸서 사용 할 것을 고려하세요. *의미없는 img는 css로 처리 하세요. 보통 span이나 가상 css element로 하는 것이 좋아요. *tab menu를 마크업 할때 탭메뉴 버튼 내부에 컨텐츠를 넣는 것이 논리적인 순서에 맞고 키보드로 운영 가능하도록 만들기 쉽습니다..

최신 포탈 사이트의 메일폼에서는 적용되는 css들이 아웃룩 2007같은 옛날 메일폼에서는 적용이 안되기도 한다. 관련하여 참고 가능한 사이트 https://templates.mailchimp.com/resources/email-client-css-support/ Email Client CSS Support | Email Design Reference ©2001-2020 All Rights Reserved. Mailchimp® is a registered trademark of The Rocket Science Group. templates.mailchimp.com 외국 사이트라 우리나라 브라우저는 없지만 어쨋든 고객이나 기획자에게 안되는 이유를 설명할때 부가적으로 보여줄 수 있는 자료였다.

초기 페이지를 렌더링 할 때 브라우저의 최소 단계는 이러하다. 1. 수신된 HTML에서 DOM 빌드 2. CSS 스타일 시트(임베디드 혹은 링크)가 발생하면 CSSOM**을 작성 3. DOM을 빌드하는 동안 JS블록이 발생하면 CSSOM생성을 기다리고 DOM 생성을 중간하고 코드를 실행한다. JS실행이 DOM을 수정하고 CSSOM에 접근하여 수정할 수 있기 때문. **CSSOM : CSS Object Model. DOM과 유사한 구조. DOM처럼 생성될때 렌더링이 차단됨. -HTML과 렌더링 경로 CSS는 근본적으로 스타일 마크업 언어이기 때문에 DOM과 상호작용하는 방식을 알아야 한다. HTML이 주어지면 DOM을 생성한다. 그 과정에서 렌더링은 차단된다. -CSS 객체 모델 CSS가 주어지면 CSSO..

SEO? 검색엔진이 이해하기 쉽도록 사이트의 구조와 페이지 개발하고, 업로드한 컨텐츠들이 상위 노출 되도록 작업 하는 것 1. 사이트 구조 최적화 1-1. 사이트 URL 구조 최적화 - 사람, 클롤러가 읽기에 친숙한 구조의 url (검색 내용이 url에 포함되어 있는 경우에도 결과에 노출) - 언더바(_)가 아닌 하이픈(-)을 사용하여야 각 단어를 분리하여 인지한다. - 소문자만 사용한다. (서버설정별로 대소문자 구분을 하기도, 하지 않기도 한다.) ex)http://www.test.co.kr/page-1.html?id=3&cat_id=5 http://www.test.co.kr/search-engine-optimization 1-2. 크롤러가 한번에 홈페이지에서 서브페이지로 넘어가도록 홈페이지에서 너무 ..

프로그램도 있긴한데 아무래도 사이트는 즐겨찾기 해놓고 사용하면 편리하니까! 작업할 때 잘 안쓰긴 하는데, 이번에 접근성 심사 진행하면서 확인 할 일이있어서 또 찾으러 헤맸다. 보통 3;1정도 권장하고 있어서 확인 후 수정했땽 평소에 좀 흐리다 싶으면 확인 한 번 해 봐야겠뜨아. 즐찾 완료! https://webaim.org/resources/contrastchecker/ 페이지에서 바로 확인 하고 싶을 때가 있는데, 그럴땐 컬러피커가 있어야 한다. 구글 확장 프로그램에 괜찮은게 있어서 쓰고 있는 확장프로그램은 요고. https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=ko