본문으로 바로가기

CSS (Cascading Style Sheet)

category Frontend/CSS 2019. 1. 15. 10:43

HTML로 구성된 페이지 골격에 디자인을 입히는 언어


※ 표 컬러 코드 = #b3f2df



서술 방법

(1) HTML 문서에 의존한다. (특정 HTML에서만 유효)

<head>태그 안에 <style> 태그를 명시하고 그 안에 서술한다.


1
2
3
4
5
<head>
    <style [type="text/css"]>
        ... CSS 구문 ...
    </style>
</head>

cs

(


(2) CSS 구문만을 별도로 저장한 외부파일을 참조.

<style>~</style> 안에 명시하는 CSS 구문을 별도의 파일에 작성해 두고 HTML에서 해당 파일의 경로를 참조한다.


파일명 : hello.css


css 구문을 위 파일명으로된 css 파일에 저장


1
<link rel = "stylesheet" [type="text/css"] href="hello.css" />
cs


(3) HTMl 태그의 style 속성을 활용

거의 사용 안함.


1
<div style="CSS구문"></div>
cs



selector

CSS가 적용될 대상을 지정하는 방법


1. 태그이름 -> ex) h1 { color: red; }

2. class : 앞에 점을 포함한 단어명시 (단어는 직접 네이밍)

HTML 태그에 class 속성으로 단어를 연결 (이때는 점은 제외)

        • 태그 종류에 상관없이 여러번 재사용 가능
1
2
3
.hello {
    color: red;
}
cs
1
<div class="hello"></div>
cs


3. id : 앞에 #을 포함한 단어를 명시 (단어는 직접 네이밍)

  HTML 태그에 id 속성으로 단어를 연결 (이때는 #은 제외)

        • 하나의 HTML 문서 안에서 다른 요소와 중복될 수 없다.
1
2
3
#hello {
    color: red;
}
cs
1
<div id="hello"></div>
cs


selector 조합하기

1) 구체적으로 서술하기


태그이름 + class            /        태그이름 + id    --> 특정 요소를 자세하게 명시
div.hello                                div#hello
(띄어쓰기 X)




2) 쉼표로 구분하기 (and의 의미)

div, p, #hello, .world { ... }

3) 가상클래스

HTML 요소가 어떤 상황을 직면했을 때 적용되는 selector (~~할 때)

a:link { 글자 모양 }        <---- 링크에 대한 기본 글자 모양을 적용

a:visited { 글자 모양 }

a:hover { 글자 모양 }

a:active { 글자 모양 }



selector 조합하기 (2)

자식셀렉터

HTML의 계층구조를 순차적으로 ">"를 사용하여 표현한 것.


div > span > input.from_control


1
2
3
<div>
    <span><input class="form_control" /></span>
</div>
cs


자손셀렉터

HTML의 계층구조를 공백을 사용하여 표현한 것. 반드시 순차적일 필요는 없다.

div span input.form_control

1
2
3
4
5
<div>
    ... ? ...
    <span> ... ? ... <input class="form_control" /> ... ? ... </span>
    ... ? ...
</div>
cs


속성셀렉터

HTML태그의 속성과 값을 []안에 표현함

셀렉터

설명 

a[href] 

href라는 속성을 갖는 a태그(값은 상관 없음) 

a[href="#"] 

href속성값이 "#"인 a태그 (값이 반드시 일치해야 함) 

#hello[method="post"] 

method속성의 값이 post인, id값이 hello인 어떤 태그 

.choose[value="123"] 

value속성의 값이 123인, class값이 choose인 어떤 태그 


nth-child

CSS셀렉터가 복수 요소를 의미할 경우 그 중에서 몇 번째인지를 지정. 대부분 class와 함께 사용한다.

 셀렉터

설명 

foo:nth-child(2)

foo라는 셀렉터를 갖는 요소 중에서 2번째 

foo:nth-child(odd)

홀수번째 

foo:nth-child(2n) 

짝수번째 

foo:nth-child(3n) 

3의 배수 번째 

foo:nth-last-child(숫자) 

nth-child와 같은 규칙이지만 뒤에서부터 요소를 카운트 

foo:first-child 

foo라는 셀렉터를 갖는 요소들 중에서 첫 번째 

foo:last-child 

foo라는 셀렉터를 갖는 요소들 중에서 마지막 항목



