CSS 기본 사용법
- CSS는 웹 문서에 폰트, 색상, 정렬 등 디자인 요소들을 적용하는데 사용하는 스타일 언어다
- 어떤 HTML 태그에 스타일을 적용할지 정하는데 필요한 선택자(Selector)와 속성, 속성 값으로 구성된다
- 대상을 정했다면 속성을 적고 콜론 뒤에 속성 값을 적고 세미콜론으로 스타일 적용을 마무리한다
p {color : blue;}
CSS 사용 용법
*CSS의 용법은 크게 3가지가 있다*
1. HTML 태그에다가 그대로 집어넣어 사용하는 인라인 (in-line) 방식
우선 인라인 방식은 태그 내부에 코드를 작성하면 되는데 이렇게 하면 일종의 지연 변수처럼 작동되기 때문에 해당 CSS 코드를 재활용 할 수 없다는 점이 있다.
<p style="color: blue; font-size: 20px;">
2. HTML 문서 내부에다 작성해 사용하는 내부 스타일 시트 방식 (개인적으로는 이게 제일 편했다)
3주 뒤의 나 : 아니다 외부가 훨씬 편하다...
몇 달 뒤의 나 : 결국 이것저것 다 쓰게되었다.
예를 들어 아래의 <p> 태그에 파란색을 입히고 싶다면
<p> 나를 푸른색으로 물들여줘 </p>
HTML 파일 내부에 <style> 이라는 별도의 공간을 만들고 원하는 태그에 원하는 선택자를 설정해준 후 그 선택자를 <style> 부분에 적어 넣는 방식이다.
<style>
#bluetext{
color: blue;
}
</style>
<p id="blue"> 나를 파란색으로 물들여줘 </p>
<!-- 여기서 선택자란 id 가 되겠다! -->해당 코드에서는 id 선택자를 이용해 CSS를 적용해봤다.
3.아예 외부에 별도의 CSS파일을 작성해 HTML에서 불러오는 외부 스타일 시트 방식이 있다.
<link rel="stylesheet" href="외부CSS코드.css">
<body>
<p>외부 스타일 시트</p>
</body>해당 HTML 코드 속 <p> 태그에 외부 CSS를 적용하고 싶다면
<link rel="stylesheet" href="외부 CSS 파일명">
<head> 부분에 해당 코드를 작성해주면 외부CSS 파일과 HTML이 연결되어 CSS가 적용되는 것이다.
p3 {
color : green;
background-color : yellow;
}위 HTML코드에서 불러온 CSS코드의 내용이다
'웹프로그래밍 > CSS 3' 카테고리의 다른 글
| CSS - Background와 Transition (0) | 2024.08.06 |
|---|---|
| CSS - 레이아웃 속성과 flex (0) | 2024.08.05 |
| CSS - 폰트 설정 (0) | 2024.07.31 |
| CSS - 박스 모델 (0) | 2024.07.30 |
| CSS - 선택자 (0) | 2024.07.29 |