Front-Side 웹개발의이해 (CSS Basic) 1. CSS 란?

Size: px

Start display at page:

Download "Front-Side 웹개발의이해 (CSS Basic) 1. CSS 란?"

갑수 섭
6 years ago
Views:

1 CSS Basic 과정소개 과정목표 : CSS 의기본개념이해 1. CSS 란? 2. CSS 선택자 3. CSS 속성 1

2 Front-Side 웹개발의이해 (CSS Basic) 1. CSS 란?

3 1. CSS 란? - 스타일선언이위에서아래로순차적으로적용이되고, 마지막에선언된스타일이우선순위갖음 - 마크업언어 (HTML/XHTML) 가실제화면에표시되는방법을기술하는언어 - HTML문서의레이아웃과스타일을정의한다. - W3C에서표준안을만들어내고있으며 1996년 CSS Level 1 이후, 현재 CSS Level 2.1에서 CSS Level 3까지보급되고있음 3

4 1. CSS 란? 4

5 1. CSS 란? 5

6 1. CSS 란? in-line 방식... <body> in-line 방식 <strong style= font-size:14px; color:blue; > 안녕하세요 </strong> <span style= color:red; > 만나서반갑습니다 ~</span> <body> </html> HTML Tag 에직접 style 속성값을지정 6

7 1. CSS 란? internal 방식 Internal 방식 <html> <head> <style type="text/css"> h1 { font-size: 20px; } strong { font-size: 16px; } </style> </head>.. HTML 문서내부에 style tag 로선언 head tag 안에넣는것이정석이지만, 상황에따라 body 안에도선언이가능 7

8 1. CSS 란? external 방식 <html> <head> External 방식 <link rel="stylesheet" href="common.css" type="text/css /> <link rel="stylesheet" href= main.css" type="text/css /> </head>... CSS 를따로파일로저장하여불러오는방식 파일을여러개불러올수있기때문에공통 / 자주사용되는부분을따로저장하여사용하기에용이함 8

9 1. CSS 란? em, % ( 상대단위 ) 브라우저의기본글꼴을기준. 1em = 100% 브라우저메뉴의글꼴크기변화에따라유동적임 px, pt ( 절대단위 ) px ( 픽셀, 1px = 1dot) 모니터의 1 픽셀 pt ( 포인트, 1pt=1/72 인치 ) - 브라우저의기본글꼴을기준으로 1em = 12pt = 16px = 100% - 상대단위를사용하면접근성이향상되나, 단위환산의어려움과스타일수정시다양한환경에서일관적이지못한화면을나타낼문제가있음. - 디자인제작시기본단위가 px 로이루어져, 다른단위보다빠르게대응할수있는 px 을사용 9

10 Front-Side 웹개발의이해 (CSS Basic) 2. CSS 선택자

11 2. CSS 선택자 - HTML에스타일을적용할부분을선택하게끔해주는역할 - 선택자의대표적인종류는다음과같음 1. 타입 ( 엘리먼트 / 단순 ) 선택자 2. 하위선택자 3. ID, CLASS 선택자 4. 유사클래스선택자 5. 전체선택자 11

12 2. CSS 선택자 HTML Tag 를지정하여선언 동일한속성을, ( 콤마 ) 로구분하여선언가능 타입선택자 h1 {font-size:20px;} ul {margin:0px;} a {color:blue;} p {text-decoration:underline;} h1, h2 {color:blue;} 12

13 2. CSS 선택자 특정엘리먼트하위의엘리먼트를지정할때사용 공백 (space) 으로구분함 뒤에나올 ID, CLASS 선택자와도함께사용가능 하위선택자 ul li {height:30px;} ul li a {color:blue;} table tr td {text-align:center;} 13

14 2. CSS 선택자 엘리먼트에사용자가직접 id, class 선택자이름을지정 id 는 # 으로구분 class 는. 으로구분 ID, Class 선택자 #bodycontent {width:100%; height:500px;}.clr {clear:both;}.datetime {font-size:10px;} #divnews.tab1 {width:50px;height:50px;} #divnews ul {background-color:red;} 14

15 2. CSS 선택자 해당엘리먼트의상태에따라구분짓는선택자로 HTML 문서상엔없으나 CSS 에선존재하는것처럼작성 IE6 에선 a (Anchor) Tag 에만지정이가능하며그외브라우저는지원여부가조금씩다름 유사클래스선택자 a:link {color:blue;text-decoration:none;} /* 방문하지않은링크 */ a:visited {color:red;text-decoration:none;} /* 방문했던링크 */ a:hover, a:active {color:black;text-decoration:underline;} /* 마우스오버시와클릭시 */ 15

16 2. CSS 선택자 모든 Tag 에대한속성을지정할수있으나, 사용빈도가매우낮음 선언은 * 로선언 * {color:red;} div * {font-size:10px;} 전체선택자 16

