[TIL] CSS 기초

💡 Achievement Goals를 위주로 정리하는 TIL

✔️ CSS

• Cascading Style Sheets
• 마크업 언어가 표현되는 방법을 설정
• 레이아웃과 타이포그래피
• index.css 파일을 만들어 스타일 지정하기
• CSS를 설정할 수 있는 3가지 방법
  1. 인라인 스타일 : 파일을 구분하지 않고 같은 라인에 스타일을 지정
  2. 내부 스타일 시트 : HTML 파일 내
  3. 외부 스타일 시트 : .css 파일 생성 후 연결해주기

body { 					//셀렉터(selector) { 선언 블록(Declaration Block)
		color:red;		//선언(Declararion)
        font-size:30px; //속성명(Property):속성값(Value)
}

• text-align:center; 텍스트 가운데 정렬
  color:red; 글자 색 바꾸기
  backgroung-color:brown; 요소의 배경색 바꾸기
  background색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일 한 번에 지정
  <em> 기울임 강세 요소 (명시적이거나 암시적인 대조 표현)
  <i> 기울임 (고유 명사 표현 주로 사용)

• 파일 연결시키기

<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="layout.css" />

• id 스타일 지정 (# 사용) - 단 하나의 요소에만 적용할 수 있는 유일한 이름
  ex.
  <h4 id='title'>hello</h4>
#title { color:red; }

• class 스타일 지정 (.사용) - 여러 요소 사용 가능

• 여러 개의 class를 하나의 엘리먼트 적용하기 (.selected)

✔️ 텍스트 꾸미기

• border-color 테두리 색상

• font-family 글꼴 속성 (사용하려는 글꼴이 없을 경우를 대비해 여러 글꼴을 쉼표를 통해 나열하면 순서에 따라 적용된다.)

• 구글 폰트 서비스 이용

• font-size

• font-weight

• text-decoration

• letter-spacing

• line-height

  • px단위 사용 (기기, 브라우저 사이즈에 영향 x)
  • rem 상대 단위 (기본 글자 크키 1rem)
    2rem 2배
    0.8rem 0.8배
  • 반응형 웹
    너비(width)에 따라 유동적으로 레이아웃이 적용되는 웹사이트

  ✔️ 박스 모델

• 모든 콘텐츠는 고유의 영역을 가지고 있음.

• <h1>

• <p> 한 문단 사용

• <span> 글자만큼의 영역/줄바꿈이 적용되지 않음. width,height 사용 불가

• block : <div>, <p>
  inline : <span>

• <span>
  display: inline-block 추가한다면 width,height 사용가능

  ✔️ 박스를 구성하는 요소

• border 테두리

• margin 바깥 여백

  • padding 안쪽 여백

• 박스 크기보다 컨텐츠 크기가 더 클 경우
  overflow: auto; 지정, 박스 안 스크롤

• 박스 크기 측정

  1. 콘텐츠 영역
     +padding-left
     +padding-right
     +border-left
     +border-right
  2. * {box-sizing: border-box;} *(모든 요소 선택)
     모든 여백과 테두리를 포함한 크기로 계산

• 여백과 테두리를 포함한 border-box 사용

---

• free app icon 검색