CSS (Cascading Style Sheet)

# 선택자(selector) {

        속성(property) : 속성 값(property value);

}

 

선택자 : 스타일을 변경할 요소를 선택

속성 : 어떤 속성을 변경할지 선택

값 : 어떤 값을 적용할지 입력

 

• 현재 페이지의 HTML요소가 사용자에게 어떻게 보여야 할지 설정하는 곳
• 스타일시트를 작성할 때 CSS라는 언어를 사용한다
• 웹 브라우저는 스타일시트를 해석하여 요소들의 디자인을 결정한다
• id : 어떤 한 요소를 유일하게 식별하기 위한 속성
• class : 요소들을 특정 그룹으로 묶기 위한 속성
• div : 블록 요소를 생성
• span : 인라인 요소를 생성

 

# CSS 선택자(selector)

• 선택자를 이용해 언제든 원하는 html요소를 선택할 수 있어야 한다
• tagname : 태그 이름으로 선택한다
• #id : 요소의 id 속성으로 선택한다
• . class : 요소의 class 속성으로 선택한다 (여러 개 선택 가능)
• 공백 : 요소의 자손 요소를 선택한다
• > : 요소의 자식 요소를 선택한다

 

# CSS 적용하기

1. inline CSS : 요소 내부에서 style속성을 이용해 CSS를 적용하는 방식으로 다른 방법들보다 우선순위가 높다
2. internal CSS : 현재 페이지 내부에서 <style> 태그를 이용해 CSS를 적용하는 방식으로 여러 태그를 사용할 수도 있으며 나중에 나온 태그가 앞에 있는 태그를 덮어쓴다
3. external CSS : 다른 위치에 존재하는 CSS를 <link> 태그를 이용해 적용하는 방식이다

 

# Margin

• border 바깥쪽의 여백
• 다른 요소와의 거리를 결정한다
• top margin과 bottom margin이 만나는 곳에서는 합쳐지는 것이 아니라 둘 중 더 높은 margin으로 적용된다
• margin을 auto로 설정하면 자동으로 요소를 가운데 정렬한다 

 

# Padding

• border 내부에서 컨테츠 까지의 여백이다

 

# Box Model

• HTML은 요소를 박스 형태로 구성한다
• margin > border > padding > content 순으로 구성한다 

 

# 단위 (Unit)

* 절대 길이 단위 : px (픽셀) / mm (밀리미터) / cm (센티미터) / in (인치)

* 상대 길이 단위 

- em : 현재 요소의 font-size에 기반한 크기 조절 단위

- rem : 현재 웹 페이지의 font-size에 기반한 크기 조절 단위

- vw : viewport width / 1vw는 화면 너비의 1퍼센트를 의미한다

- vh : viewport height / 1vh는 화면 높이의 1퍼센트를 의미한다

* viewport란 현재 웹 페이지를 보고 있는 프로그램을 말한다 

 

 

# 텍스트 (Text)

• text-align : 텍스트 정렬 (left, center, right, justify)
• vertical-align : 한 줄 내부에서의 수직 정렬 설정 (top, middle, bottom)
• text-decoration : 텍스트에 줄 표시 (underline, line-through, overline)
• text-transform : 대소문자 변경 (lowercase, uppercase, capitalize)
• text-indent : 첫 줄 들여쓰기 설정
• letter-spacing : 글자 간격 설정
• word-spacing : 단어 간격 설정
• line-height : 줄 간격 설정
• white-space : 자동 줄 바꿈 설정 (normal , nowrap)

 

# 그림자 (Shadow)

1. 첫 번째 숫자 : 그림자의 수평 위치
2. 두 번째 숫자 : 그림자의 수직 위치
3. 세 번째 숫자 : 그림자의 번짐 정도
4. 네 번째 숫자 : 그림자의 크기 조절
5. 색상 값 : 색상 조절

 

# 글꼴 (font-family)

• font-family property로 원하는 글꼴을 선택할 수 있다
• 기본적으로 사용자의 컴퓨터에 설치되지 않은 글꼴은 사용할 수 없다
• 해당 글꼴이 불러지지 않는 경우에 대비하여 예비용 글꼴들을 여러 개 설정해 놓을 수 있다
• 사용자에게 번거롭게 글꼴을 설치하게 요구하는 경우도 있지만, 대부분은 CDN(Content Delivery Network)을 활용한다

 

# 아이콘 (Icon)

• Google Icons(Material Icons) 
• - 구글 아이콘을 사용할 때 해당 스타일의 스타일시트를 import해야 한다  
• - material-icons-two-tone인 경우 material-icons-Two-Tone을 import
• 아이콘은 글꼴을 이용하는 것이기 때문에 해당 요소의 글꼴 크기와 색상을 변경하면 아이콘의 크기와 색상 변경 가능

 