CSS 구체성 단위

CSS 셀렉터에 id, class, tag 이름이 갖는 점수를 계산하여 점수가 높은 selector가 우선 순위를 갖는다.

id : 100점, class : 10점, tag : 1점
HTML태그에 style속성을 사용하여 CSS를 직접 명시하는 경우 1000점 (비추!!!)

글자 모양 관련 속성

 속성

설명 

font-family 

글꼴의 이름을 쉼표로 구분하여 나열. 

font-size 

글자크기 (px단위를 주로 사용함) 

font-style 

글자의 기울임 여부 --> italic, normal(기본값) 

font-weight 

글자의 굵게 표현 여부 -->bold, normal(기본값) 

color 

글자 색상 

line-height 

한 줄의 높이 (px, %단위 표현) --> % 단위인 경우 font-size를 기준으로 함 

font 

일괄표현 --> [style][weight] size[/line-height] family

웹 폰트

CSS에서 font-family 속성으로 지정한 글꼴이 접속자의 PC에 설치되어 있지 않을 경우
고르게 표시되지 않는 문제를 해결하기 위해 폰트파일을 온라인에 올려두고
접속자의 PC에 설치되어 있지 않은 경우 웹 상의 글꼴을 내려받아 사용할 수 있게 하는 기법

구글 웹 폰트 (https://fonts.google.com)

구글에서 운영하는 무료 웹 폰트 사이트.
이곳에서 참조할 CSS 구문을 얻을 수 있다.

문단 관련 속성

 속성

설명 

값 

text-align 

텍스트의 가로축 정렬 

left, center, right 

text-indent 

첫 번째 줄에 대한 들여쓰기 

px단위 값 

text-decoration 

밑줄, 윗줄, 취소선, 깜박임 효과 

none(기본값), underline, over-line, line-through, blink 

vertical-align 

어떠한 요소를 기준으로 한 세로축 위치 

top, middle, bottom 

letter-spacing 

글자간의 간격 (자간) 

px단위 값 

word-spacing 

단어간의 간격 (어간) 

px단위 값 

white-space 

줄 바꿈 속성 제어 

normal, nowrap



  • vertical-align: ~~을 기준으로 텍스트를 배치해야 하기 때문에 텍스트 주변의 이미지나 input 요소에게 부여해야 한다
  • text-decoration: blink 속성은 모든 브라우저에서 지원되지는 않는다.
  • white-space : normal인 경우 공백을 기준으로 줄 바꿈이 되므로 공백이 없다면 줄바꿈 처리되지 않는다.
    • word-wrap : break-word 속성과 함께 사용하여 글자 단위로 무조건 줄바꿈 처리하도록 설정할 수 있다.

텍스트 자동 말줄임 처리

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

텍스트 그림자 효과

text-shadow: x-offset     y-offset     blur-radius     color;


  • x-offset : 본체와 그림자의 가로축 거리 (px 단위) + 값인 경우 오른쪽 방향
  • y-offset : 본체와 그림자의 세로축 거리 (px 단위) + 값인 경우 아래 방향
  • blur-radius : 그림자의 번짐 정도 (px단위)
  • color : 그림자의 색상
그림자 관련 값들을 콤마로 구분하여 여러개 지정할 경우 포토샵의 레이어 처럼 처리할 수 있다.

text-shadow: x-offset    y-offset    blur-radius    color,    <-- 맨 위의 레이어
 x-offset    y-offset    blur-radius    color,

 x-offset    y-offset    blur-radius    color,

 x-offset    y-offset    blur-radius    color;    <-- 맨 밑의 레이어


박스모델

박스라 함은 block-level 요소를 의미하는 것으로 가장 대표적인 요소에는 <div>가 있다.

박스의 크기를 구성하는 기본 속성

 속성

설명 

값 

width 

내용 영역의 가로 폭 

px단위, %단위 

height 

내용 영역의 세로 높이 

px단위, %단위 

border 

박스의 테두리 

굵기 종류 색상 

padding 

테두리와 내용영역 사이의 여백 

여백 사이즈에 대한 px단위


  • border 속성에서의 종류값
    • none : 투명
    • solid : 직선
    • dotted : 점선
    • dashed : 끊긴선
  • border 값의 세분화
    • 위치에 따른 구분 : border-top, border-left, border-bottom, border-right
    • 속성에 따른 구분 : border-width, border-color, border-style
  • padding 값의 설정
    • 하나의 값 : 상,하/좌,우 모두 같은 값이 부여된다.
    • 두 개의 값: 첫 번째 값은 상,하를 의미. 두 번째 값은 좌,우를 의미한다.
    • 네 개의 값: 상단부터 시게방향으로 회전하면서 부여된다.

박스의 크기는 관련 속성들의 총합으로 이루어 진다.

테두리와 여백은 내용영역(width, height)의 크기 바깥으로 형성된다.


  • 가로 : border-left + padding-left + width + padding-right + border-right
  • 세로 : border-top + padding-top + height + padding-bottom + border-bottom

중첩 관계에서의 박스 크기

1. 자식요소의 크기 총 합은 부모 요소의 width, height를 벗어날 수 없다.
2. 자식요소의 width, height를 %로 부여할 경우 부모의 width, height를 기준으로 한다.

auto 값의 사용

1. width 속성에 사용하는 경우.
    • 부모 요소의 width에서 현재 자신의 padding, border 크기를 뺀 나머지를 자동으로 계산하여 갖는다.
      • 실질적인 100% 처리 효과

2. height 속성에 사용하는 경우
    • 자신이 포함하고 있는 내용만큼 높이를 구성한다. (박스의 기본특성)

화면을 가득 채우는 박스 만들기

width, height는 부모요소를 기준으로 크기를 갖기 때문에 "박스 > body > html" 순으로 부모도 100% 크기를 부여해야 한다.

1. <body> 태그가 갖는 기본 여백을 제거한다.
body { padding: 0; margin: 0; }
cs

2. 박스에게 width, height를 100%로 부여하기 위해서는 박스의 부모요소의 크기를 부여해야 기준으로 삼을 수 있다.
박스의 부모 요소는 <body> 태그 이고 <body>의 부모 요소는 <html> 이므로 이 두 요소에게 모두 크기를 부여한다.
html, body { width: 100%; height: 100% }
cs

overflow 속성

자신을 벗어나는 내용에 대한 처리 방법 지정

속성

설명 

visible 

기본값. 벗어나는 내용이 부모 요소를 벗어나도록 그대로 둔다. 

scroll 

벗어나는 내용에 대하여 스크롤 처리하낟. 이 속성이 부여되면 부모 요소는 항상 스크롤바의 트랙을 표시한다. 

hidden 

벗어나는 내용에 대하여 화면에 표시되지 않도록 잘라낸다. 

auto 

내용이 벗어나지 않을 경우에는 박스의 기본 모양대로 표시되지만, 내용이 벗어날 경우에는 scroll처리 된다.



  • overflow 속성은 x축, y축을 모두 처리한다.

  • 가로 혹은 세로 방향만 처리하고자 하는 경우 overflow-x, overflow-y 속성을 사용할 수 있다.

박스의 가변 크기 지정

 속성

설명 

min-width 

최소 넓이 지정. 내용이 없더라도 이 속성이 지정한 만큼 넓이가 보장된다. 

max-width 

최대 넓이 지정. 이 속성의 값 이상 커지지 않는다. 

min-height 

최소 높이 지정 

max-height 

최대 높이 지정


박스 그림자 효과

box-shadow: [inset]    x-offset    y-offset    blur-radius    color;


  • x-offset : 본체와 그림자의 가로축 거리 (px단위)
  • y-offset : 본체와 그림자의 세로축 거리 (px단위)
  • blur-radius : 그림자의 번짐 정도 (px단위)
  • color : 그림자의 색상 ( #ff00ff 방식 혹은 rgba(0~255, 0~255, 0~255, 0~1) 방식 )
그림자 관련 값들을 콤마로 구분하여 여러개 지정할 경우 포토샵의 레이어 처럼 처리할 수 있다.

inset이 없는 경우

그림자가 박스의 뒤에 생성된다. (DropShadow 효과)

  • x-offset : + 값인 경우 박스의 오른쪽에 생성된다.
  • y-offset : + 값인 경우 박스의 아래쪽에 생성된다.

inset이 적용된 경우

그림자가 박스의 안쪽으로 생성된다. (InnerShadow 효과)

  • x-offset : + 값인 경우 박스의 왼쪽에 생성된다.
  • y-offset : + 값인 경우 박스의 위쪽에 생성된다.

박스의 위치

margin: px, %
  • 바깥 여백을 의미
  • 벽을 밀어서 자신이 이동하거나 주변의 다른 요소를 밀어내는 효과
  • 서로 마주보고 작용하는 margin은 겹침 현상 발생
  • 음수 값을 지정할 경우 반대 방향으로 힘이 작용(끌어당김)
  • 값을 하나만 지정할 경우 : 상, 하 , 좌, 우 모두 동일
  • 값을 두 개 지정할 경우 : 상/하, 좌/우
  • 값을 네 개 지정할 경우 : 상단부터 시계방향 회전

margin: auto
부모요소의 width에서 현재 자신의 크기를 뺀 나머지를 자동으로 계산하여 margin에 부여한다.

 속성

설명 

margin-left : auto 

박스가 부모의 오른쪽에 배치된다. 

margin-right: auto 

박스가 부모의 왼쪽에 배치된다. (기본값) 

left와 right에 모두 auto 적용 

박스가 부모의 가운데 배치된다. 

margin: auto 

값이 하나인 경우 상, 하, 좌, 우 모두 적용되지만 auto는 상, 하에 대해서는 동작하지 않기 때문에 left, right에만 부여한 것과 동일하게 작용한다.

display 속성

block-level과 inline-level의 특징을 결정짓는 속성

1) display: block;

  • Block-Level 요소의 기본 값.
  • 어떤 요소를 문단처럼 구성할 수 있도록 한다. (줄바꿈)
  • width, height가 적용된다.

2) display: inline;

  • Inline-Level 요소의 기본 값.
  • 어떤 요소를 문장처럼 구성할 수 있도록 한다. (줄바꿈 안함)
  • width, height를 적용할 수 없다.

