기존 CSS, CSS module의 문제점 ✅전역 스코프(Global Scope) CSS는 전역 스코프이기 때문에 다른 페이지에서 사용하는 클래스와 중복이 안 되기에 클래스 네이밍에도 시간을 많이 투자해야 한다. 중복 없이, 의미 있는 네이밍을 짓는 것이 프로젝트의 규모가 커질수록 꽤나 시간이 걸렸다 🫠✅css 파일 증가와 클래스 이름 처리의 불편함 이러한 문제를 CSS module로 클래스명을 로컬 스코프로 제한해서(자동으로 고유한 클래스 이름을 생성함) 다른 컴포넌트와의 충돌을 막을 수 있다. 그치만 컴포넌트마다 CSS 파일을 생성해야 하고, CSS 파일이 객체로 취급되어서 이 객체의 속성을 통해 클래스 이름에 접근할 수 있다. 클래스 이름을 변수 취급하기 때문에 주로 카멜케이스로 작성된다. 개인적..

더보기 🤔 포스팅 계기 HTML, CSS, JS 기본 지식을 복기하고 부족한 지식들이 무엇인지 파악하고자 클론 코딩을 진행하고 있다. 프로젝트 진행 중 처음 보는 를 보고 시맨틱 태그의 개념과 사용 이유를 알 수 있었다. 풀스택 프로젝트를 했을 때 단순히 빠르게 화면 구현하는 것에만 집중해서 .. (반성) 단순히 구획을 나누는 를 과도하게 사용했고, 태그의 구조들이 명확하지 않아 개발할 때 많이 고생했던 걸로 기억한다. 시맨틱 태그의 명확한 이해를 바탕으로 소스 코드를 구조화하여 가독성 높은 코드를 짜고자 포스팅하였다. 🔍 시맨틱 태그(Semantic Tag)란 ? 시맨틱(Semantic)은 '의미의, 의미론적인' 라는 뜻을 가진 형용사입니다. 즉, 시맨틱 태그는 의미를 부여하는 태그 ! 태그의 기능과 ..

⚡️ Position이란 ? CSS에서 position은 HTML 문서 상에서 요소가 배치되는 방식을 결정하는 속성이다, position 속성에는 5가지의 속성 값이 있다 . static relative absolute fixed sticky 📌 Postion 5가지 속성 1. position: static 초기 요소의 상태이며 positon 속성을 별도로 지정해주지 않으면 기본값인 static이 적용된다. 명시적으로 positon 속성을 주지 않으면 position:static 이 기본값이라는 뜻. static 요소는 HTML 문서 상에서 원래 있어야 하는 위치에 배치되는데, 쉽게 말해 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 의미한다. 그렇기 때문에 static의 경..

더보기 🤔 포스팅 계기 부족한 CSS 기초를 다시 다지는 중에 CSS의 정자인 Cascading Style Sheets 에서 Cascading 이 무엇인지 알아보았다. 사전적인 의미인 폭포 말고도 CSS에서 중요한 핵심 개념 중 하나인 스타일 적용 규칙에 대해 알아보고자 포스팅하게 되었다. 🔍캐스케이딩(Cascading) 이란 ? CSS은 Cascading Style Sheet 의 약자이다. 이때 Cascading은 무슨 뜻일까? 우선 캐스케이드(Cascade)의 사전적 의미는 '폭포,' '위에서 아래로 흐르는'와 같은 의미를 가지고 있다. CSS에서의 캐스케이딩이란 스타일 적용 규칙으로, 하나의 요소에 여러 개의 스타일이 중복되는 상황에서 어떤 스타일을 적용할 것인지 스타일의 우선순위를 결정하는 것이다..

더보기 🤔포스팅 계기 SEO(검색엔진최적화) 개념을 알게 되면서 검색 엔진이 웹 페이지를 색인할 때 메타 데이터를 사용한다는 것을 알게 되었고, 토이 프로젝트를 하면서 viewport를 처음 접하게 되었다, 메타 데이터를 포함하는 태그에 대해 자세히 알아보자 ! 📌 태그란 ? 태그는 브라우저 화면에 직접적으로 보이지 않으며 해당 문서에 대한 정보인 메타 데이터(metadata)의 집합을 정의하는 컨테이너라고 생각하면 된다. 이때, 메타데이터란 한 데이터를 설명해주는 다른 데이터이다. 🟡 요소 1. HTML 문서의 제목을 정의한다. 이때 태그와 헷갈릴 수 있는데 태그는 태그 내 위치하며 브라우저에 표시되며 은 문서의 컨텐츠가 아닌 HTML 문서 전체의 타이틀을 표현하는 메타데이터이다. 2. HTML 문서의..