CSS 문법을 간단하게 알아보자

CSS란?

Cascading Style Sheet

• Author style
• User style
• Browser

폭포수처럼 author(개발자) ->user(사용자) ->brower(브라우저 디폴트) 순으로 흘러 내립니다.

 

Selector 종류

class selector : .

id selector : #

universal: *

type: tag

state: :

attribute: []

*id는 한개, class는 여러개 존재

 

 

자식 셀렉터

부모 자식 관계인 두 셀렉터를 '>' 기호로 조합.

ex) div > strong {color: dodgerblue; }

<div>의 직계 자식인 <strong>에만 적용.

 

 

자손 셀렉터

자손 관계인 2개 이상의 태그 나열

ex) ul strong {color: dodgerblue; }

<ul>의 자손 <strong>에 모두 적용.

 

 

속성 셀렉터

HTML 태그의 특정 속성에 대해 값이 일치하는 태그에만 스타일 적용

ex) input[type=text] {color: red;}

type 속성값이 "text"인 <input> 태그에 적용

<input type="text">

 

 

가상 클래스 셀렉터

어떤 조건이나 상황에서 스타일 적용하로도록 만든 셀렉터

• :link - 방문한 적이 없는 링크
• :visited - 방문한 적이 있는 링크
• :hover - 마우스를 롤오버 했을 때
• :active - 마우스를 클릭했을 때
• :focus - 포커스 되었을 때 (input 태그 등)
• :first - 첫번째 요소
• :last - 마지막 요소
• :first-child - 첫번째 자식
• :last-child - 마지막 자식
• :nth-child(2n+1) - 홀수 번째 자식

 

선택자 우선순위

구체적>포괄적 (id>class>tag)

 

 

 

display 속성

block : 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보임.

inline : block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없음.

none : 박스 생성 x

inline-block : block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정 할 수 있음.

 

아래는 웬만하면 상속되는 몇 가지 속성들입니다.

1. color
2. font-family
3. font-size
4. font-weight
5. line-height
6. list-style
7. text-align
8. visibility

 

inline display

inline 요소들은 다른 요소들과 같은 줄에 머무르려고 하는 성향과, 필요한 만큼의 가로 길이만 차지하는 성향이 있습니다.

다음 요소들은 기본 display 값이 **inline**입니다.

1. <span>
2. <a>
3. <b>
4. <i>
5. <img>
6. <button>

 

block display

block 요소들은 다른 요소들과 독단적인 줄에 가려고 하는 성향과, 최대한 많은 가로 길이를 차지하는 성향이 있습니다.

다음 요소들은 기본 display 값이 **block**입니다.

1. <div>
2. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
3. <p>
4. <nav>
5. <ul>
6. <li>

 

 

박스의 배치 : position

normal flow 

• 웹 페이지에 나타난 순서대로 HTML 태그 배치
• position 프로퍼티를 이용하여 normal flow 무시 가능

 

position 프로퍼티를 이용한 배치 방법

• 정적 배치 - position: static(디폴트)                         html에 정의된 순서대로 browser에 보여지는 것
• 상대 배치 - position: relative                                   원래 있어야 할 위치에서 옮겨간 것
• 절대 배치 - position: absolute                                 원래 있어야 할 상자 안에서 움직인 것
• 고정 배치 - position: fixed                                       상자에서 벗어나 page상에서 옮겨간 것 (브라우저 기준)
• 유동 배치 - position: float: left 혹은 float: right        
•                - postion: sticky                                      원래 있어야 할 위치에 그대로 있는 것

 

 

번외) line-height

먼저 line-height는 글자가 한 줄에서 차지하는 높이를 말합니다.

line-height가 10px이라고 한다면 한 줄에서 글자가 폰트 크기를 포함하여 총 10px의 높이를 차지한다는 걸 의미하게 됩니다.

위 그림을 보시면 ABC와 맞닿아 있는 위, 아래의 선을 제외하고 두 공간이 있습니다.

이 공간들을 leading 영역이라고 합니다.

line-height를 증가시키면, 이 leading 영역만 위 아래로 동등하게 늘어나게 됩니다.

대신 텍스트는 가운데에 그대로 위치합니다. 이것이 line-height를 이용하여 수직 정렬을 시키는 주된 원리입니다.