Front End/HTML, CSS
CSS Animation (@keyframe, canvas)
@keyframesanimation필수 옵션추가 옵션예제를 통해 사용법 알아보기캔버스로 사각형 그리기캔버스로 클릭이벤트 만들기@keyframesCSS 애니메이션은 기본적으로 transition 속성을 이용해 간단히 구현할 수도 있지만, @keyframe을 이용해 시간 순서대로 정밀하게 짜여진 애니메이션도 구현할 수 있다. 키프레임 활용을 하기 위해선 우선 @keyframe 블록을 이용해 시간에 따른 CSS 속성을 작성해주어야 한다./* '%' 단위로 시간 진행에 따른 상태를 작성 */ @keyframes 애니메이션이름 { /* from 으로 작성도 가능*/ 0% { CSS속성 : 속성값; } /* 애니메이션 진행도에 따른 스타일 설정 */ /* 필요하다면 1부터 99, 소수점까지도 모두 작성 가능 */ ..
웹 표준
🌐웹(Web)웹 표준웹 표준의 장점Semantic HTML시맨틱 HTML의 필요성자주 쓰이는 시맨틱 요소웹 표준을 위한 마크업 시 주의사항크로스 브라우징(Cross Browsing)크로스 브라우징 워크 플로우1. 초기 기획2. 개발3. 테스트 / 발견4. 수정 / 반복🌐SEO 🌐웹 접근성 웹(Web)웹이라 하면 인터넷 그 자체를 떠올리는 사람들이 많겠지만, 사실은 인터넷이 웹보다 조금 더 포괄적인 개념이다. 인터넷은 전 세계적으로 연결된 컴퓨터 네트워크 통신망을 의미하며, 웹은 문서, 이미지, 영상 등 다양한 정보를 여러 사람과 공유할 수 있는 일종의 공간이자 플랫폼이다.웹 표준웹 표준이란 W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’으로..
웹 접근성
🌐웹 접근성웹 접근성을 갖추면 얻을 수 있는 효과1. 사용자층 확대2. 다양한 환경 지원3. 사회적 이미지 향상웹 컨텐츠 접근성 지침인식의 용이성(Perceivable)운용의 용이성(Operable)이해의 용이성(Understandable)견고성(Robust)WAI-ARIAWAI-ARIA의 필요성WAI-ARIA 사용법역할(Role)상태(State)속성(Property)웹 접근성웹 접근성은 어떤 사람이든 웹 페이지에 있는 컨텐츠를 동등한 수준으로 접근하고 이해할 수 있도록 보장하는 것을 뜻한다. 일반적으로는 장애인, 고령자 등 신체적인 제약을 토대로 이야기하지만 일반 사용자들도 갑작스런 입/출력장치에 대한 제약 상황으로 인해 불편함을 겪을 수 있으며, 결국 웹 접근성의 궁극적인 목적은 어떤 상황이든, 어떤..
SEO
🌐SEO (Search Engine Optimization)On-Page SEOOff-Page SEOSEO에 영향을 미치는 요소1. 2. 3. 4. 컨텐츠SEO (Search Engine Optimization)SEO(Search Engine Optimization, 검색 엔진 최적화)는 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업을 의미하며, SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게끔 만들 수 있다. SEO는 크게 On-Page SEO와 OFF-Page SEO 두 가지로 나뉜다.On-Page SEO페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법이다., 요소를 이용해 검색 키..
CSS의 변천사
CSS의 변천사CSS 전처리기 (CSS Preprocessor)CSS 전처리기의 대표적인 예, SASS (Syntactically Awesome Style Sheets)CSS 방법론CSS 방법론의 대표적인 예, BEMCSS 전처리기와 BEM의 고질적인 문제점CSS-in-JS의 등장CSS 방법론들의 특징과 장단점CSS의 변천사인터넷이 만들어진 이후 기술의 발달과 함께 사용자들은 다양한 환경(디바이스)에서 인터넷을 사용하기 시작했고, 이에 따라 개발자들의 CSS 작성 방식도 꾸준하게 진화해 오고 있다. 프로젝트의 규모나 복잡도가 점점 커지고 함께 작업할 팀원 수도 많아짐에 따라 CSS를 작성하는 일관된 패턴이 없는 것은 개발자들에게 큰 걸림돌이 되었다. 또한 다양한 디바이스들의 등장에 따라 웹 사이트는 다양..