CSS 기초

Ryan·2025년 1월 28일

Python/Pandas

목록 보기

8/23

1. 웹 브라우저의 내장 개발자 도구

현대 웹 브라우저(크롬, 파이어폭스, 사파리 등)에는 개발자 도구(DevTools)가 내장되어 있습니다. 웹 페이지 제작과 디버깅에 꼭 필요한 강력한 도구입니다.

주요 기능

HTML과 CSS를 실시간으로 확인, 수정: 요소(Elements) 탭에서 DOM 구조와 CSS 스타일을 직접 변경해볼 수 있습니다.
에러 메시지와 로그 확인: 콘솔(Console)에서 JavaScript 오류나 디버그 메시지를 볼 수 있습니다.
네트워크 통신 분석: Network 탭에서 서버 요청과 응답, 로드 시간, 캐싱 여부 등을 확인할 수 있습니다.
웹 페이지 성능 평가: Performance 또는 Lighthouse 탭을 통해 페이지 로딩 속도와 성능을 측정합니다.
쿠키, 로컬 스토리지, 세션 스토리지 확인: Application(또는 Storage) 탭에서 웹 스토리지와 쿠키 관리를 할 수 있습니다.

사용 예제

디자인 테스트: CSS 속성을 변경하면서 레이아웃, 색상, 글꼴 크기 등을 실시간으로 조정해볼 수 있습니다.
콘솔(Console) 활용: 자바스크립트 코드를 빠르게 실행해 오류나 변수를 확인할 수 있습니다.
네트워크(Network) 탭: 특정 요청이 실패했는지, 혹은 얼마나 시간이 걸렸는지 확인하여 서버 문제나 로딩 속도 문제를 파악할 수 있습니다.

추가 팁

단축키(예: 크롬에서 F12, 파이어폭스에서 Ctrl+Shift+I 등)를 이용하면 개발자 도구를 빠르게 열 수 있습니다.

반응형 디자인을 테스트하기 위해 ‘디바이스 모드(Device Mode)’로 화면 크기를 조절해볼 수 있습니다.

2. CSS 기본 개념: 선택자와 선언

CSS는 선택자(Selector)와 선언(Declaration)으로 이뤄져 있습니다.

선택자: 어떤 요소에 스타일을 적용할지 지정.
선언: { 속성: 값; 속성: 값; } 형태로, 해당 요소에 적용할 구체적인 스타일을 정의.

구조


선택자 {
  속성: 값;
  속성: 값;
}

선택자(Selector): HTML 요소, 클래스(.classname), ID(#idname) 등을 가리킵니다.
속성(Property): 어떤 스타일(예: 색상, 크기, 여백 등)을 적용할지 정의합니다.
값(Value): 속성의 구체적인 설정값입니다. 예: color: red; font-size: 16px;

예제


p {
  color: white;
  font-size: 15px;
}

위 예제는 문서 내 모든  요소의 텍스트 색상을 흰색, 글자 크기를 15px로 지정합니다.

추가 설명

CSS를 효과적으로 작성하려면, 선택자를 간결하고 명확하게 지정하는 것이 좋습니다. (예: section ul li처럼 너무 긴 선택자보다는 .메인리스트 li 등으로 관리하기 편한 구조를 만들기)

여러 속성을 적용할 때, 가독성을 위해 줄을 잘 구분하고 주석을 달면 협업이 쉬워집니다.

3. HTML의 Class와 ID 속성

HTML 요소에 클래스(class)와 아이디(id) 속성을 부여하면, CSS나 JavaScript와 연계해 특정 요소를 스타일링하거나 조작할 수 있습니다.

Class 속성

사용 목적: 여러 요소에 같은 스타일이나 기능을 적용할 때 사용.
특징:
1. 한 요소에 여러 클래스를 부여할 수 있습니다. 예: ...
2. 하나의 클래스를 여러 요소에 반복적으로 적용할 수 있습니다.

예제


<p class="highlight">이 텍스트는 하이라이트됩니다.</p>


.highlight {
  background-color: yellow;
}

"highlight" 클래스를 부여한 모든  요소를 노란 배경색으로 표시합니다.

ID 속성

사용 목적: 해당 요소를 문서에서 고유하게 식별해야 할 때 사용.
특징:
1. 하나의 문서 안에서 ID는 유일해야 합니다(중복 불가).
2. 주로 JavaScript에서 특정 요소를 선택해야 할 때나, 앵커 링크(#introduction) 등을 사용할 때 활용됩니다.

예제


<p id="introduction">이 텍스트는 서문입니다.</p>


#introduction {
  color: blue;
}

"introduction"이라는 ID를 가진 요소는 파란색 텍스트로 표시됩니다.

추가 팁

클래스는 여러 곳에서 반복 적용 가능하므로, 자주 쓰이는 디자인 패턴(버튼 스타일 등)에 주로 활용합니다.

ID는 단 하나의 요소를 특정 지을 때만 사용하고, 너무 남발하지 않는 것이 좋습니다(협업, 유지보수에 유리).

4. CSS 선택자와 결합자

HTML 구조가 복잡해지면 단순히 요소나 클래스만으로는 스타일을 세밀하게 적용하기 어려울 수 있습니다. 이때 결합자(Combinator)를 사용해 조건부로 요소를 선택할 수 있습니다.

결합자의 종류

자식 결합자 (>)
- 특정 요소의 직계 자식만 선택할 때 사용합니다.
```
div > p {
 color: blue;
}
```
- div 태그 바로 아래에 있는  태그만 스타일 적용됩니다.
후손 결합자 (공백)
- 특정 요소의 모든 후손(자식, 자식의 자식, 그 이하)을 선택합니다.
```
div p {
 color: blue;
}
```
- div 태그 내부에 있는 모든  태그에 스타일이 적용됩니다.

추가적인 결합자

형제 결합자(+): 같은 레벨에서 바로 다음에 오는 형제 요소를 선택합니다.

일반 형제 결합자(~): 같은 레벨에서 뒤에 오는 모든 형제 요소를 선택합니다.이런 결합자들은 레이아웃이 복잡해질수록 유용하게 활용됩니다.

5. 정리 및 추가 팁

웹 브라우저 개발자 도구: 실시간으로 HTML/CSS를 수정해보고, JS 오류를 확인하는 강력한 도우미입니다.
CSS 기본 구조(선택자, 선언): 선택자를 정확히 설정하고, 속성: 값 쌍을 효율적으로 관리하세요.
HTML Class & ID:
- Class: 반복되는 스타일(또는 기능)에 적합.
- ID: 문서에서 유일해야 하며, 특정 요소를 식별할 때 사용.
CSS 결합자: 자식, 후손, 형제 관계 등을 통해 더 섬세하게 요소를 선택할 수 있습니다.
실무 활용:
1. 클래스와 ID를 혼합하여 사용하되, ID를 너무 많이 남발하지 않도록 주의합니다.
2. 개발자 도구로 디버깅 → 수정사항을 CSS/HTML에 반영하는 반복 과정을 거치면서 레이아웃과 스타일을 빠르게 다듬을 수 있습니다.