HTML / CSS

CSS 규칙에 대해 전반적으로 알아보며, 그동안 놓쳤던 부분에 대해 다시 한 번 정리해보며 코드를 깔끔하게 리팩토링 하는 법에 대해 숙지해보자. 추가적으로, CSS 선택자의 종류에 대해서도 학

CSS에서 크기를 지정하는 것은 Web Design의 핵심 부분이다. 여기서는 절대적 크기 단위와 상대적 크기 단위의 차이점과 사용 방법에 대해 알아보도록 하겠다.픽셀 (px): 절대적인 크기 단위이다. 화면을 구성하는 기본 단위로, 화면의 해상도에 따라 크기가 결정된

CSS를 사용하다보면 자주 쓰는 CSS 속성들이 생긴다. 이런 경우 매번 구글링을 통해 해결하기 보다는 내가 사용법을 어느정도 숙지하고 있을 때, 훨씬 더 빠르고 간편하게 문제를 해결 가능하다. 추가로, 타인의 코드를 관찰할 때도 도움이 된다. 이번 글을 통해 자주 쓰

📚 마음대로 배치되지 않는다고? CSS의 Display 속성으로 해결해보자! 웹 페이지를 디자인하다보면 내 마음대로 되지 않을 때가 참 많다. 그 때마다 내 속을 가장 많이 썩인 것이 바로 Display 속성이다. CSS에서 display 속성은 웹페이지 상에서

앞선 글을 통해 CSS 선택자에 대해 잠시 언급한 바 있다. CSS 선택자를 올바르게, 그리고 적절하게 사용하면 깔끔한 Styling을 통해 CSS를 작성 가능하다. 그동안 나의 CSS파일은 수많은 내용들로 가득차 있었다. 한 가지 수정사항이 생기면 그저 CSS 선택자

📚 CSS 규칙 순서의 핵심: Cascade의 이해와 활용 앞선 글 Outro에서 CSS 선택자를 과도하게 복잡하게 사용하면, 가독성이 떨어지고 오히려 수정에 어려움이 있을 수 있다라고 언급하였었다. 그 이유는 바로, CSS 규칙에는 '순서'가 존재하기 때문이다.

HTML 태그를 모두 외우고 사용하는 사람은 없을 것이다. 나 역시도 자주 사용하는 태그를 제외하고는 모르는 태그가 많다. 모르는 태그에 대해서 구글링을 통해 그때그때 맞춰서 사용하는 것도 능력이고 중요하다. 하지만 중요 태그들에 대해서 태그의 의미, 그리고 해당 태그

HTML에서 리스트는 매우 유용하다. 특히, 리스트는 웹 페이지에서 정보를 정리하고 표시하는 데 유용하다. 따라서 리스트를 잘 사용하면 논리정렬하고, 더욱 깔끔한 계층적 구조를 표현 가능하다.HTML에서 리스트를 작성하고 스타일링하는 방법에 대해 알아보며 리스트를 통해

시멘틱 태그는 '반드시' 사용해야 하는 것은 아니다. 왜냐하면 시멘틱 태그는 <div>와 기능적 차이가 없기 때문이다. 그럼에도 불구하고 시멘틱 태그를 '반드시', 그리고 '잘' 사용해야 한다. 시멘틱 태그에 대해 학습해보며 왜 시멘틱 태그를 사람들이 그리도 강조

웹 디자인을 하다보면 다양한 레이아웃 요구사항에 맞춰가는 것은 필수적인 작업이다. 특히 사용자 친화적인 웹 디자인을 실현하기 위해서는, 이러한 요구사항들에 '유연하게' 대응할 수 있는 능력이 중요하다. 이것이 바로 '유연성'의 장점이자 핵심이며, 현대 웹 디자인에서 매

앞선 글을 통해 Flexbox를 활용하면 유연하게 CSS 레이아웃을 설정할 수 있다고 학습하였다. Grid는 Flexbox와 비슷하게 효과적으로 CSS 레이아웃을 설정하는데 도움을 주는데, 때로는 Flexbox보다 Grid를 쓰는 것이 더 효과적이고 깔끔하게 CSS 레