CSS

🧐 스타일 시트

• 내부 스타일 시트 -> head 태그 안에서 정의하고 style 태그 사이에 작성
• 외부 스타일 시트 -> head 태그안의 link 태그 에서 연결

🧐 마진과 패딩

• 전체 선택자를 이용하여 웹 문서 전체에 마진과 패딩 여백을 0으로 지정 -> 여백 없앨 수 있음

🧐 id 선택자

id 선택자는 중복해서 적용할 수 없으므로 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 웹 요소에 자바스크립트 프로그램을 사용하면서 요소를 구별할 때 사용한다.

🧐 CSS의 의미

CSS에서 C는 캐스케이딩의 줄임말, 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미

🧐 스타일이 충돌하지 않도록 하는 방법

1) 스타일 우선순위
2) 스타일 상속

🧐 스타일 우선순위

• 사용자 스타일 > 제작자 스타일 > 브라우저 기본 스타일
• 스타일 규칙에 !important 를 붙이면 그 스타일은 다른 스타일보다 우선순위가 높아진다.
• !important > 인라인 스타일 > id 스타일 > 클래스 스타일 > 타입 스타일
• 중요도와 적용범위가 같다면 그다음은 스타일을 정의한 소스 순서로 우선순위가 정해진다.

🧐 스타일 상속

• 자식 요소에서 별도로 스타일을 지정하지 않을 시 부모 요소의 스타일 속성들이 자식요소로 전달되는것
• body 태그는 웹 문서에 사용한 모든 태그의 부모 요소!
• 배경색과 배경 이미지는 스타일 상속이 되지 않는다.

🧐 글꼴

• 예전에는 절대 크기 단위를 많이 사용했지만(px,pt) 모바일 기기까지 고려해야 하는 요즘에는 상대 크기 단위인 em이나 rem 많이 사용
• 이탤릭체로 글자를 표시하는 font-style 속성
• font-weight : 400=normal, 700=bold
  -> 100~900 범위

💡 글꼴이 폰트와 관련되어있다면 텍스트 스타일은 단어, 문단에서 사용하는 스타일

🧐 block과 inline

🧐 block

• 블록 레벨 요소란 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것
• 요소의 너비가 100%
• 대표적인 태그 > h1, div, p

🧐 inline

인라인 레벨 요소를 만드는 태그 > span, img, strong

🧐 영역의 크기

• 콘텐츠 영역의 크기를 지정하는 width, height 속성
• 백분율 : 박스 모델을 포함하는 부모 요소를 기준으로 백분율 지정

💡 구글 폰트는 무료로 사용할 수 있는 여러가지 웹 폰트를 제공하므로 웹 문서에 링크해서 쉽게 사용 가능

💡 css에서는 색상을 지정할 때 주로 rgb와 rgba로 표현

❗ 문서 전체를 화면 중앙에 배치하려면 반드시 너빗값이 지정되어 있어야 한다.

🧐 float

• p 태그는 블록레벨 요소이지만 float 속성을 사용하면 이미지를 표시하고 그 주변에 텍스트가 둘러 싸도록 할 수 있다.
• float 속성 : 웹 요소를 문서 위에 떠 있게 만든다.
  -> 요소가 왼쪽구석이나 오른쪽 구석에 배치된다는 것
• clear : float 속성을 해제하는 속성
• display: inline-block은 기본 마진과 패딩을 가지고 있지만 float는 x 그리고 float는 clear 속성으로 해제 필요

🧐 align-self 와 align-content

• align-self : 교차축에 있는 개별 항목의 정렬 방법
• align-content : 교차축에서 여러 줄로 표시된 항목의 정렬 방법

🧐 flex

• flex-flow 속성은 flex-direction과 flex-wrap 속성을 한꺼번에 지정하여 배치방향을 결정하거나 줄을 바꾼다. 기본값은 row nowrap
• justify-content
  
• align-items
  
  • baseline-교차축의 문자 기준선에 맞춰 배치
  • stretch - 플렉스 항목을 늘려 교차축에 가득 차게 배치
• align-items에서 특정 항목만 지정하고 싶다면 align-self 속성을 사용
• 주축에서 줄바꿈이 생겨서 플렉스 항목을 여러 줄로 표시할 때 align-content 속성을 사용하면 교차축에서 플렉스 항목 간의 간격을 지정 가능
  (한 줄인 경우는 align-items 속성 사용)

