본문 바로가기

전체 글67

[프론트엔드 기술면접] HTML 의 inline 요소와 block 요소의 차이점과 예시 HTML 의 inline 요소와 block 요소의 차이점을 설명해주세요. 예시도 들어주세요 🧶인라인(Inline) 요소 : 인라인 요소는 일반적으로 텍스트와 같은 컨텐츠를 담기 위한 것으로, 요소의 내용이 왼쪽에서 오른쪽으로 이어지는 형태로 표시됩니다. 인라인 요소는 필요한 만큼의 공간만 차지하며, 너비와 높이를 임의로 지정할 수 없습니다. 여러 개의 인라인 요소가 있을 때 수평으로 배치됩니다. 예시로는 , , , , 등이 있습니다. 🧶블록(Block) 요소 : 블록 요소는 요소 안 내용 길이와 상관없이 요소 자체가 한 줄 전체를 차지하는 요소이며, 레이아웃을 구성하거나 구획을 나누는데 사용됩니다. width, height를 지정할 수 있으며 padding, margin 적용에 제한이 없습니다. 또한, .. 2023. 8. 1.
[프론트엔드 기술면접] Redux 상태관리의 주요 개념들과 연결 관계(다른 상태관리 도구와 비교) Redux 상태관리의 주요 개념들과 연결 관계를 설명해주세요. 다른 상태관리 도구와 비교 설명 해주세요 Redux는 React를 비롯한 JavaScript 애플리케이션에서 상태(state) 관리를 위한 도구입니다. Redux의 주요 개념으로는 Action, Dispatch, Reducer, Store가 있습니다. 먼저, Store는 Redux의 전역 저장소로, 애플리케이션의 state는 모두 store에서 관리됩니다. Action은 상태를 변경하기 위한 객체입니다. 해당 액션의 종류를 나타내는 type 속성과 액션에 필요한 데이터를 포함하는 payload 속성을 가지고 있습니다. Dispatch는 Action을 스토어에 전달하는 함수입니다. Reducer로 Action을 전달해주는 함수입니다. Dispa.. 2023. 8. 1.
[프론트엔드 기술면접]Semantic HTML의 필요성 Semantic HTML의 필요성을 예시를 들어 설명해주세요. Semantic HTML은 HTML 요소의 의미와 목적을 명확하게 나타내는 것을 말합니다. 이를 사용함으로써 웹 페이지의 접근성과 검색 엔진 최적화(SEO)를 개선하며, 웹 사이트를 이해하고 유지 보수하기 쉽게 만듭니다. 예를 들어, HTML 안 모든 요소를 태그로 씌운다면 코드를 보는 개발자 입장에서 웹 페이지 구조와 의미가 정확하게 보이지 않을 뿐 아니라, 우리가 애써 만든 웹 사이트가 검색 엔진에 최적화되지 않을 것입니다. 제목 내용 따라서, HTML의 각 영역은 각 영역의 의미에 맞게 요소는 웹 페이지의 제목, 요소로는 섹션을 정의, 요소로는 문서의 내용, 요소로는 문서 하단의 정보 전달을 위한 목적으로 사용하며 페이지의 의미와 목적을.. 2023. 7. 31.
[프론트엔드 기술면접] <li>요소는 왜 <ul>요소의 자식 요소여야만 할까? 요소는 왜 요소의 자식 요소여야만 하나요? li태그는 목록의 항목을 나타내는 태그입니다. 따라서 목록을 담아주는 ul태그의 자식요소여야합니다. ul요소 없이 사용 하게 되면 화면상 문자는 없지만 태그의 의미에 맞게 시맨틱 구조를 지킴으로써 홈페이지 표준기준을 지키고 그에 따라 다른개발자들과 협업을 할때 코드를 쉽게 이해하고 분석할 수 있게 해줍니다. 🎨 꼬리질문 다른 태그에도 들어갈 수 있나요? ol태그 안에도 li태그를 작성할 수 있습니다. ul태그는 순서가 중요하지 않은 목록을 나타낼 때 사용하는 태그이고, ol태그는 순서가 중요한 목록을 나타낼 때 사용하는 태그입니다. 2023. 7. 31.