안녕하세요, 오늘은 CSS 선택자 및 선언 방식에 대해 알아보겠습니다. 강의는 코딩 레벨원 : MBTI 테스트 만들며 배우는 왕초보 코딩을 보다가 정리한 것이고요. 공부하면서 큰 주제를 기준으로 용어부터 정리하기 위해서 찾아본 내용을 포스팅했습니다. 강의 내용에 나오는 용어는 금방 지나가는데 저는 정리하는데도 한참 걸리네요. 참고로 실제 강의는 실습 위주로 되어 있어서 실제 내용과는 다릅니다.
강의 내용
패스트캠퍼스의 CSS 관련 강의는 총 11개 카테고리로 구성되어 있고, 각각의 강의는 5분에서 20분 이내로 짧은 편입니다. 강의를 통해서 상자의 모양, 글자의 모양, 배경의 색, 배치, 정렬 등의 개념을 배울 수 있습니다. 사실 어느 정도 큰 골격만 알게 되면 명령어만 다를 뿐 내용은 대동소이하다는 것을 알 수 있어요. 티스토리나 간단한 블로그 화면을 편집하는 데는 크게 필요한 내용은 아니며, 세부적으로 웹 사이트를 디자인할 때 알아두면 좋은 개념입니다.
제 경우는 기초를 먼저 이해하는 것을 선호하기 때문에 기초적인 정의나 내용에 대해서 알아보도록 하겠습니다. 필요한 세부 내용들은 그때가서 공부해도 늦지 않는다는 생각입니다.
CSS로 꾸미기 기초
CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 데 사용됩니다. 선택자는 중괄호({}) 안에 작성되며, 속성과 속성값을 포함할 수 있습니다. 이때, 가독성을 고려하여 선택자와 스타일을 작성하는 방법에 대해 설명드리겠습니다.
키워드: CSS 선택자, 선택자 작성 방법, 스타일 속성, 속성값, 가독성 최적화
CSS 선택자 작성 방법과 가독성 최적화 방안
첫 번째로, 선택자의 스타일을 옆으로 길게 작성하는 방식입니다. 예시를 살펴보겠습니다.
선택자 { 속성: 속성값; 속성: 속성값; }이 방식은 각 속성과 속성값이 한 줄에 나열되어 있어 코드가 길어지고 가독성이 떨어지는 단점이 있습니다. 이 방식은 몇몇 경우를 제외하고는 권장되지 않습니다.
두 번째로, 선택자와 스타일을 세로로 작성하는 방식입니다. 예시를 살펴보겠습니다.
선택자 {
속성: 속성값;
속성: 속성값;
}이 방식은 선택자와 각 속성, 속성값을 세로로 정렬하여 작성합니다. 이렇게 하면 코드가 보기 좋아지고 가독성이 향상됩니다. 줄 바꾸기 통해 각 속성을 구분하며, 들여 쓰기를 통해 계층 구조를 시각적으로 표현하는 것이 일반적입니다.
대부분의 경우에는 선택자와 스타일을 세로로 작성하는 방식을 사용하는 것이 좋습니다. 이 방식은 코드의 가독성을 향상시키고 유지 보수를 용이하게 합니다.
저는 간단한 홈페이지 수정을 목적으로 하기 때문에 들여쓰기는 VSCode의 기본인 4칸으로 합니다. 하지만 2칸으로 설정하는 경우 긴 코드를 보기에 더 좋습니다.
선택자와 속성, 값의 역할 예시
선택자의 역할: 대상 검색
선택자는 CSS에서 특정 HTML 요소를 대상으로 스타일을 적용하기 위해 사용됩니다. 이전의 포스팅을 참고하시면 index.html 파일에서 링크를 걸어서 main.css 파일을 참고하고 내용은 main.css 파일에서 편집하게 되는데요. 이때 선택자는 HTML 문서 내에서 원하는 요소를 찾아내는 역할을 합니다. 아래는 선택자의 역할을 보여주는 예시입니다.
/* 예시 1: 태그 선택자 */
h1 {
color: red;
}
/* 예시 2: 클래스 선택자 */
.container {
background-color: lightgray;
}
/* 예시 3: ID 선택자 */
#logo {
width: 200px;
}예시 1에서는 <h1> 태그를 선택하여 텍스트의 색상을 빨간색으로 지정합니다. 예시 2에서는 class="container"인 모든 요소를 선택하여 배경색을 연한 회색으로 지정합니다. 예시 3에서는 id="logo"인 요소를 선택하여 너비를 200px로 지정합니다.
속성과 값의 역할: CSS 명령 지정
속성과 값은 선택된 HTML 요소에 적용될 CSS 스타일을 정의합니다. 속성은 스타일의 종류를 나타내고, 값은 해당 스타일의 설정 값을 나타냅니다. 아래는 속성과 값의 역할을 보여주는 예시입니다. 직관적으로 속성:값의 형태로 명령을 하면 되는 것을 알 수 있습니다.
/* 예시 1: 텍스트 스타일링 */
h2 {
font-size: 24px;
color: #333;
text-align: center;
}
/* 예시 2: 박스 모델 */
.box {
width: 200px;
height: 200px;
background-color: blue;
margin: 10px;
padding: 20px;
}
/* 예시 3: 배경 이미지 */
#banner {
background-image: url('banner.jpg');
background-size: cover;
}예시 1에서는 <h2> 태그의 텍스트 크기를 24px로, 색상을 진한 회색(#333)로, 정렬을 가운데로 지정합니다. 예시 2에서는 class="box"인 요소의 너비와 높이를 200px로, 배경색을 파란색으로, 마진을 10px, 안쪽 여백(padding)을 20px로 지정합니다. 예시 3에서는 id="banner"인 요소에 배경 이미지를 설정하고, 배경이미지의 크기를 커버하도록 설정합니다.
이번 절에서는 선택자와 속성, 값의 역할에 대한 예시를 설명해보았습니다. 선택자는 원하는 HTML 요소를 검색하는 역할을 하며, 속성과 값은 선택된 요소에 CSS 스타일을 적용하는 데 사용됩니다. 이를 통해 웹 페이지의 디자인과 레이아웃을 제어할 수 있습니다.
CSS 선언방식
CSS 선언 방식은 CSS 속성과 값을 지정하는 방법을 의미며 약 3가지 선언 방식이 있습니다. 패스트캪퍼스 강의에서는 3번째 선언 방식을 사용하는 것으로 별도의 main.css 파일을 만들어서 HTML 문서와 연결해 주는 방법을 사용하고 있습니다. 익숙해지면 1번과 2번 방식을 사용하는 것도 생각해 봐야겠네요.
- 인라인(Inline) 선언: HTML 요소의
style속성을 사용하여 직접 CSS를 지정하는 방식입니다. 아래는 예제코드 입니다.
<p style="color: red; font-size: 16px;">인라인 선언 예시</p>인라인 선언은 특정 요소에 대한 스타일을 직접 지정할 수 있으며 우선순위가 가장 높습니다. 하지만 여러 요소에 동일한 스타일을 적용하기 어려우며 유지보수가 어렵습니다. 따라서 일반적으로는 다른 선언 방식을 선호합니다.
- 내부 스타일(Internal Style) 선언:
<style>태그를 사용하여 HTML 문서 내부에서 CSS를 정의하는 방식입니다. 아래는 예제코드입니다.
<head>
<style>
p {
color: blue;
font-size: 14px;
}
</style>
</head>
<body>
<p>내부 스타일 선언 예시</p>
</body>내부 스타일 선언은 특정 HTML 문서 내에서만 적용되는 스타일을 정의할 수 있습니다. 하지만 다른 HTML 파일에서 동일한 스타일을 재사용하기 어렵고, 큰 규모의 프로젝트에서는 유지보수에 어려움이 있을 수 있습니다.
- 외부 스타일(External Style) 선언: 별도의 CSS 파일을 생성하여 HTML 문서에 연결하는 방식입니다. 아래는 예제코드입니다.
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>외부 스타일 선언 예시</p>
</body>외부 스타일 선언은 CSS 파일을 별도로 관리하여 여러 HTML 파일에서 동일한 스타일을 공유할 수 있습니다. 이는 유지보수와 재사용성을 높여줍니다. 또한 브라우저 캐싱을 통해 성능 이점을 가져올 수 있습니다.
마무리
index.html의 세부 내용을 꾸미기 위해서는 css가 필요한데 이것은 외부 파일로 만들어서 별도로 외부 스타일 선언하는 것이 유리하다는 것을 알았습니다. 또한, 선택자의 역할과 속성을 이용하여 세부적인 꾸미기도 가능한 것을 알았으니 다른 홈페이지나 블로그에서 개발자 모드를 이용하여 어떤 식의 속성이 들어있는지 분석할 능력을 갖추었다고 할 수 있습니다. 이상으로 CSS에 대한 설명을 마치겠습니다.
다음 포스팅에서는 좀 더 자세한 선택자의 종류와 관련된 지식을 제공할 예정이니 기대해 주세요. 감사합니다!
