CSS BOX MODEL Chapter 5 Part 1

CSS BOX MODEL Chapter 5 Part 1
이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역 구역을 추가하려면 슬라이드를 마우스 오른쪽 단추로 클릭하십시오. 구역을 사용하면 슬라이드를 쉽게 구성할 수 있으며, 여러 작성자가 원활하게 협력하여 슬라이드를 작성할 수 있습니다. 메모 설명을 제공하거나 청중에게 자세한 내용을 알릴 때 메모를 사용합니다. 프레젠테이션하는 동안 프레젠테이션 보기에서 이러한 메모를 볼 수 있습니다. 글꼴 크기에 주의(접근성, 가시성, 비디오 테이프 작성, 온라인 재생 등에 중요함) 배색 그래프, 차트 및 텍스트 상자에 특히 주의를 기울이십시오. 참석자가 흑백이나 회색조로 인쇄할 경우를 고려해야 합니다. 테스트로 인쇄하여 흑백이나 회색조로 인쇄해도 색에 문제가 없는지 확인하십시오. 그래픽, 테이블 및 그래프 간결하게 유지하십시오. 가능한 일관되고 혼란스럽지 않은 스타일과 색을 사용하는 것이 좋습니다. 모든 그래프와 표에 레이블을 추가합니다. Chapter 5 Part 1

지금까지 배운 TAG <h1> … <h6> <p> <span>
<em>, <b>, <strong>, 등등등 <ul>, <li>, <ol> <table>, <th>, <td> <a> <pre> <img> 스타일은 FONT와 TEXT의 2가지

Box model 맛보기 <!DOCTYPE html> <html> <head>
<title>box model </title> <style> * {border: 1px solid blue;} </style> </head> <body> <h1>쇼핑 리스트</h1> <p>특히 다음을 <strong>반드시</strong> 사와야 함</p> <ul> <li>우유</li> <li>토마토</li> <li>수박</li> </ul> </body> </html>

결과

Box model이란? 모든 요소를 box로 간주한다 HTML 요소들을 박스(사각형) 형태로 그리는 것
박스는 배치, 색상, 경계 등의 속성을 가진다.

박스모델의 속성

Box의 크기 – width 와 height 요소의 박스 크기를 지정한다. % 단위는 브라우저 창의 크기를 기준으로 선택자 {
width: % or px; height: % or px; }

width & height <!doctype html> <html> <head>
<style> #heading1 { width:300px; background-color: lightblue; } #heading2 { width:500px; background-color: pink; </style> </head> <body> <h1 id=heading1>This is heading1</h1> <h1 id=heading2>This is heading2</h1> </body> </html>

결과 box의 상하좌우에 있는 여백에 주의(margin)

테두리 속성 – border border border-color border-style border-width 속성 설명
p {border: 두께 스타일 색상} 과 같이 한번에 모두 지정 border-color 테두리 색상 border-style solid, dotted, dashed .. 등의 테두리 스타일 border-width 테두리 두께

border style Value Description none Default value. Specifies no border
double Specifies a double border hidden The same as "none", except in border conflict resolution for table elements groove Specifies a 3D grooved border. The effect depends on the border-color value dotted Specifies a dotted border ridge Specifies a 3D ridged border. The effect depends on the border-color value dashed Specifies a dashed border inset Specifies a 3D inset border. The effect depends on the border-color value solid Specifies a solid border outset Specifies a 3D outset border. The effect depends on the border-color value

border width Value Description medium
Specifies a medium border. This is default thin Specifies a thin border thick Specifies a thick border length 1px, 5px 등 직접 지정

border color 경계선의 색상은 as you wish

border 축약 기법 선택자 {border: 두께 색상 스타일;} h1 {border: 1px blue double;}
p {border: 1px red solid;}

예제 - css-border.html <!DOCTYPE html> <html> <head>
<style> * {font-size:20pt} h1 {border:5px solid blue;} p {border:3px solid pink; } ul,li {border: 3px solid gold;} table {border: 2px solid red; } th,td {border: 1px solid green; } </style> </head>

