본문 바로가기

CSS3

웹 프론트엔드 개발자 면접 - CSS 웹 프론트엔드 개발자로서 면접을 볼 때 받게 될만한 기술 면접 질문리스트와 적절한 답변에 대해서 검색한 내용을 모두 취합하고 내용을 덧붙여서 포스팅을 작성해 보았습니다. * HTML, CSS, Javascript 카테고리로 나누어서 진행됩니다. (면접 질문과 그에 대한 답변을 얻은 곳의 출처는 하단에 표시하였습니다.) CSS 1. 컨텐츠 숨기기 - display : none - visibility : hidden (영역 존재, 컨텐츠만 안보임) 2. 반응형 웹의 3요소 - @media 쿼리 - Fluid Grid (media 크기에 따라 div block 크기 변경) - Flexible Img 3. CSS selector 동작원리 - 브라우저가 HTML/CSS를 DOM 형식으로 변환시킴 - DOM에서 d.. 2020. 9. 21.
구조화된 CSS 작성을 위한 BEM (Block Element Modifier) BEM (Block Element Modifier) : CSS 를 효율적이고 빠르게 작성하기 위한 웹 개발 방법론 1. BEM 사용이유? BEM은 왜 사용해야 할까요? 보통 작은 웹 페이지를 구성할 때에는 CSS, SASS와 같은 방식을 사용해서 시작하게 됩니다. 하지만 점차 웹페이지가 커진다면, 하나의 CSS 파일로는 임의로 작성한 소스코드가 일관성을 유지하기 힘들게 되어 유지보수가 어렵게 될 것입니다. 2. BEM을 사용하면 생기는 이점 이점은 바로 성능과 효율성 입니다. 1) 코드 작성 시간이 줄어든다 : 모듈화 되어 한 번 잘 작성해놓으면 작성한 코드를 불러오면 됩니다. 2) 작성해야 하는 코드양이 줄어든다 : 중첩해서 CSS 코드를 작성할 필요가 없기 때문에 작성할 소스코드 양이 줄어듭니다. 3.. 2020. 8. 18.
FruitFinder 제작 - 깃허브 주소 GitHub - canoe726/FruitFinder: FruitFinder - 검색, 무한 스크롤, 모달창 기능을 가진 과일 검색 페이지 FruitFinder - 검색, 무한 스크롤, 모달창 기능을 가진 과일 검색 페이지. Contribute to canoe726/FruitFinder development by creating an account on GitHub. github.com 1. 소개 FruitFinder - 검색, 무한 스크롤, 모달창 기능을 가진 과일 검색 페이지 - 웹 프론트엔드 실력 향상 토이 프로젝트 2. 개요 1) 사용언어 : HTML, CSS, JavaScript(Vanilla) 2) API : Web Storage API 를 사용하여 화면 스킨, 입력한 검색어 .. 2020. 8. 11.

티스토리툴바