새로운 블로그에 다시 정리해 놓은 글이 있습니다.

참고하시면 좋을 것 같습니다!

https://youtaekjung.github.io/2018/04/18/css/CSS-basic/


CSS란?

Cascading Style Sheets

HTML elements를 표시하는 방법


CSS구문

h1 { color:blue; font-size:10px; }

Selector/Property+Value=Declaration

CSS Selector - HTML Element의 name,id,class,attribute 등으로 찾음

element - 그대로 작성 ex) <p> => p { }

id - #을 작성 ex) <p id="hi"> => #p { }  (이때 id값은 고유한 값을 가지며 #다음에 숫자는 작성 불가)

class - .을 작성 ex) <p clalss="hi"> => .p { } 

grouping 가능 ex) h1, h2, p { }

CSS 내에서 주석 /* */

속성값과 단위사이에 공백x ex)20px


CSS 삽입 방법

외부 스타일 시트 - <head>태그  안에 <link>로 불러옴 ex)<link rel="stylesheet" type="text/css" href="style.css">

내부 스타일 시트 - <style> 태그 안에 작성 <style> h1 { ~} </style>

인라인 스타일 시트 - 단일 요소에 고유한 태그 적용시 사용 ex)  <h1 style="~"></h1>

외부,내부가 같이 적용되면 나중에 작성한 것으로 적용

cascading order 스타일 적용 순서

1.인라인 스타일

2.외부,내부 스타일(나중에 작성된 것이 우선)

3.기본 스타일


CSS의 배경(background)

배경색:background-color:~

배경이미지:background-image: url("~");

배경반복:background-repeat:

repeat-x 가로반복

repeat-y 세로반복

no-repeat 반복x

배경배치: position: right top 오른쪽위에 배치

고정 attachment:fixed

약식 속성 background: 속성값/ 순서(color, image, repeat, attachment, position)


CSS 테두리(border)

테두리 스타일 - border-style:속성;

dotted,dashed 점선 테두리

solid 실선 테두리

double 이중 테두리

none 테두리 없음

hidden 숨겨진 테두리 정의


테두리 폭 - border-width:속성;

10px/medium/10px 10px 10px 10px(위 오른쪽 아래 왼쪽)

테두리 색상 -  border-color:속성;

테두리 다르게 지정

border-top-style: 속성1 2 3 4

>위1 오른쪽2 아래3 왼쪽4

border-top-style: 속성1 2 3

>위3 좌우1 아래2

border-top-style: 속성1 2

>위아래2 좌우1


약식 속성

border: width style(필수) color;

둥근 테두리 border-radius:10px;

CSS Outline

outline-stsyle:속성값 border와 동일

border와 outline의 차이

border는 옵션만큼 크기증가, outline은 테두리만 생기는 것 outline은 레이아웃에 영향x


CSS 여백(margin)

margin-top(bottom right lefrt): 속성(자동, 길이, %, 상속) 음수 사용 가능

약식 속성 margin:top속성 right속성 bottom속성 left속성

자동값 margin: auto;  중앙에배치됨

상속값 margin: inherit; 부모요소에서 상속

축소 상하단에만적용


CSS 패딩(padding)

컨텐츠에 공간 생성


CSS 높이,너비

height, width

max-width: 최대너비


CSS 박스모델

margin>border>padding>content


CSS 텍스트(text)

text-align 수평정렬 속성(center, left, right)

justify 속성 - 각 라인이 동일한 폭을 가짐

text-decoration:none 텍스트의 장식 제거 주로 하이퍼링크 밑줄제거로 사용

text-transform 대문자,소문자 지정 uppercase, lowercase, capitalize

text-indent: 10px 들여쓰기

letter-spacing:3px; 문자 사이의 간격 음수가능

word-spacing: 단어 사이의 간격

line-height: 줄 사이의 공간

direction: rtl; 텍스트 방향 변경


CSS 글꼴(font)

font-family: 글꼴 조합

font-style: normal일반, italic이탤릭체, oblique기울임

font-size 절대크기10px, 상대크기100% 1em=16px

font-weight: normal, lighter, bold, 900등으로 설정

font-variant: normal, small-caps(작은 대문자)

약식: font: style variant weight size/height family


CSS 링크(link)

색상 설정

a:link 방문하지않은 링크 

a:visited 방문한 링크

a:hover 마우스오버

a:active 클릭


CSS 목록(list)

list-style-type: circle, square, upper-roman, lower-alpha

list-style-position: inside, outside 마커가 내부,외부에 표시

list-style-image: url('~~') 목록 마커 이미지

약식 list-style: type position image


CSS 테이블(table)

table을 border-collapse:collapse을 사용해 테두리를 한줄로 축소, seperate 분리

width height 특성으로 너비,높이 설정

text-align:left 수평정렬

vertical-align:bottom 수직정렬

caption-side:bottom 캡션을 테이블에 추가

empty-cells: hide 빈 캡션 숨기기

-webkit-filter: ~,filter: ~ 화상 조절


CSS 레이아웃(layout)

'개발 > CSS' 카테고리의 다른 글

CSS 중앙정렬 가이드  (3) 2018.04.24
CSS 정리  (0) 2018.04.20
CSS 변수(variables)  (0) 2017.10.13
CSS 포지션(position)  (0) 2017.10.12
CSS 디스플레이(display)  (0) 2017.10.12
CSS 박스모델(box-model)  (0) 2017.10.12

+ Recent posts