Dev-Tino 7주차(4):: CSS의 인라인 스타일, 내부 스타일, 외부 스타일
이와 같은 HTML 문서를 꾸미기 위해 CSS 코드를 작성했다..
HTML 문서를 작성했다. 꾸며야한다. 꾸미기 위해서는 CSS를 이용하면 된다는 것을 우리는 알고 있다.
지난 시간에 CSS 선택자와 CSS 문법에 대해 정리하였기 때문이다. CSS, 우리는 다양한 선택자와 클래스를 이용해 개발자가 원하는 범위에 디자인을 적용할 수 있다. 그건 어느 한 요소가 될 수도 있고 전체가 될 수도 있다. 이 다양한 CSS문법… 이것을, 우리는 어디에 달아두어야 할까?
1. 인라인 스타일 (Inline Style)
2. 내부 스타일 시트 (Internal style sheet)
3. 외부 스타일 시트 (External style sheet)
우리는 HTML 문서에 스타일을 적용하기 위해 세 가지 방법 중 하나(혹은 그 이상)를 채택할 수 있다. 지금부터 이 세 가지 방법에 대하여 순서대로 기술해보겠다.
1. 인라인 스타일
인라인 스타일은 HTML의 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법이다. 이는 해당 요소의 종속되어, 해당 요소에만 영향을 미치며 재사용할 수 없다. 태그 내부에 속성으로 ‘style=“color:green”'…과 같은 식으로 사용하면 된다. 이는 다른 스타일보다 우선 순위가 높으나, 이를 수정하기 위해서는 HTML 요소를 직접 수정해야 하기에 유지 보수가 어렵다. 이 스타일은 ’속성':값‘의 형태로 저장하며, 여러개의 스타일을 지정할 때에는 세미콜론으로 구분한다. 한 번 설정된 스타일을 변경하기가 어려우며 스타일 시트를 사용하는 많은 이점을 잃게 된다는 점 때문에 꼭 필요한 경우가 아니라면 사용하지 않기를 추천한다.
이해를 위해 최상단의 코드 중 일부를 가져왔다. div 태그로 문장을 감쌌다. (div의 아이디로 headerDiv가 부여되어있음을 볼 수는 있지만 지금 당장 신경써야 할 부분은 아니다. 이 코드의 div 태그에 background-color:aliceblue과(*배경 색깔) color:blue(*일반적으로 문자열의 색깔), 그리고 padding:10px(*테두리와 컨텐츠 사이의 여백, 자세한 건 ‘웹 페이지 요소’를 검색해보자.), border: 2px solid black(*테두리 설정, border-weight:~; border-style:~; border-color:~;로 따로 지정할 수 있으나, ‘border: width style color‘의 형태로 한 번에 지정할 수도 있다.)를 인라인으로 부여하고 싶다. 그러기 위해서는 div 태그에 style=“… 을 쓰고, 지정하고 싶은 속성 값을 나열한 뒤 (구분은 세미콜론’;‘) 따옴표로 닫아 마무리하면 된다. 다음과 같다.
이를 실행하면 다음과 같은 화면이 출력된다.
이 때, border과 같이 여러가지 속성을 한 번의 정의하는 경우에는 ‘쉼표’ 등이 끼면 문제가 발생한다는 점을 숙지하는 것이 좋다.
인라인 스타일은 ‘유지 관리가 실제로 좋지 않으며’(문서당 동일한 정보를 여러번 업데이트 해야 할 수도 있음) 프리젠테이션 CSS 정보와 HTML 구조 정보를 혼합하여 코드를 읽고 이해하기 어렵게 만든다. 다른 유형의 코드를 분리하여 유지하면 코드 작업을 하는 모든 사람이 훨씬 쉽게 작업할 수 있기에 인라인 스타일의 사용이 지양된다.
2. 내부 스타일 시트
이는 HTML 문서 내에 <style> 태그를 사용하여 CSS 스타일을 적용하는 방식이다. 이렇게 선언된 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있다. 이는 인라인 스타일보다는 우선 순위가 낮으나 외부 스타일보다는 높다. 내부 스타일은 대개 <head></head> 태그 내에 <style></style> 태그를 사용하여 스타일을 지정한다. 이 역시 같은 예시를 들어본다.
이는 위의 인라인 코드와 같은 기능을 수행한다. 내가 기억하기론 style 태그는 어디에 선언하여도 작동은 하였으나, 많은 사이트가 <head></head> 내부에 사용하길 추천하므로 이번에는 head 태그 내에 작성해보겠다. div 태그에 적용할 디자인은 인라인과 같다.
인라인과 달리 내부/외부 스타일 시트를 지정할 때에는 선택자를 이용해야 한다. 이번에는 div 태그의 id headerDiv를 이용해 div 태그를 선택하겠다. id를 선택할 때에는 id 앞에 ‘#’을 붙인다. 아래와 같다.
이를 실행하면 다음과 같은 결과가 나온다.
다른 부분 작성했음에도 불구하고, 인라인 방식과 이 방식은 같은 모양의 디자인을 뽑아낸다. 이는 인라인 방식과 달리 HTML과 CSS가 완벽히 뒤섞여있지 않아. 좋다. inline이 특정 HTML에만 적용된다면 내부 스타일 시트는 <head> 태그가 로드되는 하위의 모든 HTML 페이지에 스타일이 적용되므로 선택자에 대해 잘 알아두어야 한다.
3. 외부 스타일 시트
HTML 문서와는 별개의 파일에서 스타일을 지정하는 방법이다. 스타일을 한 번만 작성하면 여러 HTML 문서에서 적용할 수 있으므로 유지보수가 용이하다. 외부에 작성된 스타일 시트 파일은 ‘.css’의 확장자를 사용하여 저장되며, 스타일을 적용할 웹페이지의 <head></head> 태그에 <link> 태그를 사용하여 외부 스타일 시트를 포함해야만 스타일이 적용된다.
스타일 적용의 우선순위
이 위에서 설명한 스타일 적용 방법이 혼합되어 사용될 경우, 최종적으로 적용되는 스타일은 다음의 순서에 따라 결정된다::
1. 인라인 스타일 (HTML 요소 내부에 위치함)
2. 내부/ 외부 스타일 시트 (HTML 문서의 head 요소 내부에 위치함)
3. 웹 브라우저 기본 스타일
예를 들어 인라인 스타일이 적용된 태크는 내부나 외부 스타일 시트와는 상관 없이 무조건 인라인 스타일이 적용된다. 또한, 내부 스타일 시트와 외부 스타일 시트는 가장 마지막에 적용된 스타일 시트가 적용된다.
각 스타일은 언제 쓰이는가? (개인적 판단)
인라인은 스타일의 규칙이 간단하고 조건에 따라 동적으로 스타일을 변경해야 할 때 유용할 수 있다. (스타일 규칙이 복잡해지거나 여러 요소에 동일한 스타일을 적용해야 할 때 관리가 어렵다.)
내부 스타일 시트와 외부 스타일 시트는 작업 규모가 커지거나, 많은 이들과 작업할 때에 사용하면 좋을 성 싶다.
[참고 자료]
-https://www.tcpschool.com/css/css_intro_apply
-https://giveme-happyending.tistory.com/62
-https://velog.io/@bami/CSS-%EB%A7%88%EC%A7%84margin%EA%B3%BC-%ED%8C%A8%EB%94%A9padding
-https://funnycoderl.tistory.com/entry/css-border-%EC%86%8D%EC%84%B1%EC%9C%BC%EB%A1%9C-%ED%85%8C%EB%91%90%EB%A6%AC-%ED%95%9C-%EB%B2%88%EC%97%90-%EA%BE%B8%EB%AF%B8%EA%B8%B0 (border 한 번에 선언하기)
-https://m.blog.naver.com/dahamee/220501535751
-https://latte-is-horse.tistory.com/38
-https://www.w3schools.com/css/css_howto.asp
-https://no1studycrew.com/study/html-css/css-stylesheet/
-https://developer.mozilla.org/ko/docs/Learn/CSS/First_steps/How_CSS_is_structured
- 카테고리
- #기타
댓글 0
추천 포스트
