CSS 문법

 

선택자

 

{

   속성 : 속성값;

   속성 : 속성값;

}

 

선택자(Selector)의 역할

- 속성과 값을 지정할 대상을 검색

 

선언방식

 

내장(embeded) 방식

- HTML <style></style> 안에 작성하는 방식

 

링크(link) 방식

- HTML <link> 이용해 외부 문서를 CSS로 불러와 적용하는 방식

- 동시에 불러옴. 병렬 방식

 

인라인(in-line) 방식

HTML 요소(태그)의 'style' 속성에 직접 작성하는 방식

 

@(at 규칙)import 방식

- CSS @import를 이용해 외부 문서로 CSS를 불러와 적용하는 방식

- 직렬 호출 방식

 

선택자(Selector)

 

전체 선택자

- (요소 내부의) 모든 요소를 선택

- ' * '

* {
  color: red;
}

 

태그 선택자(Type Selector)

- 태그이름이 E인 요소 선택

- ' E ' (요소, 태그)

 

클래스 선택자(Class Selector)

- HTML class 속성의 값이 E인 요소 선택

- ' .E '

 

아이디 선택자(ID Selector)

- HTML id 속성의 값이 E인 요소 선택

- ' #E ' 

 

복합 선택자(Combinators)

 

일치 선택자(Basic Combinator)

- E와 F를 동시에 만족하는 요소 선택

- ' EF '

 

자식 선택자(Child Combinator)

- E 의 자식요소를 F를 선택

- ' E > F '

 

후손(하위) 선택자(Descendant Combinator)

- E의 후손(하위)요소 F를 선택

- ' E F ' < '띄어쓰기'가 선택자의 기호로 사용됨

 

div > ul > li

후손은 DIV 태그 범위 안에 있는 모든 것을 의미

div 입장에서 li는 후손(하위)

li 입장에서 div는 조상(상위)

 

인접 형제 선택자(Adjacent Sibling Combinator)

-  E의 다음 인접해있는 형제 요소 F 하나만 선택

- ' E + F ' 

 

가상 클래스 선택자(Pseudo-Classes Selectors)

- 가상 클래스 선택자 앞에 :(콜론)을 붙여서 사용

- 콜론 기호가 2개 있는 것은 가상요소 선택자

 

HOVER

- E(기본 선택자)에 마우스(포인터)가 올라가 있는 동안에만 E 선택

- ' E:hover ' 

 

ACTIVE

- E를 마우스로 클릭하는 동안에만 E 선택

- ' E:active ' 

 

FOCUS

- E가 포커스 된 동안에만 E 선택

- ' E:focus ' 

- 대화용 컨텐츠에서 사용가능

ex) input, ing, tabindex ...

 

FIRST CHILD
- E가 형제 요소(같은 "부모" 공유) 중 첫번째 요소라면 선택

- ' E:first-child '

- hover, active, focus = 이벤트 >> JS가 더 효과적으로 다룰 수 있음

  선택자는 이벤트 개념과 관계 없음 위가 특이한 경우

 

LAST CHILD
- E가 형제 요소(같은 "부모" 공유) 중 마지막 요소라면 선택

- ' E:last-child '

 

NTH CHILD (몇 번째 자식)

- E가 형제 요소 중 n 번째 요소라면 선택 (n 키워드 사용시 0부터 해석(Zero-base))

- ' E:nth-child(n) '

ex) ' E:nth-child(2n) '인 경우 2, 4번째 선택됨 - 짝수번째 찾을 수 있음

ex) ' E:nth-child(n+3) '인 경우 3번째 이후 요소들 선택됨

 

.fruits p:nth-child(1) {
	color : red;
}

<!--선택된 요소 없음-->
<div class="fruits">
	<div>딸기</div>
    <p>사과</p>
    <p>망고</p>
    <span>오렌지</span>
</div>

.fruits의 첫번째 자식 요소가 <p></p>가 아니기 때문에 선택되지 않음

 

NTH OF TYPE

- E의 타입(태그이름)과 동일한 타입인 형제 요소 중 E가 n번째 요소라면 선택 (n 키워드 사용시 0부터 해석(Zero-base))

        (div, p, span)

- ' E:nth-of-type(n) '

 

부정 선택자(Negation Selector)

- S가 아닌 E 선택

- ' E:not (s) ' => S부분 선택자만 제외하고 찾음

 

가상 요소 선택자(Pseudo-Elements Selectors)

 

BEFORE

- E 요소 내부의 앞에, 내용(content)을 삽입(가상 요소)

- : (콤마 1개) 가상클래스 / :: (콤마 2개) 가상 요소

