[자율학습] 7일차 ~6.4

6.1 css의 특징 살펴보기

6.1.1 기본 스타일 시트

• 웹 브라우저에 기본으로 내장되어 웹 브라우저에 표시되는 요소들의 스타일이 미리 정의된 파일 또는 문서 양식

6.1.2 적용 우선순위와 개별성

• 단계적 적용 : 같은 태그에 여러 스타일 적용되더라도 단계적으로 적용되어 마지막에 영향을 주는 하나의 스타일만 적용됨
• 개별성 규칙에 대한 점수
  • 전체 선택자 : 0
  • 태그 선택자 : 1
  • 가상 요소 선택자 : 1
  • 클래스 선택자 : 10
  • 가상 클래스 선택자 : 10
  • 아이디 선택자 : 100
  • 인라인 스타일 : 1,000

6.1.3 상속

• 부모 요소에 적용된 스타일을 자식 요소가 그대로 물려받아 적용되는 현상

6.1.4 단위

• 절대 단위 : 어던 환경이라도 동일한 크기로 보이는 단위
  • 픽셀 한 가지. 모니터 화면을 구성하는 사각형 1개의 크기
  • css의 크기 단위 중 가장 기본
• 상대 단위 : 부모 요소 또는 웹 브라우저의 창 크기에 따라 상대적으로 결정되는 단위
  • % : 해당 속성의 상위 요소 속성값에 상대적인 크기 가짐
  • em : 부모 요소의 텍스트 크기에 상대적인 크기 가짐
  • rem : html 태그의 텍스트 크기에 상대적인 크기 가짐
  • vw : 뷰포트의 너비를 기준으로 상대적인 크기 가짐
  • vh : 뷰포트의 높이를 기준으로 상대적인 크기 가짐

6.1.5 색상 표기법

• 색상을 값으로 사용하는 속성
• 키워드 표기법 : 색상의 영문명을 속성값으로
• RGB 색상 표기법 : 추가로 alpha 값도 사용 가능
• HEX 표기법 : R,G,B에 해당하는 값을 16진수로 변환해 00-ff로 표기
  • 00이 가장 낮은 값, ff가 가장 높은 값

6.2 텍스트 속성으로 텍스트 꾸미기

6.2.1 font-family 속성

• 글꼴 지정
• 속성값으로 글꼴명 작성. 쉼표로 구분. 1개 이상의 글꼴 나열해 지정
• 한글로 된 글꼴, 공백 있는 글꼴명은 큰따옴표로 감싸야 함

font-family:<글꼴1>,<글꼴2>, ...<글꼴 유형>;

• 글꼴 유형
  • serif : 삐침이 있는 명조 계열의 글꼴
  • sans-serif : 삐침이 없고 굵기가 일정한 고딕 계열의 글꼴
  • monospace : 텍스트 폭과 간격이 일정한 글꼴
  • fantasy : 화려한 글꼴
  • cursive : 손으로 쓴 것 같은 필기체 계열의 글꼴

6.2.2 font-size 속성

• 텍스트 크기 변경하고 싶을 때 사용
• 속성값으로 단위 포함한 크기 넣음

font-size:<크기>;

6.2.3 font-weight 속성

• 텍스트 굵기 지정하는데 사용
• 속성값으로 숫자 표기법, 키워드 표기법 사용 가능

font-weight:<숫자 표기법>|<키워드 표기법>;

• 숫자 표기법 : 숫자 100 단위로 텍스트 굵기 표현
  • 100이 가장 얇고 900이 가장 굵게 표시
• 키워드 표기법 : 텍스트 굵기를 키워드로 표시
  • lighter, normal, bold, bolder 의미

6.2.4 font-style 속성

• 글꼴 스타일 지정에 사용

font-style:<속성값>;

• 속성값
  • normal : 기본 형태로 표시
  • italic : 이텔릭체로 표시
  • oblique : 기울임꼴로 표시

6.2.5 font-variant 속성

• 영문 텍스트를 크기가 작은 대문자로 변경할 때 사용

font-variant:<속성값>;

• normal : 텍스트 변환하지 않음
• small-caps : 텍스트를 크기가 작은 대문자로 변환

6.2.6 color 속성

• 텍스트 색상 지정할 때 사용

color:<속성값>;

6.2.7 text-align 속성

• 텍스트 정렬 시에 사용
  • left : 왼쪽 정렬
  • center : 중앙 정렬
  • right : 오른쪽 정렬
  • justify : 양쪽 정렬

text-align:<속성값>;

6.2.8 text-decoration 속성

• 텍스트를 꾸며주기 위해 사용

text-decoration:<속성값>;

• 속성값
  • none : 텍스트 장식 모두 지움
  • line-through : 텍스트 중간을 관통하는 선을 그음
  • overline : 텍스트 위에 선을 그음
  • underline : 텍스트 아래 선을 그음

6.2.9 letter-spacing 속성

• 자간 조절할 때 사용
• 속성값으로 normal 또는 크기 넣을 수 있음

letter-spacing:normal:<크기>;

6.2.10 line-height 속성

• 텍스트 한 줄의 높이 지정할 때 사용하는 속성

line-height:<속성값>;

• 속성값
  • normal:웹 브라우저에서 정한 기본값 적용
  • 숫자:현재 font-size 값에 입력한 숫자를 곱한 값 적용
  • 퍼센트:현재 font-size 값에 입력한 비율 곱한 값 적용
  • 크기:입력한 크기 적용