17 2. CSS 선택자 자식 (child), 인접 (Adjacent Sibling), 속성 (Attribute) 선택자가추가로있으나, IE6 에서지원을하지않는관계로널리사용되고있지는않음 /* 자식선택자 */ div > a {font-size:20px;} 그외선택자 /* 인접선택자 */ h1 + div {background-color:blue;} /* 속성선택자 */ [class= box ] {background-color:red;} 17

18 2. CSS 선택자 스타일선언이위에서아래로순차적으로적용이되고, 마지막에선언된스타일이우선순위를갖는특징에대해서알아봅시다. #ex1.html #btnlink {color:red;} #btnlink {color:blue;} #btnlink {color:#000;} 18

19 2. CSS 선택자 같은선택자가아닌다른선택자로중복선언을한다면? #ex2.html <style type="text/css">.tit_name { color:red; } h3 { color:green; } #titname { color:blue; } </style> <h3 id="titname" class="tit_name style= color:yellow; > 타이틀제목 </h3> in-line > id > class > type 19

20 2. CSS 선택자 선택자에대한지정순위를무시하고사용자의스타일이우선적으로적용되게함 style 뒤에공백 (space) 후!important 를추가 #ex2.html 이어서 <style type="text/css">.tit_name { color:red; } h3 { color:green!important; } #titname { color:blue; } </style> <h3 id="titname" class="tit_name style= color:yellow; > 타이틀제목 </h3> 20

21 Front-Side 웹개발의이해 (CSS Basic) 3. CSS 속성

22 글자와관련된스타일을지정할수있는속성 1. font-style : normal / italic / oblique ; 2. font-weight : normal / bold ; 3. font-size : 12px ; 4. line-height ( 줄간격 ) : 12px; 5. font-family ( 글꼴서체 ) : gulim ; Font 속성축약형 #font.html span { font : italic bold 12px/12px gulim; } 22

23 글자의색상을변경하는속성 color 속성 color : red; color : rgb(255,0,0); color : #FF0000; color : #F00; ( 축약 ) 글자를들여쓰거나내여쓸때사용 text-indent 속성 text-indent : 10px ; text-indent : -10px ; 23

24 글자의윗줄, 중간줄, 밑줄등을적용시에사용 text-decoration 속성 text-decoration : none; text-decoration : underline; text-decoration : line-through; text-decoration : overline; 글자의정렬기준을지정 text-align 속성 text-align : left; text-align : right; text-align : center; text-align : justify; 24

25 아래와같은스타일이표현되도록 CSS 속성을사용하여적용해봅시다. 1.? 2. 오늘점심은어떤메뉴일까? 3.? 4.? 5.? 6.? 조건 기본 <p> tag 사용 in-line 방식스타일사용 1. 굵은돋움, 크기 : 14px, 색상 : blue 2. 이탤릭체굴림, 크기 : 16px, 색상 : #E8334D 3. 밑줄이있는돋움, 크기 : 12px 4. 들여쓰기가 10px 되어있는돋움, 크기 : 15px 5. 줄간격이 50px 인굵은돋움, 크기 : 16px, 색상 : green 6. 우측정렬이되어있는밑줄이있는굵은돋움, 크기 : 20px 25

26 Block 요소의가로, 세로사이즈를지정 width height width, height width : 150px ; width : 50% ; height : 300px ; height : 100% ; 26

27 엘리먼트의바깥여백 (margin) 과안쪽여백 (padding) 을지정 27

28 28

29 1. margin margin-top margin-right margin-bottom margin-left 2. padding padding-top padding-right padding-bottom padding-left margin, padding 속성 #box.html margin-top: 10px; margin-right:40px; margin : 10px 40px 20px 10px ; padding : 20px ; margin : 20px 10px; margin : 20px 10px 30px; 축약형의순서는위, 오른쪽, 아래, 왼쪽시계방향으로인식 29

30 세로방향으로마진을지정한두개의서로다른요소가수직방향으로접해있을때, 두요소사이의마진간격은두요소의마진값중큰값으로병합 #ex3.html <style type="text/css"> body {margin:0; padding:0;}.margin_box {width:100%; height:30px; margin:20px 0 50px; background-color:#dcdcdc; } </style> <div class="margin_box"></div> <div class="margin_box"></div> <div class="margin_box"></div> <div class="margin_box"></div> 30

31 Block box 는 margin 좌우속성값을 auto 로지정해중앙에위치시킬수있음 단, 정렬하려는 Block 요소에 width 를지정해야함 #ex4.html <style type="text/css">.box1 {width:200px;height:100px;margin:0 auto;background-color:red;} </style> <div class="box1"></div> 31

32 엘리먼트바깥에선을그려줌 ( 외곽선 ) 방향에따라스타일을따로지정가능 width, height 값과는별개로엘리먼트의 padding 바깥쪽에영역을차지 1. border border-width border-style border-color 2. border- 방향 border- 방향 -width border- 방향 -style border- 방향 -color 3. border-style 속성 solid ( 실선 ) dashed ( 끊어진실선 ) dotted ( 점선 ) border : 1px solid red ; border : 1px dotted #0000FF ; border 축약형 #ex5.html 32

