브래의 슬기로운 코딩 생활
모바일 웹 구축 실무 12주차 정리 - 1 (스타일링) 본문
스타일링
CSS
CSS (Cascading Style Sheets)
Selector - 스타일을 어떤 엘리먼트에 적용할지를 선택하게 해주는 것
Selector의 유형
•Element selector
•ID selector
•Class selector
•Universal selector
•Grouping selector
•Element의 상태와 관련된 selector
•Element selector
특정 HTML 태그를 선택
•ID selector
element에 고유한 id를 정의하고 이 id를 기반으로 선택 / #뒤에 id를 붙여서 사용
•Class selector – 여러 개의 element를 분류하기 위해 사용
. 뒤에 클래스명을 붙여서 사용
•전체 선택자 (Universal selector)
전체 엘리먼트에 적용하기 위한 선택자. * 를 사용
•그룹 선택자 (grouping selector)
여러 가지 선택자를 그룹으로 묶어 하나의 스타일을 적용하기 위해 사용하는 선택자
•상태와 관련된 선택자
:hover – 마우스 커서가 엘리먼트 위에 올라왔을 때
:active – 주로 <a> 태그 에 사용. 엘리먼트가 클릭됐을 때
:focus – 주로 <input> 태그에 사용. 엘리먼트가 focus 되었을 때
:checked – radio, checkbox 같은 유형의 input 태그가 체크되어 있는 경우
:first-child, :last-child – 상위 엘리먼트를 기준으로 각각 첫 번째 child, 마지막 child일 경우
레이아웃과 관련된 속성
<p>, <div>, <h1>~<h6> 태그의 기본 속성
<span>, <a>, <em> 태그의 기본 속성
<button>, <input>, <select> 태그의 기본 속성
내부에 다른 엘리먼트들을 포함
•display: block
•display: inline
•visibility
엘리먼트를 화면에 보여주거나 감추기 위해 사용하는 속성
•visible – 엘리먼트를 화면에 보여줌
•hidden – 엘리먼트를 화면에서 안 보이게 감춤. display:none; 과 달리 화면에서 영역은 그대로 차지
•position – 엘리먼트를 어떻게 위치시킬 것인지 정의
•static – (default) 엘리먼트를 원래 있어야 하는 위치(작성된 순서)에 배치
•fixed – 엘리먼트를 브라우저 window(뷰포트)에 상대적으로 위치하도록 배치
채팅상담, 상담톡 등 화면의 고정 위치에 배치
•relative – 엘리먼트를 원래 위치를 기준으로 상대적으로 배치
•absolute – 엘리먼트를 절대 위치에 위치시킴
이때 배치 기준은 position 속성이 static이 아닌 첫번째 상위 요소 기준
조건에 맞는 상위 요소가 없다면 body 요소가 배치 기준
•position: static
•position: fixed
•position: relative
•position: absolute
•플랙스박스(Flexbox)
flex-direction
row: (default) 아이템을 행(row)을 따라 가로 순서대로 왼쪽부터 배치
column: 아이템을 열(column)을 따라 세로 순서대로 위쪽부터 배치
row-reverse: 아이템을 행(row)의 역(reverse)방향으로 오른쪽부터 배치
column-reverse: 아이템을 열(column)의 역(reverse)방향으로 아래쪽부터 배치
align-items
stretch: (default) 아이템을 늘려서(stretch) 컨테이너를 가득 채움
flex-start: cross axis의 시작 지점으로 아이템을 정렬
center: cross axis의 중앙으로 아이템을 정렬
flex-end: cross axis의 끝 지점으로 아이템을 정렬
baseline: 아이템을 baseline 기준으로 정렬
justify-content
flex-start: main axis의 시작 지점으로 아이템을 정렬
center: main axis의 중앙으로 아이템을 정렬
flex-end: main axis의 끝 지점으로 아이템을 정렬
space-between: main axis 기준으로 첫 아이템은 시작점, 마지막 아이템은 끝 지점에 맞추며, 중간에 있는 아이템들 사이의 간격이 일정하게 유지되도록 맞춤
space-around: main axis를 기준으로 각 아이템의 주변(around) 간격(space)을 동일하게 맞춤
styled-components
styled-components
•npm 패키지 관련 명령어
•패키지 설치 – install, i
npm install <패키지명>@버전 (특정 버전을 설치할 경우)
npm install –g <패키지명> (패키지를 전역으로 설치할 경우 –g 옵션)
•패키지 업데이트 – update
npm update <패키지명>
•패키지 삭제 – uninstall
npm uninstall <패키지명>
styled-components 기본 사용법
•리터럴(Literal)
•템플릿 리터럴(template literal)
-리터럴을 템플릿 형태로 사용하는 자바스크립트 문법
-backticks(`)를 사용하여 문자열을 작성하고, 그 안에 대체 가능한 expression을 넣는 방법
•untagged/tagged 템플릿 리터럴
- untagged template literal - 문자열을 여러 줄에 걸쳐서 작성하거나 포매팅을 위해 사용
- tagged template literal - 앞에 있는 태그 함수를 호출하여 결과를 리턴
•tagged 템플릿 리터럴
- 태그 함수의 파라미터는 expresion으로 구분된 문자열 배열과 expresion이 순서대로 들어감
styled-components의 props 사용하기
⁃조건이나 동적으로 변하는 값을 사용해서 스타일링하기 위한 기능 (react component의 props와 같은 개념)
styled-components의 스타일 확장하기
[요약]
styled-components
'2-2 > 모바일 웹 구축 실무' 카테고리의 다른 글
| 모바일 웹 구축 실무 12주차 정리 - 2 (API) (0) | 2023.12.22 |
|---|---|
| 모바일 웹 구축 실무 기말과제 PPT (2) | 2023.12.05 |
| 모바일 웹 구축 실무 10주차 추가 자료 (Babel) (0) | 2023.11.12 |
| 모바일 웹 구축 실무 10주차 정리 - 2 (State 끌어올리기) (0) | 2023.11.12 |
| 모바일 웹 구축 실무 10주차 정리 - 1 (폼(Forms)) (2) | 2023.11.12 |
