1. 인라인(Inline) 스타일
인라인 스타일은 HTML 요소의 Style 속성을 사용하여 스타일을 지정하는 방법이며
이 방법은 다른 스타일 방법보다 우선순위가 높아 덮어쓰기가 쉬우나 스타일을
수정하려면 모든 HTML 요소를 일일히 수정해야 함으로 유지보수가 어려워진다.그러므로 가능한 사용하지 않는 것이 좋고
인라인 스타일은 아래와 같이 사용한다.
- style 속성 안에 직접 스타일(속성: 값; 형태)을 지정하며
여러 개의 스타일을 지정할 때에는 세미콜론(;)을 사용하여 구분한다.
- 이렇게 지정된 스타일은 해당 <p> 태그 에서만 반영된 것을 볼 수 있다.
1-1. CSS에서 Inline 스타일을 지양하는 이유
- 코드의 재사용성 저하 :
인라인 스타일은 각 요소별 개별적으로 작성되기 때문에 스타일의 재사용이 어렵다.- 유지보수의 어려움 :
인라인 스타일 작성 시 HTML 코드가 길어지며 복잡해지고 가독성이 떨어지게 된다.- 우선순위 관련 문제 발생 가능성 :
다른 스타일 규칙보다 우선 시 되기에 스타일 우선순위 관련 문제가 발생할 수 있다.
2. 내부(Internal) 스타일
내부 스타일은 HTML 문서 내부에 <style> 태그를 사용하여
스타일을 지정하는 방법이며 인라인 스타일에 비해서는 우선순위가 낮지만
외부 스타일 보다는 우선순위가 높다. (내부 스타일은 아래와 같이 사용한다.)
- <style> 시작과 종료 태그 내부에 작성하여 스타일을 지정하고
스타일은 선택자 {속성: 값;} 형태로 지정하며 여러 개의 스타일을 지정할 시
줄바꿈(개행)과 세미콜론(;)을 사용하여 구분한다.
- 아래의 사진과 같이 앞서 설정한 우선순위가 높은 인라인 스타일의 요소를
제외하고 <p> 태그의 배경과 텍스트 색상이 바뀐 것을 확인할 수 있다.
인라인/내부/외부 스타일 참고 블로그3. 외부(External) 스타일
외부 스타일은 HTML 문서와는 별개의 파일에서 스타일을 지정하는 방법이다.
이 방법은 내부 스타일보다 우선순위가 낮지만 인라인 스타일보다 우선순위가 높다.
또한 스타일을 한 번만 작성하면 여러 HTML 문서에서 적용할 수 있어 유지보수가 용이하다.
- 외부 스타일을 적용하려면 스타일을 지정한 CSS 파일을
HTML 문서에 로드해야 하는데 이때 <head>태그 내부에
<link> 태그를 사용하여 CSS 파일을 로드할 수 있다.
- 외부 스타일을 사용 시 스타일을 중복해서 작성하지 않아도 되며 코드의 양을
줄일 수 있게 된다. 또한 CSS 파일만 따로 관리가 가능해 유지보수가 용이하다.
인라인 스타일의 지양 이유 참고 블로그
컴공 편입 폴붕이의 일상
CSS 파일 불러오기에 계속 실패해서 코드 수정 후 사진 추가하겠습니다..