3) display: inline-block;

  • 크기 지정이 가능한 문장요소

4) display: none;

  • 어떤 요소를 화면 표시하지 않도록 숨긴다.

응용1 : 링크의 영역을 확장하기

1. <a> 태그에게 width, height를 부여하면 그 만큼 클릭 가능한 영역이 확장

2. <a> 태그가 inline-level이므로 display속성을 block으로 지정해야만 처리가 가능.

응용2 : 목록정의 요소

1. <ul>, <ol> 에게 list-style: none; padding: 0; margin: 0;을 부여하면 2중으로 중첩된 <div> 요소와 같이 초기화 된다.
2. 이후부터 <li> 요소의 display 속성을 조절하여 메뉴를 배치할 수 있다.

float 속성

박스를 부모의 왼쪽이나 오른쪽에 고정시키고 문장을 그 옆으로 흐르도록 하기 위한 속성

적용가능한 값

  • left(왼쪽), right(오른쪽), none(해제), inherit(부모값 상속)

제약사항

  • 새로운 문단을 시작하기 위해서는 이전 float를 off시켜야 한다.
  • 부모요소가 float가 적용된 자식요소를 감싸지 못한다.

해결책

  • 이전 float 속성을 해제. (마감제)
  • 부모요소가 끝나기 전(혹은 새로운 문단이 시작하기 전) 
    float: none; clear: both가 적용된 Block-Level요소를 배치.
