견고한 UI 설계를 위한 마크업 가이드 강의를 봅시다. 이미지 포맷 비교 최근 들어 avif포멧이 가장 높은 평가를 받고 있다. 그 다음이 webp이며 제일 안 좋은 것이 jpg이다. 그래서 avif나 webp를 지원하는 브라우저일 경우 avif / webp를 보여주는 것이 사용자에게 제일 좋고 마지막으로 jpg를 보여주는 것이 좋다. ...
견고한 UI 설계를 위한 마크업 가이드 강의를 봅시다. Interactive content 사용자와 상호 작용할 수 있는 콘텐츠로 a, audip button 등이 있다. 키보드와 마우스로 조작이 가능. a vs button 같은 외형을 지닌 경우라도 a, button 요소를 구별해서 사용한다. 실행 결과를 가리킬 수 있는 URL이 ...
견고한 UI 설계를 위한 마크업 가이드 강의를 봅시다. div, span 요소의 의미 이 둘은 아무런 의미가 없다. 이 두 가지만 많이 사용한다면 우리는 html 요소를 적절하게 사용하지 못하고 있다는 것이다. 사실 이 두 가지는 다른 적절한 HTML 요소를 사용할 수 없을 때 마지막으로 사용하는 태그이다. 보통은 감싸는 용도로 쓰는 태그이지만...
견고한 UI 설계를 위한 마크업 가이드 강의를 봅시다. BEM Block 재사용 가능한 독립적인 블록. Element 블록을 구성하는 종속적인 하위 요소. 엘리먼트는 무조건 블록에 종속한다. 엘리먼트 혼자 존재할 수 없음. Modifier 블록 또는 요소의 변형(모양, 상태, 동작) 하나의 블록 / 엘리먼트 스타일을 확정하거나 다르게 만들 ...
견고한 UI 설계를 위한 마크업 가이드 강의를 봅시다. BEM Block 재사용 가능한 독립적인 블록. Element 블록을 구성하는 종속적인 하위 요소. 엘리먼트는 무조건 블록에 종속한다. 엘리먼트 혼자 존재할 수 없음. Modifier 블록 또는 요소의 변형(모양, 상태, 동작) 하나의 블록 / 엘리먼트 스타일을 확정하거나 다르게 만들 ...
강의를 봅시다. Outline 웹 문서의 개요는 헤딩과 섹션으로 구별된다. 웹 브라우저에서 Chrome HeadingMap Extension을 이용하면 해당 브라우저가 헤딩이 얼마나 잘 구성되어 있는지 확인할 수 있다. OutLine의 4가지 키워드 헤딩 섹셔닝 명시적/암시적 섹션 어색한 섹션 Title vs H...
리액트는 SPA 방식을 사용한다. 한 번에 모든 페이지를 다운로드 받고 url에 맞춰 해당 페이지만 보여주는 방식이다. SPA 라우팅 과정 브라우저는 최초에 ‘/’경로로 요청을 하면, React Web App 을 내려준다. 내려받은 React App에서 ‘/’ 경로에 맞는 컴포넌트를 보여준다. React App 에서 다른 페이지로 ...
열심히 강의 보고 따라 만든 Starbucks 홈페이지다. 순수 HTML CSS JS로만 만들었다. 스타벅스 홈페이지 포폴 만들면서 느낀점 우선 React를 안 쓰고 만든 것이 오랜만이라 좋았다. 기능은 없고 단순 UI만 만드니까 마음이 편안.. 일단, 코드르 보며 강의에서는 재활용 할 수 있는 class들이 참 많았다. 구조적으로 정말 ...
HTML의 기초를 한 번 알아보자. Doctype 우리가 처음 html을 배우게 되면 제일 상단에 ‘<!DOCTYPE html>’ 이라는 코드 한 줄을 볼 수 있다. 여기서 DOCTYPE(Docyment Type Definition)은 무엇을 뜻하는 것일까? DOCTYPE은 문서의 html 버전을 지정해준다. 여기서 문서는 하나의...
회사에서 패스트 캠퍼스 강의를 하나 결제해주었다. Front-end의 기초부터 하나하나 다시 시작하는 강의다. 미래에 개발 교육에 관심이 있다보니, 다양한 강의를 들으며 어떻게 설명하는 것이 좋을지 같이 공부하려고 한다. 더 쉽게, 더 재미있게 가르칠 수 있는 내가 되길 바라며 프론트엔드 & 백엔드 개발이란? 코딩을 처음 배우는 사람...