CSS란

css

웹 페이지의 레이아웃, 디자인 스타일링을 담당하는 스타일 시트 언어입니다. 웹 페이지를 구성하는 HTML 요소들에 대한 디잔인과 스타일을 지정하여 사용자에게 시각적으로 매력적이고 사용하기 쉬운 웹 사이트를 제공할 수 있습니다.

 

HTML은 웹 페이지의 내용을 정의하는데 사용되는 마크업 언어이고, CSS는 해당 내용을 디자인하고 스타일링하는 역할을 맡습니다. 이를 통해 배경 색상, 글꼴, 크기, 간격, 정령 등을 지정할 수 있습니다.

CSS 장점

• 스타일과 구조의 분리: CSS를 사용하면 웹 페이지의 스타일과 구조를 분리하여 관리할 수 있습니다. 이로 인해 HTML 문서의 구조는 의미론적으로 유의미하게 작성하고, 스타일은 CSS로 별도로 정의하여 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.
• 일관성 있는 디자인: CSS를 이용하여 웹 사이트나 애플리케이션 내에서 일관된 디자인을 유지할 수 있습니다. 특정 스타일을 한 번 정의하면 여러 페이지나 요소에서 재사용할 수 있어 디자인의 일관성을 유지하고 시각적인 통일성을 확보할 수 있습니다.
• 효율적인 변경 관리: 스타일이나 레이아웃의 변경이 필요한 경우, CSS에서 해당 스타일만 수정하면 전체 웹 사이트나 애플리케이션에 일괄적으로 적용됩니다. 이는 유지보수를 효율적으로 수행할 수 있게 해 줍니다.
• 반응형 디자인 지원: CSS는 미디어 쿼리(Media Queries)와 같은 기능을 통해 반응형 디자인을 구현하는 데 사용될 수 있습니다. 이를 통해 다양한 장치와 화면 크기에 대응하는 웹 사이트를 제작할 수 있습니다.
• 다양한 선택자와 스타일링 옵션: CSS는 다양한 선택자와 속성을 제공하여 요소에 다양한 스타일을 적용할 수 있습니다. 이로 인해 세밀한 제어와 창의적인 디자인을 구현할 수 있습니다.
• 브라우저 호환성 향상: CSS는 웹 표준이며, 브라우저들이 표준을 준수하면서 일관된 스타일링을 제공할 수 있습니다. 브라우저 간 호환성 문제를 해결하고 일관된 사용자 경험을 제공하는 데 도움이 됩니다.
• 문서 크기 감소: CSS는 HTML에 비해 파일 크기가 작은 편이며, 스타일을 외부 스타일 시트로 분리하면 웹 페이지의 로딩 속도를 향상시킬 수 있습니다.
• 애니메이션 및 전환: CSS를 사용하여 간단한 애니메이션과 전환 효과를 쉽게 구현할 수 있습니다. 최근에는 CSS에 추가된 애니메이션 기능과 트랜지션 기능을 활용하여 인터랙티브한 웹 요소를 만들 수 있습니다.
• 검색 엔진 최적화 (SEO): 구조와 스타일을 분리하는 CSS를 사용하면 검색 엔진 크롤러가 웹 페이지의 콘텐츠를 더 쉽게 읽고 해석할 수 있어 SEO에 도움을 줄 수 있습니다.
  
  

Tistory에서 쉽게 CSS를 다뤄볼 수 있다.

CSS 단점

• 선택자 우선순위와 규칙 충돌 : CSS는 스타일을 적용하기 위해 선택자와 규칙을 사용합니다. 때때로 여러 규칙이 충돌할 수 있고, 이 때 어떤 규칙이 우선적으로 적용될지 결정해야 합니다. 이를 "선택자 우선순위"라고 하며, 복잡한 스타일링 규칙에서 이를 관리하기 어려울 수 있습니다.
• 전역 스코프와 네임스페이스의 부재 : CSS는 전역 스코프를 가지며, 각 선택자와 규칙은 페이지 내 어디에서나 접근할 수 있습니다. 이로 인해 스타일 간의 충돌이 발생할 수 있습니다. 또한, 클래스와 아이디 등의 선택자가 전역적으로 유일하지 않아서 예기치 않은 스타일 변경이 일어날 수 있습니다.
• 레이아웃 제어의 한계 : CSS는 웹 페이지의 레이아웃을 제어하는 데에 제한이 있습니다. 특히 복잡한 레이아웃을 구현하거나 브라우저 간의 일관된 레이아웃을 유지하기 어려울 수 있습니다. Flexbox와 Grid와 같은 최근에 도입된 레이아웃 기능은 이러한 문제를 해결하기 위해 도입되었지만, 여전히 일부 제한이 있을 수 있습니다.
• 명명 규칙과 유지보수의 어려움 : 클래스와 아이디를 명명할 때 일관성을 유지하고 의미 있는 이름을 선택하는 것이 중요합니다. 그러나 프로젝트가 커지면서 클래스 이름 충돌과 스타일의 일관성을 유지하는 것이 어려울 수 있습니다. 또한, 스타일을 변경하거나 추가할 때, 기존 스타일에 영향을 미칠 수 있어 유지보수가 어려울 수 있습니다.
• 성능 문제 : 많은 스타일 규칙이나 선택자, 중첩된 스타일 등이 페이지 로딩 속도와 렌더링 성능에 영향을 미칠 수 있습니다. 불필요한 선택자나 스타일 규칙을 피하고, 브라우저에서 제공하는 개발자 도구를 사용하여 성능을 모니터링해야 합니다.
• 크로스 브라우징 문제 : 모든 브라우저가 CSS 규격을 완벽하게 준수하지 않을 수 있습니다. 특정 스타일이 한 브라우저에서는 예상대로 작동하더라도, 다른 브라우저에서는 다르게 동작할 수 있습니다. 이로 인해 크로스 브라우징 이슈를 해결하기 위해 추가적인 작업이 필요할 수 있습니다.
• 복잡한 애니메이션 처리 : CSS로 기본적인 애니메이션을 구현하는 것은 가능하지만, 복잡한 애니메이션을 다루거나 상호작용적인 애니메이션을 구현하는 것은 어려울 수 있습니다. 이러한 경우에는 JavaScript나 전용 애니메이션 라이브러리를 사용하는 것이 필요할 수 있습니다.