h1{
color: blue;
}
h1 : '무엇을' 바꾸고싶은지 명령하는 부분
color: -> 지정한 부분을 '어떻게' 바꿀 것인지 명령하는 부분
**HTML에서 h1은 '태그', CSS에서 h1은 '요소'라고 불린다. 용어가 헷갈릴 수 있으니 주의!
h1{
color: red;
}
p, li{
color: blue;
font-size: 20px;
}
h1 요소는 빨간색, p와li 요소는 파란색 20픽셀 크기로. 이렇게 각각 지정이 가능하다.
원하는 요소만 바꾸기 -> id속성 사용
<html>
<head></head>
<body>
<h1>CSS기초</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
<p>열심히</p>
<p>같이 해요</p>
</body>
</html>
id속성을 이용하면 부분적으로 바꾸기가 가능하다.
<li id="first"> HTML</li>로 작성하면 HTML은 first id값에 지정되었다. 이를 CSS에서
#first{
color: red;
font-size: 40px;
}
로 작성하게 되면 CSS와 Javascript는 파란색에 20픽셀 크기, HTML은 빨간색에 40픽셀 크기로 출력된다.
CSS를 HTML에 적용시키는 방법
1. Inline Style Sheet
<p style="color: blue">Inline Style Sheet.</p>p요소의 글자를 파란색으로 만든다. 꾸미는데 한계가 있으며 재사용이 불가하다.
2. Internal Style Sheet
<style>
h1 {
color: blue;
}
</style>HTML문서에 <style> 태그를 사용한다. 보통 <head> 태그에 많이 넣으나, HTML문서 어디에 넣어도 잘 작동한다.
해당 HTML문서에만 적용할 수 있다.
3. Linking Style Sheet
별도의 CSS파일을 만들고 HTML문서와 연결하는 방법
h1 {
color: red;
}위의 코드를 적은 CSS파일을 style.css로 만들다.
<link rel="stylesheet" href="style.css">위의 코드를 HTML문서에 추가해준다. 위의 코드는 HTML파일과 CSS파일이 같은 파일에 있다고 가정하고 넣은 코드이다. 만약 CSS파일이 css폴더에 들어있다고 하면 코드는 다음과 같이 수정되어야 한다.
<link rel="stylesheet" href="css/style.css"><link>태그
<link>태그는 외부의 문서를 연결시켜주는 태그이다. <head>태그에 넣어준다.
1. href : 연결할 곳의 주소(상대주소, 절대주소 모두 가능)
2. rel : 현재문서와 연결된 문서와의 관계표시
3. type : 연결 문서의 MIME유형 (href속성이 설정될 때만 사용)
*MIME는 전자 메일 전송을 위한 인터넷 표준이었으나 현재는 웹에서 내용 유형(content type)을 말할 때 자주 쓰임
css파일의 경우 text/css
js파일의 경우 text/javascript
xml파일의 경우 application/xml
이외의 MIME type종류는 여기서 참조
4. media : 연결 문서가 표시될 장치 또는 미디어 유형
참조사이트
[html/css]외부 문서를 연결하는 link 태그 사용법 (tistory.com)
[html/css]외부 문서를 연결하는 link 태그 사용법
[html/css]외부 문서(css)를 연결하는 link 태그 사용법 며칠 전 font-family 속성을 다루면서 [html/css] 글꼴을 지정하는 font-family 속성(serif, sans-serif차이) 외부 스타일시트를 연결하는 태그에 배웠었죠..
aboooks.tistory.com
CSS / CSS를 HTML에 적용시키는 방법 – CODING FACTORY
CSS / CSS를 HTML에 적용시키는 방법
HTML에 CSS를 적용시키는 방법은 세가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 택합니다. Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣는 방법입니다. Internal Sty
www.codingfactory.net
이후에 css명령어를 찾으려면 아래의 링크에서 찾자
'바닐라코딩 사전학습 > CSS' 카테고리의 다른 글
| CSS 레이아웃 (0) | 2021.11.24 |
|---|---|
| CSS 선택자 (0) | 2021.11.24 |