웹과인터넷활용및실습 (Web & Internet) Suan Lee - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 1
04. CSS3 스타일속성 04. CSS3 Style Properties - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 2
CSS3 단위 1 CSS 는각각의스타일속성에다양한값을입력 키워드단위 키워드는 CSS 를개발할때에이미지정된단어들을의미 통합개발환경을사용할때에다음과같이확인가능 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 3
CSS3 단위 2 크기단위 CSS3 에서사용하는크기단위는 %, em, cm, mm, inch, px 크기단위는다음과같은방법으로사용 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 4
CSS3 단위 3 색상단위 색상을적용하는가장기본방법은키워드를사용하는것 CSS3 는다음과같은색상단위를사용해색상을지정 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 5
CSS3 단위 4 URL 단위 파일을지정할때는 URL 단위를사용한다. URL 단위는다음과같은방법으로사용한다. - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 6
가시속성 1 display 속성 display 속성은태그의영역표현방식을지정하는속성 다음키워드를입력할수있음 다음과같은방법으로사용 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 7
가시속성 2 none 키워드를사용하면태그가완전히화면에서제거 block 키워드를사용하면태그가한줄을차지 inline 키워드를사용할때와 inline-block 키워드를사용할때의차이점은 margin 속성과 padding 속성을적용할때에알수있음 Inline 키워드를사용하면 margin 속성과 padding 속성이좌우로만적용 inline-block 키워드를사용하면 margin 속성과 padding 속성이상하좌우로적용 inline 키워드또는 inline-block 키워드를사용하면한줄에들어감 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 8
가시속성 3 visibility 속성 대상을보이거나보이지않게지정하는속성이다. display 속성을 none 키워드로지정하는것과달리영역을유지한채로보이지않게만만든다. - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 9
가시속성 4 opacity 속성 대상의투명도를지정하는속성 0부터 1 사이의숫자를입력 (0은투명, 1은불투명 ) 다음과같은방법으로사용 코드를실행하면다음과같이출력 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 10
박스속성 1 박스속성은웹페이지의레이아웃을구성할때가장중요한속성 다음속성을모두합쳐박스속성이라고함 width 속성과 height 속성 width 속성과 height 속성은글자를감싸는영역의크기를지정하는속성 다음과같은방식으로사용 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 11
박스속성 2 margin 속성과 padding 속성 margin 속성은마진의너비를지정하는속성이고 padding 속성은패딩의너비를지정하는속성 margin 속성과 padding 속성은 width 속성과 height 속성과별도로적용 박스크기는다음과같은공식을가짐 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 12
박스속성 3 box-sizing 속성 width 속성과 height 속성은글자를감싸는영역의크기를지정하는속성. box-sizing 속성은이러한공식을변경할수있는 CSS3 속성 다음과같은키워드를입력할수있음 각각의키워드를적용할때, width 속성과 height 속성의적용범위가그림처럼변경 content-box 키워드의경우박스의크기를다음공식으로구함 border-box 키워드의경우박스의크기를다음공식으로구함 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 13
테두리속성 1 border-width 속성 테두리의너비를지정하는속성 border-style 속성 테두리의형태를지정하는속성 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 14
테두리속성 2 border-width, border-style, bordercolor 속성을사용해야테두리를생성할수있음 각각의속성은다음과같은방법으로사용 방금살펴본 3 가지테두리속성은 border 속성으로한번에입력할수있음 코드를실행하면다음과같이출력 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 15
테두리속성 3 border-radius 속성 border-radius 속성을사용하면테두리가둥근사각형또는원을만들수있음 코드를실행하면다음그림처럼출력 각각의테두리의둥글기설정가능 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 16
배경속성 1 background-image 속성 배경에넣을그림을지정하는속성 코드를실행하면다음과같이출력 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 17
배경속성 2 이미지를중첩해서사용가능 (CSS3 부터지원, 구버전의웹브라우저사용불가능 ) 코드를실행하면다음과같이출력 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 18
배경속성 3 background-size 속성 그림크기를조절할때에사용하는속성 CSS3 에서추가된속성이므로인터넷익스플로러 8 이하에서는사용할수없음 다음과같은크기단위를넣어사용 코드를실행하면다음과같이출력 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 19
배경속성 4 크기단위를 2 개입력하면두번째크기단위는높이를의미 쉼표를사용해구분하면여러개의배경이미지에크기를각각적용 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 20
배경속성 5 background-repeat 속성 배경패턴방식을지정하는속성 코드를실행하면다음과같이출력 다음과같은방식으로사용 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 21
배경속성 6 background-attachment 속성 배경이미지를어떠한방식으로화면에붙일것인지를지정하는속성 다음과같은방식으로사용 코드를실행하면다음과같이출력 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 22
배경속성 7 background-position 속성 배경의위치를지정하는속성 다음과같은형식으로값을입력 다음과같은방식으로사용 다음키워드를사용 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 23
폰트속성 1 font-size 속성 글자의크기를지정할때에사용하는속성 다음과같은방법으로사용 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 24
폰트속성 2 font-family 속성 폰트를지정하는속성 다음과같이폰트이름을입력해서사용 사용자의컴퓨터에폰트가없으면폰트가적용되지않음 만약을대비해여러개의폰트를연속적으로입력 다국적웹페이지를제공할경우사용자에게무슨폰트가있는지일일이확인불가 이러한경우에는 generic-family 폰트사용 generic-family 폰트는웹브라우저에서미리지정하고있는폰트 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 25
폰트속성 3 Serif 폰트 ( 명조체 ), Sans-serif 폰트 ( 고딕체 ), Mono space 폰트 ( 고정폭글꼴 ) 를사용할수있음 다음과같은방법으로사용 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 26
폰트속성 4 font-style 속성과 font-weight 속성 폰트의기울기와두께를지정하는속성 각각의속성에는다음키워드를입력 각각의속성은다음과같은방법으로사용 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 27
폰트속성 5 text-align 속성 글자의정렬과관련된스타일속성 이를제거하려면다음과같이 textdecoration 속성에 none 키워드를지정 text-decoration 속성 a 태그에 href 속성이지정되면다음과같이밑줄이표시 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 28
위치속성 1 position 속성 태그의위치설정방법을변경할때사용 다음키워드를입력할수있음 position 속성은반드시다음스타일속성과함께사용 각각의키워드는다음과같은의미를가짐 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 29
위치속성 2 다음과같은방식으로사용 다음과같은결과가나타남 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 30
위치속성 3 z-index 속성 HTML 태그는아래입력한태그가위에위치 순서를변경할때에 z-index 속성을사용 큰값을입력할수록위로올라옴 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 31
위치속성 4 위치속성과관련된공식 현재만들고있는예제에서다음과같은코드의실행결과를예측 코드를실행하면다음과같이출력 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 32
위치속성 5 다음과같은문제를발견할수있음 H1 태그두개가붙어있음 (div 태그가영역을차지하지않음 ) 색상이적용된상자가자신의부모를기준으로위치를잡지않음 이를해결할때는다음과같은공식을사용 자손에게 position 속성을 absolute 키워드로적용하면부모에게 height 속성을입력 자손의 position 속성을 absolute 키워드로적용하면부모의 position 속성을 relative 키워드로적용 코드를실행하면다음그림처럼출력 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 33
위치속성 6 overflow 속성 내부의요소가부모의범위를벗어날때어떻게처리할지지정하는속성 각각의키워드를적용할때에다음과같이실행 다음과같은방식으로사용 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 34
float 속성 1 float 속성개요 웹페이지레이아웃을구성할때에반드시사용하는속성 부유하는대상을만들때에사용하는속성 float 속성을사용하면다음과같이이미지가글자위를부유하게만들수있음 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 35
float 속성 2 float 속성을사용한수평정렬 동위위치에있는태그에모두 float 속성을적용하면수평정렬 div.box 태그는동위위치에있음 코드를실행하면다음과같이수평정렬 이러한태그에다음과같은스타일을적용 right 키워드를적용했을경우에는위에위치한태그가오른쪽에붙는다는것을주의 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 36
그림자속성 text-shadow 속성 글자에그림자를부여하는속성 다음과같은형태로값을입력 box-shadow 속성 박스에그림자를부여하는속성 다음과같은형태로값을입력 다음과같이사용 다음과같이사용 - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 37