브라우저 제목

CSS란

Cascade Style Sheets의 약자로 html태그에 디자인 적인 요소를 추가하여 

브라우저상에 요소들을 좀더 역동적으로 표시해주도록 하는 코드 입니다.

 

css동영상

 

 

 

jQuery 동영상 보러가기

 

요소에 디자인을 입히기 위한 CSS작성 

요소를 작성한 후에는 요소에 디자인을 설정해야 합니다.

요소에 디자인을 설정하기 위해서는 태그의 속성을 이용하는 방법과 css를 이용하여 작성하는 방법이 있습니다.

태그의 속성을 이용하면 현재의 태그에는 적용되지만 다른 위치의 같은 태그에 같은 디자인을 설정할 때는 같은 속성을 반복적으로 기술해야한다는 번거러움이 있습니다.

태그의 속성은 번거러움 때문에 많이 사라졌고 대신 CSS를 이용하여 반복적인 같은 디자인을 설정할 수 있게 되었습니다.

CSS도 작성법에 따라 3가지로 분류가 됩니다.

인라인 css : 태그에 직접 Style속성을 이용하여 css속성을 작성

내부 css : html문서에 <style> ~ </style> 구역을 만들어 css 속성을 작성 <head>와 </head>사이에 <style>구역을 작성해주어야 합니다.

외부 css  : style을 독립적인 파일로 만들어 html문서에서 style파일을 연결하여 같은 디자인을 여러 문서에 적용할 수 있게 해줍니다.

 

인라인 css의 작성 예)

<p style="color:red; font-size;20px;">인라인 요소</p>

 

내부 css 작성 예)

<head>

  <style>

     .text {

        color:red;

        font-size:20px;

        }

  </style>

</head>

<body>

 <p class="text"> 내부 css </p>

</body>

 

외부 css 작성 예)

style.css(css를 저장할 파일 이름)

   .text{

     color:red;

     font-size:20px;

    }

 

html문서

<head>

 <link href="style.css" rel="stylesheet">

</head>

<body>

  <p class="text">외부 css </p>

</body>

CSS작성

css를 작성하기 위해서는 선택자의 개념과 속성, 속성 값을 이해해야 합니다.

선택자

선택자는 디자인을 정할 요소를 지정하기 위한 이름지정 방법입니다.

태그 선택자 : 

순수하게 태그를 지정합니다. 태그선택자에 설정하면 모두 같은 태그에 동일한 디자인이 설정됩니다.

예) p {   }

Class(클래스)선택자 : 

태그에 서로 다른 디자인을 적용합니다.

예) .text { }

Id(선택자) : 

그룹의 위치를 지정하거나 디자인합니다.

예) #head{  }

 

css의 작성규칙

css의 속성과 값은 " { " 과 " } "에 작성하셔야 합니다.  

속성과 속성값은 " : "을 기준으로 왼쪽은 속성, 오른쪽은 속성값이 들어갑니다.

또한 속성과 속성을 구분하기 위해서 " ; "으로 합니다.

예)

.text { color : red ;   font-size : 20px ; }

 

css의 기본적인 속성

텍스트와 관련된 속성

글자의 크기

font-size : 

글자의 굵기

font-weight : normal/ bold/ 숫자값

글자의 스타일

font-style : normal/ italic /oblique

글꼴

font-family: "글꼴이름"

글자의 색상

color:색상

자간 조절

letter-spacing : 양 / 음

텍스트 정렬

text-align: left / center / right / justify

텍스트 장식

text-decoration: none / overline / line-through /underline

영문텍스트의 대소문자 지정

text-transform : uppercase / lowercase / capitalize

텍스트 들여쓰기

text-indenter : 값

텍스트의 줄간격

line-height : 값 

단어의 간격조절

word-spacing : 양 / 음

 

숫자나 색상의 지정방법

단위 

px : 기본 단위로 픽셀입니다. 고정단위라고 합니다. (텍스트의 기본 글자의 크기는 16px입니다.)

em : 기본 단위를 1로 유동적인 크기를 지정할 때 사용합니다. 

% : em단위에 x100을 해서 백분율로 변경하여 사용합니다.

반응형 웹으로 작성할 때는 em, % 단위로 유동적인 레이아웃을 만들어야 합니다.

 

색상

명시적 표현 : red, yellow 등의 표현

HEX 형식 표현 : #000000  ~  #FFFFFF

rgb형식 표현 : rgb( red 값, green 값, blue 값)

 

 

제목 날짜
CSS란. CSS의 기본작성법 2017.09.06
태그 목록