2016년 11월 20일 일요일

1. CSS [Basic CSS]

           No comments   
CSS
정보를 표현해서 보여주는 것이 HTML이라면 CSS는 그 정보들을 꾸며주는 역할을 한다.
HTML에서도 정보를 꾸며줄 수 있지만 그것은 작은 단위의 웹 프로그램을 구현할때는 편하지만 큰 프로젝트에서 element를 다루기에는 아주 비효율적인 방법이므로 CSS를 써서 html element를 꾸며줌

CSS의 기본문법과 사용 방법
CSS 사용방법

  1. linked style sheet
  2. embedded style sheet
  3. inline style sheet

1. linked style sheet
이방법은 css파일이 외부에 따로 있어 html에서 이 CSS파일안의 기능을 사용하고 싶다면  head 태크안의 <link> 태크를 통해 사용가능케 한다. 

Ex) <head> <link href="CSS file" type= "text/css" rel="stylesheet" /> </head>

2. embedded style sheet
이 방법은 head 태그안 그리고 style 태그안에 css문법을 그냥 쓰는 것이다.

Ex) <head>  <style> p { color: red;} </style> </head>
3.  inline style sheet
이 방법은 위에서 말한 html element의 속성에 직접 css 를 쓰는 것이다. 한개 한개의 element 만을 꾸미는데 알맞음.

Ex)  <p style="color:blue;" > hi </p>


CSS 기본문법






위 사진은 CSS을 쓰는 기본 문법이다. 위의 property 와 value의 쌍은 여러개일수 있다.
  • Ex)  p {background-color: yellow; color: red; }  -모든 p 태그의 배경색은 노랑, 글자색은 빨강
  • Ex)  p , h1 , h2 { color: red;} - p,h1,h2 태그 모두 글자색을 빨강으로 함
  • * selector는 html element 모두에 해당하게 함
  • 색은 RGB code로 나타낼수 있다 ( 0(none) ~255(full) )
    • color: rgb(128, 0 ,128);
  • hex code로도 나타낼수 있다.
    • color: #FF0088;
Font에 대한 속성들





  • font-size는 퍼센트(%)으로도 쓸수 있고 숫자로도 쓸수 있다. 
  • font-size 는  px(pixel) , pt(point) , em(m-size) 으로 쓰기 가능하다 크기는 px<pt< em
CSS 주석(comment)
- /* comment */ 와 같이 쓴다

Text에 대한 속성들







  • text-align cab be left,right , center, justify
  • text-decoration cab be overline, line through, blink , none  , underline
Background에 대한 속성들






  • background-repeat can be repeat(default) , repeat-x, repeat-y or no-repeat
  • background-position pair of value like "370px 200px;" 
CSS Selector

CSS ID,Class Selector










위 사진과 같이 html element들은 id와 class를 가질수 있는데, id,class는 css에서 그 id나 class 를 가진 html element를 꾸며주기 위해 사용될수 있다. 
그래서 #은 id를 selector해주고 .은 class를 selector해준다.

위 사진의 css부분을 해석하자면 "#i" 의 뜻은 id이름이 i인 html의 element의 text color를 red로 바꾸고 폰트 크기를 30px로 바꾸겟다는 의미이다. 그리고 "p.c"는 html element중에 p 태그이면서 class 이름이 c 인 element의 text색을 초록으로 하고 폰트 크기를 30px로 바꾸겟다는 의미이다.

CSS pseudo-classes









예시를 통해 이해해보자

  • a element를 누르지 않은 상태에서는 color가 노란색
  • a element에 마우스를 갖다 대면 green
  • a element를 누르고 나면 red
selector 우선순위











점수가 높을수록 우선순위가 높다.

CSS context selector
 

왼쪽은 selector1  안의 selector2 모두에게 적용되는 방법이고 오른쪽은 selector1 바로(direct)안의 selector2에게만 해당되는 방법이다.
예를 들어
1. div p { color: red; }                    2. div > p {color:red;}
와 같이 css를 두종류로 나누었다면


옆의 html에 1번과 같은 css을 적용하면 p 태그안의 text의 색이 빨강으로 변하지만
2번을 적용했을 경우에는 div 바로안의 태그는 span이므로 글자색이 빨강으로 변하지 않는다.









0 개의 댓글:

댓글 쓰기