ch 6

• 반응형 웹 디자인 : 사용자의 웹 브라우저 크기에 따라 화면 레이아웃을 자동으로 바꿔주는 방법
• style 형식 : 선택자 { 속성1: 속성값1; 속성2: 속성값2; }
• 인라인 스타일 : 태그 내부에 style 속성
• 내부 스타일 : <head> 태그 안에 <style> </style> xorm tkdldp wkrtjd
• 외부 스타일
  - .css 파일 안에 작성
  - 이때는 <style> 태그 사용 안함
  - <head> 태그 안에 <link> 태그 사용해서 외부 css 파일 연결
  - <link rel="stylesheet" href="css 파일 경로">
• ; 으로 구분하여 여러 속성 지정 가능

css 기본 선택자

• 전체 선택자 : *
• type selector : 특정 태그 사용한 모든 요소에 스타일 적용 → p { font-size: 10px; font-style: italic; }
• class selector : .클래스명 { 스타일 규칙 }
• id selector : #아이디명 { 스타일 규칙 }
• 같은 스타일 규칙 사용하는 요소 묶을 때 : p, h1 { text-align : center; }

cascading

• 우선순위가 위에서 아래 (계단식)으로 적용됨
• 중요도 : 사용자 스타일 > 제작자 스타일 > 브라우저 기본 스타일 : 예) 제작자가 배경을 흰색으로 했더라도 사용자가 다크모드 하면 배경이 검은색으로 됨)
• 우선순위 : !important > 인라인 > id > class > type (높 > 낮)
• 스타일 규칙에 !important 붙이면 다른 스타일보다 우선순위 높아짐
• 중요도와 우선순위 같으면 나중에 작성한 코드가 더 우선순위 높음
• 스타일 상속
  - 포함하는 태그는 부모 요소, 포함된 태그는 자식 요소
  - 자식 요소는 부모의 스타일을 상속 받음

---

ch 7

텍스트

• font-family : 글꼴
  - 웹 문서에서 지정한 글꼴이 사용자 시스템에 없으면 나타나지 않음 → 글꼴 없을 경우 대비해서 2~3개 정도 적용해놔야 함
  - p { font-maily: "맑은 고딕", 돋움, 굴림 }
  - "맑은 고딕" 같이 두 단어 이상인 글꼴은 큰 따옴표 "" 로 묶기
• font-size : 글자 크기 지정
  - 절대 크기 : px 단위
  - 키워드 : xx-small, small, medium ...
  - 상대 크기 : em, rem, % →em과 %는 부모 요소의 글씨 크기 기준으로 상대적인 값지정함. rem은 웹 문서 글자 크기 미리 정하고 상대값으로 지정함
• font-style : 이탤릭체
  - normal, italic, oblique
  - 이탤릭체 바꿀 땐 주로 italic tkdydgka
• font-weight : 글자 굵기
  - normal, bold, bolder, lighter, 100, 300...
  - 숫자값 범위는 100~900
• 웹폰트 : 사용자에게 없는 글꼴은 font-family 속성으로 표시할 수 없다는 단점 → 해결책 : 웹폰트
  - 웹 문서에 사용한 글꼴 정보를 서버에 올려놓고 사용자가 사이트에 접속하면 웹 문서와 웹 폰트 둘다 사용자 시스템으로 내려받는 방식
  - 아이콘을 이미지 말코 글자 형태로 사용해서 웹 폰트와 비슷하게 "아이콘 폰트" 사용할 수 있음
  - 웹 폰트 : https://fonts.google.com/
  - 웹 폰트 정보는 다른 css 코드보다 먼저 와야 됨 → css 코드 가장 위쪽에 넣기
• 아이콘 폰트
  - https://cdnjs.com/libraries/font-awesome (font awesome CDN)
  - cdn은 콘텐츠 사용할 수 있게 서버에 자료 저장해놓고 사용자에게 전달해주는 시스템
  - 위에서 복사한 <link> 코드는 </head> 앞에 붙여 넣기
  - https://fontawesome.com/
• color : 글자 색 → 16진수, hsl/hsla, rgb/rgba (hsla와 rgba는 불투명도도 조절 가능
• text-align : 텍스트 정렬
  - start, end, left, right, center, justify, match-parent
  - start와 left 차이점 : start는 왼 → 오 방향이 아닌 글자, 적 언어의 텍스트 작성 방향과 상관없이 사용할 수 있도록 추가된 값임
• line-height : 줄 높이 조절
  - 줄 높이는 글자의 1.5~2배면 적당
  - line-height 값과 height 값을 똑같이 하면 글자를 세로 정렬할 수 있음
• text-decoration : 텓그트에 밑줄, 윗줄, 취소선 등을 표시함
• text-shadow : 텍스트에 그림자 효과 추가 → 가로 거리 | 세로 거리 | 번짐 정도 | 색상
• text-transform : 텍스트의 영문자(한글에는 영향x)를 원하는대로 대소 문자 변환
• letter-spacing, word-spacing : 글자 간격 조절
  - letter-spacing : 글자와 글자 사이의 간격 조절
  - word-spacing : 단어와 단어 사이의 간격 조절

목록

• list-style-type : 불릿 모양과 번호 스타일 지정
• list-style-image : 불릿 대신 이미지 사용
• list-style-position : 목록 들여쓰기
• list-style : 목록 속성 한꺼번에 표시 (위 3개를 간단하게 줄여쓸 수 있음)

표

• caption-side : 표 제목의 위치를 정해줌 (표 위/아래)
• border : 표에 테두리 그려줌
• border-spacing : 셀 사이의 여백 조절 (표와 셀에 테두리 따로 지정하면 셀과 셀 사이에 여백이 생김)
• border-collapse : 표와 셀 테두리를 합쳐줌 (collapse / separate(default))