CSS

20240621 FRI CSS (Cascading Style Sheet)
1. CSS (Cascading Style Sheet)
1.1 배경
- HTML 문서에서 디자인 요소를 분리
1.2 스타일 (Style)
- HTML 문서에서 자주 사용하는 글꼴, 색상, 정렬, 배치 등과 같이
문서의 겉모습을 결정짓는 요소

2. stylesheet
   2.1 분류
   - 인라인 스타일
   - id 스타일
   - class 스타일
   - 타입 스타일
   - 내부 스타일
   - 외부 스타일
   2.2 형식
   - 선택자 { 속성 1: 속성 값; 속성2: 속성 값2; }
   ex) p{text - align : center; color : blue }
   

2.3 선택자 (selector)
- 전체 선택자
+ 문서의 모든 요소에 스타일을 적용하는 것.
*{ 속성 : 값; .. } <-- 전체 선택자

- 타입 선택자 
+ 특정 태그를 사용한 모든 요소에서 스타일을 적용. 
태그명 {스타일 규칙}
    p{text-align: center; color: blue}
    -> 속성, 속성 값으로 이루어진 하나의 쌍: 스타일 규칙 

- 클래스 선택자
+ 특정 부분만 선택해서 문서 안에 여러 번 적용. 마침표를 붙여서 사용함. 
.클래스명 {스타일 규칙}
.contents {width:1000px ...}
.datail p {line - height:2.0 }

- id 선택자
+ 특정 부분만 선택해서 문서 안에서 한 번만 적용. 
+   #을 붙여서 사용.
#아이디명 {스타일 규칙 } 
#topMenu {height:60px; ..} 

- 그룹 선택자 
+ 여러 요소에 같은 스타일을 적용할 때 사용. 
선택자 1, 선택자 2 {스타일 규칙}
h1 {text-align: center;}
p {text-align: center; }
위의 선택자들을 그룹 선택자로 변경해서 사용.
h1, p {hext-align} {스타일 규칙} --> h1과 p를 합친것과 동일 

2.4 캐스캐이딩 (Cascading)
- 1. 의미
+ CSS에서 웹 요소에 둘 이상의 스타일을 적용시, 우선순위에 따라 적용할 스타일을 결정 하는 것.
=> 캐스캐이딩 -> 스타일 우선순위.
- 2. 우선순위
1 순위 : !importtant 를 스타일 규칙에 붙이는 경우.
2 순위 : 인라인 스타일
태그 안에 Style 속성을 사용하여 태그만 스타일을 적용하는 것,
3 순위 : id 스타일
#을 붙여 사용하는 스타일 한 문서에 한 번만 적용
4 순위 : class 스타일
. 을 붙여 사용하는 스타일. 문서 안에서 여러번 사용할 수 있음.
5 순위 : 타입스타일
타입 선택자와 동일하게 사용하는 스타일
- 3. 스타일 상속
- 스타일 시트에서 자식 요소에서 별도로 스타일을 지정하지 않으면
부모 요소의 스타일 속성들이 자식 요소로 전달되는 것.
ex) html의 body tag 는 웹 문서에서 사용한 모든 tag의 부모 요소이므로,
body tag에 글자색, 글꼴을 지정하면, 웹 문서 전체에 적용된다느는 것을 의미함.
자식 요소에 스타일을 적용하지 않으면 부모(body tag)에 적용된 글자색, 글꼴을 사용하게 됨.

2.5 CSS 박스 모델
- 1. 개요
+ 웹 문서에서 내용을 배치할 때, 각 요소를 박스 형태로 구성하는 것.
CSS 를 사용한 레이아웃의 기본이 됨.
따라서, 이러한 박스 모델이 모이면 웹 문서가 됨.
- 2 . 박스모델의 요소
- 블록레벨 요소
+ 태그를 사용해서 요소를 삽입하는 경우

    <h1>,<div>, <p> 
    - 인라인 레벨 요소
    + 콘텐츠 만큼 영역을 차지함 
    <span>, <img>, <strong> 