🧐 Grid

• Grid - 가로와 세로를 모두 사용 -> 2차원이라고 말한다.
• 그리드 컨테이너를 만들 때는 display 속성을 grid나 inline-grid 로 지정
• grid-template-colums -> 그리드 컨테이너 안의 항목을 몇개의 칼럼으로 배치할지, 각 칼럼의 너비를 얼마로 할지 지정
• 그리드 레이아웃에서는 상대적인 크기를 지정할 수 있도록 fr 단위 사용

grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3,1fr);

-> 줄 높이를 100px로 지정했을경우 첫번째 가로줄의 두번째 박스의 내용이 짤렸다.

-> 하지만 위와 같이 minmax()함수를 사용하면 내용이 많아도 다 표시할 수 있을만큼 높이가 늘어난다.

grid-template-rows: minmax(100px,auto);

• 자동으로 칼럼 개수를 조절하는 auto-fill, auto-fit
  grid-template-columns: repeat(auto-fit, 200px);
  -> 너비가 200px 인 칼럼을 화면 너비에 가득 할때까지 배치
• auto-fit은 화면이 넓을 때에는 남는 공간 없이 꽉 채워서 칼럼을 표시
  but auto-fill은 칼럼의 최소 너비만 표시하고 남는 공간은 그대로 둔다.
• 그리드 항목의 간격을 지정하는 grid-column-gap, grid-row-gap, grid-gap

🧐 그리드 레이아웃

• 플렉서블 박스 레이아웃 : 그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치
• CSS 그리드 레이아웃 : 수평과 수직 어느 방향이든 배치 가능

🧐 line-height

• line-height -> 줄 간격은 글자 크기의 1.5~2배면 적당하다.
• line-height의 값을 height 과 똑같이 지정하면 세로로 가운데 정렬 가능

🧐 position 속성

• static : 문서의 흐름에 맞춰 배치. 기본값
• relative : 위칫값을 지정할 수 있다는 점을 제외하면 static과 같다.
• absolute : relative 값을 사용한 상위 요소를 기준으로 위치를 지정해 배치
  ❗absolute 사용할 때 주의! 부모요소를 relative로 지정해야 한다.
• fixed : 브라우저 창을 기준으로 위치를 지정해 배치
  -> 웹 브라우저에서 스크롤하더라도 항상 같은 위치에 나타난다.

🧐 가상 클래스

🧐 가상 클래스 선택자 정의 순서

link visited hover active

🧐 앵커

앵커는 페이지가 긴 웹 문서에서 특정 요소를 클릭하면 그 위치로 한번에 이동하도록 도와주는 기능

🧐 구조 가상 클래스

웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용하는 가상 클래스 선택자

🧐 가상 요소

문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가한다.
가상 요소 이름 앞에 콜론 2개를 붙여 표시한다.
::first-line, ::first-letter
::before, ::after

🧐 트랜지션과 애니메이션

• 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것
• animation 속성을 이용하면 트랜지션보다 더 쉽게 애니메이션을 만들 수 있다.
  애니메이션이 중간에 스타일이 바뀌는 지점 : 키프레임
  @keyframes 속성으로 정의

🧐 반응형 웹디자인

• 반응형 웹 디자인은 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해준다.
• 뷰포트 : 스마트폰 화면에서 실제 내용이 표시되는 영역

🧐 미디어 쿼리

• 미디어 쿼리 : 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법
• @media 속성 사용
• 화면 회전 속성 : 가로 모드 -> landscape, 세로 모드 -> portrait
• 미디어 쿼리를 작성할 때 화면 크기에 따라 서로 다른 css를 적용할 분기점
  -> 중단점
• 모바일 퍼스트 기법 : 모바일을 먼저 고려하여 미디어 쿼리를 작성하는것
• 미디어 쿼리 적용하기
  1) 외부 CSS 파일
  link, @import
  -> CSS 파일이 많고 규모가 큰 사이트 개발 시 link 태그 주로 사용
  2) 웹문서에 직접 정의하는 방법
  style 태그 안에서 media 속성을 사용하여 조건을 지정하고, 그 조건에 맞는 스타일 규칙을 정의
  @media 문 사용