오늘은 HTML에 CSS적용에 대해 알아보려고 한다.
웹 문서(HTML)에 CSS로 디자인 적용 방법
① 인라인 (Inline CSS) - HTML 태그에 직접 적용
② 내부 스타일 시트(Internal CSS) - <head> 태그에 스타일 정의
③ 외부 스타일 시트(External CSS) - 별도 파일 호출
1. 인라인 (Inline CSS)
HTML 본문, 각 태그에 직접 CSS 코드를 입력하는 방식
html 태그 안에 style 속성을 직접 지정
장점: 가장 직관적이기 때문에 초보자 입장에서 익숙하고 편함
but CSS가 생긴 이유? 태그마다 스타일을 지정하는 것이 복잡하고 번거로움( Inline 방식)
2. 내부 스타일 시트(Internal CSS)
HTML 문서는 <head>와 <body>로 구성
<head>는 웹 페이지에는 직접 표시되지 않는 부분
내부 스타일 시트는 <head> 태그 안에 CSS 코드를 입력
<head> 태그 안에 <style> 태그 입력 - <style> 태그 안에 디자인 관련 코드 입력
장점: 한 곳에 관련 코드가 모여 있기 때문에 하나의 웹 페이지의 스타일 확인하거나 수정할 때 효율적
but 웹 페이지가 여러 개일 때는 페이지마다 스타일을 고쳐야 하는 불편함 있음
3. 외부 스타일 시트(External CSS)
외부 스타일 시트는 HTML 파일 밖에 CSS 코드를 작성하는 방식
HTML 파일과 다른, 별도의 파일을 만들어 CSS로 스타일을 정의
그런 후 HTML 파일에는 CSS 파일을 불러올 수 있도록 파일 경로만 지정
CSS를 HTML에서 완전히 분리하여 외부 파일에 저장하고 연결만 함
장점: HTML 파일이 몇 개든지, 같은 스타일이라면 하나의 CSS 파일만 만듦
수정할 때 하나의 CSS 파일만 고치면 되니, 관리 편리함
초보자에게는 어렵지만, CSS를 사용할 때 권장하는 방법
나는 우연히 성공한 것이 아니라 꾸준한 노력으로 성공한 것이다.
-어니스트 헤밍웨이-
'일과공부' 카테고리의 다른 글
| [드론 기초] ① 드론(UAVs)이란? (0) | 2021.08.06 |
|---|---|
| [HTML/CSS 기초 강의] ⑬ 선택자 selector (0) | 2021.08.06 |
| [HTML기초강의] ⑪ 순서있는 <ol>,목록중첩 (0) | 2021.08.04 |
| [HTML 기초 강의] ⑩ 순서 없는 <ul>, <li> 태그 (0) | 2021.08.03 |
| [HTML 기초 강의] ⑨동영상 삽입 iframe video (0) | 2021.08.03 |
