인라인 형식의 링크
개별 태그내에 스타일을 지정하는 방식을 말한다.
- style 속성 내에 내부 속상 값을 : 으로 구분 표기
- 다른 내부 속성과 구분하기 위해 ; 로 표기
- 속성해 대한 값은 "" 으로 표기
<style = " 속성 : 값 ; 속성 : 값 ; 속성 : 값 >
<body style="color:#ff00ff; text-align:center; font-size:32px">
<ol style="color:green; text-align:left;">
캐스케이딩이란 ? (Cascading)
'위에서 아래로 흐르는', '상속 또는 종속하는' 의 의미를 지님.
캐스케이딩은 1. 스타일 우선순위 , 2. 스타일 상속 두가지 원칙을 따름.
-스타일 우선순위
선택자에 적용된 많은 스타일 중 어떤 스타일로 브라우저로 우선순위를 통해 표현할지 결정해주는 원리를 지님.
스타일 우선순위는 1. 중요도 2. 적용범위 3. 소스 순서에 따라 지정된다.
1. 중요도 : 사용자 스타일 시트 > 제작자가 만든 !important 스타일 > 제작자가 만든 일반스타일 > 기본 브라우저
2. 적용 범위 : 인라인 스타일 > ID 스타일 > class 스타일 >태그 스타일
3.소스 순서 : 중요도와 적용범위가 같을경우 나중에 나온 스타일이 먼저 나온 스타일을 덮어씀.
폰트사이즈 % 속성
% 비율 적용은 부모요소에 대한 % 로 수렴하게 된다.
div 요소의 컨텐츠는 부모요소 body 폰트 사이즈의 비율 반영.
p요소는 부모요소 div 에 따른 비율로 적용
<div style="font-size:200%;">div 폰트사이즈
<p style="font-size:50%">문단 폰트사이즈</p>
</div>
내부 링크
head 태그 소속이 style 태그 내에 미리 정한 스타일 속성을 선택자 형식으로 그룹화,
특정 명칭을 개별 태그를 참조하거나 태그들을 선별 그룹화 하여 스타일 지정.
스타일을 정의하는 방식은 크게 3가지로 나눠짐.
- 태그 선택자.
- 클래스 선택자.
- ID 선택자.
하나의 독립된 페이지 내에서만 특정 스타일을 지정하기 위한 목적으로 사용.
<style>
body {
color: #ff00ff;
text-align: center;
}
ol {
color: green;
text-align: left
}
div {
font-size: 200%;
}
#childOfDiv {
font-size: 50%
}
/* div>p {
font-size: 50%
}
*/
</style>
/* head 내에 스타일 지정 */
<body>
<p>Inline Style Sheet</p>
<hr>
<ol>
<li>목록</li>
<li>목록</li>
<li>목록</li>
<li>목록</li>
</ol>
<hr>
<div>div 폰트사이즈
<p id="childOfDiv">문단 폰트사이즈</p>
</div>
</body>
외부링크 CSS
HTML 문서 외부에 정의된 CSS 파일 (확장자 : .css) 을 미리 저장해 두고
head 태그 내의 link 태그를 이용하여 css 파일에 정의된 스타일을 호출하여 가져오는 방식.
공통적인 스타일을 그룹화 함으로서 서로 다른 HTML 문서에 동일한 스타일 적용 가능.
→ 다음 CSS 기초에 대해서 더 자세히 알아보겠다.
'Developer > HTML_CSS' 카테고리의 다른 글
| CSS, 결합자에 대해 알아보자. (0) | 2024.04.14 |
|---|---|
| CSS, 기초와 선택자를 알아보자 (0) | 2024.04.14 |
| HTML ,select 와 option 을 알아보자 (0) | 2024.04.12 |
| HTML, form 과 input (0) | 2024.04.11 |
| HTML, 내부링크, a herf와 이미지를 함께 알아보자 . (0) | 2024.04.11 |