[CSS] CSS의 이해, CSS의 선택자, 웹폰트 적용 방법, 벤더 프리픽스

CSS의 이해

css: html문서에 디자인 요소를 담당하는 부분 = 디자인 및 배치의 역할

 

css 기술방식

-내부 css-

01. 속성 스타일 (인라인 스타일시트) <font color="red" size="7"> << 이전방식, 유지보수가 힘들음

02. <style> 태그 기술 방식 (인터널 스타일시트) <style> .ds{color: #09F;}

 

-외부 css-

<link rel="stylesheet" href="main.css"> 실무에서 제일 많이 쓰이는 방식

 

CSS 선언 방법

<STYLE>

    선택자 {속성: 값;} : 구분 ; 종결

</STYLE>

 

h1{text-aligh:center;} = h1에 해당하는 모든 태그들의 글자 정렬 중심 배치

 

 

 

CSS의 선택자

선택자: 스타일을 적용할 html 요소를 선택

전체 선택자: *, 모든 요소를 선택하는 선택자 >> body 태그를 포함해서 전체 선택

태그 선택자: h1, p, a   html내에 존재하는 특정한 태그를 선택하는 선택자

아이디 선택자: #id, 특정한 이름 표현, 한번 사용가능한 선택자

클래스 선택자: .class 특정한 이름 표현, 여러번 사용가능한 선택자

 

웹 사이트가 구현이 되는 공간

기본적으로 태그는 자기가 가지고 있는 padding 값과 margin 값이 있음.

그래서 처음 시작할 때 존재하는 모든 선택자들의 패딩과 마진 값을 안 주고 시작해야 한다고 언급을 해야 함.

 

<style> 태그 내에서 주석을 주고 싶을 때는  /* */ 사용

 

클래스, 아이디 선택자 이름을 지정할 때 주의할 점:

영문으로 시작해서 지정, 숫자로 시작하지 않는 것이 좋음

 

아이디는 대체적으로 큰 레이아웃의 틀에 부여, 클래스는 그 안의 짜잘짜잘한 것들에 부여

 

font-weight는 100부터 900까지의 수치가 존재

 

  <link href="style.css" rel="stylesheet" type="text/css" /> 스타일시트 연결 태그

 

 

css에서는 마지막으로 써진 내용이 더 높은 우선순위

 

 

 

스타일의 상속과 적용 우선 순위

01. 인라인 스타일(스타일에 직접 부여) <<<< 가장 강하게 적용

02. 내/외부스타일(id>class)

03. 웹브라우저 기본 스타일

> 가장 마지막에 적용된 기준으로 표현

 

!important; = 적용되지 않거나 중요성이 강한 스타일에 적용 / 가장 우선순위

 

  .text2{

    color: aquamarine;

    font-size: 15px !important;

  }

 

 

기본 속성 종류

-글자에 관한 속성

font-family: 돋움, 굴림, 맑은고딕/ 글꼴

font-size: 12px, 3em, 9pt / 글자 크기

font-style: italic, oblique ... 글자 스타일

line-height: 24px, em, pt ... 줄 간격

text-decoration: underline,overline,ling-through,blink,none 글자 꾸밈

font-weight: 100~300(가늘게) 400~600(중간) 700~900(굵게) 글자 굵기

color: #색상코드, 색상명, rgb(색상값)... 글자 색상

 

-배경(백그라운드)에 관한 속성

background-color: 배경 색상

background-image: url(이미지 경로), 배경 이미지 경로

background-repeat: no-repeat, repeat-x, repeat-y 배경 이미지 반복

background-attachment: Fixed, scroll 스크롤에 따른 조정

background-position: (숫자 픽셀, 숫자 픽셀), left, center, right, top ... 배경 위치

background-size: 100%, cover, contain, px 값 (배경 이미지 크기)

 

-문단에 관한 속성

word-spacing: 숫자 입력(px,%) 문자와 문자 간의 간격

letter-spacing: 숫자 입력(px,%) 자간 설정

text-align: center, left, right 정렬

display: none, block, inline, inline-block 요소의 표시 방법

 

 

 

 

css3

언어의 가장 최신 이전 버전의 css보다 정교하고 화려한 화면을 구성

모듈별로 분할하여, 별도의 개발 일정을 가지고 지속적으로 이루어지고 있음

디자인적인 표현력이 다양 - text, font, color, background, border-radius

역동적(=동적인 영역들이 개척) - transforms, transitions, animaitions

HTML5 CSS3 사이트 구현시 필요한 상관관계가 존재

 

 

css와 브라우저별 접두사

css3 모듈이 많고, 규약이 완성되지 않은 부분도 존재

브라우저에 따라 다른 방식으로 지원되기 때문에 속성 이름 앞에 접두사를 붙여 브라우저별로 구분

-webkit- 구글, 사파리(웹키트 브라우저)

-moz- 파이어폭스, 모질라(게코방식 브라우저)

-ms- 익스플로러

-o- 오페라

 

.box {

box-shadow: 10px 10px 10px #000;

-webkit-box-shadow: 10px 10px 10px #000;

-moz-box-shadow: 10px 10px 10px #000;    기본 접두사 표현방식

-o-box-shadow: 10px 10px 10px #000;

-ms-box-shadow: 10px 10px 10px #000;

}

 

자바스크립트 파일을 이용해 자동접두사 붙이기 가능

<script src="abcd.js"></script>

 

웹폰트 적용 방법

1. font-face: 직접 폰트 파일을 받아서 설치

2. 링크 연결

 

글자에 그림자(섀도) 넣기

          h1{

            text-shadow: 10px 5px 10px gray;

            /*글자의 그림자: 오른쪽, 아래, 흐림도의 크기, 색상*/

            width:300px;

            height: 200px;

            background-color: aquamarine;

            box-shadow: 10px 5px 10px gray;

            /*박스 그림자: 옵션은 동일*/

          }

 

www.evernote.com/l/Ald3JqjAinNPcavqndeKq8zDuJw_URTCrws/

CSS의 이해, CSS의 선택자, 웹폰트 적용 방법, 벤더 프리픽스