인라인 스타일 이란 ?
인라인 스타일은 간단한 스타일링에 유용하다.
하지만,
여러곳에서 동일한 스타일을 적용 해야 하거나,
복잡한 스타일을 적용하는 경우에는, 외부로 CSS 파일을 사용 하는게 좋다.
1. 코드 확인 하기.
<h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">시크릿주주 / </span>[ 관리자 페이지 - 회원 관리 ]</h4>
2. 웹 브라우저 확인 하기.
3. 코드 정리 하기.
1) <h4> 태그
<h1>, <h2> , .. <h6> 까지 있으며,
해당 태그는 HTML 에서 제목을 표현하는 태그 중 하나 이다.
h는 Heading 을 의미 한다.
숫자가 커질수록 더 작은 제목을 나타낸다.
2) class = "fw-bold py-3 mb-4"
HTML 요소에 클래스를 지정 하고,
클래스를 지정하여 해당 요소에 스타일을 적용 하는 코드 이다.
fw-bold : 글꼴을 굵게 표시하는 스타일을 적용.
py-3 : 상하 여백 (padding) 을 지정.
mb-4 : 아래쪽 여백 (margin-bottom) 을 지정.
3) class = "text-muted fw-light"
text-muted 와 fw-light는 부트스트랩 CSS 프레임워크 에서 사용되는 클래스 이다.
부트스트랩은 웹 개발을 간편하게 하기 위해 미리 정의된 스타일과 구성 요소를
제공하는 프레임워크로,
웹 페이지의 디자인과 레이아웃을 쉽게 구축할 수 있도록 도와 준다.
text-muted :
텍스트의 색상을 무채색 또는 회색 계통의 색상으로 변경 한다.
무효화된 텍스트를 나타낼 때, 주로 사용 한다.
정보를 강조 하지 않을 때 사용하고,
사용자에게 중요 하지 않은 텍스트임을 시각적으로 나타내는 역할을 한다.
fw-light :
텍스트의 글꼴 두께를 가벼운 스타일로 변경할 때 사용 한다.
가볍게 표시된 텍스트는 일반 텍스트보다 얇고 가벼운 글꼴로 표시 되어,
시각적으로 더 부드럽게 보이게 한다.
4. 개념 정리하기
위의 코드는 <h4> 태그 내부에, class 속성을 사용 해서,
부트스트랩의 클래스를 적용하고,
style 속성을 사용하여 직접 스타일을 지정 했다.