a. 빈 <div>
b. 부모의 :after 가상 클래스를 사용해서 아래의 코드 적용
content: ''; display: block; float: none; clear: both;

특성

두 개 이상의 Block-Level요소에게 float를 연속적으로 적용하면 박스의 배치 효과

레이아웃 구성하기

사이트의 전체 넓이와 정렬을 구성하기 위한 <div> 태그 안에 각 영역을 구성하기 위한 <div> 태그를 배치하고,

float 속성을 사용하여 각 영역을 배치하는 처리

3단 레이아웃

<div id="container">
    <div id="header">상단영역</div>
    <div id="content">내용영역</div>
    <div id="footer">하단영역</div>
</div>
cs

  • #container에 넓이와 margin 속성을 사용하여 정렬을 구성

  • #header, #footer에 각 영역에 대한 height 지정 (고정높이)

  • #content 영역은 내용에 따라 높이가 변경되어야 하므로 min-height 지정 (가변높이)

사이드바 구성

<div id="container">
    <div id="header">상단영역</div>
    <div id="content">
        <div id="sidebar">사이드바</div>
        <div id="body">내용영역</div>
    </div>
    <div id="footer">하단영역</div>
</div>
cs

  • 3단 레이아웃 상태에서 #content에 사이드바와 본문영역을 위한 <div>를 추가
  • #sidebar와 #body를 float 속성을 사용하여 가로 배치

