1) CSS 소개
◆ CSS와 HTML
CSS는 Cascading Style Sheets의 약자로, 간단히 이야기하면 HTML(마크업 언어)을 꾸며주는 표현용 언어다. HTML이 문서의 정보, 구조를 설계한다면 CSS는 문서를 보기 좋게 디자인하는 역할을 하고, 마크업 문서인 HTML 자체가 존재하지 않으면 CSS는 무용지물이다.
2) CSS 문법과 적용
◆ CSS 구문
h1 { color: yellow; font-size: 2em; }선택자(selector) - "h1"
속성(property) - "color"
값(value) - "yellow"
선언(declaration) - "color: yellow", "font-size: 2em"
선언부(declaration block) - "{ color: yellow; font-size:2em; }"
규칙(rule set) - "h1 { color: yellow; font-size:2em; }"
◆ 잘못된 CSS
h1 {
color:
yellow;
}선택자와 선언부 사이, 선언과 선언 사이는 앞뒤로 개행을 해도 상관이 없지만, 위 코드와 같이 속성이름과 속성값 사이에는 개행을 하면 안된다.
◆ CSS의 속성(Property)과 HTML의 속성(Attribute)
HTML의 속성은 영어로 attribute이고, CSS의 속성은 property이지만, 둘 다 한국어로 번역할 때 "속성"이라고 하므로 잘 구분해야한다.
◆ CSS 주석
/* 주석 내용 */
/*
주석은 여러 줄로도
선언 할 수 있다.
*/
◆ CSS의 적용
1. Inline
Inline은 HTML에서 해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법이다. 해당 요소에 직접 입력하기 때문에 선택자는 필요하지 않게 되고, 선언부에 내용만 스타일 속성의 값으로 넣어주면 된다. 그러나 Inline 스타일 방식은 코드의 재활용이 되지 않기 때문에 자주 사용하지 않는다.
<div style="color: yellow;">
내용
</div>
2. Internal
Internal은 HTML 문서에서 <style>을 활용하는 방법으로, <head> 내부에 들어가며 <style> 안에 스타일 규칙이 들어간다. 많은 페이지가 있는 경우에는 모든 페이지에 저마다의 규칙을 선언해줘야 하기 때문에 한계가 있다.
<style>
div {color: yellow;}
</style>위의 코드로 모든 <div>에 같은 스타일을 줄 수 있다.
3. External
External은 외부 스타일 시트인 CSS 파일을 이용하는 방법으로, 별도의 CSS 파일을 만들어 HTML과 연결하는 방식이다.
div {color: yellow;}먼저 위의 코드와 같이 CSS 파일을 만들어서 선언을 한 뒤
<head>
<link rel="stylesheet" href="style.css">
</head>위의 코드와 같이 <head> 내부에 <link>를 선언한 후 href 속성을 이용해 CSS 파일의 경로를 적는다. rel 속성은 연결되는 파일이 문서와 어떤 관계인지를 명시하는 속성으로, CSS 파일은 'stylesheet' 라고 적어야 한다.
이러한 외부 스타일 시트 방식으로 스타일을 선언하면 많은 페이지가 있더라도 <link> 태그를 이용해서, 각각의 HTML 파일에 같은 스타일을 적용할 수 있고, 수정이 필요할 때도 CSS 파일만 수정하면 연결된 모든 페이지에 반영된다.
4. Import
Import는 스타일 시트인 CSS 파일 내에서 다른 CSS 파일을 불러오는 방식이다.
@import url("style.css");https://www.w3schools.com/css/css_howto.asp
How to add CSS
How To Add CSS When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. Three Ways to Insert CSS There are three ways of inserting a style sheet: External CSS Internal CSS Inline CSS External CSS
www.w3schools.com
https://www.edwith.org/boostcourse-cs-htmlcss/joinLectures/33592
[부스트코스] 비전공자를 위한 HTML/CSS 강좌소개 : edwith
- 부스트코스
www.edwith.org
위 2개의 내용은 부스트코스 무료 강의에서 들을 수 있다🥰
#HTML #CSS #HTMLCSS #HTML문법 #HTML태그 #HTML속성 #HTML태그중첩 #HTML빈태그 #HTML주석 #HTML문서구조 #HTML공부 #HTML연습 #HTML기초 #CSS문법 #CSS구문 #inline #internal #external #import #제목태그 #콘텐츠모델 #시멘틱웹 #시멘틱마크업 #HTML5 #HTML5시멘틱 #block #inline #h1 #단락태그 #p #개행 #br #텍스트표현태그 #앵커 #a #href #target #내부링크 #div #span #ul #ol #dl #img #src #alt #상대경로 #절대경로 #gif #jpg #png #table #tr #th #td #caption #thead #tbody #tfoot #colspan #rowspan #form #input #text #password #radio #checkbox #file #submit #reset #button #image #select #textarea #label #fileset #legend #article #aside #figure #figcaption #header #main #footer #mark #nav #section #summary #time #코딩 #코딩공부 #코딩연습 #코딩독학 #비전공자 #부스트코스 #부스트코스HTML #부스트코스강의
'Programming > HTML, CSS' 카테고리의 다른 글
| [HTML/CSS] CSS - 문서 구조와 가상 선택자 (0) | 2020.08.09 |
|---|---|
| [HTML/CSS] CSS - 선택자 (0) | 2020.08.08 |
| [HTML/CSS] HTML - 콘텐츠 모델, 시멘틱 마크업, HTML5 시멘틱 요소, Block-level & Inline-level (0) | 2020.08.03 |
| [HTML/CSS] HTML Form 요소 2 - <select>, <option>, <textarea>, <label>, <fieldset>, <legend> (0) | 2020.08.02 |
| [HTML/CSS] HTML Form 요소 1 - <form>, <input> type = "text", "password", "radio", "checkbox", "file" (0) | 2020.08.01 |
댓글