3. 기본 요소
- 콘텐츠 영역
+ 크기 지정 속성을 사용 (width, height)
- 패딩 (padding)
+ 컨텐츠 부분과 박스의 영역 사이의 관ㄱ{}
- 테두리 
+ {박스의 테두리}
- 마진
+ 여러 박스 모델들 간의 사이 어택 
- 그림자
속성명: box - shadow 
속성값 :
수평거리 : 그림자가 가로로 얼마나 떨어져 있는지의 용도
         양수 : 오른쪽, 음수 : 왼쪽
수직거리 : 그림자가 세로로 얼마나 떨어져 있는지의 정도
         양수 : 아래쪽, 음수 : 위쪽
흐림정도 : 0이 기본값. 숫자가 높아질수록 부드러운 그림자가 표시.
         음수값은 사용이 불가함.
   색상 : 한 가지 색상만 지정 가능. 기본값은 검은색

• 테두리 스타일

  • 속성명 : border - style
  • 속성값 :
  • none : 테두리 없음 . 기본값
  • solid : 실선
  • dotted : 점선
  • dashed : 짧은 직선
  • double : 이중선, 이중선의 간격 조절은 border - width 로 조정.

• 마진의 제어 및 사용
  --- > 두 박스 모델 사이의 여백을 마진이라고 함.
  한 박스 모델에서의 여백은 패딩이라고 함.
  속성명 : margin
  속성값 : px, 백분율, auto

  마진 중첩 (마진 상쇄)
  박스 모델 요소를 세로로 배치할 경우에 각 요소의 마진과 마진이
  서로 만나면 마진값이 큰 쪽으로 겹치는 문제가 발생하는 것.

2.6 레이아웃 만들기
- 배치 방법 결정
+ 속성명: display
=> 네비게이션을 만들어서 메뉴를 가로로 배치하는 경우에 많이 사용됨.
- 속성값:
+ block:
+ inline:
+ inline - block:
+ none:
- 이미지와 텍스트 동시 배치
+ 속성명: float
+ 속성값 : left, right, none
float 를 해제는 clear 속성명을 사용한다. 속성값은 left, right, both 가 존재 .

2.7 웹 요소의 위치 지정
- 속성명 1 : position
+ 속성값
static : html 문서의 흐름. html tag 작성 순서
relative : static 과 동일, 추가적으로 위치값의 지정이 가능하다.
absolute : relative 를 적용한 상위 요소를 기준으로 위치 지정.
fixed : 브라우저 기준으로 위치 지정.

- 속성명 2 : 
 left : 기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정. 
 right : 기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정. 
 top : 기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정. 
 bottom : 기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정. 
 + 속성값 position : absolute; left : 50px; 

2.8 고급 선택자
- 연결 선택자
+ 둘 이상의 선택자를 연결해서 사용.
+ 조합 선택자, 콤비네이션 선택자, 콤비네이션 셀렉터

- 하위 선택자 
+ 부모 요소에 포함된 하위 요소를 선택해서 사용. 
  사용예시) section p { ... }

- 자식 선택자
+ 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자 .
  사용예시) section > p { ... }

- 인접 형제 선택자, 형제 선택자 
- 가상 클래스와 가상 요소
+ 사용자 동작에 반응하는 가상 클래스 
|-> ":link" -> 방문하지 않은 링크에 스타일 적용.
        (아직 링크를 클릭하지 않은 경우 )
|-> ":visited" -> 방문한 링크에 스타일을 적용
        (링크를 클릭했을 경우 )
|-> ":hover" -> 특정 요소에 마우스 포인트를 올려놓은 경우 
|-> ":active" -> 웹 요소를 활성화 한 경우 (클릭한 경우)
|-> ":focus" -> 웹 요소에 초점이 맞추어진 경우 

요소 상태에 따른 가상 클래스 
|-> ": target" -> 앵커 대상에 스타일을 적용
|-> ": enabled" -> 해당 요소가 사용할 수 있을 때
|-> " : disabled" -> 해당 요소가 사용할 수 없을 때
|-> ": checked" -> 선택한 항목의 스타일을 적용
    (ex, form 에 라디오 박스, 체크박스에서 선택된 항목에 스타일을 적용)
|-> ":not" -> 특정 요소를 제외하고 스타일을 적용.