728x90
반응형
SMALL
스타일시트 선언방식 종류
1. 인라인 스타일 방식
2. 내부 스타일 방식
3. 외부 스타일 방식
4. 임포트 방식
1. 인라인 스타일 방식
: 요소 내 style속성으로 스타일 지정
: 태그 안에 style속성 추가 가능
ex) <p style="color:blue;"> 인라인스타일</p>
<사용방법>
2. 내부 스타일
: head요소 내 style요소 생성한 후 스타일 지정
<사용방법>
3. 외부 스타일
: <link> 태그로 외부파일에 접근하여 스타일 지정
ex) <head>
<link rel="stylesheet" href="파일명.css">
</head>
<사용방법>
- .css파일 새로 만들기
- .css파일에 style태그 내에 선언하는것 똑같이 작성
- html head에 link태그 추가
4. 임포트 방식
: 스타일시트 안에 @import 이용해 외부파일의 스타일 지정
ex) @import url(mycss.css);
<사용방법>
- html에서 p태그 생성(+아이디 지정)
- css파일 만들어서 style태그 내부처럼 지정
- html head에 style태그 생성 후 url 지정
스타일시트 우선순위 (!important)
- 인라인 > 내부 > 외부 > 임포트
- id > class > 타입 > 전체
- 내부라고 높은게 아닌, id가 외부에 있어도 id가 우선순위!
- -> 우선순위가 낮은 것을 우선순위로 적용 하고 싶다면 뒤에 !important 선언
- 나중에 선언 > 먼저 선언
상황에 따른 스타일시트 사용법
- 1. 인라인 방식
- : html코드 읽는게 불편 -> 개발 끝나고 급하게 추가할 때 사용
- 2. 내부 스타일
- : 개발 중에 많이 사용
- 3. 외부 스타일 / 임포트 방식
- 개발이 어느정도 마무리가 되고나서, 분리할 때 사용
728x90
반응형
LIST
'스마트인재개발원 > HTML,CSS' 카테고리의 다른 글
| [CSS]z-index/overflow/애니메이션 만들기예제 (1) | 2022.10.05 |
|---|---|
| [CSS]position - static/relative/absolute/fixed 정의, 사용법 (1) | 2022.10.05 |
| [CSS] border/ margin/ padding 예제 (1) | 2022.10.04 |
| [CSS] display(block,inline,inline-block,none )활용도 / grid / 관련 게임 (1) | 2022.10.04 |
| [CSS]계층 선택자 / 반응 선택자 (0) | 2022.10.01 |
