1. CSS 개요
CSS (Cascading Style Sheets)는 웹 페이지의 스타일 및 레이아웃을 정의하는 스타일 시트 언어이다. 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할을 한다.
1) CSS와 프론트엔드 개발
사용자 인터페이스(UI : User Interface)는 사용자가 컴퓨터와 상호작용하는 시스템이다. 사람과 사물 또는 시스템 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 뜻한다.
이전에는 사용자가 애플리케이션과 소통하기 위해 명령어 인터페이스(CLI :Command Line Interface)를 사용하였다. 원하는 기능을 이용하기 위해서는 컴퓨터 자판 등을 이용해 명령 문자열을 입력하여 체계를 조작하는 방법 밖에 없었다.
UI는 사용자가 애플리케이션을 사용하는데 매우 중요한 역할을 하고, 없을 경우 애플리케이션과 소통이 불가능하다. 그러므로 아무리 애플리케이션의 내부에 훌륭한 기능이 존재하더라도 직관적이고 쉬운 UI가 없다면 사용자는 애플리케이션을 사용하지 않을 것이다.
따라서 프론트엔드 개발자는 CSS를 사용해 사용자에게 직관적이고 쉬운 UI를 제작하여 좋은 사용자 경험(UX : User Experience)를 얻을 수 있도록 해야 한다.
2) 기본 문법
// 기본 문법
선택자 {
속성명 : 속성값;
}
// 예시
div {
color: blue;
}선택자(Selector)로 요소 이름 또는 id나 class를 선택한 다음 선언블록({}) 내부에 속성명과 속성값을 적는다.
3) 스타일 적용법
// 인라인 스타일 : HTML 태그의 style 속성에 CSS 코드 삽입
<div style="font-size: 36px; font-weight: 700;">
글자는 굵고 크게
</div>
// 내부 스타일 시트 : HTML 문서 안의 <style> 태그 내에 CSS 코드 삽입
<head>
<style>
li {
width: 150px;
height: 100px;
background: #ffcc00;
}
</style>
</head>
// 외부 스타일 시트 : 별도의 CSS 파일을 만들어 HTML 문서와 연결
<link rel="stylesheet" href="../css/index.css" />일반적으로 외부 스타일 시트를 만들어 연결하는 방식을 기본으로 사용하고, 특정 문서 또는 특정 부분에만 사용되는 스타일을 내부 스타일 시트로 작성한다.
4) 절대 단위와 상대 단위
절대단위 : px, pt 등
상대단위 : em, rem, ch, vw, vh, % 등
🤔 em과 rem의 차이?
em과 rem 모두 기준이 되는 font-size 속성값에 비례해 값이 설정된다. 하지만 기준이 되는 font-size가 다르다.
em의 경우 - 해당 스타일이 적용되는 요소의 font-size가 기준
rem의 경우 - 최상위 요소인 root, 즉 HTML 최상위 요소인 <html>의 font-size가 기준
<style>
html {
font-size: 16px;
}
.box-1 {
font-size: 20px;
width: 10em; // 200px
}
.box-2 {
font-size: 20px;
width: 10rem; // 160px
}
</style>위의 예시에서, box-1의 font-size가 20px이기 때문에 width: 10em은 20px의 10배인 200px이 되고
box-2의 font-size도 20px이지만 width에 적용되는 단위는 rem이기 때문에 html의 font-size인 16px을 기준으로 하여 160px이 되는 것이다.
📂 vw / vh / vmin / vmax
vw, vh, vmin, vmax 모두 뷰포트(웹 사이트가 보이는 영역)에 따라 상대적으로 변경되는 단위이다.
vw, vh가 %와 다른 점은 스크롤바 크기를 포함한 전체 크기를 기준으로 한다.
- vw : 뷰포트 너비의 1%
- vh : 뷰포트 높이의 1%
- vmin : 뷰포트 너비 또는 높이를 기준으로 하는 최소값
- vmax : 뷰포트 너비 또는 높이를 기준으로 하는 최소값
1000 * 500의 경우 1vmin은 더 작은 쪽인 500을 기준으로 한 5px이고 1vmax는 더 큰 쪽인 1000을 기준으로한 10px이다.
📂 ex / ch
ex와 ch는 폰트의 특정 수치에 기반한다.
- ch : 제로문자인 0의 너비값의 "고급 척도"로 정의된다. ex) width: 20ch; 는 20개의 문자열을 포함한다는 뜻
- ex : 현재 폰트의 x-높이값 또는 em의 절반 값. 타이포그래픽에서 세밀한 조정을 할때 자주 사용됨
x-높이값은 소문자 x의 높이값을 말하며 폰트의 중간 지점을 알기 위해 자주 사용한다.
✅ 글꼴 사이즈 설정시
- 디바이스 환경에 영향을 받지 않게 절대적인 크기로 설정하고싶다 => px 사용
- 일반적인 경우 => rem 사용 권장
✅ 화면 사이즈 설정시
- 반응형 웹의 기준점
반응형 웹은 디바이스의 width에 따라 유동적인 레이아웃이 적용됨으로 디바이스 크기별로 CSS를 적용해야한다. 이 크기를 나누는 기준은 대부분 px을 기준으로 한다.
- 화면 너비나 높이에 따른 상대적인 크기가 중요할 때
vw, vh를 사용한다. vw와 vh는 Viewport(웹사이트가 보이는 영역)을 기준으로 한다.
사용할 경우 화면을 가득 채우며 딱 떨어지게 스크롤 시킬 수 있다.
2. 박스모델
1) 개요
모든 콘텐츠는 각자의 영역을 가지며 일반적으로 하나의 콘텐츠로 묶이는 요소가 하나의 박스가 된다. 기본적인 박스는 항상 직사각형이며 너비와 높이를 가진다.
2) Block / Inline / Inline-Block
📁 Block
display 속성이 block인 엘리먼트는 전후로 줄바꿈이 들어가 다른 엘리먼트를 밀어내고, 가로크기가 부모 요소의 100%를 차지한다. 가로와 세로 크기를 지정할 수 있으며, 가로크기를 부모요소보다 작게 설정할수는 있지만 나머지 부분이 margin으로 채워져 여전히 한 줄을 차지한다. block 속성이 기본값인 태그는 div, p 등이 있다.
📁 Inline
display 속성이 inline인 요소는 다른 요소들과 함께 같은 라인에서 표시된다. 가로와 세로의 크기를 임의로 지정할 수 없으며, 포함하고 있는 내용에 따라 크기가 지정된다. inline 속성이 기본값인 태그는 span 등이 있다.
margin은 위아래에 적용되지 않으며, padding은 좌우는 공간, 시각적인 부분이 모두 적용되지만 위아래는 시각적인 부분만 적용되고 공간을 차지하지는 않는다.
📁 Inline-Block
display 속성이 inline-block 속성인 요소는 block과 inline 요소의 특징을 모두 갖고 있다. 기본적으로 포함하고 있는 내용에 따라 크기가 지정되며, block 처럼 가로와 세로 크기를 설정 할 수 도 있다. 줄바꿈이 없고(새로운 줄에서 시작하지 않고) inline 처럼 다른 요소와 같은 라인에서 배치된다. inline-block이 기본값인 태그는 button이나 input 등이 있다.
3) 박스의 구성 요소
📂 margin(바깥 여백) & padding(안쪽 여백)
/* 네 면 모두 적용 */
margin: 1em;
margin: -3px;
/* 세로방향 | 가로방향 */
margin: 5% auto;
/* 위 | 가로방향 | 아래 */
margin: 1em auto 2em;
/* 위 | 오른쪽 | 아래 | 왼쪽 */
margin: 2px 1em 0 auto;
/* 전역 값 */
margin: inherit;
margin: initial;
margin: unset;값의 순서에 따른 방향은 margin과 padding 모두 동일하다.
margin의 경우, 음수 값 지정이 가능하다. 음수 값으로 사용할시 요소가 다른 요소와 겹칠 수 있다.
📂 border(테두리)
/* 스타일 */
border: solid;
/* 너비 | 스타일 */
border: 2px dotted;
/* 스타일 | 색 */
border: outset #f33;
/* 너비 | 스타일 | 색 */
border: medium dashed green;
/* 전역 값 */
border: inherit;
border: initial;
border: unset;디자인적 요소 외에도 영역이 차지하는 크기를 파악하기 위해 레이아웃을 만들면서 사용하기도 한다.
🤔 콘텐츠가 박스를 벗어날때는? => overflow 속성 사용
overflow는 요소의 콘텐츠가 너무 커서 박스를 벗어날때 처리법을 지정하는 속성이다.
적용 가능한 방법은 hidden(잘라내기), scroll(스크롤바 생성), auto(콘텐츠가 박스를 벗어날때만 스크롤 생성) 이 있다.
overflow가 적용되기 위해서는 반드시 요소의 높이(height 또는 max-height)가 설정되거나, white-space: nowrap 속성이 있어야 한다.
overflow-x, overflow-y 도 동일한 속성값을 가지며 각각 x축(가로)로 콘텐츠가 넘칠때, y축(세로)로 콘텐츠가 넘칠때에 처리법을 지정할 수 있다.
🤔 박스 크기가 측정되는 기준?
박스 크기는 콘텐츠 영역크기 + padding 크기 + border 크기를 합산하여 측정된다.
위의 이미지처럼 padding을 고려하지 않고 박스 크기를 디자인 할 경우 오류가 생길 수 있다.
이때 box-sizing: border-box 속성을 사용하면 여백과 테두리 두께를 모두 포함하여 박스 크기를 계산하게 할 수 있다.
3. CSS Selector
(1) 기본 선택자
// 전체 선택자
* { }
// 태그 선택자
input { }
div { }
// class 선택자
.menu-item { }
// id 선택자
#container { }
// attribute 선택자
a[href] { } // href 속성이 포함된 a 요소
input[type="text"] { } // type 속성의 값이 text와 정확하게 일치하는 input 요소
div[class~="item"] { } // class 속성의 값에 item이 포함되는 div 요소(공백구분)
div[class|="menu"] { } // class 속성의 값이 정확하게 menu 이거나 menu로 시작하는 div 요소
ul[class^="list-"] { } // class 속성의 값이 list-로 시작하는 ul 요소
ul[class$="-user"] { } // class 속성의 값이 -user로 끝나는 ul 요소
input[class*="inp"] { } // class 속성의 값에 inp가 포함된 input 요소
- 전체 선택자 (*) : 모든 요소 선택
- 태그 선택자 : 주어진 태그의 이름을 가진 모든 요소를 선택
- class 선택자 : 주어진 class를 가진 모든 요소를 선택
- id 선택자 : 주어진 id를 가진 요소 선택
- attribute 선택자 : 주어진 특성을 가진 모든 요소 선택
- [attr] : attr 속성이 포함된 요소
- [attr=value] : attr 속성의 값이 정확하게 value와 일치하는 요소
- [attr~=value] : attr 속성의 값에 value가 포함되는 요소
- [attr|=value] : attr 속성의 값이 정확하게 value이거나 value로 시작되는 요소
- [attr^=value] : attr 속성의 값이 value로 시작하는 요소
- [attr$=value] : attr 속성의 값이 value로 끝나는 요소
- [attr*=value] : attr 속성의 값에 value가 포함되는 요소
(2) 그룹 선택자
// 그룹 선택자
h1, h2, h3, h4 { }쉼표(,)로 여러개의 요소를 나열하여 선택자 그룹 생성
(3) 결합자
// 후손 선택자
ul li { }
// 자식 선택자
ul > li { }
// 일반 형제 선택자
div ~ p { }
// 인접 형제 선택자
div + p { }- 후손 선택자 : 첫번째 요소의 자손인 요소 선택
- 자식 선택자 : 첫번째 요소의 바로 아래 자식인 요소 선택
- 일반 형제 선택자 : 첫번째 요소를 뒤따르면서 같은 부모를 공유하는 두번째 요소
- 인접 형제 선택자 : 첫번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두번째 요소
(4) 링크 선택자 / 동적 선택자
- :link : 방문한 적 없는 링크
- :visited : 방문한 적이 있는 링크
- :hover : 마우스가 오버된 상태
- :active : 마우스가 클릭된 상태
- :focus : 초점이 맞춰진 상태
(5) ui 요소 상태 선택자
- :checked : 체크된 상태의 input요소
- :enabled : 사용 가능한 상태일때 선택
- :disabled : 사용 불가능한 상태일때 선택
(6) 구조 가상 클래스 선택자
- :first-child : 모든 자식 요소 중에서 첫번째에 위치하는 자식 요소
- :last-child : 모든 자식 요소 중에서 마지막에 위치하는 자식 요소
- :nth-child : 모든 자식 요소 중에서 앞에서부터 n번째에 위치하는 자식 요소
- :nth-last-child : 모든 자식 요소 중에서 뒤에서부터 n번째에 위치하는 자식 요소
- :first-of-type : 모든 자식 요소 중에서 첫번째로 등장하는 특정 요소
- :last-of-type : 모든 자식 요소 중에서 마지막으로 등장하는 특정 요소
- :nth-of-type : 모든 자식 요소 중에서 n번째로 등장하는 특정 요소
- :nth-last-of-type : 모든 자식 요소 중에서 뒤에서부터 n번째로 등장하는 특정 요소
(7) 부정 선택자
- :not() : 특정 선택자를 제외한 나머지 요소 선택
(8) 정합성 확인 선택자
- :valid() : 정합성 검증이 성공한 input 요소 또는 form 요소
- :invalid() : 정합성 검증이 실패한 input요소 또는 form 요소
(9) 가상 요소 선택자
- ::first-letter : 콘텐츠의 첫글자 선택
- ::first-line : 콘텐츠의 첫줄 선택. 블록 요소에만 적용 가능
- ::after : 콘텐츠의 뒤에 위치하는 공간 선택
- ::before : 콘텐츠의 앞에 위치하는 공간 선택
- ::selection : 드래그한 콘텐츠를 선택
************
CSS 개요 및 사용되는 단위와 박스 모델, 선택자에 대해 공부했다~!~!~!~!
vw와 vh는 직접 사용하긴 했지만 헷갈릴때가 있었는데 좀 더 정확히 알게된 것 같아서 좋다. css 선택자들도 알고 있던 것도 있고 모르고 있던 것도 있어서 이번 기회로 한번 쭉 정리해 볼 수 있었다. 나는 사용하던것만 사용하는 편이어서 아는것만 열심히 쓰고있었는데 이제는 새로 알게 된것들도 적용해 봐야겠다. 선택자의 양이 많아서 그런지 눈앞이 빙빙 도는것같다...ㅎ 실무에서 전부 다 활용하기는 무리일지도 모르지만 알아둬서 나쁠건 없는것같다! 오늘 공부한 내용도 블로깅 끝~!~!~!!
'study > TIL' 카테고리의 다른 글
| 22.12.26 - 계산기 목업, flex (0) | 2022.12.26 |
|---|---|
| 22.12.23 - 레이아웃, display: flex (0) | 2022.12.23 |
| 22.12.21 - HTML 개요, 시맨틱 태그, 구조 잡기, id와 class (1) | 2022.12.21 |
| 22.12.20 - 소수 판별, .slice(), 크기 판별 (0) | 2022.12.20 |
| 22.12.19 - 조건문 / 반복문 / 함수 (0) | 2022.12.19 |
