반응형
내부 스타일 시트
웹 문서 안에서 바로 스타일을 사용할 예정이라면, <head> ... </head> 사이에 <style> ... </style> 태그를 만들어 그 안에 작성한다.
외부 스타일 시트
.css 라는 파일 확장자를 사용하여 외부에 별도 파일을 만든다. 웹 문서 안에서는 <head> ... </head> 사이에 아래와 같이 link 태그를 사용하여 css 파일을 연결해 준다.
<link href="외부 스타일 시트 경로" rel="stylesheet" type="text/css">인라인 스타일
해당 태그에 style="속성:속성값;" 형태로 바로 입력이 가능하다.
주요 선택자
전체선택자 : *{속성:속성값; 속성:속성값; ...} → 모든 요소에 스타일 적용
태그선택자 : 태그{스타일} → 특정 태그를 사용한 요소에 스타일 적용
p{font-size:24px; font-family:굴림;}클래스선택자 : .클래스명{스타일} → 특정 클래스에 스타일 적용
아이디선택자 : #아이디명{스타일} → 특정 아이디에 스타일 적용
그룹선택자 : 이름1, 이름2{스타일} → 둘 이상 요소에 같은 스타일 적용
h1, h2{text-align:center;}반응형
'퍼블리싱 & 프론트엔드 > html & CSS' 카테고리의 다른 글
| border-collapse 이용하여 div 테두리 겹침 제거 (0) | 2020.09.18 |
|---|---|
| 텍스트 관련 CSS (0) | 2020.09.12 |
| 폰트 관련 CSS (0) | 2020.09.11 |
| CSS 여백 margin(마진) 속성 이해하기 (0) | 2020.08.29 |
| CSS 기초 - style 태그, 선택자 (0) | 2020.05.31 |
댓글