9/10 CSS
CSS(Cascading Style Sheet)
웹 디자이너가 주로 사용하는 Style Sheet 언어.
웹 페이지의 통일성있는 디자인을 제공해야할 때 사용함.
CSS의 대표 Framework- bootstrap
3가지 방법으로 사용할 수 있다
inline,embed,external file
CSS는 에러가 발생하지 않는다..
site,app의 특징
web site: 대상-일반사용자
별도의 교육이 필요없다
업무로직이 복잡하지 않다
주로 ASP,PHP를 사용해서 개발됨(web agency)
web application: 기업에서 일을 하는 사원(현업) 이 사용한다
별도의 사용자 교육이 필요하다.
현업의 업무를 알아야하기 때문에 web site보다 개발난이도가 높다(SI 개발자)
공통점은 web browser에서 동작하고 개발에 사용되는 언어가 같다
inline방식
HTML Tag에 직접 정의하는 방식
selector가 사용되지 않는다.( 디자인을 적용받을 태그에 작성하기 때문에 selector 필요 X)
장점: 디자인 적용 우선순위가 가장 높다...
단점: 디자인코드의 중복성이 가장 높다..
문법)
<태그명 style="속성명:값; 속성명:값; , , , "
embed방식
HTML <head태그 사이에 <style>태그를 정의하고, 디자인 코드를 정의하는 방식이다.
external file방식보다 적용 우선 순위가 높다..
디자인 코드의 중복성을 낮출 수 있다
selector을 사용한다
<style>태그가 선언된 HTML에서만 사용한다.
(다른 페이지에서 동일한 디자인을 사용하고 싶다면, 해당페이지에서 디자인코드를 다시 만들어서 정의해야함)
특정ㅍ이지에서만 사용되는 디자인을 정의해야할 때 사용함.
selector?
디자인을 적용받을 태그를 정의.
디자인의 사용성을 고려하여 하나의 이름으로 묶는 일.
문법)
<style type="text/css"
선택자{속성 :값; 속성:값; , ,, }
external file 방식
CSS코드를 확장자가 .css인 파일을 생성하고, 그 안에 정의하는 방식.
코드의 중복성이 가장 늦다.
디자인 적용의 우선순위가 가장 낮다(inline =->embed->external)
selector를 사용하여 코드를 작성.
로딩속도가 가장 느리다
여러 페이지에서 사용되는 공통 디자인을 정의할 때 가장 적합하다.
(특정페이지의 디자인을 정의할때는 embed방식이 적합함)
필요한 페이지에서 <link rel="stylesheet" type="text/css" href="CSS URL" /> 태그를 상요하여ding Style Sheet)
웹 디자이너가 주로 사용하는 Style Sheet 언어.
웹 페이지의 통일성있는 디자인을 제공해야할 때 사용함.
CSS의 대표 Framework- bootstrap
3가지 방법으로 사용할 수 있다
inline,embed,external file
CSS는 에러가 발생하지 않는다..
site,app의 특징
web site: 대상-일반사용자
별도의 교육이 필요없다
업무로직이 복잡하지 않다
주로 ASP,PHP를 사용해서 개발됨(web agency)
web application: 기업에서 일을 하는 사원(현업) 이 사용한다
별도의 사용자 교육이 필요하다.
현업의 업무를 알아야하기 때문에 web site보다 개발난이도가 높다(SI 개발자)
공통점은 web browser에서 동작하고 개발에 사용되는 언어가 같다
inline방식
HTML Tag에 직접 정의하는 방식
selector가 사용되지 않는다.( 디자인을 적용받을 태그에 작성하기 때문에 selector 필요 X)
장점: 디자인 적용 우선순위가 가장 높다...
단점: 디자인코드의 중복성이 가장 높다..
문법)
<태그명 style="속성명:값; 속성명:값; , , , "
embed방식
HTML <head태그 사이에 <style>태그를 정의하고, 디자인 코드를 정의하는 방식이다.
external file방식보다 적용 우선 순위가 높다..
디자인 코드의 중복성을 낮출 수 있다
selector을 사용한다
<style>태그가 선언된 HTML에서만 사용한다.
(다른 페이지에서 동일한 디자인을 사용하고 싶다면, 해당페이지에서 디자인코드를 다시 만들어서 정의해야함)
특정ㅍ이지에서만 사용되는 디자인을 정의해야할 때 사용함.
문법)
<style type="text/css"
선택자{속성 :값; 속성:값; , ,, }
external file 방식
CSS코드를 확장자가 .css인 파일을 생성하고, 그 안에 정의하는 방식.
코드의 중복성이 가장 늦다.
디자인 적용의 우선순위가 가장 낮다(inline =->embed->external)
selector를 사용하여 코드를 작성.
로딩속도가 가장 느리다
여러 페이지에서 사용되는 공통 디자인을 정의할 때 가장 적합하다.
(특정페이지의 디자인을 정의할때는 embed방식이 적합함)
필요한 페이지에서 <link rel="stylesheet" type="text/css" href="CSS URL" /> 태그를 정의하여 외부파일을 사용함.
selector?
CSS에서 제공하는 selector들
embed방식, external file방식에서 사용.
디자인을 적용받을 태그를 선택하거나 정의되는 디자인을 하나의 이름으로 묶을 때 사용함
selector종류 : id selector, class selector, tag selector, name selector,
sub selector, behavior selector, multiple selector 들이 제공됨.
형식)
selector {속성:값; 속성:값; , , , ,}
//이때 값은 단일값, 복합값 형태를 가짐
단일 값 = 속성:값; 의 형태 ex> display:none;
복합 값 = 속성: 값 값 값 , , , , border: 선 두께, 선 종류, 선 색상 등등; 이처럼 여러값이 한번에 입력됨.
CSS주석
/* */: 하나의 주석으로 한줄 또는 여러줄 주석을 사용할 수 있다.
ID selector
CSS를 가지고 있는 HTML<body>에서 디자인을 적용받을 태그가 유일할 때 사용
참조하는 속도가 가장 빠르다.
문법)
style tag에서 선언
#아이디명 {속성: 값 , , , }
HTML<body>의 하위에서 사용함
<태그명 id="아이디명 />
반드시 id는 유일하도록 관리해야한다.
class selector
웹 페이제이서 디자인을 선택하여 사용할 태그가 여러 개 일 때 사용함.
사용법)
- style 태그에서 클래스 정의
.클래스명{속성:값 , , , }
-HTML <body>에서 사용된다
<태그명 class="클래스명" />
name selector
웹 페이지에서 디자인을 선택하여 사용할 태그가 여러 개 일때 사용.
태그에 정의되는 모든 속성으로 사용할 수 있는 selector
사용법)
- style 태그에서 클래스 정의
[ 속성 ='값']{속성:값 , , , }
tag selector
웹 페이지에서 태그가 정의되면 모든 태그에 디자인이 적용되는 selector
하나의 디자인을 여러 selector에서 다른 이름으로 사용할 때 사용하는 문법.
사용법)
- style 태그에서 클래스 정의
태그명{속성:값 , , , }
multiple selector
모든 selector에 적용 가능한 selector.
하나의 디자인을 다양한 이름에 selector로 사용할 때 사용하는 문법
selector를 ,로 구분하여 다른 이름으로 정의하고 사용하는것
디자인 코드의 중복을 최소화하고,동일 디자인을 다양한 이름으로 사용할 수 있다.
사용법)
- style 태그에서 클래스 정의
selector,이름,이름,,{속성:값 , , , }
sub selector
특정 상속관계의 태그에만 디자인을 적용할 때.
부모태그명> 자식태그명{속성:값; , , , ,}
디자인을 적용받지 않아야하는 태그에 디자인이 적용 될 수 도 있다.....
사용법)
- style 태그에서 클래스 정의
부모태그명>자식태그명 {속성:값 , , , } => 얘는 부모태그>자식>자식>자식, , , 이런형태로 가능.
적용
<부모태그명>
<자식태그></자식태그>
</부모태그명>
behavior selector
사용자의 동작이 있을 때 디자인을 적용하는 selector
사용법)
style 태그 정의
selector:동작{속성:값; , , ,}
CSS의 속성들
글꼴 관련속성
글꼴 설정: font-family: 글꼴 , , , ;
//복합값인데 앞에 선언한 글꼴이 접속자에게 적용되지 않으면 뒤에 있는 글꼴로 적용된다.
값에는 " 을 사용할 수 있다(공백이 있는 글꼴을 쓸때)
진하게: font-weight:값; // normal(일반) , bold(진하게)
이탤릭: font-style:값 // noraml(일반글자) , italic-이탤릭체
글자색 변경 (전경색-foreground color변경) : color:속성 (영어단어,RGB컬러)
/* #FFF => #FF FF FF 둘이 동일함
#000 => #00 00 00
*/
RGB컬러 주는 방법중 하나임!!
글자 크기: font-size
밑줄 취소선 윗줄: text-decoration: underline // line-through // overline
테두리 관련 속성
테두리를 가지는 모든 태그(table,img,div,li,th,td,p,span, , , )는 속성을 적용 받을 수 있다.
사용법)
border - 왼쪽, 윗쪽 ,오른쪽 ,아랫쪽 모든 선을 변경함
border-xxx : 특정 위치의 선을 변경할 수 있다.
모든선 변경)
border: 선의 두께( 숫자px) 선의종류(solid, dotted,dashed,double) 선 색깔(영단어,RGB);
크기변경
넓이: width:값; // 고정길이(수치px) 가변길이( 수치%)
높이: height:값; //고정길이밖에 안됨
바닥색(background color)
background-color: 색(영단어,RGB)