33 엘리먼트영역에색상, 이미지를채우는속성 1. background-color : #fafafa ; 색상이름 / 색상코드 transparent( 투명 ) 2. background-image : url( ; 3. background-repeat : no-repeat ; repeat, no-repeat, repeat-x, repeat-y 4. background-position : 0px 10px ; 0px 0px (left,top 기준 ) left(right), top(bottom), center background 축약형 #ex6.html background : #FF0000 url(daum.gif) no-repeat 0px 10px ; background : red url(daum.gif) repeat-y left top ; background : url(daum.gif) repeat-x 0px 0px ; 33

34 아래와같은스타일이표현되도록 CSS 속성을사용하여적용해봅시다. box 는 div 태그를사용 CSS 는 in-line 방식의스타일사용 설명 박스의크기는가로 300px, 세로 300px, 배경색은 red 박스의외곽선은 3px 두께의실선이고외곽선색은 #000 박스는가운데정렬 박스의안쪽여백은위로 100px, 좌측 20px 박스안에 본인이름 을적어주세요완성된박스는외곽선을포함한크기가가로 300px, 세로 300px 이맞을까요? 34

35 문서내에서엘리먼트가가지고있는고유한렌더링속성을변경 inline 요소를 block 요소로, block 요소를 inline 요소로변경가능 그외에화면에표시되지않게할수있음 display 속성 #ex7.html display : none ; display : block ; display : inline ; display : inline-block ; inline-block : inline 요소처럼배치되면서 block 요소의속성 (width, height, margin, padding) 들을사용할수있는속성 35

36 block 요소의자식컨텐츠가부모요소의사이즈를변화시킬때숨김 / 스크롤바표시여부를지정 부모의사이즈가지정되어있을경우에사용가능 overflow 속성 #ex8.html overflow : visible ; ( 기본 ) overflow : hidden ; overflow : scroll ; overflow : auto ; overflow : scroll 가로, 세로에대한속성을따로지정할수있다. overflow-x overflow-y 36

37 엘리먼트를 block 형태로부유시킬때사용 (display:block; 을안해주어도 ~) block 형태로특정방향 (left, right) 으로정렬 float 속성 float : inherit ; ( 기본 : 밖의 float속성을상속받음 ) float : left ; float : right ; float : none ; 37

38 BOX 1 BOX 2 BOX 3 모든 box1 float box 을 float:right 를지정하지 float:left 로지정않음 38

39 float 를해제할때사용 이전엘리먼트의 float 값을상속받아같은방향으로정렬되는현상을막기위해사용 Clear 속성 clear : inherit ; ( 기본 ) clear : left ; ( 왼쪽으로 float된엘리먼트의하단에위치 ) clear : right ; ( 오른쪽으로 float된엘리먼트의하단에위치 ) clear : both ; ( 모든 float의하단에위치 개념상 float상속을받지않음 ) 39

40 엘리먼트의상대적인위치에대한속성 float과는다르게왼쪽, 오른쪽정렬하는형태가아닌, 위치하는곳에대한값 ( 오프셋 ) 을지정 position 속성 position : static ; ( 기본, offset을가지지않음 ) position : relative ; ( 상대적, 원래위치를기준 ) position : absolute ; ( 절대적, 부모위치를기준 ) position : fixed ; ( 화면에서고정, ie6 지원불가 ) top : 10px ; left : 20px ; bottom : 10px ; right : 20px ; 40

41 position : static; BOX 1 BOX 2 BOX 3 41

42 BOX 1 BOX 2 position:relative; top: 20px; left: 80px; BOX 2 BOX 3 42

43 BOX 1 BOX 2 position:absolute; top: 20px; left: 80px; BOX 2 BOX 3 43

44 BOX 1 BOX 2 position:fixed; top: 20px; left: 80px; BOX 2 BOX 3 44

45 BOX 1-1 BOX 1 position:relative; top: 20px; left:80px; BOX 1 BOX 1-1 position:absolute; top: 20px; left: 80px; BOX 2 45

46 BOX 1-1 BOX 1 position:relative; top: 20px; left: 80px; BOX 1 BOX 1-1 position:fixed; top: 0px; left: 30px; BOX 2 46

47 엘리먼트의입체적인순서를정의 수치가작을수록아래쪽에있다는것을의미 z-index 속성 z-index : 3 ; z-index : ; z-index : 400 ; box 안의엘리먼트의 z-index 가높아도상위 ( 부모 ) 엘리먼트끼리의수치가낮으면 아래쪽에위치함 47

48 body box1 z-index: 100; box2 z-index: 50; 48

49 body box1 z-index: 100; box1-1 z-index: 50; box2-1 z-index: 100; box2 z-index: 50; 49

50 감사합니다

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 03 장. 테두리여백지정하는속성 이번장에서는테이블, 레이어, 폼양식등의더예쁘게꾸미기위해서 CSS 를이용하여 HTML 요소의테두리속성을바꾸어보자. 이장에서다룰내용 1 2 3 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 01. 테두리를제어하는스타일시트 속성값설명 border-width border-left-width