- ' E::before '

- <div>내용</div> 에 div::before 로 div 내용 앞에 추가적으로 가상요소를 만듦

- "content" 속성이 있어야 before에 있는 내용들이 적용됨 (필수임)

 

AFTER

- E 요소 내부의 뒤에, 내용(content)을 삽입

- ' E::after '

예전엔 콜론을 1개 쓰기도 했다. 근데 현재는 2개 씀

 

속성 선택자(Attribute Selectors)

- html의 속성을 선택해서 사용하는 개념

- css에서 속성은 property

 

ATTR

- 속성 attr을 포함한 요소 선택

- [attr] or [class] ...

 

ATTR=VALUE

- 속성 attr을 포함해 속성 값이 value인 요소 선택

- [attr=value] (value에 "" 붙여도 되고 생략해도 됨)

 

ATTR^=VALUE

- 속성 attr을 포함해 속성 값이 value로 시작하는 요소 선택

- [attr^=value]

 

ATTR$=VALUE

- 속성 attr을 포함해 속성 값이 value로 끝나는 요소 선택

- [attr$=value]

 

상속(Inheritance)

- CSS 특정 요소들은 부모에 지정하는 것만으로도 하위 요소에 전부 적용됨

 

상속되는 속성들(properties)

• font
  • font-size
  • font-weight
  • font-style
  • line-height
  • font-family
• color
• text-align
• text-indent
• text-decoration
• letter-spacing
• opcity
• etc...

 

강제 상속

- 상속되지 않는 속성(값)도 inherit 이라는 값을 사용해 '부모'에서 '자식'으로 강제 상속시킬 수 있다.

자식을 제외한 후손에게는 적용되지 않으며, 모든 속성이 강제 상속을 사용할 수 있는건 아니다.

 

우선순위

예제

<div id="color_yellow" class="color_green" style="color: orange;">Hello, World!</div>

div{ color: red; !important; }
#color_yellow { color: yellow; }
.color_green { color: green; }
div { color: blue; }
* { color: darkblue; }
body { color: violet; }

Hello world! 라는 문자는 어떤 색상이 될까?

답은 style 태그의 color: orange만 적용됨

 

우선순위 결정

- 같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성(property)을 우선 적용할지 결정하는 방법

 

1. 명시도 점수가 높은 선언이 우선 명시도
2. 점수가 같은 경우, 가장 마지막에 해석(늦게 작성한)되는 선언이 우선(선언 순서)
3. 명시도는 '상속' 규직보다 우선(중요도)
4. !important가 적용된 선언 방식이 다른 모든 방식보다 우선(중요도)

우선순위에는 '중요도, 명시도, 선언 순서'의 개념이 있다.

 

1. 가장 중요(!important)

- 모든 선언을 무시하고 가장 우선

- 점수 : ∞ pt (무한대)

 

2. 인라인 선언 방식(Style Attribute)

- 인라인 선언(HTML style 속성을 사용)

- 점수 : 1000 pt

 

3. 아이디(ID Selector)

- 아이디 선택자

- 점수 : 100 pt

 

4. 클래스(Class Selector)

- 클래스 선택자

- 점수 : 10 pt

 

5. 태그(Type Selector)

- 태그 선택자

- 점수 : 1 pt

 

6. 전체(Universal Selector)

- 전체 선택자

- 점수 : 0 pt

 

7. 상속(CSS Inheritance)

- 상속 받은 속성은 항상 우선하지 않음

- 점수 : 계산하지 않음

 

Width, Height 기본값

 

• 블럭요소 div => 레이아웃을 다루는데 특화
  • width : auto = 100%
  • height : auto = 0
• 인라인요소 span => 텍스트 다루는데 특화
  • width : auto = 0
  • height : auto = 0

 

 

margin

 : 요소의 '외부(바깥) 여백'을 지정

• top, bottom, left, right의 여백 설정을 한꺼번에 설정할 수 있음
• 음수 값(Negative Values)을 사용할 수 있다.
  • 개별 속성 작성 가능
    • margin-top
    • margin-bottom
    • margin-left
    • margin-right

 

속성값

• 단위 : px, em, cm 등 단위 지정 (기본 값=0)
• auto : 브라우저가 너비를 계산
• % : 부모 요소의 너비에 대한 비율로 지정
  • 부모 요소의 가로 너비에 대한 퍼센트가 적용됨

 

사용법

margin : 위 우 아래 좌;
margin : 위 [좌,우] 아래;
margin : [위,아래] [좌,우];
margin : [위,아래,좌,우];

- 4개인 경우 : 시계방향대로 해석

 

 

