1. CSS
CSS(Cascading Style Sheets)는 HTML이나 XML로 작성된 문서의 스타일을 정의하는 언어. CSS의 기본 구조는 선택자, 속성, 값으로 이루어져 있다. 이 요소들이 결합되어 HTML 요소의 스타일을 지정한다.
선택자 (Selector)
- 선택자는 스타일을 적용할 HTML 요소를 선택한다. 다양한 유형의 선택자가 있으며, 가장 일반적인 것은 요소 선택자, 클래스 선택자, 아이디 선택자이다.
p {
/* 모든 <p> 요소를 선택 */
}
.className {
/* class="className"을 가진 모든 요소를 선택 */
}
#idName {
/* id="idName"을 가진 요소를 선택 */
}
선언 블록 (Declaration Block)
- 선택된 요소에 적용할 스타일을 정의하는 부분이다. 중괄호 {}로 감싸며, 한 개 이상의 선언으로 구성된다.
p {
color: blue;
font-size: 16px;
}
속성 (Property)
- 스타일의 특정 측면을 정의. 예를 들어, color, font-size, margin 등이 있다.
color: blue; /* 글자 색상을 파란색으로 설정 */
값 (Value)
- 속성에 설정할 값을 지정한다. 각 속성마다 허용되는 값이 다르다.
color: blue; /* 'color' 속성의 값으로 'blue'를 설정 */
CSS 예제
/* 요소 선택자: 모든 <h1> 요소의 스타일을 설정 */
h1 {
color: navy;
font-size: 24px;
text-align: center;
}
/* 클래스 선택자: class="intro"를 가진 모든 요소의 스타일을 설정 */
.intro {
font-family: Arial, sans-serif;
margin: 20px;
}
/* 아이디 선택자: id="main-content"를 가진 요소의 스타일을 설정 */
#main-content {
padding: 10px;
background-color: #f4f4f4;
}
2. CSS 적용 방법
- 인라인 스타일 (Inline Styles)
HTML 요소 내부에 직접 CSS를 작성합니다. style 속성을 사용한다.
<p style="color: blue; font-size: 16px;">This is a paragraph.</p>
- 내부 스타일 시트 (Internal Style Sheet)
HTML 문서의<head>섹션 내에<style>태그를 사용하여 CSS를 작성한다.
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
- 외부 스타일 시트 (External Style Sheet)
별도의 .css 파일에 CSS를 작성하고 HTML 문서에서<link>태그를 사용하여 연결한다.
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
/* styles.css 파일 */
p {
color: blue;
font-size: 16px;
}
3. 인사이트
-
웹 디자인의 핵심 요소 이해
CSS는 웹 페이지의 시각적 표현을 담당하는 핵심 요소이다. HTML로 웹 페이지의 구조를 정의하고, CSS로 스타일을 적용함으로써, 더욱 매력적이고 사용자 친화적인 웹 페이지를 만들 수 있다는 점을 알게 되었다. -
효율적인 코드 관리
외부 스타일 시트를 사용하면 스타일을 한 곳에서 관리할 수 있어, 코드의 재사용성과 유지보수성이 크게 향상된다. 이를 통해 대규모 프로젝트에서도 일관된 디자인을 유지하면서 효율적으로 스타일을 관리할 수 있다. -
구조와 스타일의 명확한 분리
CSS를 통해 HTML의 구조와 시각적 스타일을 분리할 수 있다. 이는 코드의 가독성을 높이고, 협업 시 역할 분담을 명확하게 하며, 유지보수를 더 쉽게 만들어 준다. -
선택자의 중요성
다양한 CSS 선택자를 이해하고 적절히 사용하는 것이 중요하다는 것을 깨달았다. 효율적인 선택자 사용은 성능 최적화에도 기여하며, 특정 HTML 요소에 정확히 스타일을 적용할 수 있게 해준다. -
반응형 디자인의 필요성
CSS 미디어 쿼리를 사용하여 다양한 장치와 화면 크기에 대응하는 반응형 웹 디자인을 구현할 수 있다. 이는 사용자 경험을 향상시키고, 더 많은 사용자에게 접근할 수 있는 웹 페이지를 만드는 데 필수적이다. -
디버깅과 문제 해결 능력
CSS 작성 중 발생하는 문제를 해결하기 위해 Chrome DevTools와 같은 디버깅 도구를 사용하는 능력을 키웠다. 이는 스타일 적용 문제를 신속하게 해결하고, 문제의 원인을 정확히 파악하는 데 큰 도움이 된다. -
CSS 프레임워크 활용
CSS의 기본 개념을 이해한 후, Bootstrap, Tailwind CSS와 같은 CSS 프레임워크를 쉽게 학습하고 활용할 수 있었다. 이러한 프레임워크는 미리 정의된 스타일을 제공하여 개발 속도를 높이고, 일관된 디자인을 유지하는 데 유용하다. -
효율적인 작업 흐름 구축
CSS의 기본 개념을 확실히 이해함으로써, 효율적인 작업 흐름을 구축할 수 있었다. 이는 프로젝트의 규모가 커지더라도 안정적으로 스타일을 관리하고 유지할 수 있게 해준다. -
실습을 통한 역량 강화
이론적인 학습 외에도 다양한 프로젝트에서 CSS를 직접 사용해 보는 것이 중요하다는 것을 깨달았다. 실제 프로젝트를 통해 CSS의 다양한 기능과 테크닉을 익히고, 이를 통해 실무에서의 역량을 강화하고 싶다.
