Semantic

2 posts

React로 사이드 네비게이션 UI 구현하기

사이트 네비게이션(site navigation)은 웹사이트에서 사용자가 효과적으로 페이지 사이를 이동을 할 수 있도록 도와주는 매우 흔하면서도 중요한 UI 입니다. 이번 포스팅에서는 React와 Styled Components를 이용하여 아래와 같은 다단계 사이드 네비게이션 UI를 한 번 구현해도록 하겠습니다. 컴파운트 컴포넌트 HTML에는 부모없이는 단독으로 쓰이지 않는 요소들이 있습니다. 대표적인 예로 <option> 요소는 항상 <select> 요소 안에서 사용되며, <li> 요소는 항상 <ul>이나 <ol> 요소 안에서 사용

[HTML] 시멘틱 마크업

HTML5가 등장한지 몇년이 흘렀음에도 불구하고, 아직까지도 <div> 태그로만 마크업된 웹사이트를 많이 접하곤 합니다. 하지만 이렇게 오로지 <div> 태그로만 마크업된 웹페이지는 시각적으로는 아름다울지 몰라도 여러 가지 측면에서 문제가 있을 수 있습니다. 시멘틱 마크업이란? <div> 태그는 보통 웹페이지에서 화면의 특정 영역에 스타일을 적용하거나, 전체 화면 레이아웃을 잡는데 자주 사용이 됩니다. 그래서 웹사이트에서 다음과 같은 <div> 태그가 사용되는 것을 어렵지 않게 접할 수 있습니다. 사실 HTML5에서 이러한 화면 레