마진 중복(병합, Collapse)

: 마진의 특정 값들이 '중복'되어 합쳐지는 현상 (버그가 아님)

 

경우

• 형제 요소들의 margin-top과 margin-bottom이 만났을 때
  • left와 right는 좌우값 중복 안됨
• 부모 요소의 margin-top과 자식 요소의 margin-bottom이 만났을 때
• 부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을 때

 

마진 중복 계산법

: 마진 중복 현상이 발생시, 중복 값을 계산하는 방법

 

조건	요소A 마진	요소B 마진	계산법	중복값
둘 다 양수	30px	10px	더 큰 값으로 중복	30px
둘 다 음수	-30px	-10px	더 작은 값으로 중복	-30px
각각 양수와 음수	-30px	10px	-30+10=-20	-20px

 

padding

: 요수의 내부(안) 여백 지정

 

속성값

• 단위 : px, em, cm 등 단위 지정 (기본 값=0)
• % : 부모 요소의 너비에 대한 비율로 지정
  • 부모 요소의 가로 너비에 대한 퍼센트가 적용됨

사용법

= margin이랑 같음

 

크기증가

: 추가된 padding 값만큼 요소의 크기가 커지는 현상

 

div {
  width:100px;
  height:100px;
  background: tomato;
  padding: 20px;
}

- 이 경우 가로, 세로 너비가 140px이 됨

 

크기가 커지지 않도록 자동 계산

div {
  width:100px;
  height:100px;
  background: tomato;
  padding: 20px;
  box-sizing : border-box; 
}

- 이 경우 가로, 세로 너비는 100px이고 그 안에 20px 안쪽부터 컨텐트 박스(content-box)가 됨

 

border

: 요소의 '테두리 선'을 지정

 

속성값

• border-width : 선의 두께(너비) (기본값 - medium)
  • medium, thin, thick (단위 : px, em, cm 등 단위로 지정)
  • 사용법은 margin, pading과 같음
• border-style : 선의 종류 (기본값 - none)
  • none : 선 없음
  • hidden : 선 없음과 동일(table 요소에서만 사용)
  • solid : 실선(일반선)
  • dotted : 점선
  • dashed : 파선
  • double : 두 줄선
  • groove : 홈이 파여있는 모양(선) - 액자같은 모양
  • ridge : 솟은 모양(선, groove의 반대)
  • inset : 요소 전체가 들어간 모양(선)
  • outset : 요소 전체가 나온 모양(선)
  • 등등...
• border-color : 선의 색상 (기본값 - black)
  • transparent : 투명한 선(요소의 배경색이 보임)
  • border-top-(width/style/color) : 위쪽 선의 두께, 종류, 색상 각각 지정 가능
  • border-bottom-(width/style/color) : 아래쪽 선의 두께, 종류, 색상 각각 지정 가능
  • border-left-(width/style/color) : 위쪽 선의 두께, 종류, 색상 각각 지정 가능
  • border-right-(width/style/color) : 아래쪽 선의 두께, 종류, 색상 각각 지정 가능

 

사용법

border: 두께 종류 색상;

 

 

box-sizing

: 요소의 크기 계산 기준을 지정

 

• content-box : 너비(width, height)만으로 요소의 크기 계산(기본값)
• border-box : 너비(width, height)에 안쪽 여백(padding)과 테두리 선(border)을 포함하여 요소의 크기 계산

 

display

: 요소의 박스 타입(유형)을 설정

 

• block : 블록 요소(<div> 등)
• inline : 인라인 요소(<span> 등)
• inline-block : 인라인-블록 요소(<input> 등)
  • 가로, 세로값 가질 수 있음
  • margin, padding값도 가질 수 있음
• 기타 : table, table-call, flex 등
• none : 요소의 박스 타입이 없음(요소가 사라짐)

 

overflow

: 요소의 크기 이상으로 내용(자식요소)이 넘쳤을 때, 내용의 보여짐을 제어

 

값	의미	기본값
visible	넘친 부분을 자르지 않고 그대로 보여줌	visible
hidden	넘친 부분을 잘라내고, 보이지 않도록 함
scroll (강제)	넘친 부분을 잘라내고(넘친 유무 상관 없음), 스크롤 바를 이용해 볼 수 있도록 함
auto (자동)	넘친 부분이 있는 경우만 잘라내고 스크롤 바를 이용해 볼 수 있도록 함

 

opacity

: 요소의 투명도를 지정

 

값	의미	기본값
숫자	0부터 1 사이의 소수점 숫자	1

 

font

: 글자 관련 속성들을 지정

 

