면접질문 참고https://nomadcoders.co/community/thread/3979[diary] 프론트엔드 신입 면접 준비하기[면접준비] 프론트엔드 개발자 취업 면접 질문 및 답변 정리(64문)프론트엔드 면접질문 중요도별 정리[Frontend] 프론트엔드 주니어 개발자 면접 질문 (기술/인성)*실제 면접 시 질문 받았던 항목들에는 ⭐표시를 추가했습니다. 1. 브라우저 작동 원리 (주소창에 google.com을 입력하면 일어나는 일)(사용자가 브라우저에 주소를 입력한 후에 서버로부터 전송된 데이터가 화면에 보이기까지 그 일련의 과정을 설명할 수 있어야 합니다.) ✅ 답변브라우저에 도메인을 입력하면, 브라우저는 해당 IP 주소를 얻기 위해 DNS(Domain Name System) 서버에 요청을 보..

꿈 일기 기록 사이트의 구상했던 메인 기능 대부분을 구현했다. 이제 소소한 추가 기능을 개발해 볼 예정이라 먼저 메뉴 버튼부터 만들기로 했다. 지금 스타일링을 최대한 보존하기 위해 플로팅 버튼으로 메뉴를 구현하려고 한다. 구현 먼저 플로팅 버튼 관련 코드를 작성할 FloatingMenu 컴포넌트를 생성했다. 플로팅 버튼은 모든 페이지에서 전역적으로 노출되어야 하기 때문에 App.js에 컴포넌트를 추가했다. FloatingMenu.js const FloatingMenu = () => { return ( 메뉴 ); }; App.js function App() { return ( ... ); } 나중에 FloatingMenu에 useNavigation을 이용해 페이지 이동할 수 있는 코드를 작성할 생각이라 컴..

CSS 스타일링을 모니터 기준으로 했기 때문에 모바일로 보았을 때 스타일이 깨져 보이거나 정상적인 사용을 하기에 불편한 부분이 몇 군데 있었다. 이를 해결하기 위해 크롬 개발자 도구 모바일 Galaxy Fold를 기준으로 화면을 확인해 가며 반응형 스타일링을 진행했다. Galaxy Fold를 기준으로 한 이유는 가장 가로 폭이 작아 예외처리하기 좋기 때문이다. @media screen and (min-width: 280px) and (max-width: 650px) 미디어 쿼리를 이용해 280px(갤럭시 폴드) ~ 650px까지의 화면에 대한 스타일링을 개별적으로 진행하였다. 1. Home 화면 🔨수정해야 할 부분 문제점 새 일기 작성 버튼이 div를 벗어나 있다. (개발자 도구를 이용해 다른 요소들과 ..

오류 상황 미디어쿼리를 다음과 같이 작성했음에도 모바일 화면에 원하는 결과가 나오지 않는 오류 발생 @media screen and (min-width: 320px) and (max-width: 800px) { /*css코드*/ } 라는 오류가 발생하고 onclick이벤트가 동작하지 않는 오류 발생 해결 html의 안에 다음 코드를 추가한다. width=device-width: 화면의 넓이를 디바이스의 넓이로 지정 initial-scale=1: 초기 화면 배율 참고: https://hohoya33.tistory.com/127 CSS 미디어 쿼리 디바이스별 해상도 분기점 기본적으로 반응형웹을 적용하기 위해서 먼저 HTML head 부분에 meta viewport를 설정해주어야 합니다. width=devic..

Universal * type Tag ID #id Class .class State : Attribute [] selector{ property: value; } 기본적인 선택자 구성 * { color: green; } 전체 태그 글자색 변경 li { color: blue; } 태그의 글자색 변경 li#special { color: pink; } 태그 중 id가 special인 태그의 글자색 변경 .red { width: 100px; height: 100px; background: yellow; } class가 red인 태그의 속성 변경 button:hover { color: red; background: beige; } 태그에 마우스를 올렸을 때 속성 변경 a[href="naver.com"]{ colo..

https://www.w3schools.com/ W3Schools Free Online Web Tutorials W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com https://heropy.blog/2019/04/24/html-css-starter/ 입문자에게 추천하는 HTML, CSS 첫걸음 개요HTML, CSS 그리고 JavaScript웹 표준크로스 브라우징웹 접근성정보..