CSS 속성

• 태그에 CSS를 적용하려면 style속성을 사용함
• CSS코드를 추가할 때는 CSS속성_이름:CSS속성 값형태로 적음
• 여러개의 CSS속성을 사용할 때는 ;으로 구분함

배운 CSS 속성들

배경색

• <tag style="background-color: #ffffff">

글자색

• <tag style="color: #ffffff">

글꼴

• <tag style="font-family: Arial, AppleGothic, 돋움, sans-serif">
• font-family: 폰트를 여러개 지정 가능하며 우선순위에 따라 가능한 글꼴을 적용함

구글 폰트

• 컴퓨터에 없는 글꼴도 이용하고 싶을 때는 구글 폰트를 이용함
  구글 폰트
• link 태그: 외부에서 데이터를 가져오는 태그로 head 안에다가 씀
  궁금증: sans-serif폰트가 내 컴퓨터에 있는지 확인하는 방법은?
  Windows 검색창에서 '제어판'접속 -> '제어판'에서 '글꼴'을 선택
  

궁금증: 글꼴을 400, 600 두개를 가져오고, 적용되는 건 400인지 600인지 궁금함

글자 크기

• <tag style="font-size: 20px">

  글자 굵기

• <tag style="font-weight: 300">
• 100에서부터 900까지 100 단위로 올라가며 중간 값은 400임
• h1 태그와 p태그의 글자의 크기와 굵기가 다른 이유: 웹 브라우저에서 기본적인 CSS 속성이 지정돼 있어서 임

  글 정렬하기

• <tag style="text-align: center">
  궁금증: 사진을 정렬하려면 어떻게 해야 하지?
  방법1: text-align: center 속성 이용
  방법2: <center> 태그 이용 (HTML5에서는 지원하지 않는 태그로 가급적 사용하지 않는 게 좋음)
  방법3: display, margin 속성 이용
  참고 블로그

  크기

• <tag style="width: 700px; height: 375px">
• <tag style="width: 100%">
• The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.

  안쪽 여백

• <tag style="padding: 40px 20px">
• 차례대로 세로, 가로 순임

  바깥 여백

• <tag style="margin: 32px">
• body 태그에 기본적으로 마진값이 들어가 있음
• 마진의 특별한 기능: 바깥 여백 중에서 가로 여백을 자동으로 채우는 기능
  <tag style="margin: 0 auto">
  세로는 9, 가로는 자동으로 채우라는 코드임
  auto는 margin의 가로에서만 동작함
  궁금점: 왜 auto는 margin의 가로에서만 동작할까?