값	의미	기본값
font-style	글자 기울기 지정	normal
font-weight	글자 두께 지정	normal
font-size	글자 크기 지정	medium(16px)
line-height	줄 높이 지정	normal(Reset.css 적용시 1)
font-family	글꼴(서체) 지정	운영체제(브라우저)에 따라 달라짐

 

사용법

font : 기울기 두꼐 크기 / 줄높이 글꼴;

// ex
.box {
	font: italic bold 20px / 1.5 "Arial", sans-serif;
}

.box {
	font: 20px / 1.5; /* ERROR */
	font: bold; /* ERROR */
	font: bold sans-serif; /* ERROR */
	font: 30px / 1.5 sans-serif;
	font: bold 30px sans-serif;
	font: italic 30px / 1.5 "Arial", sans-serif;
}

단축 속성을 사용하려면 font-size와 font-famil 값을 필수로 입력해야 한다

 

 

font-style

: 글자 스타일(기울기)을 지정

 

값	의미	기본값
normal	스타일 없음	normal
italic	이탤릭체(활자)
oblique	기울어진 글자

 

font-weight

: 글자의 두께(가중치)를 지정

 

값	의미	기본값
normal	기본 글자 두께, 400과 동일	normal ( 400 )
bold	글자 두껍게, 700과 동일
bolder	부모(상위) 요소보다 더 두껍게(bold보다 두껍다는 개념이 아님)
lighter	부모(상위) 요소보다 더 얇게
숫자	100부터 900까지의 100단위 숫자 9개, normal과 bold 이외의 두께를 제공하는 글꼴(서체)를 위한 설정

 

font-size

: 글자 크기 지정

 

단위 : px, em, cm 등 단위로 지정 (기본값 16px - 환경에 따라 조금씩 다름)

% : 부모(상위) 요소의 비율로 지정 => em으로 대체해서 쓰는게 나음

 

line-height

:줄 높이 지정

 

값	의미	기본값
normal	브라우저의 기본 정의를 사용(1 ~ 1.4)	normal
숫자	요소 자체 글꼴 크기의 배수로 지정
단위	px, em, cm 등 단위로 지정
%	요소 자체 글꼴 크기의 비율로 지정

 

font-family

: 글꼴(서체) 지정

 

값	의미	기본값
글꼴 이름	글꼴(서체) 후보 목록을 지정
serif sans-serif monospace cursive fantasy	글꼴 계열 이름을 지정

 

사용법

font-family : [글꼴후보1, 글꼴후보2, ... ], 글꼴계열;

.box {
	font-family: Arial, "Open Sans", "돋움", dotum, sans-serif;
}

첫 번째 것(Arial)만 사용되지만 후보를 적는 이유는 웹사이트 접속시 리소스 자원들을 브라우저로 다운 받아야 하는데 폰트는 무거워서 업로드 못함. 첫 번째 폰트가 없으면 사용자의 환경에 있는 폰트 중에 다음 후보 목록에 있는 폰트를  사용하라고 명시해주는 것. 만약 다 없으면 마지막 요소인 계열에서 그 계열에 맞는 폰트가 사용됨

 

text-align

: 문자의 정렬방식 지정

 

• left
• right
• center
• justify : 양쪽 맞춤 (1줄 안되고 <br>태그 없이 2줄 이상인 경우)

 

text-decoration

: 문자의 장식(line)을 설정

 

값	의미	기본값
none	선 없음	none
underline	밑줄을 지정
overline	윗줄을 지정
line-through	중앙 선(가로지르는)을 지정

 

text-indent

: (첫번째 줄의) 들여쓰기를 지정

- text-indent로 화면 밖으로 밀어내서 대체 텍스트로 사용가능하다 (명시적으로 -9999px)

 

음수 값(Negative Values)을 사용할 수 있다.
음수 값을 사용하면 첫째 줄은 왼쪽으로 들여쓰기(내어쓰기) 된다.

 

letter-spacing

: 문자의 자간(글자 사이 간격) 지정

 

normal : 단어 사이의 일반 간격 (기본값 - 폰트마다 다를 수 있음. +0과 같음)

단위 : px, em, cm 등 단위로 지정

 

word-spacing

: 단어 사이(띄어쓰기)의 간격 설정 = 띄어쓰기 너비 지정

 

normal : 단어 사이의 일반 간격 (기본값 - 폰트마다 다를 수 있음. +0과 같음)

단위 : px, em, cm 등 단위로 지정

 

Lorem Ipsum : 의미없는 문장 생성 사이트

https://generator.lorem-ipsum.info/_latin

Professional lorem ipsum generator for typographers