CSS 기초 강좌

CSS 기초 정리

속성선택자

[attribute] h1[title]

[attribute="value"]  h1[title="abc"]  <h1 title="abc">Lorem</h1>

[attribute~="value"] h1[title~="abc"] <h1 title="abc xyz">Lorem</h1>

[attribute|="value"] h1[title|="abc"] title 속성의 값이 abc이거나 abc-로 시작하는 h1 요소

CSS3에서 추가

[attribute^="value"] h1[title^="abc"] title 속성의 값이 abc로 시작하는 h1 요소

[attribute$="value"] h1[title$="abc"] title 속성의 값이 abc로 끝나는 h1 요소

[attribute*="value"] h1[title*="abc"] title 속성의 값이 abc를 포함한 h1 요소

가상요소 - 가상 클래스는 콜론을 한 개(:), 가상 요소는 콜론을 두 개(::) 씁니다. 하지만 콜론을 한 개(:)만 써도 대부분 된다

::first-line 요소의 첫번째 줄을 선택  => p::first-line {  color: red; }

::first-letter 요소의 첫번째 문자를 선택

::before  요소의 앞을 선택 => p::before {  content: "xyz";  color: red; } p 요소 앞에 xyz라는 단어를 넣고 색을 빨간색

::after p 요소 뒤에 xyz라는 단어를 넣고 색을 빨간색으로

가상클래스

:empty는 내용이 없는 비어있는 요소를 선택  li:empty li 요소 중 내용이 없는 것을 선택 => li:empty { border: 1px solid #444444; }

:first-child는 형제 요소 중 첫번째 요소를 선택  selector:first-child { ... }   li:first-child { color: red; }

:hover는 요소에 마우스를 올린 상태를 선택  p:hover { color: red; }

:link는 방문하지 않은 링크를 선택  a:link { color: red; }

:nth-child는 형제 요소 중에서 규칙을 만족하는 요소를 선택 selector:nth-child( an+b ){ ... }; a,b 정수 n은 증가수 0,1,2..

li:nth-child( 2n+1 ) { color: red; } <= 홀수번째 색상변경

li:nth-child( 5 ) { color: red; } <= 5번째 색상

li:nth-child( odd ) { color: red; } 홀수 => li.jb:nth-child( odd ) { color: red; } li 요소의 홀수번째 요소 중 jb를 클래스 값으로 가지는 요소를 선택

li:nth-child( even ) { color: blue; } 짝수

하위선택자

.as p.df {color: green;}  as를 클래스 값으로 가지는 요소의 하위에 있는, df를 클래스 값으로 가지는 p 요소의 색을 녹색으로

자식선택자

div > blockquote  div 요소의 자식 요소 중 blockqoute를 선택 주의할 점은 한단계 아래에 있는 요소만 선택

형제 선택자

h1 ~ p {color: red;} h1 요소의 형제 요소 중 p 요소를 선택

인접 형제 선택자

h1 + p {color: red;} h1 요소의 형제 요소 중 첫번째 p 요소를 선택

글씨꾸미기

font-size px, %, em, rem  %와 em은 부모 요소의 글자 크기(100%와 1em은 부모 요소), rem은 최상위 요소, 즉 html 요소

font-style: normal | italic | oblique | initial | inherit

font-variant로 소문자를 작은 대문자, 즉 소문자 크기의 대문자로 바꿀 수 있습니다 font-variant: normal | small-caps | initial | inherit

font-weight: normal | bold | bolder | lighter | number | initial | inherit

줄간격은 line-height로 정합니다

글자 간격은 letter-spacing으로, 단어 간격은 word-spacing으로 정합니다.

구글 웹폰트 사용하기 https://fonts.google.com/ (영문만)  https://fonts.google.com/earlyaccess(기타언어포함)

@import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css);

font-family: 'Nanum Pen Script', cursive;

목록 꾸미기

list-style-type

<ul> : disc, circle, square

<ol> : decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha

공통 : none

링크꾸미기

      a:link { color: blue; text-decoration: none; } 방문하지 않은 링크

      a:visited { color: purple; text-decoration: none; } 방문했던 링크

      a:hover { color: red; text-decoration: underline; } 마우스가 올려진 링크

      a:active { color: white; background-color: green; } 클릭하는 순간 링크

표그리기

