◈ CSS를 사용하기 전에는 디자인 관련 HTML 태그와 속성을 사용하여 웹문서 작성
→ 웹문서 작성에 대한 생산성 및 유지보수의 효율성이 낮음
📃01_old.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS</title> </head> <body> <!-- CSS를 사용하기 전에는 디자인 관련 HTML 태그와 속성을 사용하여 웹문서 작성 --> <!-- → 웹문서 작성에 대한 생산성 및 유지보수의 효율성이 낮음 --> <h1 align="center">Old Style</h1> <hr> <p><font size="5" color="red">브라우저에 출력될 아주 중요한 내용입니다.</font></p> <p><font size="5" color="green">브라우저에 출력될 아주 중요한 내용입니다.</font></p> <p><font size="5" color="red">브라우저에 출력될 아주 중요한 내용입니다.</font></p> <p><font size="5" color="green">브라우저에 출력될 아주 중요한 내용입니다.</font></p> <p><font size="5" color="red">브라우저에 출력될 아주 중요한 내용입니다.</font></p> </body> </html>
🐧CSS
CSS(Cascading Style Sheets) : HTML 언어로 작성된 웹문서에 모양과 서식을 제공하기 위한 스타일 시트 언어
📌style 태그 : 웹문서에 작성된 태그(박스모델)에 CSS 스타일을 적용시키기 위한 태그
<style type="text/css">
/* CSS 주석문 */ /* Selector[,Selector,...][:padio-class] { Property: Value [Value Value ...]; Property: Value [Value Value ...]; ... } */
🥎선택자(Selector) : 태그(박스모델 - 엘리먼트 : Element)를 선택하기 위한 표현식
h1 { text-align: center; } p { font-size: 30px; color: red; } p:nth-child(2n) { color: green; }
◈ HTML의 태그(박스모델)를 이용하여 웹문서를 구성하고 CSS를 사용하여 태그의 디자인을 적용
→ 웹문서 작성에 대한 생산성 및 유지보수의 효율성 증가
📃02_css.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS</title> <!-- style 태그 : 웹문서에 작성된 태그(박스모델)에 CSS 스타일을 적용시키기 위한 태그 --> <style type="text/css"> /* CSS 주석문 */ /* Selector[,Selector,...][:padio-class] { Property: Value [Value Value ...]; Property: Value [Value Value ...]; ... } */ /* 선택자(Selector) : 태그(박스모델 - 엘리먼트 : Element)를 선택하기 위한 표현식 */ h1 { text-align: center; } p { font-size: 30px; color: red; } p:nth-child(2n) { color: green; } </style> </head> <body> <!-- CSS(Cascading Style Sheets) : HTML 언어로 작성된 웹문서에 모양과 서식을 제공하기 위한 스타일 시트 언어 --> <!-- HTML의 태그(박스모델)를 이용하여 웹문서를 구성하고 CSS를 사용하여 태그의 디자인을 적용 --> <!-- → 웹문서 작성에 대한 생산성 및 유지보수의 효율성 증가 --> <h1>CSS Style</h1> <hr> <p>브라우저에 출력될 아주 중요한 내용이니다.</p> <p>브라우저에 출력될 아주 중요한 내용이니다.</p> <p>브라우저에 출력될 아주 중요한 내용이니다.</p> <p>브라우저에 출력될 아주 중요한 내용이니다.</p> <p>브라우저에 출력될 아주 중요한 내용이니다.</p> </body> </html>
🐧CSS 스타일의 단계적 적용과 상속
◈ 부모 엘리먼트에 적용된 스타일은 자식 엘리먼트에 상속되어 적용
→ 자식 엘리먼트에게 상속되지 않는 스타일 속성 존재body { color: red; }
◈ CSS 스타일 순서에 의해 스타일은 단계적으로 적용
→ HTML의 해석 순서에 의해 스타일이 단계적으로 적용 가능p { color: green; }
◈ !important : 단계적 적용을 무시하고 최우선적으로 CSS 스타일을 적용할 경우 사용되는 속성값
li { color: blue !important; }
◈ 단계적 적용의 예외 - HTML 태그의 계층 순서에 의해 스타일 적용
→ 자식 엘리먼트의 스타일이 나중에 적용ul { color: lime; } li { color: aqua; }
📃03_cascade.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS</title> <style type="text/css"> /* 부모 엘리먼트에 적용된 스타일은 자식 엘리먼트에 상속되어 적용 */ /* → 자식 엘리먼트에게 상속되지 않는 스타일 속성 존재 */ body { color: red; } /* CSS 스타일 순서에 의해 스타일은 단계적으로 적용 */ /* → HTML의 해석 순서에 의해 스타일이 단계적으로 적용 가능 */ p { color: green; } /* !important : 단계적 적용을 무시하고 최우선적으로 CSS 스타일을 적용할 경우 사용되는 속성값 */ li { color: blue !important; } /* 단계적 적용의 예외 - HTML 태그의 계층 순서에 의해 스타일 적용 */ /* → 자식 엘리먼트의 스타일이 나중에 적용 */ ul { color: lime; } li { color: aqua; } </style> </head> <body> <h1>CSS 스타일의 단계적 적용과 상속</h1> <hr> <p>브라우저에 출력될 아주 중요한 내용입니다.</p> <hr> <ul> <li>아주 중요한 내용-1</li> <li>아주 중요한 내용-2</li> <li>아주 중요한 내용-3</li> </ul> </body> </html>
🐧link 태그
📌link 태그 : 외부파일을 불러와 내욜을 연결하는 기능을 제공하는 태그
→ CSS 파일을 불러와 웹문서에 연결하여 CSS 스타일 적용
◈ CSS 파일에 설정된 스타일을 사이트를 구성하는 모든 웹문서에 동일하게 적용하기 위해 사용
→ 웹사이트 작성시 모든 페이지에 일관성 있는 스타일 적용🌠href 속성 : 웹문서에 연결될 외부파일의 URL 주소를 속성값으로 설정
🌠type 속성 : 웹문서에 연결될 외부파일의 파일형식(MimeType)을 속성값으로 설정
🌠rel 속성 : 파일 연결 관계를 속성값으로 설정 - CSS 파일의 속성값 : stylesheet
<link href="04_style.css" type="text/css" rel="stylesheet">
🥎style 태그를 사용하여 현재 웹문서에 CSS스타일 적용
→ 선택자(Selector)로 검색된 모든 태그(엘리먼트)에 동일한 CSS 스타일 적용
<style type="text/css"> h2 { color: skyblue; } h3 { color: blue; } h4 { color: lime; } </style>
🥎태그의 style 속성을 사용하여 해당 태그에 CSS 스타일 적용
<h4 style="color: maroon;">브라우저에 출력될 아주 중요한 내용입니다.</h4>
📃04_format.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS</title> <!-- link 태그 : 외부파일을 불러와 내욜을 연결하는 기능을 제공하는 태그 --> <!-- → CSS 파일을 불러와 웹문서에 연결하여 CSS 스타일 적용 --> <!-- CSS 파일에 설정된 스타일을 사이트를 구성하는 모든 웹문서에 동일하게 적용하기 위해 사용 --> <!-- → 웹사이트 작성시 모든 페이지에 일관성 있는 스타일 적용 --> <!-- href 속성 : 웹문서에 연결될 외부파일의 URL 주소를 속성값으로 설정 --> <!-- type 속성 : 웹문서에 연결될 외부파일의 파일형식(MimeType)을 속성값으로 설정 --> <!-- rel 속성 : 파일 연결 관계를 속성값으로 설정 - CSS 파일의 속성값 : stylesheet --> <link href="04_style.css" type="text/css" rel="stylesheet"> <!-- style 태그를 사용하여 현재 웹문서에 CSS스타일 적용 --> <!-- → 선택자(Selector)로 검색된 모든 태그(엘리먼트)에 동일한 CSS 스타일 적용 --> <style type="text/css"> h2 { color: skyblue; } h3 { color: blue; } h4 { color: lime; } </style> </head> <body> <h1>웹문서에 CSS 스타일을 적용하는 방법</h1> <hr> <h2>브라우저에 출력될 아주 중요한 내용입니다.</h2> <h3>브라우저에 출력될 아주 중요한 내용입니다.</h3> <!-- 태그의 style 속성을 사용하여 해당 태그에 CSS 스타일 적용 --> <h4 style="color: maroon;">브라우저에 출력될 아주 중요한 내용입니다.</h4> </body> </html>
📃04_style.css
@charset "UTF-8"; h1 { color: red; } h2 { color: green; }
0개의 댓글
관련 채용 정보
