🔷 CSS
html 요소에 스타일을 지정할 때 사용 (html만으로는 꾸미기가 어렵다)
어떻게 입히느냐에 따라 적용 방법이 3가지로 나뉨.
✅ 방법 1. 인라인 스타일 (태그에 직접 작성)
<input type="text" style="width: 50px;">- HTML 태그 안에 style=""로 바로 작성
- 해당 태그 요소에만 적용
- 재사용성이 낮음.
- 적용되는 우선순위는 가장 높음.
✅ 방법 2. 내부 스타일 (HTML 파일 안에 <style> 작성)
<head>
<style>
input {
width: 100px;
height: 50px;
}
</style>
</head>- head 태그 안에 style 태그를 이용
- 해당 페이지에만 적용
- 재사용성이 중간
- 연습할 때 자주 사용
✅ 방법 3. 외부 스타일시트 (CSS 파일 따로 만들어 링크)
test.html :
<head>
<link rel="stylesheet" href="style.css">
</head>
style.css :
input {
width: 100px;
height: 50px;
}- HTML과 CSS를 분리
- 실무에서 가장 많이 쓰이는 방법
- 여러 페이지에 적용 가능.
- 유지보수가 편하다.
- 이미 만들어져 있는 css 파일을 가져와서 연결도 가능
- head 태그 안에 link 태그로 연결하여 사용
✅ 정리
| 방법 | 재사용성 | 우선순위 | 주로 쓰는 곳 |
| 인라인 스타일 | 낮음 | 높음 | 임시테스트, 빠른 수정 |
| 내부 스타일 | 중간 | 중간 | 연습, 데모 페이지 |
| 외부 스타일 | 높음 | 낮음 | 실무, 유지보수 편함 |
'프론트엔드 > CSS' 카테고리의 다른 글
| 선택자(selector) (0) | 2025.06.16 |
|---|