table, th, td {border: 1px solid #bcbcbc;}

table {width:100px;height:100px;float:right;}

th { text-align:left;vertical-align:top;}

border-collapse: collapse;   테두리 사이의 간격을 없애고 싶다면 border-collapse 속성

content 속성

p:before { content: xxx; }

p:after { content: xxx; }

q { quotes: "<" ">"; } 인용문을 감싸는 큰따옴표를 다른 기호 또는 문자로 바꿔주는 것이 quotes 속성입니다. 예를 들어 <와 >로 바꾼다면 

Box Model

바깥 여백 : margin 속성

테두리 : border 속성

안쪽 여백 : padding 속성

박스의 가로 크기 : width 속성

박스의 세로 크기 : height 속성

박스의 크기 기준 : box-sizing 속성

박스의 배경 : background 속성

BACKGROUND

background-attachment: scroll | fixed | local | initial | inherit

scroll : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다.

fixed : 움직이지 않습니다.

local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다.

initial : 기본값으로 설정합니다.

inherit : 부모 요소의 속성값을 상속받습니다.

background-clip HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성

border-box : 테두리 영역과 그 안쪽 영역을 채웁니다.

padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다.

content-box : 내용 영역과 그 안쪽 영역을 채웁니다.

initial : 기본값으로 설정합니다.

inherit : 부모 요소의 속성값을 상속받습니다.

background-color: transparent | color | initial | inherit

transparent : 배경색이 없습니다.

color : 색을 정합니다.

initial : 기본값으로 설정합니다.

inherit : 부모 요소의 속성값을 상속받습니다.

background-image: none | url | initial | inherit

background-origin: border-box | padding-box | content-box | initial | inherit;

border-box : 테두리 영역 왼쪽 위부터 채웁니다.

padding-box : 안쪽 여백 영역 왼쪽 위부터 채웁니다.

content-box : 내용 영역 왼쪽 위부터 채웁니다.

initial : 기본값으로 설정합니다.

inherit : 부모 요소의 속성값을 상속받습니다.

background-repeat로 배경 이미지의 반복 여부와 반복 방향

background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit

repeat : 가로 방향, 세로 방향으로 반복합니다.

repeat-x : 가로 방향으로 반복합니다.

repeat-y : 세로 방향으로 반복합니다.

no-repeat : 반복하지 않습니다.

initial : 기본값으로 설정합니다.

inherit : 부모 요소의 속성값을 상속받습니다.

background-position: x-position y-position | initial | inherit

background-position: 10% 100px;

background-size: auto | length | cover | contain | initial | inherit

auto : 이미지 크기를 유지합니다.

length : 값을 두 개 넣으면 첫번째 값이 가로 크기, 두번째 값이 세로 크기입니다. 값을 한 개 넣으면 가로 크기이며, 세로 크기는 원본 이미지의 가로 세로 비율에 맞게 자동으로 정해집니다. 백분율을 사용할 수도 있습니다.

cover : 배경을 사용하는 요소를 다 채울 수 있게 이미지를 확대 또는 축소합니다. 가로 세로 비율을 유지합니다.

contain : 배경을 사용하는 요소를 벗어나지 않는 최대 크기로 이미지를 확대 또는 축소합니다. 가로 세로 비율을 유지합니다.

initial : 기본값으로 설정합니다.

inherit : 부모 요소의 속성값을 상속받습니다.

border 속성

        text-align: center;

        border-top: 5px solid gray;

        border-right: 4px dotted red;

        border-bottom: 3px double blue;

        border-left: 2px dashed green;

border-width: thin medium thick 10px;

border-radius 속성으로 둥근 모서리

selector {border-radius: xx xx xx xx / yy yy yy yy;}

레이아웃을 만들 때 필요한 속성 margin, float, clear (clear: both; )

margin-left: auto; margin-right: auto;

반응형 웹디자인 ( @media )

<meta name="viewport" content="width=device-width, initial-scale=1">

작은 가로폭부터 큰 가로폭 순서로 만드는 것을 모바일 우선(Mobile First), 

큰 가로폭부터 작은 가로폭 순서로 만드는 것을 데스크톱 우선(Desktop First)이라고 합니다.

모바일 우선(Mobile First)

작은 가로폭부터 큰 가로폭 순서로 만들고, min-width를 이용합니다

A

@media ( min-width: 768px ) {

  B

}

@media ( min-width: 1024px ) {

  C

}

데스크톱 우선(Desktop First)

큰 가로폭부터 작은 가로폭 순서로 만들고, max-width를 이용합니다.

A

@media ( max-width: 1023px ) {

  B

}

@media ( max-width: 767px ) {

  C

}

https://www.cmsfactory.net