6.3 박스 모델을 구성하는 속성 다루기

• 박스 모델 : 모든 html 요소가 사각형의 박스로 둘러 쌓영 ㅣㅆ다는 개념
• 구성 요소
  • margin : 요소의 외부 여백 의미
  • border : 요소의 테두리(경계선) 의미
  • padding : 요소의 내부 여백 의미
  • content : 요소의 내용 의미

6.3.1 margin 영역

• 박스 모델에서 가장 외부에 있는 영역
• 요소의 외부 여백 담당
• margin-top, margin-right, margin-bottom, margin-left
• 속성값에는 크기 넣으면 됨

margin-top:<크기>;
margin-right:<크기>;
margin-bottom:<크기>;
margin-left:<크기>;

• margin 겹침 현상
  • 인접한 margin 값이 둘 중 더 큰 값으로 통일 되는 것

6.3.2 border 영역

• margin 보다 안쪽에 위치, 요소 테두리(경계선) 담당

border:<border-width> <border-style> <color>;

• border-width 속성
  • 테두리 굵기 지정
  • 속성값으로 단위 포함한 크기 사용

border-width:<크기>;

• border-style 속성
  • 테두리 모양 지정

border-style<속성값>;

• none : 테두리 그리지 않음
• hidden : 테두리 화면에서 감춤
• solid : 테두리 실선으로 그림
• double : 테두리 이중 실선
• dotted : 테두리 점선
• dashed : 테두리 dotted보다 긴 점선
• groove : 테두리가 파인 것처럼
• ridge : 테두리 튀어나온 것처럼
• inset : 테두리 요소가 파인 것처럼
• outset : 테두리 요소가 튀어나온 것처럼

6.3.3 padding 영역

• margin, border 영역보다 안쪽에 있으며 요소의 내부 여백 담당

padding-top:<크기>;
padding-right:<크기>;
padding-bottom:<크기>;
padding-left:<크기>;

6.3.4 content 영역

• 시작 태그와 종료 태그 사이에 사용된 콘텐츠가 속하는 영역
• content 영역 자체를 다루는 속성은 없음
• width와 height 속성
  • width : content 영역의 너비
  • height : content 영역의 높이

width:<크기>;
height:<크기>;

• box-sizing 속성
  • content-box : width, height 속성의 적용 범위를 content 영역으로 제한
  • border-box : width, height 속성의 적용 범위를 border 영역으로 제한

box-sizing:<속성값>;

/
/

6.3.5 박스 모델의 성격과 display 속성

• 블록 성격

  • hn, p, div 태그 사용했을 때 요소의 너비가 콘텐츠 유무와 상관 없이 항상 가로 한 줄을 다 차지하는 것

• 인라인 성격

  • a, span, strong 태그 사용했을 때 요소 너비를 콘텐츠 크기만큼만 차지하는 성격

• 인라인 블록 성격

  • 인라인 성격처럼 요소의 너비가 콘텐츠의 크기만큼 차지하나 그 외의 성격은 블록 성격을 가지는 복합적인 성격

• display 속성

  • 속성값으로 block, inclind, inline-block 사용

6.4 배경 속성으로 요소의 배경 설정하기

6.4.1 background-color 속성

• 요소의 배경에 색상 넣기

background-color:<색상값>;

6.4.2 background-image 속성

• 이미지 넣기
• 요소의 배경 크기 반드시 있어야 함
• 이미지 크기가 요소의 배경 크기와 맞아야 함

background-image:url('이미지 경로')

6.4.3 background-repeat 속성

• 이미지 반복 설정 관련 속성

background-repeat:<속성값>;

• no-repeat : 이미지 반복하지 않음
• repeat-x : 이미지 가로 방향으로 반복
• repeat-y : 이미지 세로 방향으로 반복
• repeat : 이미지 가로와 세로 방향으로 반복
• round : 이미지 반복하되 이미지가 요소에 딱 맞도록 크기 자동 조절
• space : 이미지가 질리지 않도록 반복

6.4.4 background-size 속성

• 배경 크기가 이미지보다 작을 때 이미지가 잘려 보이는 문제 해결

background-size:<속성값 or 너비 높이>;

• auto : 이미지 크기 유지
• cover : 이미지 가로 세로 비율 유지하며 크기 확대하거나 축소해 배경에 꽉 채움
• contain : 이미지 가로 세로 비율 유지하며 이미지가 배경 요소 안에 들어가도록 크기 확대하거나 축소
• <너비 높이> : 이미지 크기 직접 지정

6.4.5 background-position 속성

• 삽입하려는 이미지의 위치도 결정할 수 있음

background-position:<x 위치><y 위치>;

x > left, center, right > 가로 방향의 위치 지정
y > top, center, bottom > 세로 방향의 위치 지정
공통 > px, rem, em, % > 위치 직접 지정

6.4.6 background-attachment 속성

• 요소에 삽입된 이미지 스크롤할 때, 이미지의 작동 방식 결정

background-attachment:<속성값>;

• local : 삽입된 이미지가 요소와 웹 브라우저에서 모두 스크롤됨
• scroll : 삽입된 이미지가 요소에서는 고정되나, 웹 브라우저에서는 스크롤됨
• fixed : 삽입된 이미자가 요소, 웹 브라우저 모두 고정됨

6.4.7 background 속성으로 한 번에 지정하기

background:<color 속성값><image 속성값><repeat 속성값><position 속성값/size 속성값> <attachment 속성값>;