38일차 수업 정리(CSS-1)
**CSS
=> HTML 페이지에 디자인을 적용하기 위한 문법(언어)
1. 적용방법
1) External Style Sheet
=> 별도의 파일을 만들고 Link를 걸거나 포함시켜서 사용하는 방식
=> link : <link rel="stylesheet" href="css/ext1.css">
=> 포함 : <style type="text/css">@import url("css/ext2.css(파일경로)");</style>
2) Internal Style Sheet
=> HTML 파일 안에 style이라는 태그를 만들고 그 안에 적용
3) Inline Style Sheet
=> 태그 안에 작성하는 것
=> <태그 style="color:green;">
2. 스타일 시트 작성 규칙
선택자{ 속성:값; }
=> 선택자는 적용할 요소
=> 속성은 적용할 특성
=> 값을 속성에 적용하는 값
=> 여러개의 속성을 설정할 수 있는데 이때는 ;으로 구분
=> 예약어에 따옴표를 하지 않음(" "는 경로 설정시 이용)
3. 선택자
1) 기본선택자
=> * : 전체에 적용
- 태그명 { 속성 : 값; }
- 태그 선택자로 동일한모든 태그에 적용
1-1) 클래스 선택자
=> . : 클래스에 적용
- .클래스명{ 속성 : 값; }
- 동일한 디자인을 적용하기 위해서 많이 사용
1-2) 아이디 선택자
=> # : 아이디에 적용
- #아이디{ 속성 : 값; }
- 하나를 구분하기 위해서 사용
2) pseudo-class(의사 클래스) 선택자
=> 상황에 따른 스타일시트 적용
=> Link(a 태그)
- link, visited
=> 사용자의 동작
- hover : 마우스가 올라왔을 때(모바일에서는 미지원)
- active : 눌렀을 때
- focus : 포커스가 오면
=> ui 요소
- checked, enabled, disabled
=> 적용방법
- 선택자 : 가상클래스{ 스타일시트 내용; }
3) 구조 선택자
- root : 최상위 태그
- empty : 자식이 없는(내부에 다른 태그가 없는)
- first-line : 첫 줄
- first-letter : 첫 글자
- only-child : 형제가 없는(같은 레벨의 태그가 없는)
- first-child : 첫번째 자식
- last-child : 마지막 자식
- nth-of-type(n) : nqjsWo
- first-of-type : 첫번째
- last-of-type : 마지막
- before : 이전
- after :이후
4) 선택자 조합
=> 선택자1 선택자2 : 선택자 1안에 존재하는 선택자2
=> 선택자1>선택자2 : 선택자 1안에 첫번째 레벨에 존재하는 선택자2
=> 선택자1+선택자2 : 형제 선택자 - 바로 뒤에 나와야 함
=> 선택자1~선택자2 : 형제 선택자 - 위치에 상관없이 레벨이 같으면 됨
5) 선택자 그룹
=> 여러개의 선택자에 적용하고자 하는 경우에는 ,로 구분
4. 스타일시트 충돌
1) 특정도가 높은 것이 적용
- inline : 1000
- id선택자 : 100
- class선택자 : 10
- 가상 클래스 : 10
- 태그 : 1
2) 특정도가 같은 경우 : 나중에 적용한 것이 설정
=> 스타일시트는 body 내부의 모든 태그를 읽고 해당 태그를 화면 출력시 순차적용
(동일 컨텐츠에 2개 이상의 스타일 설정시 2번 적용하므로 나중에 적용한 것이 화면에 출력)
=> 스타일시트는 head태그에 작성하는 것이 일반적이지만 다른 곳에 작성해도 됨
5. comment
=> 주석 : /* 주석내용 */
6. 단위
1) 절대 단위 : 크기가 고정
- px : 1/96인치
- pt : 1/72인치
- pc : 12pt
- cm, mm
=> 인쇄물에 주로 이용
2) 상대 단위 : 크기가 변경
- ex : 소문자 x의 크기
- em : 현대 font-size를 기준
- % : 백분율
- rem : 현재 브라우저의 폰트 기준
- ch : 숫자 0의 크기
- vw : 현재 뷰 너비의 1/100
- vh : 현재 뷰 높이의 1/100
- vm : vw와 vh중에서 작은 것
=> 현재 디스플레이에 이용(1em = 12pt = 16px)
3) 각도 단위 : deg, rad
7. 타이포그라피 : 텍스트 서식
1) font-family : 글꼴
=> font-family : 글꼴, 글꼴, 글꼴...
- 여러개의 글꼴을 설정하는데 앞의 글꼴이 없으면 뒤의 글꼴을 사용
- 글꼴은 운영체제, 브라우저 마다 다르기 때문에 대체 글꼴 설정
2) @font-face
=> 글꼴이 없을 때를 대비하여 문서 안에 글꼴을 저장해 두었다가 웹 문서 접속시 글꼴을 다운로드 받도록하여 출력
=> @font-face{
font-family : 글꼴 명;
src:url(글꼴파일경로) }
3) font-size
=> 절대적인 크기 설정 가능 : 12px
=> 상대적인 크기 설정 가능 : 1.5em, 150%
=> 예약어 : xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger
4) font-weight
=> 글꼴의 굵기
=> 100~900사이의 100단위 숫자로 설정 가능, 기본은 400
=> 예약어 : lighter, normal, bold, bolder
5) font-style
=> 기울임
=> italic, oblique 설정 가능
6) font-variant
=> small-caps를 설정하면 소문자를 작은 대문자로 출력
7) font
=> 6가지 속성을 순서대로 한꺼번에 설정하는 것
8) color
=> 전경색
=> 글자와 보더에 적용
=> 색상 이름 사용 가능 : http://www.learningwebdesign.com/colornames.html
=> #빨강(2자리)녹색(2자리)파랑(2자리)의 16진수로 표현 가능
- 2자리의 숫자가 모두 같다면 1자리로 표현가능(#000000 : 검정 -> #000)
=> RGB(0~255사이 or 백분율, 0~255사이 or 백분율, 0~255사이 or 백분율)
=> RGBA(0~255사이 or 백분율, 0~255사이 or 백분율, 0~255사이 or 백분율, 0~1사이의 알파값)
- 알파가 0이면 투명, 1이면 불투명
9) line-height
=> 행간의 높이 설정
=> 절대단위 및 상대단위 사용 가능 - 기본은 글자 크기
10) text-indent
=> 문단의 첫줄 들여쓰기
11) text-align
=> 텍스트의 수평 맞춤
=> left, center, right, justify(균등 맞춤 - 첫글자는 왼쪽 마지막글자는 오른쪽에 맞춤을 하고 간격을 동일하게 맞춤)
12) text-decoration
=> 텍스트에 밑줄을 긋거나 취소선들의 효과
=> none, underline, overline, line-through, blink(IE에서 동작안함)
=> a 태그에서 밑줄을 제거하고자 할 때, none을 사용
=> 최근의 web Programming에서는 button보다 이미지에 a링크를 이용하여 누르는 기능을 활성화하는 경우가 많음
- a링크 사용시 밑줄이 보여서 제거
13) text-transform
=> none, uppercase, lowercase, capitalize
14) letter-spacing
=> 글자 사이의 간격이고 단어 사이의 간격은 word-spacing
15) visibility
=> visible, hidden
16) text-overflow
=> 텍스트 내용이 box(영역)를 넘어갈 때의 옵션 설정
=> clip : 잘라버림, ellipsis : ...으로 표기
17) text-shadow
=> 글자에 그림자 설정
=> text-shadow : 수평오프셋, 수직오프셋, 번짐정도 색상
=> 수평과 수직 옵셋이 같을 경우 하나만 작성해도 됨
=> 중복 적용 가능 : 마지막에 ,를 하고 다음 옵션을 설정
8. 목록
1) list-style-type : 목록기호 모양 설정
=> ol : decimal, decimal-leading-zero, upper-alpha, lower-alpha, upper-roman, lower-roman, upper-latin, lower-greek, armenian, georgian, hirakana, katakana
=> ul : disc, circle, square
=> none : 목록기호 표시하지 않음
2) list-style-image : 목록 기호로 이미지 사용 가능
=> url(이미지 파일 경로)
3) list-style-position
=> inside 와 outside
4) 예전에는 폼의 항목들을 table을 이용하여 많이 표현, 최근에는 목록을 많이 이용
9. 배경
1) 배경 색상 : background-color
=> color와 동일한 방법으로 설정
2) 배경 이미지
=> background-image : none을 설정하거나 url(이미지파일 경로 설정)
- 최근에는 img태그 대신에 영역에 배경이미지를 이용해서 출력하는 경우가 많음
=> background-repeat : 이미지파일의 크기가 영역보다 작을 때의 옵션
- repeat, repeat-x, repeat-y, no-repeat 설정
=> background-position : 이미지파일의 크기가 영역보다 작을 때 어디서 시작할 것인지를 설정
- left, right, top, bottom을 쌍으로 결합 or 값을 직접 설정
- background-position : left top;
background-position : 100px 200px; (왼쪽에서 100, 위에서 200떨어져서 출력)
=> background-attachment : 스크롤 할 때 이미지 이동 여부를 설정(scroll, fixed 설정)
=> background-size : 배경이미지 크기로 기본값은 auto(원본크기 그대로)
- 숫자 2개 설정 : 너비와 높이 / 숫자 1개 설정 : 너비와 auto
- cover를 설정시 너비와 높이 비율을 맞추어서 확대, 축소하는데 큰 값을 적용
- contain 설정시 작은 값을 적용
=> background-clip : 배경이미지나 배경색을 어디까지 적용할 것인지 설정
- border-box : 경계선까지
- padding-box : 내부여백까지
- content-box : 내용 부분에만
=> background-origin : 기준점
3) background
=> 색상 이미지 반복여부 시작위치 시작위치 attachment;
=> 이미지가 없으면 색상이 적용
10. vendor prefix
=> css3 표준으로 만들어 졌으나 이전에 브라우저별로 별도로 만들어 사용하던 기능을 가져와 사용하기 위해 지정하는 브라우저를 구분하기 위한 헤더
- safari, chrome : -webkit-
- firefox ; -moz-
- ms : -ms-
- opera : -o-
=> 배경에 그라데이션 적용시 vendor prefix를 이용해야 함
11. 여기까지에서 반드시 숙지
=> css란 무엇인가?
=> css적용 방법 : external, internal, inline
=> css작성 방법 : 선택자{속성:값...}
=> 태그, 클래스, 아이디, name의 역할
=> 그래픽 : origin
=> css3의 vendor prefix가 무엇인지
12. box model
=> 영역
1) 내용이 보여지는 영역 : content
2) 경계선 : border
3) 경계선과 content 사이의 여백 : padding
4) 내 경계선과 다른 콘텐츠의 경계 선 사이의 여백 : margin
5) box의 크기
- 너비 : content의 width + margin + border + padding
- 높이 : content의 height + margin + border + padding
6) content의 크기 설정
=> width와 height 속성으로 설정
7) 외부 여백에는 배경 설정 안됨
8) 표준모드와 호환모드
=> 표준모드 : width나 height에 padding, border, margin이 포함되지 않음
=> 호환모드 : width나 height에 padding, border, margin이 포함됨
IE의 하위버전이 호환모드
=> width나 height를 설정할 때는 IE에 주의
13. cross browsing
=> 웹페이지가 모든 브라우저에서 콘텐츠를 제공할 수 있어야 함(브라우저 종류에 상관없이)
=> 이전에 비해서 많이 중요
tip
- class는 디자인, id는 java, name은 서버에 전송을 많이 함