Position 속성

  • 요소의 배치 방법을 결정하는 속성
  • relative(상대좌표), absolute(절대좌표), fixed(고정좌표)
  • 좌표설정
    • position이 부여된 상태에서 요소의 좌표를 설정할 수 있다.
    • 사용속성: left, top, right, bottom
    • 각 속성에 px이나 %단위로 수치값 부여.
    • relative, absolute에 따라 좌표의 기준 선정 방식이 변경된다.


relative

요소의 원래 위치를 기준으로 좌표가 설정된다.

absolute

1. 브라우저의 끝을 기준으로 좌표가 설정된다.

2. 부모요소에게 position 속성이 relative나 absolute로 지정된 경우 부모를 기준으로 좌표가 설정된다.

fixed의 특성

1. 기본적으로 absolute와 동일.

2. 스크롤이 이동하더라도 요소의 위치가 화면상에 고정되어 있다.

z-index

position 속성으로 인해 요소가 화면상에서 겹치는 경우 z-index 속성에 부여된 값의 크기를 비교해서 순서가 결정된다.

(값이 클 수록 위에 배치된다)

배경관련 기본 속성

속성

설명 

background-color 

배경색상 지정 

background-image 

배경이미지.

url("파일경로");

외부 css파일에서 명시할 경우 파일 경로는 html기준이 아닌 css파일 기준이 된다. 

 background-repeat

배경이미지 반복 설정

repeat, repeat-x, repeat-y, no-repeat 

background-attachment 

스크롤에 따른 배경 이미지 처리

scroll, fixed 

background-position 

배경이미지 위치.

left, right, top, bottom, center, px값

가로와 세로를 공백으로 구분하여 지정 

background

위의 다섯가지 속성을 공백으로 구분하여 일괄 명시. 불필요한 요소는 생략 가능

배경관련 속성 활용

  • 이미지에 텍스트가 포함된 경우
  1. 원본 텍스트를 HTML안에 명시
  2. 이미지는 그 안에 배경으로 설정
  3. 원본 텍스트를 text-indent 속성으로 화면에서 멀리 떨어지게 설정.
  • 이미지 클립핑
  1. 아이콘, 버튼 등의 이미지를 하나의 이미지 파일에 모두 모아 놓기.
  2. 표시할 항목의 크기와 동일한 박스를 준비. 그 안에 배경이미지로 설정.
  3. background-position 속성으로 이미지를 표시하고자 하는 위치까지 이동.

background-size


background-size: 가로축크기 세로축크기;
  • px단위 값: 배경이미지의 크기를 절대값으로 설정
  • %단위 값: 자신이 표시될 박스 크기에 기준하여 백분율로 설정
  • cover: 가로우선
  • contain: 세로우선

background 속성의 중첩 사용

  • 콤마(,)로 구분하여 여러 겹의 배경을 지정할 수 있음.
  • 마지막에 명시된 항목이 가장 뒤에 배치된다.

background: url(img/btn_a.png) right 0 repeat-y,
                 url(img/menu.png) no-repeat,
                 url(img/menu_bg.png) repeat-x;

그라디언트 색상 처리

webkit 계열 브라우저의 경우 (Chrome Browser -> CSS3 Generate)

/* -webkit-gradient:(유형, 시작위치 끝위치, 시작색상, 종료색상); */
background: -webkit-gradient(linear, left bottom, right top, from(#06f), to(#fff));

mozila 계열 브라우저의 경우

/* -webkit-gradient:(유형, 시작위치 끝위치, 시작색상, 종료색상); */
background: -moz-linear-gradient(bottom 45deg, #06f, #fff);


저작자표시 비영리 변경금지

'Frontend > CSS' 카테고리의 다른 글

CSS 기본 배경 잡을 때  (0) 2019.01.16
스마일 코드  (0) 2019.01.16
자동 줄 바꿈 처리  (0) 2019.01.15
CSS로 탭 메뉴 만들기  (0) 2019.01.15
active 샘플  (0) 2019.01.15
댓글 , 엮인글
Jeffrey Oh's Notepad
블로그 이미지 Jeffrey Oh 님의 블로그
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바