예제 - css-border.html (계속)
<body> <h1>This headline is very important</h1> <p>This paragraph is very important</p> <ul>2016-1 <li>Unix System</li> <li>Web Programming</li> </ul> <table> <tr> <th>국어</th> <th>수학</th> </tr> <td>90</td> <td>95</td> </table> </body> </html>

상 하 좌 우 경계 각각 지정하기 속성 설명 border-top TOP border-right RIGHT
border-bottom BOTTOM border-left LEFT

예제 div{ border-top: 1px blue dotted; border-bottom: 2px red groove;
border-left: 3px green dashed; border-right: 4px green ridge; }

결과

border-radius - 둥근 경계선 만들기 /practice/0404/css-border-radius.html
<!DOCTYPE html> <html> <head> <style> div { border: 2px solid #a1a1a1; padding: 10px 40px; background: #dddddd; width: 300px; border-radius: 25px; } </style> </head> <body> <div>The border-radius property allows you to add rounded corners to elements.</div> </body> </html>

결과

border-image 경계선을 이미지로 채울 수도 있다. 스킵 자세한 내용은 여기서 확인

margin - box의 바깥쪽 여백(투명)
Property Description margin 4방향의 margin을 한꺼번에 지정 margin-bottom bottom margin margin-left left margin margin-right right margin margin-top top margin

padding - box의 안쪽 여백 Property Description padding 4방향의 margin을 한꺼번에 지정
padding-bottom bottom margin padding-left left margin padding-right right margin padding-top top margin

margin & padding 예제 <!doctype html> <html> <head>
<style> #heading1 {width:300px; background-color: lightblue;} #heading2 {width:500px; background-color: pink;} //h1 {margin:0px} //h1 {padding:10px;} </style> </head> <body> <h1 id=heading1>This is heading1</h1> <h1 id=heading2>This is heading2</h1> </body> </html>

예제- /practice/0404/css-updown-menu.html
<!doctype html> <html> <head> <title> menu</title> <style> li {width: 200px; background-color:lightgray; padding:10px; margin:1px; } li:hover {border-left:10px blue solid; background-color:#ff3333 } </style> </head> <body> <h1>ICT 융합공학부</h1> <ul> <li>컴퓨터공학전공</li> <li>나노전자기계공학전공</li> <li>의학공학전공</li> </ul> </body> </html>

문서를 중앙에 위치하기 margin을 0으로 지정하면 center에 위치 body { width: 50%;
margin: auto;}

예제- ~/exercise/0404/css-center.html
<!doctyle html> <head> <style> body { width: 80%; margin: 0 auto; } </style> </head> <body> <h1>The USB Memory Stick Is Facing Extintion</h1> <p>One of the odd questions I keep being asked about the iPad is “Where do you plug in USB stuff?” It’s a sister phrase to the weird criticism oft thrust at Apple’s device, “Ah, it’s too limiting for me: I can’t plug in USB sticks.” This is weird because other makers, notably Apple’s biggest competitor, Samsung, follow the same proprietary connector path and because I’ve never once thought about plugging a stick into the iPad. Maybe, soon, most people won’t think like this either–because the USB memory stick is very swiflty about to be obsolete.</p> <p>To understand why, you’ve only got to look at how ubiquitous they are now. They’re a handful of dollars at your convenience store, novelty designs compete with austere ones, and they’re thrown around like confetti as promos at tradeshows. Any tech that’s got to this level of commodity is due to be banished to the history books. It’s just the way of things.</p> </body> </html>

결과

실습 - ~/exercise/0404/css-div-center.html
앞의 css-center.html에 <div> 태그를 사용하여 다음과 같은 결과가 나오도록… div의 width 80% div안에서 왼쪽, 오른쪽 padding 50px, 위쪽 padding은 0

css-div-center.html의 결과

실습 ~/exercise/0404/css-div.html
<!doctype html> <html> <head> <title>div and ID test</title> <style> </style> </head> <body> <div id=div1> <h1>손흥민 현지 인터뷰 "공격P로 팀에 도움 되고파" </h1> <p> [런던(영국)=이건 스포츠조선닷컴 기자]손흥민(24·토트넘)이 잉글랜드 프리미어리그(EPL) 적응을 빨리 마무리하겠다고 밝혔다. 토트넘은 5일 영국 런던 엔필드에 있는 토트넘핫스퍼 트레이닝 그라운드에서 열린 '코리안 미디어데이'를 열었다. 토트넘의 훈련을 공개했다. 이어 손흥민과 크리스티안 에릭센의 인터뷰를 가졌다. 인터뷰에 앞서 토트넘은 손흥민의 인터뷰 영상을 취재진에게 배포하고 공개했다.</p> <p>그는 이 자리에서 "올 시즌은 내 축구 인생에 있어서 상당히 중요한 해"라면서 "많은 것을 경험할 수 있었던 해다. 배울 수 있는 점도 많다"고 했다.</p> </p> </div> <div id=div2> <h1>'데뷔 안타' 박병호, "안 떨리고 편해서 놀랐다"</h1> <p>[스포티비뉴스=김민경 기자] "생각한 만큼 떨리지 않아서 (스스로) 놀랐다." 박병호(30, 미네소타 트윈스)는 5일(한국 시간) 메이저리그 데뷔전에서 안타를 때린 뒤 MLB.com과 인터뷰에서 덤덤하게 소감을 말했다. 볼티모어 오리올스와 개막전에 6번 지명타자로 선발 출전한 박병호는 3타수 1안타 1삼진 1사구 1득점을 기록했다. 미네소타는 2-3으로 졌다.</p> <p>두 번째 타석에서 안타를 때렸다. 0-0으로 맞선 5회 1사에서 볼티모어 선발투수 타일러 윌슨의 3구째를 받아쳐 중견수 앞 안타를 때렸다. 역대 한국인 메이저리거 가운데 데뷔전에서 안타를 기록한 건 박병호가 처음이다.</p> </body> </html>

기본 HTML 태그의 CSS - default
body { display: block; margin: 8px; } p { display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; } h1 { display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; } h2 { display: block; font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold; }

background background 한줄에서 모든 배경 속성을 정의한다. background-attachment
설명 background 한줄에서 모든 배경 속성을 정의한다. background-attachment 배경 이미지가 고정되어 있는지 스크롤되는지를 지정한다. background-color 배경색을 정의한다. background-image 배경 이미지를 정의한다. background-position 배경 이미지의 시작위치를 지정한다. background-repeat 배경 이미지의 반복 여부를 지정한다.

background-color 배경색은 지금까지와 동일하게 색상 지정 <style>
h1{background-color:blue;} p {background-color:#1f1f1f} </style>

background-image 배경 이미지 삽입 url로 이미지 파일이름 지정
body { background-image:url(“파일이름”); }

background-repeat 배경 이미지 반복? 1번만?
background-repeat:repeat  반복(default) background-repeat:no-repeat background-repeat:repeat-x background-repeat:repeat-y

background-position Value Description
left top left center left bottom right top right center right bottom center top center center center bottom If you only specify one keyword, the other value will be "center" x% y% The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 0% 0% xpos ypos The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions

background-attachment
배경 이미지 움직일래? 말래? background-attachment:scroll 요소와 같이 스크롤 background-repeat:fixed 스크롤되지 않고 고정 background-repeat:local 요소의 내용과 함께 움직임

background-size 배경 이미지의 크기 지정 background-size:100% 100%;
background-size:80px 60px; background-size:contain; 배경 이미지를 최대한 창의 크기에 맞게 background-size:cover; 배경 이미지가 창에 가능한한 가득 차게

Q&A Have a nice day!!!

CSS BOX MODEL Chapter 5 Part 1

Similar presentations

Presentation on theme: "CSS BOX MODEL Chapter 5 Part 1"— Presentation transcript:

Similar presentations

About project

지원

로그인

Auth with social network:

CSS BOX MODEL Chapter 5 Part 1

Similar presentations

Presentation on theme: "CSS BOX MODEL Chapter 5 Part 1"— Presentation transcript:

Similar presentations

About project

지원