1. 생활코딩: https://opentutorials.org/course/1
2. CMS Factory: http://www.cmsfactory.net/node/10350
3. 공개 강좌 사이트 (이름 모르겠음): http://fromyou.tistory.com/481~523
-411 ~ 479 : HTML5 강좌
-481 ~ 523 : CSS3 강좌
-524 ~ 580 : 자바스크립트 강좌
4. 홈짱닷컴: http://www.homejjang.com/09/css_advance.php
참고사이트:
서포트할 레벨을 정할때 참고할만한 사이트: http://caniuse.com/
CSS3
HTML문서에 style을 입혀주는것.
사용방법:CSS file (stylesheet)를 HTML과 연결/삽입 한다.
1. <link>태그를 <head>에 삽입하여, 파일(.css)을 연결
2. <style> 을 html에 head or body 바로 정의 (Test목적으로 쓰임)
e.g 1.
<head>
<link rel="stylesheet" type="text/css" href="파일위치" />
</head>
e.g.2 - head에 정의
<head>
<style type="text/css">
p{
color: red;
}
</style>
</head>
e.g.3 -body에 정의
<p style="color:red;">hello</p>
<<요소종류>>
block - 기본 넓이 속성은 100%, 줄바꿈 가능, 인라인 요소 포함 가능
종류: <h1~6>, <p>, <div>, <blockquote>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>, <address>
주의사항: <div>, <li>, <dd>, <address> 는 블록요소 이지만 모든 요소를 포함 할 수 있다.
inline - 넓이는 내용에 따라 변경, 줄바꿈 불가, 인라인 요소 포함 가능
종류: <img>, <a>, <span>, <strong>, <em>, <q>, <abbr>, <acronym>, <sup>, <sub>, <map>, <area>
<<문법>>
[1]Selector {Declaration->property:value;}
e.g.
p {color: red;}
p: selector, color: property, red: value
선택자 (Selector)
참고: http://circlash.tistory.com/570
1. id (#) - e.g. #div1{background-color: red;} - 한번 정의
2. class (.) - e.g. .container{color: blue;} - 그룹 정의
3. 하위 선택자 - e.g. div ul li - 종속 관계에 따라 순차적으로 나열
4. 태그 선택자 - e.g. div, p - 태그요소 이름 자체를 선택자로 사용
5. 가상 클래스 - p:first-letter - 미리 정한 가상 클래스를 요소 뒤에 덧붙여 특수한 상황에 사용
6. a[target=_blank] - a 태그는 []안에 설정
7. p, .abc {} -한번에 여러 선택자를 선택해 스타일 지정 가능
8. 선택자:상태
(상태종류: hover, link, visited, active, focus, enabled, disabled, checked, empty)
e.g.
span:hover{background-color:gray;}
span태그에 마우스를 올렸을때, 스타일 지정 가능
[2] 디자인 속성들
1. 색상, 불투명도, visibility
* 색상을 나타내는 방법
- 이름 (red, blue등.. 으로 지정 가능)
참고: https://www.w3.org/TR/css3-color/#svg-color
-HEX (#FF0000, #FFFFFF, #000000 등으로 나타낼 수있음)
-RGB (rbg(0, 0, 255)의 형식으로 나타낼 수 있음)
-RGBA (rgba (0, 0, 255, 0.5) 의 형식으로 색상과 불투명도를 나타낼수 있음)
*불투명도를 나타내는 방법
-opacity: 숫자;
-0~1사이의 소수점으로 나타냄
*숨기기 기능
visible or hidden
참고사이트: http://www.w3schools.com/cssref/pr_font_font-size.asp
2. 텍스트 꾸미기
color: 글자색
font-style: 글씨 스타일 (normal, italic, oblicque)
font-variant: 대소문자 변환 (capitalize, uppercase, lowercase)
font-weight:두께 (normal, bold, 400)
font-size: 사이즈 (small, medium, $, 30px, inherit 등등..)
font-family: 글씨체 ("Times New Roman", serif)
text-align: 정렬 (left, center, right)text-decoration: 글자꾸미기 (underline, line-through, overline)
text-indent: 들여쓰기
letter-spacing: 글자 간격 (-,+ 가능)
word-spacing: 단어 간격 (-,+ 가능)
line-height: 줄 간격
3. 배경화면
background-color: 배경색
background-position: 배경 위치(px, %, center, contain etc..)
background-image: 배경 이미지, 그라디언트 (url:("파일명");)
background-repeat: 배경 반복(no-repeat, repeat-x, repeat-y, repeat)
4. 선
border-width: 선두께(thin, medium, thick, px)
border-color: 선 색상
border-style: 선 스타일(none, dotted, dashed, solid, double etc..)
border-radius: 선 모서리(px, %)
box-shadow: 선 그림자(h-shadow, v-shadow, blur, spread, color, inset)
5. 커서
cursor: 커서 모양 ( auto, pointer, crosshair, help, move, resize, text, progress, wait)
[3] 레이아웃 속성들
1. 박스모델
마진: 다른 요소와 본 요소의 간격
보더: 테두리
패딩: 콘텐츠와 보더 사이 간격
콘텐츠: 내용물
실제 간격 구하는 방법:콘텐츠 크기+패딩+보더+마진
<크기 속성>
px, em, auto, %, cm 등등..
넓이: height: 크기 단위;, max-height, min-height
높이: width: 크기 단위; max-width, min-width
*크기 설정방법
첫번째, 컨텐츠 사이즈 정하기
두번째, 패딩사이즈 지정
세번째, 마진 사이즈 지정
e.g.
p {
height: 100px;
width: 150px;
padding: 3px;
margin: auto;
}
2. 위치
display속성 (참고: http://www.w3schools.com/css/css_display_visibility.asp)
-요소의 성격을 바꿀때 사용
:block - 인라인 요소를 블록 형식으로 배치
:inline - 블록 요소를 인라인 형식으로 배치
:inline-block - 요소를 인라인 형식으로 배치, 넓이, 높이 설정 가능
:none - 요소를 숨길때 사용
float 속성 (참고: http://www.w3schools.com/css/css_float.asp)
-블록 요소를 정렬시켜겹치지 않게함
:left - 왼쪽에 정렬
:right - 오른쪽에 정렬
clear:both - float 해제 (float을 썼을때는 필수로 해제 해주어야함! 안그럼 겹침)
position 속성 (참고: http://www.w3schools.com/css/css_positioning.asp)
-요소를 겹치게 정렬할때 사용
:static (default) 기본적으로 설정 되어있는 위치-위치조정 못함!
:fixed - 스크린을 기준으로 위치가 고정됨(스크롤 영향을 받지 않음)
:absolute - 부모를 기준으로 위치 지정 (스크롤 올리면 따라 올라감)
:relative - 기본 기준으로 위치를 지정
z-index 속성 (참고: http://www.w3schools.com/cssref/pr_pos_z-index.asp)
- position 속성인 relative 나 absolute 가 적용 되었을 때,
stack 형식으로 만들기 위함 (앞으로 보내기, 뒤로 보내기 개념)
:auto (default)
overflow 속성
-내용을 어떻게 보여줄지 결정할때 사용
:hidden - 내용이 넘어가면 숨겨라
:auto - 내용이 넘어가면 스크롤바를 생성해라
:scroll - 무조건 스크롤바를 생성해라
주의사항:
브라우저마다 CSS호환성이 다름.
앞에 브라우저를 명시해서 써주면 해결됨.
-ms- :인터넷 익스플로러
-moz-: 모질라 파이어폭스
-webkit-:크롬 & 사파리
o- :오페라
e.g.
-ms-transform:rotate(5deg); -moz-transform:rotate(5deg);
-webkit-transform:rotate(5deg); -o-transform:rotate(5deg);
<< 미디어 쿼리 >>
문법: [only / not] @media [미디어 유형] [and / ,](조건문){실행문}
only:잘 쓰지 않음 (지원하는 곳에서만 써라)
not 유형: 어디에서 쓰지말자
@media: 미디어 쿼리를 쓰겠다는 정의
[미디어 유형]: 생략 가능
e.g. all, print, screen 등등..
논리연산자
[and] 앞뒤 조건이 true일때, 뒤에 따라오는 것을 해석해라 (생략 가능)
[,] 앞뒤 조건중 하나만 true여도, 실행 (생략가능)
조건문
조건문이 true일때, 실행 (and / ,)써서 2가지 조건 사용가능
실행문
앞의 조건들이 모두 true일때, 실행
CSS 코드가 들어감
