[CSS] CSS 전처리기와 후처리기, 뭐가 다를까?
·
기술/HTML,CSS
CSS를 사용하다 보면 다음과 같은 문제를 겪은 적이 있을 것입니다.“같은 색상을 여러 곳에 썼는데, 바꾸려면 전부 수정해야 해...”“flex를 썼는데, 브라우저마다 다르게 보이네?”“스타일이 많아지니 점점 유지보수가 어렵다…” 이런 문제를 해결하는 데 도움이 되는 도구가 바로 전처리기(Preprocessor)와 후처리기(Postprocessor)입니다. 전처리기(Preprocessor)란?전처리기는 CSS를 작성하기 전에 사용하는 도구로, CSS를 더 프로그래밍답게 쓸 수 있게 해줍니다.대표적인 전처리기로는 SASS, LESS, Stylus 등이 있습니다. 전처리기를 쓰면 다음과 같은 기능을 사용할 수 있습니다:변수: 색상, 폰트 등 반복되는 값을 한 곳에 정의중첩(Nesting): 선택자 구조를 더..
[CSS] CSS Diner: 선택자 연습을 위한 CSS 학습 사이트
·
기술/HTML,CSS
CSS Diner: 선택자 연습을 위한 CSS 학습 사이트https://flukeout.github.io/ CSS DinerA fun game to help you learn and practice CSS selectors.flukeout.github.ioCSS Diner는 CSS 선택자를 재미있게 배우고 연습할 수 있는 웹 기반 게임입니다.화면에는 선택할 HTML 요소가 그림으로 제시되며, CSS 편집기에 해당 요소를 선택하는 선택자(selector)를 입력하면 됩니다. 처음에는 쉽지만 뒤로 갈수록 잘 쓰지 않는 선택자들도 등장해 꽤 어렵다.어려울 땐 화면 오른쪽의 예시와 힌트를 참고!
[CSS] CSS 핵심 개념과 적용 방식
·
기술/HTML,CSS
CSSCSS(Cascading Style Sheets)는 HTML 요소에 스타일(색상, 폰트, 배치 등)을 적용하기 위한 언어이다.HTML이 문서의 구조를 담당한다면, CSS는 시각적인 표현을 담당한다. 예를 들어 아래와 같이 HTML만으로는 단순한 구조만 표현할 수 있지만:환영합니다!CSS를 사용하면 다음과 같이 꾸밀 수 있다.p { color: blue; font-size: 20px; text-align: center;}CSS의 주요 특징css의 주요 특징은 캐스캐이딩과 상속이다. 이 두 가지 특징을 알면 css를 더 잘 이해할 수 있다.1. 캐스캐이딩 (Cascading)캐스캐이딩(Cascading)은 여러 CSS 규칙이 하나의 요소에 적용될 때, 어떤 규칙을 우선 적용할지 결정하는 원칙이다...
[HTML] 시맨틱 태그(Semantic tag)
·
기술/HTML,CSS
시맨틱 태그(Semantic tag)사전적 정의로 시맨틱(Semantic)은 ‘의미 있는’이라는 뜻이다.웹에서 쓰는 시맨틱 태그도 이와 비슷하게 "이 영역이 어떤 역할을 하는지"를 브라우저와 사람 모두에게 설명하는 태그를 말한다. 시멘틱 태그가 왜 중요할까?접근성 개선: 스크린 리더가 페이지 구조를 더 잘 이해함가독성 향상: 개발자가 HTML 구조를 보고도 빠르게 역할을 파악할 수 있음SEO에 도움: 검색 엔진이 콘텐츠를 더 잘 분석하고 평가할 수 있음대표적인 시멘틱 태그문서나 섹션의 머리말. 로고, 제목, 네비게이션 등이 들어간다.주요 탐색 링크 집합. 메뉴나 목차를 담는다.페이지의 주요 콘텐츠. 한 페이지에 하나만 있어야 한다.문서의 논리적인 구획. 주제를 가진 블록 단위로 나눌 때 사용.독립적인 ..