CO:SSION Week2 - CSS

CSS란 무엇인가?

CSS를 모든 파트가 배워야 하는 이유

• 우리는 팀이니까
• 사람들의 시선을 끌 수 있고 사용자 경험을 고려한 디자인은 웹/앱 서비스의 필수 요소
• 프론트엔드를 제외한 나머지 파트도 스타일링(CSS)의 기초 정도는 알아야 한다!

CSS란?

• CSS(Cascading Style Sheet) : HTML로 작성된 문서가 웹사이트에서 표현되는 방법을 정해주는 스타일 시트 언어
• 프로그래밍 언어가 아니다

용어 정리

• 선택자 : CSS 규칙을 적용할 요소를 정의
• 속성 : 어떤 스타일을 적용할 것인지 속성 명시
• 값 : 각 속성에 부여되는 값

CSS를 적용하는 방법

인라인(inline) Style

• 스타일을 적용시키고 싶은 태그에 직접 style 속성을 부여하는 방법
• 간편하다는 장점을 가지고 있지만 적용해야 되는 스타일이 많아질수록 가독성이 떨어지고 유지보수가 어렵다

style 태그 이용하기

• HTML 파일의 head 안에 style 태그를 명시하고 그 안에 CSS 스타일링을 하는 방법
• 인라인 스타일과 마찬가지로 적용해야 되는 스타일이 많아질수록 유지보수가 어렵다

css 파일 분리하기

• CSS 관련 코드만 모아 놓은 파일을 분리한 후 HTML 파일과 CSS 파일을 연결시키는 방법
• 파일을 분리하면 가독성을 확보할 수 있고 유지보수를 쉽게 할 수 있다.

CSS 선택자

CSS에서는 스타일링을 적용하기 위해 속성을 부여해야 한다. 속성의 개수는 수백 개에 달하며 계속해서 추가되거나 삭제되고 있다. 모두 암기할 것이 아니라 구글링이나 검색을 통해 해결하는 것이 바람직하다.

CSS 선택자

• 기본 선택자
  • 전체 선택자
  • 유형 선택자
  • 클래스 선택자
  • ID 선택자
  • 특성 선택자
  • 부모/자식 선택자
• 그룹 선택자
• 결정자
• 의사 클래스

전체 선택자

• 모든 요소에 속성을 부여하는 선택자

유형 선택자

• 특정 HTML element에 스타일 속성을 부여하는 선택자
• 태그명으로 스타일 속성 부여
• 그 태그로 해당하는 요소들에 전부 스타일 부여

클래스 선택자

• 특정 Class 이름을 가진 Element들에게 속성을 부여하는 선택자
• 클래스명으로 스타일 속성 부여
• 클래스 옆에 . 붙이기

ID 선택자

• 특정 ID 이름을 가진 Element들에게 속성을 부여하는 선택자
• 아이디 명으로 스타일 속성 부여함
• 아이디 옆에 #을 붙인다

특성 선택자

• 각 태그가 갖고있는 속성에 접근하는 방식으로 적용
• ID, 클래스 선택자를 통해 특성 선택자를 대체할 수 있지만 크롤링 등에서 유용

부모/자식 선택자

Cascading

• 스타일 규칙의 우선 순위 및 상속에 따라 스타일링이 결정되는 방식

선택자에 따른 명시도

• inline style > id > class > tag(유형 선택자)

코드 순서

• 선택자의 명시도가 같을 때에는 나중에 나온 스타일이 먼저 나온 스타일을 덮어쓴다

CSS의 주요 속성

레이아웃(Flex&Grid)

none

• 요소가 브라우저에 그려지지 않게 함

inline

• 줄바꿈이 되지 않고, 너비, 높이, 여백 등을 지정할 수 없음. 보통 글자에 적용
• 대표 inline 태그: <span> / <a>

block

