1. 웹 브라우저의 내장 개발자 도구
1.1 주요 기능
현대 웹 브라우저(크롬, 파이어폭스, 사파리 등)는 다음과 같은 개발자 도구(DevTools) 를 내장하고 있습니다.
- HTML과 CSS를 실시간으로 확인하고 수정할 수 있음.
- 에러 메시지와 로그 확인: JS 오류나 네트워크 요청 관련 에러를 쉽게 파악.
- 네트워크 통신 분석: 페이지 로딩 속도나 서버 요청 및 응답을 확인.
- 성능(Performance) 평가: 페이지 로딩 속도, 메모리 사용 등을 모니터링.
- 저장소(Storage): 쿠키, 로컬 스토리지, 세션 스토리지에 저장된 데이터 확인.
1.2 사용 예제
- 실시간 CSS 수정
- 예:
background-color를 여러 색상으로 바꿔 보면서 디자인 테스트를 할 수 있습니다.
- 예:
- 콘솔(Console) 활용
- 예:
console.log()로 JavaScript 코드가 제대로 동작하는지 확인하고 디버깅.
- 예:
- 네트워크(Network) 탭
- 예: 서버로 보낸 요청(
Request)과 받은 응답(Response) 헤더/바디를 면밀히 검사.
- 예: 서버로 보낸 요청(
추가 팁
- 단축키(F12 또는 Ctrl+Shift+I 등)를 사용하면 개발자 도구가 빠르게 열립니다.
- 모바일 화면 테스트, 성능 분석, Lighthouse 리포트(크롬) 등 확장 기능도 자주 활용됩니다.
2. CSS 기본 개념: 선택자와 선언
2.1 CSS 구조
CSS는 크게 선택자(selector) 와 선언(declaration) 의 조합으로 이루어집니다.
선택자 {
속성: 값;
속성: 값;
}
- 선택자(Selector): 어떤 HTML 요소에 스타일을 적용할지를 지정.
- 선언(Declaration):
속성(Property): 값(Value);형태로, 무엇을 어떻게 스타일링할지 정의합니다.
2.2 선택자와 속성, 값의 관계
p {
color: white; /* 텍스트 색상을 흰색으로 설정 */
font-size: 15px; /* 폰트 크기를 15px로 설정 */
}
p라는 선택자에 대해 텍스트 색상과 폰트 크기를 정의한 예시.color,font-size가 각각 속성,white,15px는 값입니다.
추가 설명
- CSS를 처음 배울 때는 선택자 유형(태그 선택자, 클래스 선택자, 아이디 선택자, 후손/자식 결합자 등)을 함께 숙지하면 좋습니다.
- 속성과 값은 박스 모델(width, height, margin, padding, border)부터 타이포그래피(font-family, text-align)까지 매우 다양하므로, 필요에 따라 찾아보며 익히는 것이 중요합니다.
3. HTML의 Class와 ID 속성
HTML 요소에 클래스(Class) 와 아이디(ID) 속성을 부여하면, CSS 및 JavaScript에서 해당 요소를 쉽게 식별하고 다룰 수 있습니다.
3.1 Class 속성
- 사용 목적: 여러 요소에 동일한 스타일(또는 기능)을 적용하고자 할 때.
- 특징:
- 하나의 요소에 여러 개의 클래스를 동시에 부여 가능
- 하나의 클래스를 여러 요소에 재사용 가능
예제
<p class="highlight">이 텍스트는 하이라이트됩니다.</p>
.highlight {
background-color: yellow; /* 배경색을 노란색으로 지정 */
}
class="highlight"를 지정한 요소는 모두 노란색 배경색을 갖게 됩니다.
3.2 ID 속성
- 사용 목적: 문서 내에서 고유한 식별자를 지정해야 할 때.
- 특징:
- 문서 내에서 해당 ID는 중복되면 안 됨(유일)
- CSS에서
#idName형태로 접근, JavaScript에서도document.getElementById('idName')로 직접 선택 가능
예제
<p id="introduction">이 텍스트는 서문입니다.</p>
css
복사편집
#introduction {
color: blue; /* 텍스트 색상을 파란색으로 지정 */
}
id="introduction"인 요소는 유일하므로, 이 요소만 특별히 다른 스타일을 줄 수 있습니다.
추가 팁
- 실제 프로젝트에서는 클래스 선택자를 주로 사용하고, ID는 페이지 내 한두 개 정도의 고유한 요소(헤더, 메인 콘텐츠, 특정 폼 등) 스타일을 지정하거나 JavaScript에서 스크롤 위치를 이동시킬 때 등을 위해 사용합니다.
4. CSS 선택자와 결합자
복잡한 구조의 HTML에서 특정 영역만 스타일링하고 싶다면, 선택자를 결합하여 보다 정교하게 지정할 수 있습니다.
4.1 자식 결합자 (>)
div > p {
color: blue;
}
div의 직계 자식인p요소만 선택합니다.div내부에 있긴 하지만 여러 단계를 거쳐 내려가는 후손이 아니라, 바로 한 단계 아래에 있는p만 적용됩니다.
4.2 후손 결합자 (공백)
div p {
color: blue;
}
div요소 안에 들어 있는 모든p를 선택합니다(직계 자식뿐만 아니라 손자, 증손자 등 모든 후손 포함).
추가 설명
- 이외에도 형제 결합자(+), 일반 형제 결합자(~) 등이 있습니다. 예:
h1 + p,h1 ~ p- 결합자를 적극적으로 활용하면 반복적인 스타일 정의를 줄이고, 의미론적 구조를 유지한 채 세부 요소만 골라 스타일링할 수 있어 유지보수에 좋습니다.
5. 마무리 및 추가 팁
- DevTools 습관화
- 웹 페이지 이상 동작 시 가장 먼저 F12를 눌러 Console 로그와 네트워크 요청을 확인해 보세요.
- CSS 기초
- 선택자, 속성, 값을 자유자재로 다루기 위해서는 박스 모델(margin, padding, border) 과 레이아웃(Flexbox, Grid) 개념부터 확실히 익히는 것이 좋습니다.
- Class vs ID
- Class는 재사용이 용이, ID는 문서 내 고유성 강조.
- 유지보수와 협업을 위해 ID를 남발하지 않는 것이 일반적입니다.
- CSS 결합자
- 구조가 복잡해질수록, 효율적인 선택자를 활용해 중복 스타일을 줄이고 명확도를 높이는 것이 중요합니다.
추가로 알아두면 좋은 것들
- CSS 모듈화/설계: BEM(Block, Element, Modifier) 방식, OOCSS(객체 지향 CSS) 등
- 사전 설계: 큰 규모의 프로젝트를 다룰 때는 디자인 가이드를 먼저 잡고, 전반적인 스타일 구조를 설계해두면 추후 작업이 편리합니다.
- 경량화와 최적화: 불필요한 CSS, JS 호출을 최소화하고, 이미지는 용량을 줄여 빠른 로딩 속도를 유지하세요.
이상으로, 웹 브라우저 개발자 도구 활용부터 CSS 선택자/결합자, 그리고 HTML Class/ID 속성까지 기초를 정리해 보았습니다.
