---

css

CSS

• Cascading Style Sheets

• HTML 문서를 화면에 표시하는 방식을 정의한 언어

• 웹 문서의 내용과 관계없이 디자인만 바꿀 수 있다.

• 다양한 기기에 맞게 반응형으로 바뀌는 문서를 만들 수 있다.

기본 구조

적용 방법 (External Style Sheet)

• 1. External Style Sheet : 태그 내부에 link 태그를 활용하여 외부 스타일 시트 적용

• 2. Internal Style Sheet

     파일 내에 스타일 적용
     Head 태그 내부의 style 태그 사이에 CSS 규칙 작성
     외부 스타일 시트 방식보다 우선순위가 높은 적용 방법

• 3. Inline Style

     각 태그 내에서 style 속성을 활용

• 스타일 적용 방법 우선 순위 : 인라인 > 내부 스타일 시트 > 외부 스타일 시트

CSS 선택자

• HTML 문서에서 CSS 규칙을 적용할 요소 정의

• 기본 선택자

1. 전체 선택자 : HTML 문서 내 모든 element 선택 * { style properties }
2. 유형 선택자 : 태그명을 이용하여 스타일을 적용할 태그 선택, HTML 내에서 주어진 유형의 모든 요소를 선택 element { style properties }
3. 클래스 선택자 : class가 적용된 모든 태그 선택, HTML 내에서 동일한 클래스 명을 중복해서 사용 가능 .class-name { style properties }
4. id 선택자 : id 특성 값을 비교하여, 동일한 id를 가진 태그를 선택, HTML 내에서 주어진 ID를 가진 요소가 하나만 존재 해야함 #id-value { style properties }
5. 특성 선택자

• 그룹 선택자(선택자 목록)

  ,를 이용하여 선택자 그룹을 생성하는 방법, 모든 일치하는 노드를 선택 element, element { style properties }

• 결합자

  1. 자손 결합자 (Descendant Combinator) : 첫 번째 요소의 자손인 노드를 선택
     selector1 selector2 { style properties }
  2. 자식 결합자 (Child Combinator) :첫 번째 요소의 바로 아래 자식인 노드를 선택 selector1 > selector2 { style properties }
  3. 일반 형제 결합자 (General Sibling Combinator) : 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 모두 선택 former-element + target-element {style properties}
  4. 인접 형제 결합자 (Adjacent Sibling Combinator) : 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소 선택 former-element + target-element { style properties }

• 의사 클래스
• 의사 요소

우선순위

• 같은 요소에 여러개의 CSS 규칙이 적용된 경우, 마지막 규칙 (style 태그 내부 상에서의 위치를 따짐. )
• !Important 우선 적용

상속 (Inheritance)

• 부모 요소에 적용된 스타일이 자식 요소에 상속이 될 수도 있고 안될 수도 있디.

• 규칙성이 없기에 매번 마다 Document를 활용하여 잘 찾아서 알아봐야됨.

• 요소의 상속되는 속성에 값이 지정되지 않은 경우, 요소는 부모 요소의 해당 속성의 계산 값을 얻는다. ex) color 속성

속성

크기 단위

• 길이 값 : px, cm, mm, in, em, rem

  em, rem : 상대적인 단위
  1.5em : 1.5배
  em : 부모의 font-size의 배수, 부모의 크기에 따라 달라지므로 변수가 많다. 따라서 rem을 사용하는 것이 더 안전하다.
  rem : root element의 font-size의 배수
  root element : html element
  px : 픽셀 단위
  백분율(%) : 상위 block에 대한 백분율의 단위, 상위 block 크기가 바뀌면 자신의 크기도 자동으로 변경된다.
  auto (width) : 100%, 자신의 상위 block이 허용하는 widht 크기만큼 채운다.
  auto (height) : 0%, 높이를 결정하는 요인은 block box 속의 내용물의 크기

색상 단위

• RGB 색상 : 16진수 표기법 혹은 함수형 표기법을 사용하여 특정 색을 표현하는 방식

• HSL 색상 : 색상, 채도, 명도를 통해 특정 색을 표현하는 방식

font

• font-family 글꼴 지정 (font name)
• font-size 글자 크기 지정
• font-style 글자 스타일 지정
• font-variant 소문자를 작은 대문자로(small-caps) 변형
• font-weight 글자 굵기 지정

Text

• text-align text 정렬 방식 지정
• text-decoration text 장식 지정
• text-indent Text-block 안 첫 라인의 들여쓰기 지정
• text-transform text 대문자화
• text-shadow text 그림자화
• white-space 엘리먼트 안의 공백 지정
• vertical-align 수직 정렬 지정
• letter-spacing 문자 간의 space 간격을 줄이거나 늘림
• word-spacing 단어 간의 간격 지정
• line-height 줄(행) 간격 지정
• color text 색상 지정

box-sizing

• 기본적으로 모든 요소의 box-sizing은 content-box padding을 제외한 순수 contents 영역만을 box로 지정

• border까지의 너비를 크기로 보기 원한다면 box-sizing: border-box 속성을 활용하자.

display: block

• 줄 바꿈이 일어나는 요소

• 화면 크기 전체의 가로 폭을 차지한다.

• 블록 레벨 요소 안에 인라인 레벨 요소가 들어갈 수도 있다.

display: inline

• 줄 바꿈이 일어나지 않는 행의 일부 요소

• content 너비만큼 가로 폭을 차지

• width, height, margin-top, margin-bottom 지정 불가

• 상하 여백은 line-height

display: inline-block

• block과 inline 레벨 요소의 특징을 모두 가진다.

• inline 처럼 한줄에 표시 가능하고, block 처럼 width, height, margin 속성 지정이 가능하다.

display: none

• 해당 요소를 화면에 표시하지 않는다. (공간 X, 화면 X)

• visibility: hidden (공간 O, 화면 X)

position

• static(기본) : 일반적인 내용물의 흐름, 상단, 좌측에서의 거리를 지정할 수 없다.

• relative : HTML 문서에서의 일반적인 내용몰의 흐름을 말하지만, top, left 거리를 지정한다.

• absolute : 자신의 상위 box 속에서의 top, left, right, bottom 등의 절대적인 위치를 지정한다.

• fixed : 스크롤이 일어나도 항상 화면상의 지정된 위치에 있다.

float

• float 속성은 박스를 어느 위치에 배치할 것인지 결정하기 위해 사용

  none : 기본값
  left : 요소를 왼쪽으로 띄움
  right : 요소를 오른쪽으로 띄움

clear

• float 속성이 가지고 있는 값을 초기화하기 위해 사용

left, right : 각 속성 값을 취소 가능
both : 양쪽 float 속성 값 취소 가능
none : 기본값

---