CSS 튜토리얼)Part1. CSS 기본문법 - CSS란?
안녕하세요, 여러분! 🙌
오늘은 웹 개발에서 빼놓을 수 없는 중요한 요소인 CSS에 대해 이야기해보려 합니다.
Part1. CSS란?
CSS의 정의 CSS가 사용되는 이유 HTML과 CSS의 관계
Part2. CSS 시작하기
CSS 작성 방법 인라인 스타일 내부 스타일 시트 외부 스타일 시트 기본 문법 선택자 속성 값
Part3. CSS 속성 기초
텍스트 스타일링 글꼴, 색상, 크기 배경 색상, 이미지 박스 모델 마진, 패딩, 테두리, 너비, 높이
총 3개의 파트와 함께 저와 함께 CSS 에 대해 차근차근 같이 알아봐요!
오늘은 Part1 , CSS 에 대해 알아보도록 하겠습니다.
CSS란?
CSS(Cascading Style Sheets) 는 웹 페이지의 디자인과 레이아웃을 정의하는 스타일 시트 언어입니다.
웹 페이지의 텍스트, 색상, 크기, 간격 등을 조절하여 사이트의 외형을 꾸미는 데 사용됩니다. HTML이 웹 페이지의 구조를 담당한다면, CSS는 그 구조에 ‘옷을 입히는’ 역할을 합니다. 이렇게 함으로써, 웹 개발자는 웹 페이지의 내용과 디자인을 분리하여 관리할 수 있게 됩니다. CSS를 사용하면 다양한 기능을 활용하여 웹페이지를 더욱 풍성하게 만들 수 있습니다.
CSS의 주요 기능들
레이아웃 제어: 웹 페이지 내 요소들의 위치와 크기를 정밀하게 조정할 수 있습니다. 그리드나 플렉스박스 같은 레이아웃 시스템을 사용하여 복잡한 레이아웃을 구현할 수 있습니다.
스타일링: 텍스트 색상, 폰트 스타일, 배경 이미지 등 다양한 시각적 요소의 스타일을 지정할 수 있습니다. 이를 통해 매력적이고 일관된 디자인을 생성할 수 있습니다.
응답성: 미디어 쿼리를 사용하여 다양한 화면 크기와 해상도에 맞는 스타일을 적용할 수 있습니다. 이는 모바일 기기에서도 최적의 사용자 경험을 제공하는 데 중요합니다.
상호 작용성: 호버나 클릭 같은 사용자의 액션에 따라 스타일을 변경할 수 있습니다. 이를 통해 동적인 사용자 인터페이스를 구현할 수 있습니다.
CSS의 정의
간단하게 말해, CSS는 웹 페이지의 ‘옷’과 같습니다. HTML이 웹 페이지의 ‘뼈대’를 형성한다면, CSS는 그 뼈대에 ‘색상과 스타일’을 추가하여 사용자에게 보이는 최종적인 모습을 꾸며줍니다.
CSS를 사용하면, 한 번에 여러 웹 페이지에 동일한 스타일을 적용할 수 있어 일관성 있는 디자인을 유지하면서도 효율적으로 작업할 수 있습니다.
CSS의 작동 원리:
스타일 규칙
: CSS는 스타일 규칙을 통해 작동합니다.
각 규칙은 선택자와 {속성: 값;}의 집합으로 이루어져 있습니다.
선택자는 스타일을 적용할 HTML 요소를 지정하고, 속성과 값은 그 요소에 적용할 스타일을 정의합니다.예를 들어, h1 { color: red; } 는 모든 <h1> 태그의 텍스트 색상을 빨간색으로 지정합니다.
종속성
: ‘Cascading’이라는 단어는 여러 스타일 규칙이 적용될 때 우선 순위를 결정하는 규칙을 의미합니다.
만약 하나의 요소에 여러 규칙이 적용될 경우, CSS는 특정 규칙들을 우선시하여 적용합니다.
상속
: 특정 요소에 지정된 스타일은 그 자식 요소에도 일부 영향을 줄 수 있습니다.
예를 들어, 만약 여러분이 <body> 태그의 텍스트 색상을 블루로 지정하면, body 내부의 모든 텍스트 요소들은 기본적으로 블루 색상을 상속받습니다, 이는 코드의 재사용을 높여줍니다.
CSS가 사용되는 이유
페이지의 스타일링과 레이아웃 제어:
CSS는 웹 페이지의 모든 시각적 요소—색상, 글꼴, 간격, 크기, 위치 등—을 정밀하게 제어할 수 있게 해줍니다. 이를 통해 훨씬 아름답고 전문적인 웹사이트를 디자인할 수 있습니다.
콘텐츠와 프레젠테이션의 분리:
CSS를 사용하면, HTML 문서에서 콘텐츠(내용)를 프레젠테이션(스타일링)과 분리할 수 있습니다. 이것은 웹 페이지의 유지보수를 쉽게 하고, 스타일 변경을 더 효율적으로 할 수 있도록 해줍니다.
</br>
재사용성: 한 번 정의된 CSS 스타일(예를 들어, 공통 레이아웃이나 버튼 스타일)은 다수의 웹 페이지에서 재사용될 수 있습니다. 이로 인해 일관성 있는 디자인을 유지하면서도 개발 시간과 노력을 절약할 수 있습니다.
페이지 로딩 시간 감소: 스타일을 별도의 CSS 파일로 분리하면 웹 브라우저가 이를 캐싱할 수 있어 사이트 방문자가 여러 페이지를 탐색할 때 로딩 시간을 줄일 수 있습니다.
반응형 디자인: CSS는 미디어 쿼리를 통해 다양한 디스플레이 환경과 장치에 따라 다른 스타일을 적용할 수 있습니다. 이는 모바일 기기, 태블릿, 데스크톱에서 동일한 사용자 경험을 제공하는 데 필수적입니다.
접근성 향상: CSS를 이용하면 웹 페이지의 접근성을 향상시킬 수 있습니다. 예를 들어, 시각 장애가 있는 사용자를 위해 대비되는 색상을 사용하거나 콘텐츠의 시각적 표현을 조정하여 스크린 리더 사용을 최적화할 수 있습니다.
동적 상호작용 구현: CSS의 동적 효과(예: 호버 효과, 전환, 애니메이션)를 이용해 사용자와의 상호작용을 풍부하게 만들 수 있습니다.
이러한 효과는 JavaScript와 결합하여 더욱 다양하고 동적인 인터페이스를 구성할 수 있습니다.
| 이유 | 설명 |
|---|---|
| 페이지 스타일링 제어 | 웹 페이지의 색상, 글꼴, 간격 등 시각적 요소를 정밀하게 제어할 수 있습니다. |
| 콘텐츠와 프레젠테이션 분리 | HTML(콘텐츠)과 CSS(스타일링)을 분리하여 유지보수와 변경이 쉬워집니다. |
| 재사용성 | 한 번 정의한 스타일을 여러 페이지에 걸쳐 사용할 수 있어 일관성과 효율성을 제공합니다. |
| 페이지 로딩 시간 감소 | CSS 파일을 분리하여 캐싱함으로써 로딩 시간을 줄일 수 있습니다. |
| 반응형 디자인 | 미디어 쿼리를 사용해 다양한 화면 크기에 적합한 스타일을 적용할 수 있습니다. |
| 접근성 향상 | 접근성을 고려한 스타일을 적용하여 모든 사용자가 콘텐츠를 쉽게 접근할 수 있도록 합니다. |
| 동적 상호작용 구현 | 호버, 전환, 애니메이션 등을 사용하여 사용자 경험을 풍부하게 만듭니다. |
HTML과 CSS에 관계
이 둘의 관계를 알아보기 전
HTML과 CSS 가 무엇인지 알아야합니다.
HTML (HyperText Markup Language)
HTML은 웹 페이지의 구조를 만드는 데 사용되는 마크업 언어입니다. 웹 페이지의 본문, 제목, 이미지, 링크 등의 기본 콘텐츠와 구조를 정의합니다.
HTML은 태그라는 특정 요소들을 사용하여 문서를 구조화합니다. 예를 들어, <h1> 태그는 페이지의 주 제목을 나타내고, <p> 태그는 문단을 표시합니다.
CSS (Cascading Style Sheets)
CSS는 HTML로 생성된 웹 페이지의 요소들이 어떻게 보일지를 결정하는 스타일 시트 언어입니다. 즉, 웹 페이지의 시각적 표현을 담당하며, 텍스트 색상, 글꼴 스타일, 요소의 배치, 간격, 크기 조정 등을 정의합니다. CSS는 디자인과 레이아웃을 제어함으로써 웹사이트의 사용자 경험을 개선합니다.
HTML과 CSS의 관계
HTML과 CSS의 관계는 “구조”와 “표현”의 관계로 비유할 수 있습니다. HTML이 웹 페이지의 “골격”을 제공한다면, CSS는 그 “골격”에 “옷을 입히고” 스타일을 추가하는 역할을 합니다. HTML로 만든 웹 페이지 구조 위에 CSS를 적용하여 스타일과 시각적 요소를 추가함으로써, 보다 사용자 친화적이고 동적인 인터페이스를 구현할 수 있습니다.
CSS는 HTML 요소를 선택하여 스타일을 적용합니다. 예를 들어, HTML에서 사용된 <h1> 태그에 CSS를 적용하여 글꼴의 크기, 색상, 정렬 방식을 지정할 수 있습니다. 이를 통해 개발자는 웹 페이지의 콘텐츠를 시각적으로 향상시킬 수 있으며, 반응형 디자인을 통해 다양한 화면 크기와 장치에서도 일관된 사용자 경험을 제공할 수 있습니다.
이처럼 HTML과 CSS는 웹 페이지를 구성하는 데 있어 필수적인 기술로, 서로 보완하며 작동합니다. HTML이 구조를 제공하고, CSS는 이 구조에 적절한 디자인과 레이아웃을 적용하여 전체적인 웹 페이지의 외관과 기능성을 향상시킵니다.
| 기술 | 역할 | 주요 기능 |
|---|---|---|
| HTML | 웹 페이지의 구조를 제공 | - 웹 페이지의 기본 콘텐츠와 구조 정의 - 태그를 사용한 문서 구조화 |
| CSS | 웹 페이지의 시각적 표현을 담당 | - 색상, 글꼴, 간격 조정 - 디자인과 레이아웃 제어 |
이렇게 part1 - css 에 대해 알아보았습니다.
다음번에 part2 - CSS 시작하기를 알아보겠습니다!