웹 페이지는 우리가 인터넷을 통해 정보를 얻거나, 쇼핑을 하거나, 소셜 미디어를 이용하는 등 다양한 활동을 하는 공간입니다. 이러한 웹 페이지는 단순히 정보를 제공하는 수단을 넘어서, 사용자의 경험과 감성에 직접적으로 영향을 미치는 매우 중요한 요소가 되었습니다.
이처럼 웹 페이지의 중요성이 증대함에 따라, 그 안의 다양한 요소들이 어떻게 구성되고 디자인되는지 이해하는 것은 매우 중요하게 다가왔습니다. 그 중에서도 웹 페이지의 스타일링은 사용자 경험을 직접적으로 좌우하는 핵심적인 요소입니다. 웹 페이지의 스타일링에는 여러 기술이 사용되지만, 그 중에서 가장 핵심적인 것이 바로 CSS입니다. 웹 페이지의 구성 알아보기
CSS란
CSS는 Cascading Style Sheets의 약자로, 웹페이지의 레이아웃과 디자인을 꾸미는 데 사용되는 스타일 언어입니다. CSS는 웹페이지의 모든 요소에 대한 스타일을 제어할 수 있습니다.
즉, 글꼴, 색상, 크기, 간격, 배경 이미지 등 웹페이지의 모든 시각적 요소를 CSS를 통해 조정할 수 있습니다. 또한, CSS는 웹페이지의 레이아웃을 제어하여 각 요소의 위치를 정의하고, 웹페이지가 다양한 화면 크기와 장치에 어떻게 반응할지도 결정합니다.
mywebsite/
├─ index.html: 웹사이트의 메인 페이지
├─ style.css: 웹사이트의 디자인과 레이아웃을 담당하는 CSS 파일
└─ script.js: 웹사이트의 상호작용을 담당하는 JavaScript 파일이런 웹 페이지는 위와 같은 형식으로 HTML 파일이 기본적인 구조를 만들며, CSS가 이 구조를 원하는 형태의 스타일로 변경하고, JavaScript로 동적인 상호작용을 추가합니다.
CSS는 HTML과 함께 사용되는데, HTML이 웹페이지의 구조를 정의하는 반면, CSS는 그 구조를 어떻게 시각적으로 표현할지를 정의합니다. 이 둘은 웹페이지를 만드는 데 있어서 함께 동작하며, 각각의 역할이 분명하기 때문에 웹페이지의 구조와 디자인을 독립적으로 관리할 수 있습니다. 이러한 점은 웹페이지의 유지 관리와 재사용성을 크게 향상시킵니다.
CSS를 잘 이해하고 사용하면, 동일한 HTML 코드에도 다양한 스타일을 적용하여 완전히 다른 디자인의 웹페이지를 만들 수 있습니다. 또한, CSS는 웹페이지의 접근성을 향상시키고, 사용자 경험을 개선하는 데 중요한 역할을 합니다.
CSS 기본 문법
CSS 기본 문법은 스타일 규칙을 정의하고 웹 페이지의 디자인을 지정하는 데 사용됩니다. CSS 규칙은 선택자, 선언 블록, 그리고 선언으로 구성됩니다.
선택자(Selectors)
CSS 규칙은 어떤 HTML 요소에 스타일을 적용할 것인지를 지정하는 선택자로 시작합니다. 선택자는 다양한 방식으로 지정할 수 있으며, 목표 요소를 정확하게 식별하는 역할을 합니다. 일반적인 선택자 유형은 다음과 같습니다.
- 요소 선택자: HTML 요소 이름으로 선택합니다. 예를 들어,
p는 모든 단락 요소를 선택합니다. - 클래스 선택자: 클래스 이름으로 선택합니다. 클래스 선택자는 점(
.)으로 시작하며, 여러 요소에 동일한 스타일을 적용할 때 유용합니다. 예를 들어,.highlight는class=highlight를 가진 모든 요소를 선택합니다. - ID 선택자: ID 속성 값으로 선택합니다. ID 선택자는 해시(
#)로 시작하며, 한 페이지에서 특정 요소를 고유하게 식별할 때 사용됩니다. 예를 들어,#header는id=header를 가진 요소를 선택합니다. - 자식 선택자: 특정 요소의 자식 요소를 선택합니다. 예를 들어,
ul > li는 모든ul안의 직계 자식li를 선택합니다.
선언 블록(Declaration Block)
선택자 이후, 중괄호({})로 둘러싸인 선언 블록이 따릅니다. 선언 블록은 스타일 규칙을 정의하고 해당 스타일을 어떻게 적용할지를 명시합니다.
p {
font-size: 16px;
}위의 코드에서 p는 선택자이며, 중괄호 내부에 있는 스타일 속성과 값은 해당 선택자에 적용됩니다.
선언(Declarations)
선언은 스타일 속성과 그에 해당하는 값으로 구성됩니다. 스타일 속성은 어떤 스타일을 변경할지를 나타내며, 값은 해당 스타일 속성을 어떻게 변경할 것인지를 정의합니다.
font-size: 16px; /* 글꼴 크기 설정 */
color: #333; /* 글꼴 색상 설정 */
text-align: left; /* 텍스트 정렬 설정 */위의 예시에서는 글꼴 크기, 글꼴 색상 및 텍스트 정렬을 변경하는 스타일 선언을 볼 수 있습니다.
주석(comment)
주석은 스타일 규칙에 영향을 미치지 않고 스타일 시트를 읽는 브라우저에 의해 무시되며 CSS에서 주석을 사용하려면 주석 표시를 추가하면 됩니다. CSS 주석은 스타일 시트 내에서 설명 또는 메모를 추가할 때 유용합니다.
/*이 주석은 특정 스타일 규칙에 대한 설명입니다 */
p {
font-size: 16px;
color: #333;
/* 아래는 주석의 예시입니다 */
/* background-color: #f0f0f0; */
}CSS 주석은 /*로 시작하고 */로 끝납니다. 주석 내의 내용은 스타일 규칙과 관련 없으며, 오로지 개발자 또는 팀 간 의사 소통을 위한 용도로 사용됩니다.
- 이 주석은 주석 내부의 내용을 무시하며, 주석 내에 추가 정보를 기록할 수 있습니다.
- 주석은 코드의 가독성을 높이고 다른 개발자들이 스타일 시트를 이해하는 데 도움을 줄 수 있습니다.
- 주석은 중요한 기능이며, 코드의 유지 관리 및 협업 프로세스를 강화하는 데 도움이 됩니다.
이렇게 작성된 CSS 규칙은 HTML 문서의 <head> 태그 안에 <style> 태그 내에 또는 외부 CSS 파일로 저장하여 웹 페이지에 스타일을 적용할 수 있습니다.
CSS 적용
CSS는 세 가지 방법으로 웹페이지에 적용할 수 있으며 각 방법은 특정 상황에 적합하며, 선택한 방법은 웹 페이지의 스타일 적용 요구 사항 및 구조에 따라 달라질 수 있습니다. 외부 스타일 시트는 일관된 스타일 유지 및 재사용을 촉진하며, 내부 스타일 및 인라인 스타일은 특정 요소에 대한 빠른 스타일 변경을 허용합니다.
외부 스타일 시트 사용
이는 가장 일반적으로 사용되는 방식으로 별도의 .css 파일을 만들어 웹페이지에 연결할 수 있습니다. 확장자가 .css 인 CSS 파일을 생성하고 원하는 스타일 규칙을 작성합니다.
예를 들어, 위 그림과 같이 styles.css라는 이름의 파일을 하나 만들고 사용하고 싶은 다양한 선택자와 선언을 포함시킵니다. 그리고 HTML 문서의 <head> 태그 내에서 다음 형식으로 외부 스타일 시트를 링크하면 해당 html 문서에 styles.css의 스타일이 적용됩니다. 필요하다면 여러개의 .css 파일을 만들어서 추가하고 관리할 수도 있습니다.
<link rel="stylesheet" type="text/css" href="styles.css">필요하다면 여러개의 .css 파일을 만들어서 추가하고 관리할 수도 있습니다.
<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="stylesheet" type="text/css" href="header.css">
<link rel="stylesheet" type="text/css" href="footer.css">내부 스타일 사용
HTML 문서의 head 부분에 style 태그를 사용하여 CSS를 삽입합니다. 내부 스타일은 HTML 문서의 <head> 부분에서 <style> 태그를 사용하여 정의됩니다. 이 방법은 한 페이지에만 스타일을 적용하려는 경우에 유용합니다.
다음과 같이 <style> 태그 내에 직접 CSS 스타일 규칙을 작성하면 해당 html 문서에 스타일이 바로 적용됩니다.
<style type="text/css">
p {
font-size: 16px;
color: #333;
}
</style>인라인 스타일 사용
HTML 요소의 style 속성을 사용하여 CSS를 직접 적용하는 방법입니다. HTML 요소에 style 속성을 추가하고 스타일 규칙을 설정합니다. 예를 들어 다음과 같이 적용하면 해당 요소에만 스타일이 적용되며, 다른 요소에는 영향을 미치지 않습니다.
<p style="font-size: 16px; color: #333;">이것은 스타일이 적용된 단락입니다.</p>