CSS 기초 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역 구역을 추가하려면 슬라이드를 마우스 오른쪽 단추로 클릭하십시오. 구역을 사용하면 슬라이드를 쉽게 구성할 수 있으며, 여러 작성자가 원활하게 협력하여 슬라이드를 작성할 수 있습니다. 메모 설명을 제공하거나 청중에게 자세한 내용을 알릴 때 메모를 사용합니다. 프레젠테이션하는 동안 프레젠테이션 보기에서 이러한 메모를 볼 수 있습니다. 글꼴 크기에 주의(접근성, 가시성, 비디오 테이프 작성, 온라인 재생 등에 중요함) 배색 그래프, 차트 및 텍스트 상자에 특히 주의를 기울이십시오. 참석자가 흑백이나 회색조로 인쇄할 경우를 고려해야 합니다. 테스트로 인쇄하여 흑백이나 회색조로 인쇄해도 색에 문제가 없는지 확인하십시오. 그래픽, 테이블 및 그래프 간결하게 유지하십시오. 가능한 일관되고 혼란스럽지 않은 스타일과 색을 사용하는 것이 좋습니다. 모든 그래프와 표에 레이블을 추가합니다. Chapter 4 Part 1
Cascading Style Sheets CSS의 개념 Cascading Style Sheets
CSS3 CSS3는 CSS의 가장 최근 버전 이전 버전과 완전 호환
CSS가 하는 일 문서의 스타일을 지정한다.
CSS의 장점 거대하고 복잡한 사이트 관리 용이 모든 페이지가 동일한 CSS 공유
예전에는요? <p> <font color=blue size=3> 여기는 단락을 정하는 태그 p {color:blue; size=12px} <p> 여기는 단락을 정하는 태그 </p> 한번 정의하면 모든 태그에 적용
<font>와 CSS 비교 <!doctype html> <head> <style> p {color:blue; font-size:16px;} </style> </head> <body> <h1>CSS example #1</h1> <p>This is a paragraph defined by CSS</p> <p> <font color=green size=3>This is a paragraph defined by FONT tag</font></p> <p>This is another paragraph defined by CSS</p> </body> </html>
CSS 문법 속성과 값 사이에는 콜론(:) 끝에는 세미콜론(;) 주석 달기 // : 이 기호 뒤는 모두 주석으로 처리 /* */
CSS 삽입 위치 외부 스타일 시트(external style sheet) 따로 파일로 작성하여 링크(link)로 연결 내부 스타일 시트(internal style sheet) <head> 부분에 삽입 인라인 스타일 시트(inline) 각 태그의 속성으로 지정
internal style sheet – 파일 안에 지정 <head> <style> h1{color:red;} p {color:blue; font-size:16px;} </style> </head> 헤드(head)안에 <style> … </style> 태그로 삽입 모든 h1태그와 p 태그가 영향을 받는다.
inline – 태그 안에 style 속성으로 지정 태그(tag)안에 style=“ ” <h1 style=“color:red;”> This is TITLE. </h1> <p style=“color:blue; font-size:12px;”> This is a paragraph. </p>
외부 파일로 지정 “mystyle.css” p {color:blue; font-size:16px} h1{color:red} <!doctype html> <head> <link rel=“stylesheet” href=“mystyle.css”> </head> <body> <h1>CSS example #1</h1> <p>This is a paragraph defined by CSS</p> <p style="color:green; font-size:20px;">This is a paragraph defined by INLINE style</p> <p>This is another paragraph defined by CSS</p> </body> </html> “mystyle.css” p {color:blue; font-size:16px} h1{color:red} <style> 태그 없음
예제 – ex1.html <!doctype html> <head> <style> p {color:blue; font-size:16px;} h1{color:red;} </style> </head> <body> <h1>CSS example #1</h1> <p>This is a paragraph defined by CSS</p> <p>This is a paragraph.</p> <p>This is another paragraph defined by CSS</p> </body> </html>
실행 결과
예제 – ex2.html <!doctype html> <head> <style> p {color:blue; size:16px;} h1{color:red;} </style> </head> <body> <h1>CSS example #2</h1> <p>This is a paragraph defined by CSS</p> <p style="color:green; font-size:20px;">This is a paragraph defined by INLINE style</p> <p>This is another paragraph defined by CSS</p> </body> </html>
실행 결과
예제 - ex3.html <!doctype html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1>CSS example #3</h1> <p>This is a paragraph defined by CSS</p> <p style="color:green; font-size:20px;">This is a paragraph defined by INLINE style</p> <p>This is another paragraph defined by CSS</p> </body> </html>
실행 결과
CSS 적용 우선 순위
선택자(selector) 선택자: CSS에서 가장 중요한 부분으로 스타일을 적용할 HTML 요소를 선택하는 부분 문서 내의 모든 p 태그 안의 글자색이 파란색으로 지정
선택자의 종류 타입 선택자(type selector) 전체 선택자(universal selector) 클래스 선택자(class selector) 아이디 선택자(id selector) 속성 선택자(attribute selector) 의사 선택자(pseudo-class) 자세한 내용은 http://www.w3.org/TR/css3-selectors/
전체 선택자 HTML 문서 내의 모든 요소를 선택 * { color:blue; font-size:20px; } 문서 전체 글자색을 blue로, 폰트의 크기를 20px로 지정
HTML 문서 – body 부분 (공통) <body> <h1 id=title>과학기술대학 ICT 융합공학부</h1> <ul id=mylist> <li>컴퓨터공학전공</li> <li>나노전자기계공학전공</li> <li>의학공학전공</li> </ul> <h2>컴퓨터공학전공</h2> <p id=p1>컴퓨터공학전공은 이론과 실무를 모두 배우는, 미래 사회에 없어서는 안 될 매우 중요한 학문입니다. </p> <p class=p2>본 학과에서는 이에 걸맞은 교과과정을 유지하고 있으며, 여러 방안을 통한 실무 경험을 제공하려고 노력하고 있습니다.</p> </body>
전체 선택자 예제- /practice/0328/css-universal-selector.html <head> <style> * { color:blue; font-size:20px; } </style> </head>
결과
타입선택자(태그 선택자) HTML 문서의 요소 이름, 즉 태그를 사용 h1 {color:red;} p {font-size:16px;} ul {line-height:20px;} td {background-color:pink;}
타입 선택자 예제 <head> <style> h1 {color:red;} p {color:blue; font-size:16px;} ul {line-height:30px;} </style> </head>
결과
아이디 선택자 아이디는 #으로 정한다. <style> #mine {border: 2px red solid;} head 안에서 <p id=mine>This is ID=mine</p> body 안에서
아이디 선택자 예제 <head> <style> #title {border: 2px red solid;}} #mylist {list-style-type:none;} #p1 {text-decoration:underline} </style> </head>
결과
클래스 선택자 클래스는 . (점)으로 시작한다. <style> .cls {border: 2px red solid;} head 안에서 <p class=cls>This is class=cls</p> body 안에서
클래스 선택자 예제 <head> <style> .p2 {background-color:yellow;}
결과
의사 선택자 의사 클래스(pseudo-class): 클래스가 정의된 것처럼 간주 a {text-decoration:none;} a:link {color:red;} a:visited {color:green;} a:hover {text-decoration:underline;} td:hover {background-color:pink;}
결과
속성 선택자 <style> input[type=text] { width: 150px; display: block; margin-bottom: 10px; background-color: yellow; } input[type=button] { width: 120px; margin-left: 35px; </style>
선택자 그룹(형제)- 콤마(,)로 연결 p, h1 {color: red}
자손, 자식 결합자 선택자 설명 s1 s2 s1 요소에 포함된 s2 요소를 선택한다. (후손 관계) s2 > s2 (자식 관계) h1 em { color:blue; } /* h1 안의 모든 후손 em 요소 */ h1 > em { color:hotpink; } /* h1의 직계 자손 em 요소 */
직계자손? 후손? <div id=container> <p>여기는 container의 직계자손</p> <div id=header> <p>여기는 container의 후손이자 header의 직계 자손</p> </div> <div> <p>여기는 누구의 자손도 아님</p>
예제 <!doctype html> <head> <style> #container > p{background-color:yellow} //#container p{background-color:lightpink} </style> </head> <body> <div id=container> <p>여기는 container의 직계자손</p> <div id=header> <p>여기는 container의 후손이자 header의 직계 자손</p> </div> <p>여기는 누구의 자손도 아님</p> </body> </html>
형제 (그룹 선택자) 다음 5개의 문장 중 바탕색이 노란색으로 나타나는 문장은? <!DOCTYPE html> <head> <style> h1, p { background-color: yellow; } </style> </head> <body> <h1>Welcome to My Homepage --- ①</h1> <div> <h2>My name is Donald. --- ②</h2> <p>I live in Duckburg. --- ③</p> </div> <span><p>I will not be styled. --- ④ </p></span> <p>My best friend is Mickey. --- ⑤</p> </body> </html>
후손(대대손손) 선택자 <!DOCTYPE html> <html> <head> <style> div p { background-color: yellow; } </style> </head> <body> <h1>Welcome to My Homepage --- ①</h1> <div> <h2>My name is Donald. --- ②</h2> <p>I live in Duckburg. --- ③</p> </div> <span><p>I will not be styled. --- ④ </p></span> <p>My best friend is Mickey. --- ⑤</p> </body> </html>
직계자손 선택자 <!DOCTYPE html> <html> <head> <style> div > p { background-color: yellow; } </style> </head> <body> <h1>Welcome to My Homepage --- ①</h1> <div> <h2>My name is Donald. --- ②</h2> <p>I live in Duckburg. --- ③</p> </div> <span><p>I will not be styled. --- ④ </p></span> <p>My best friend is Mickey. --- ⑤</p> </body> </html>
What can we DO? - EVERYTHING 대상 설명 font color, size, family, style, weight text color, align, decoration, indent, line-height border color, style, width table border, collapse list list style box border, width, height, padding, margin layout position, display, float
color 표현 방법 방법 설명 이름으로 표현 “red”, “green”, “blue” 16진수로 표현 #FF0000, #00FF00, #0000FF 10진수로 표현 rgb(255, 0, 0), rgb(0,255,0), rgb(0,0,255) 퍼센트로 표현 rgb(100%, 0%, 0%)
16진수로 나타내기 body { background-color: #ffd800; }
이름으로 나타내기 body { background-color: aqua; }
RGB 값으로 나타내기 body { background-color: rgb(60%, 40%, 10%); }
예제 <!DOCTYPE html> <html> <head> <style> h1 { background-color: #6495ed; } p.a { background-color: #ff0000; } p.b { background-color: #00ff00; } p.c { background-color: #0000ff; } p.d { background-color: #888888; } </style> </head> <body> <h1>CSS Color Chart</h1> <p class="a">Color #1</p> <p class="b">Color #2</p> <p class="c">Color #3</p> <p class="d">Color #4</p> </body> </html>
FONTS 속성 설명 font-family 폰트 패밀리 설정 font-size 폰트의 크기 설정 font-style 폰트 스타일 설정 font-weight 폰트의 볼드체 여부 설정 font 한줄에서 모든 폰트 속성을 설정할 때 사용
1. font-family font-family는 정해진 순서대로 폰트를 찾아간다.
sans-serif sans-serif: 삐침이 없는 글자체(고딕) 웹에서 사용하기에 가독성이 좋음
예제-/practice/0330/css-font-family.html <!doctype html> <head> <style> p.times {font-family: "Times New Roman", Georgia, Serif;} p.gothic {font-family: "맑은고딕","굴림","궁서";} p.gulim {font-family:"굴림","궁서","맑은고딕"} p.gungseo {font-family:"궁서","맑은고딕","굴림"} </style> </head> <body> <p class=times>{font-family: "Times New Roman", Georgia, Serif;} </p> <p class=gothic>{font-family: "맑은고딕","굴림","궁서";}</p> <p class=gulim>{font-family:"굴림","궁서","맑은고딕"}</p> <p class=gungseo>{font-family:"궁서","맑은고딕","굴림"}</p> <p>그냥 쓰면 어떤 글자체가 나오려나. </p> <p>What is default font-family?</p> </body> </html>
결과
2. font-size 폰트의 단위 pt – 포인트 px - 픽셀 % - 퍼센트 em – 배수(scale factor) 키워드 – xx-small, x-small, small, medium, large, x-large, xx-large
예제-/practice/0330/css-font-size.html <!DOCTYPE html> <head> <style> .px40 {font-size: 40px;} .px30 {font-size: 30px;} .px14 {font-size: 14px;} #em2_5 {font-size: 2.5em; /* 40px/16=2.5em */ } #em1_875 {font-size: 1.875em; /* 30px/16=1.875em */ } #em0_875 {font-size: 0.875em; /* 14px/16=0.875em */} </style> </head> <body> <h1 style="color:red"> This is original size of H1</h1> <h1 class=px14><h1> TAG입니다. This is heading 1 with 14px.</h1> <h2 class=px30><h2> TAG입니다. This is heading 2 with 30px.</h2> <p class=px40><p> TAG입니다. This is a paragraph with 40px.</p> <p class=px30><p> TAG입니다. This is a paragraph with 30px.</p> <h1 id=em2_5><h1> TAG입니다. This is heading 1 with 2.5em.</h1> <h2 id=em1_875><h2> TAG입니다. This is heading 2 with 1.875em.</h2> <p>This is a paragraph.</p> <p id=em0_875> This is <p> TAG with 0.875em. Specifying the font-size in em allows all major browsers to resize the text. Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.</p> </body> </html>
결과
3. font-weight font-weight:normal font-weight:ligter font-weight:bold
예제 -/practice/0330/css-font-weight.html <!DOCTYPE html> <html> <head> <style> p.normal {font-weight: normal;} p.light {font-weight: lighter;} p.thick {font-weight: bold;} p.thicker {font-weight: 900;} </style> </head> <body> <p class="normal">This is a paragraph. font-weight: normal;</p> <p class="light">This is a paragraph. font-weight: lighter;</p> <p class="thick">This is a paragraph. font-weight: bold;</p> <p class="thicker">This is a paragraph. font-weight: 900;</p> </body> </html>
결과
4. font-style font-style:normal font-style:italic font-style:oblique
예제 -/practice/0330/css-font-style.html <!DOCTYPE html> <html> <head> <style> p.normal {font-style: normal;} p.italic {font-style: italic;} p.oblique {font-style: oblique;} </style> </head> <body> <p class="normal">This is a paragraph in normal style.</p> <p class="italic">This is a paragraph in italic style.</p> <p class="oblique">This is a paragraph in oblique style.</p> </body> </html>
결과
5. font: 폰트 축약 기법 선택자 {font: 가능한 속성 모두 나열} font-size line-height
TEXT style 속성 값 설명 color #FFFFFF, rgb(x,x,x) 텍스트의 색상을 지정한다. letter-spacing px 글자간 간격을 지정한다. line-height 텍스트 줄의 높이를 지정한다. text-align left, right, center, justify 텍스트의 수평 정렬을 지정한다. text-decoration none, underline, overline, line-through 텍스트 장식을 지정한다. text-indent 텍스트의 들여쓰기를 지정하낟. text-shadow 그림자 효과를 지정한다. text-transform none, capitalize, uppercase, lowercase 대소문자 변환을 지정한다.
예제 -/practice/0330/css-text.html <!DOCTYPE html> <html> <head> <style> body {color: blue; } h1 {color: green;text-align: center;} a {text-decoration: none; color:red;} p.uppercase {text-transform: uppercase;} p.lowercase {text-transform: lowercase;} p.capitalize {text-transform: capitalize;} p.indent {text-indent: 50px; text-align:justify; line-height:1.8} .shadow {text-shadow: 3px 2px red;} </style> </head>
-/practice/0330/css-text.html (계속) <body> <h1>This is heading 1</h1> <p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.</p> <p>A link with no underline: <a href="https://www.w3schools.com">W3Schools.com</a></p> <p class="uppercase">This is some text. {text-transform: uppercase;}</p> <p class="lowercase">This is some text. {text-transform: lowercase;}</p> <p class="capitalize">This is some text. {text-transform: capitalize;}</p> <p class=indent> <span style="color:red">{text-indent: 50px; text-align:justify}</span> In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p> <h1 class=shadow>Text-shadow effect</h1> </body> </html>