• Font-awesome Icons
• - fontawesome.com에서 로그인 하고 내 키트 가서 키트 복붙 해서 상단에 넣어놓고 아이콘 들어가서 원하는 것 사용
• 색깔을 입힐 수도 있고, 애니메이션 작용도 가능함 
• i 태그는 원래 기울인 글꼴의 기능이 있는 태그지만, icons의 첫글자라는 이유로 원래 기능을 삭제당하고 아이콘으로 활용

 

# 가상 클래스 (Pseudo Class)

• 선택자 뒤에 :을 붙여 해당 요소의 특수한 상황을 선택하는 CSS 문법
• first-child,nth-child(n/even/odd),last-child : 해당 요소가 부모의 특정 번째 자식인 상황을 선택
• hover : 해당 요소에 마우스가 올라가 있는 상황을 선택
• link : 해당 요소가 링크 역할을 할 때를 선택
• active : 해당 링크가 마우스로 눌린 상황을 선택
• visited : 해당 링크가 방문했던 링크인 상황을 선택
• checked : 해당 요소가 체크되어 있는 상황을 선택
• required : 해당 요소가 반드시 채워야 하는 요소인 상황을 선택

 

# 가상 요소 (Pseudo Element)

• 가상 요소는 해당 요소의 특정 부분을 선택할 수 있다
• 선택자 뒤에 ::을 붙여 해당 요소의 일부분만 선택할 수 있다
• ::first-letter : 첫번째 글자만 바꿀 수 있다
• ::first-line : 첫번째 줄만 수정 가능하다
• ::selection : 블록 지정
• ::before , ::after : 해당 요소의 맨 앞과 맨 뒤에 내용을 추가할 수 있다 

 

# 디스플레이 속성 (Display property)

• html 블록 요소의 기본값은 display: block;이다
• html 인라인 요소의 기본값은 display: inline;이다
• display: block은 기본적으로 너비를 100% 차지한다
• 너비를 100% 차지하지 않더라도 같은 줄에 다른 요소가 더 이상 존재할 수 없다
• display: inline은 글자 취급을 당하고, 콘텐츠만큼의 영역만 차지한다. width/height 등으로 여백을 조절할 수 있으나 padding과 margin은 올바르게 작동하지 않는다
• display: inline-block은 inline처럼 행동하지만 block처럼 크기 조절이 가능한 display며, inline이 크기 조절이 되지 않는다는 단점을 보완한 속성 값. 이미지 태그처럼 행동한다
• display: none은 해당 요소를 안 보이게 하며 차지하고 있던 영역도 사라진다
• display: hidden은 해당 요소를 안보이게 하며 차지하고 있던 영역은 그대로 차지한다

 

# display : Flex

• 상황에 따라 내부 요소들의 크기를 유연하게 조절하는 컨테이너
• display: flex;를 설정한 요소는 flex container가 된다
• 자식 요소들은 모두 flex-item이 된다

 

# display : Grid

• display: grid를 설정한 요소는 grid-container가 된다
• 내부의 자식 요소들은 모두 grid-item이 되어 컨테이너의 관리를 받는다
• column과 row를 설정할 수 있는 레이아웃이다
• 행과 열의 크기를 설정한 후 각 아이템이 얼마큼의 영역을 차지할지 설정한다 

 

# 포지션 (Position)

• 한 영역 내부에서 요소의 위치를 자유롭게 설정하기 위한 속성
• 포지션이 설정된 요소들은 다른 요소와 겹쳐서 배치할 수 있다
• 포지션을 설정한 후에 top/left/right/bottom 값을 설정하여 위치를 조절한다
• static : 기본값, 포지션을 설정하지 않은 상태
• absolute : 포지션이 설정된 가장 가까운 조상 요소 내부에서 절대적인 위치를 설정하는 방식 (원래 자리는 사라진다)
• relative : 요소가 원래 가지고 있는 위치를 기준으로 설정하는 방식 (원래 자리 남아있다)
• fixed : viewport에서 항상 고정적인 위치를 차지하는 방식
• sticky : 처음에는 원래 위치에 있다가 스크롤 이동 시 설정한 위치에 고정되어 이동하는 방식

 

# z-index

• 포지션이 설정된 요소들 중 누가 더 위쪽에 있는지를 설정하는 속성
• 기본값은 0이고 음수도 설정할 수 있다
• 동일한 z-index를 가진 요소들 중에서는 더 늦게 만들어진 요소가 위로 올라간다 

 

# Float property

• float이 설정된 요소를 다른 요소들이 비켜가게 만드는 속성
• float이 설정된 요소는 냇가의 돌 같은 성질을 지니게 된다
• float이 설정된 요소들이 여러 개라면 순서대로 차곡차곡 쌓인다

 

# 반응형 웹 페이지

• viewport의 크기 및 종류에 따라 다른 스타일이 적용되는 방식의 웹 페이지
• Media Query를 사용한다
• @media (미디어 타입) and (적용될 크기)

 

# 미디어 타입 (웹 페이지를 보는 기계의 종류)

1. all : 모든 타입의 기기
2. print : 프린터
3. screen : 컴퓨터, 태블릿, 스마트폰 등의 일반 기기
4. speech : 화면을 읽어주는 기기