개요
아래 내용은 CSS 적용 방법(인라인/내부/외부)과 선택자(selector)의 기본을 정리한 뒤, JavaScript 적용 방법(인라인/내부/외부)과 DOM 로드 순서에 따른 실행 차이를 실습 코드로 한 번에 확인하는 글이다.
CSS란?
CSS(Cascading Style Sheets)는 HTML 요소의 스타일(디자인/레이아웃)을 정의하는 스타일시트 언어다.
HTML 구조(내용)와 CSS(표현)를 분리하면 유지보수와 재사용성이 좋아진다.
CSS는 보통 아래 3요소로 구성된다.
- 선택자(selector): 스타일을 적용할 대상을 지정
- 속성(property): 스타일의 종류
- 값(value): 실제 적용 값
CSS 적용 방법 3가지
인라인 스타일 (style 속성)
HTML 태그에 style=""로 직접 스타일을 준다.
- 장점: 특정 요소만 빠르게 수정 가능
- 단점: 유지보수 어려움, 재사용성이 거의 없음
예제:
<h4 style="color: green;">디자인 적용 방법(1) : 인라인 스타일</h4>내부 스타일 시트 (head 안 style 태그)
<head> 내부의 <style>에 작성해서 문서 전체에 적용한다.
- 장점: 한 문서 내에서 일괄 적용 가능
- 단점: 다른 HTML 문서에서 재사용이 어렵다
예제(일부):
li { color: palevioletred; }
.c1 { font-size: 18px; color: orange; }
#i1 { color: gray; font-weight: bold; }외부 스타일 시트 (link로 css 연결)
별도의 .css 파일을 만들고 <link rel="stylesheet" href="...">로 연결한다.
- 장점: 여러 문서에서 재사용 가능, 유지보수 용이
- 단점: 외부 파일 요청이 추가로 발생
예제:
<link rel="stylesheet" href="css/myStyle.css">선택자(selector) 예제로 감 잡기
태그 선택자
특정 태그 전체에 적용된다.
li { color: palevioletred; }그래서 아래 리스트의 모든 li가 기본적으로 해당 색으로 찍힌다.
<ol>
<li>태그 선택자 적용 예시</li>
...
</ol>클래스 선택자(.class)
class="..."가 붙은 요소에 적용된다.
동일한 클래스를 여러 요소에 재사용할 수 있다.
.c1 { font-size: 18px; color: orange; }
.c2 { text-decoration: underline; }그리고 예제처럼 클래스는 중첩도 가능하다.
<li class="c1 c2">클래스 중첩 적용 예시</li>아이디 선택자(#id)
id="..."에 적용된다.
한 문서에서 id는 보통 유일해야 하며, DOM 접근(JS)에서도 자주 사용된다.
#i1 { color: gray; font-weight: bold; }<li id="i1" class="c1">아이디 선택자 적용 예시</li>
자식 선택자(>)
“직계 자식”만 대상으로 한다.
div > p { color: green; }예제에서 div 바로 아래의 p만 초록색이 된다.
자손 선택자(공백)
“아래에 포함된 모든 후손”이 대상이다.
div section p { color: purple; }즉 div 아래 section 아래의 p는 보라색이 된다.
JavaScript 적용 방법 3가지
인라인 이벤트 핸들러
요소에 onclick="..."처럼 바로 코드를 적는다.
- 장점: 빠르게 테스트 가능
- 단점: HTML과 로직이 섞여 유지보수에 불리
<button onclick="alert('alert 인라인 이벤트 핸들러 실행')">인라인 적용 버튼</button>
내부 스크립트
<script> 태그로 HTML 문서 안에 함수를 정의하고 이벤트에서 호출한다.
예제(Head에 선언된 함수):
<script>
const update = () => { alert('update 함수 실행'); }
const update2 = () => {
document.getElementById("update2").innerHTML = "내용이 변경되었습니다.😍😍😍";
}
</script>예제(Body에 선언된 함수):
<script>
const update3 = () => {
document.getElementById("update3").innerHTML = "내용이 변경되었습니다.😀😀😀";
}
</script>- 변경 전
- 변경 후
외부 스크립트
별도의 .js 파일로 분리한 뒤 src로 연결한다.
<script src="js/myJs.js"></script>이 방식은 여러 페이지에서 재사용하기 좋고 유지보수에도 유리하다.
JavaScript 로드 순서 (head vs body)
HTML은 위에서 아래로 순차적으로 파싱되기 때문에, head에서 DOM을 아직 만들기 전에 document.getElementById(...)를 실행하면 원하는 요소를 못 찾는 문제가 생길 수 있다.
예제의 이 부분이 대표적으로 위험하다.
<script>
document.getElementById("load1").innerHTML = "head에서 선언된 스크립트가 실행되었습니다.";
</script><p id="load1">은 아직 body에 나오지도 않았는데 head에서 접근하려고 하기 때문에, 실행 시점에 따라 오류가 날 수 있다.
반대로 body 아래쪽에서 실행하면 이미 DOM이 만들어진 뒤라 접근이 가능하다.
<script>
document.getElementById("load2").innerHTML = "body에서 선언된 스크립트가 실행되었습니다.";
</script>
실무에서는 보통 다음 중 하나로 해결한다.
- 스크립트를 body 끝에 둔다.
- 또는
DOMContentLoaded이후에 실행되도록 감싼다. - 또는
<script defer src="...">같은 로딩 전략을 사용한다.