• 별다른 선언이 없다면 가로 영역을 모두 차지하고, 이후 block은 새로운 라인에서 시작됨
• 대표 block 태그: <div> / <p>

inline-block

• inline과 block의 하이브리드 버전
• 줄바꿈이 되지 않으나, 너비 높이 여백 등을 지정할 수 있음

flex

• 아주 유연한 display 속성
• 레이아웃 구성에서 빼놓을 수 없는 속성

flex container에 적용하는 속성

 

• diplay: flex;
  • 메인 축을 기준으로, 요소들이 나열된다
• flex-direction
  • 메인 축 방향 설정
  • row;(기본값) / row-reverse; / column; / column-reverse;
• justify-content
  • 메인축 방향 정렬
  • flex-start;(기본값) / center; / flex-end; / space-between;
  • space-around, space-evenly는 위치를 정확하게 파악할 수 없기 때문에 잘 사용하지 않음
• align-items
  • 교차축 방향 정렬
  • flex-start, center, flex-end
• 필수 속성
  • gap : 나열되는 flex-item 사이의 공간을 지정
  • flex-wrap : flexcontainer 의 크기가 일정하게 지정되어 있는 경우, 요소가 flex-container를 넘어섰을 때 줄바꿈 여부

grid

• 가장 최근에 등장한 강력한 레이아웃
• 격자 형태의 레이아웃을 배치할 때 유용
• flex보다 복잡하고 다양한 속성을 통해, 레이아웃을 자유롭게 커스텀 할 수 있다

table

• 레이아웃을 테이블로 표현함. 실제로 테이블이 필요한 경우가 아니라면 사용하는 것을 권장하지 않음

레이아웃(Position)

static

• 일반적인 HTML의 흐름대로 배치
• position 속성에 값을 지정하지 않았을 때 설정되는 기본 값
• 위 → 아래 / 왼쪽 → 오른쪽 방향으로 요소가 쌓인다

relative

• 혼자 사용될 때는 일반적인 HTML의 흐름대로 배치, 주로 absolute와 같이 사용
• static의 위치를 기준으로, top / bottom / left / right 이동 가능
• absolute 의 상위 요소가 된다면, 해당 요소의 기준점이 됨

absolute

• relative의 자식 요소일 때는 relative를 기준으로 배치
• 그렇지 않을 때에는 브라우저를 기준으로 배치
• 상위 요소에 relative가 있다면 해당 요소를 기준으로 top / bottom / left / right 이동 가능
• 조상을 다 뒤져봐도 relative가 없다면, 최상위 요소를 기준으로 top / bottom / left / right 이동 가능

fixed

• 뷰포트를 기준으로 배치
• 뷰포트(Viewport) : 현재 보고 있는 컴퓨터 화면의 영역
• 때문에 스크롤을 내리고 확대 축소를 해도 그 자리 그대로

sticky

• 해당 요소를 감싸는 블록과 맞닿으면, 그 맞닿은 부분에 고정
• sticky를 감싸는 블록을 빠져나갔을 때, 빠져나간 방향에 달라붙는 형태의 포지션

CSS의 기본 개념

단위

• px [절대 단위]
  • 가장 많이 사용되는 숫자 단위 (unit)
  • 화소 1개의 크기
  • 1px = 1/96 in [절대 길이]
• em / rem [상대 단위]
  • 요소에 지정된 사이즈에 설정하는 상대적인 사이즈
• vw / vh
  • 현재 실행 중인 스크린 크기에 맞춰 상대적 크기를 반환
• %
  • 백분율의 상대 단위, 상대적 사이즈를 결정
  • 상위 요소의 크기를 기준으로 상대적 사이즈 결정

박스 모델

• padding (패딩)
  • 내용과 테두리 사이의 간격
• border (테두리)
  • 내용과 패딩 주변을 감싸는 테두리
• margin (마진)
  • 테두리와 이웃하는 요소 사이의 간격
• content (내용)
  • 박스의 실질적 내용 부분