📝 [Section1_Unit3] CSS 기초
📌 CSS (Cascading Style Sheets)
- 웹 페이지의 스타일 및 레이아웃을 정의하는 스타일시트 언어.
- html로 구조를 세웠다면, css로 UX/UI와 레이아웃을 구성해준다.
✔️ 사용자 인터페이스 (UI; User Interface)
UI란 사용자가 사용하는 서비스나 제품의 화면 안에 모든 디자인과 레이아웃을 의미하며 사용자와 서비스 혹은 제품간의 의사소통과 상호작용을 원활하게 해주는 중요한 부분이다.
✔️ 사용자 경험 (UX; User Experience)
UX란 사용자가 서비스나 제품을 사용하면서 느끼는 모든 경험을 의미한다. 사용자가 서비스 혹은 제품을 사용하며 느낄만한 불편사항이나 요구사항 등 많은 것을 생각하며 UI를 디자인해야 좋은 품질의 UX가 적용 되었다고 볼 수 있다.
✔️ CSS의 기본 틀
설정을 원하는 태그 이름을 쓰고 중괄호로 묶어준다. 괄호 안의 코드는 세미콜론(;)으로 구분한다.
body {
color: pink;
}📌 HTML에 CSS를 적용하는 세가지 방법
1. 인라인 스타일
<div style="background: #000; color: pink">...</div>2. 내부 스타일시트
보통 <head> 태그 안에 넣는다. 내부 스타일시트는 다른 html 파일에 적용시킬 수 없다.
<style>
h1 {
color: pink;
}
</style>3. 외부 스타일시트
기본 css 틀과 똑같이 작성해주면 된다. html파일과 별도로 css파일을 작성해주고(파일명은 ~.css) html과 연결해준다.
< 연결 방법 >
html의 <head> 태그 안에 아래의 코드를 입력해준다. 해당 코드를 반복작성하여 여러 css파일을 연결해줄 수도 있다.
<link rel="stylesheet" href="style.css" />📌 셀렉터 (selector)
html에서는 여러 태그가 반복 사용되곤 한다. 때문에 CSS에서 태그들를 구분할 때 사용되는 것이 셀렉터이다.
✔️ 태그 셀렉터
태그 이름으로 스타일을 정의할 수 있다. 가령 h1 을 지정한다면 html문서에 있는 모든 h1 들이 전부 선택된다.
h1 {
color: pink;
}✔️ id
id는 html에서 한 요소에 고유한 이름을 붙일 때 사용된다. id는 하나의 문서에서 한 요소에만 사용해야 한다.
id 이름 앞에 # 을 붙이면 id 셀렉터를 사용할 수 있다.
<h1 id="head1">Hello world!</h1>#head1 {
color: pink;
}✔️ class
html에서 원하는 요소들을 class로 묶어주면 CSS에서 한번에 지정할 수 있다. 한 요소에 여러 class를 주는 것이 가능하다.
class 이름 앞에 . 을 붙이면 class 셀렉터를 사용할 수 있다.
<ul>
<li class="fruit">apple</li>
<li class="fruit">orange</li>
<li class="fruit">banana</li>
<li class="fruit">peach</li>
</ul>.fruit {
color: green;
}📎 class 여러개 정의하기
<li class="fruit selected">Home</li>요소를 여러개 쓸 때에는 띄어쓰기로 구분한다.
.selected {
font-weight: italic;
color: #red;
}✔️ 전체 셀렉터
id 이름 앞에 * 을 붙여 스타일을 정의할 수 있다.
* {
background-color : black;
}✔️ 자식 / 후손 / 형제 셀렉터
- 자식 셀렉터 : 자식이란, 선택된 요소의 바로 아래 위치한 요소만를 의미한다.
body > div { }<body>
<div> <!-- 선택 -->
<p>
<div></div>
</p>
<span></span>
</div>
<div></div> <!-- 선택 -->
</body>- 후손 셀렉터 : 후손은 자식의 자식 요소들까지 모두 포함한다.
body div { }<body>
<div> <!-- 선택 -->
<p>
<div></div> <!-- 선택 -->
</p>
<span></span>
</div>
<div></div> <!-- 선택 -->
</body>- 형제 셀렉터 : 같은 부모를 가진 요소들 중에 첫번째 요소 뒤에 오는 두 번째 요소를 모두 선택한다.
div ~ p { }<header>
<div></div>
<p></p> <!-- 선택 -->
<p></p> <!-- 선택 -->
<span></span>
</header>- 인접 형제 셀렉터 : 같은 부모를 가진 요소들 중에 첫번째 요소 뒤에 오는 두 번째 요소를 하나만 선택한다.
div + p { }<header>
<div></div>
<p></p> <!-- 선택 -->
<p></p>
<span></span>
</header>그 외에도 많은 셀렉터가 있지만 생략.
📌 텍스트를 꾸미는 여러가지 속성
✔️ 색상
color: 글자의 색상을 변경background-color: 박스의 배경 색상을 변경border-color: 박스의 테두리 색상을 변경
✔️글꼴
font-family: 글꼴의 종류를 설정font-size: 글꼴의 크기를 설정font-weight: 글꼴의 두께를 설정
* {
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: 200;
}✔️ 정렬
text-align: 일반적으로 가로로 쓰여진 텍스트를 정렬할 때 사용. 속성값으로는left,right,center,justify(양쪽 정렬)가 있다.
📌 절대 단위와 상대 단위
글꼴의 크기나 화면의 크기를 설정할 때 쓰이는 크기 단위의 종류는 절대 단위와 상대 단위가 있다.
- 절대 단위 :
px,pt, ... - 상대 단위 :
%,em,rem,ch,vw,vh, ...
📌 박스 모델
박스의 종류는 줄 바꿈이 되는 박스(block)와 줄 바꿈이 되지않고 크기 지정을 할 수 없는 박스(inline), 그리고 줄 바꿈이 일어나지 않지만 block 박스의 특징을 가지는 박스(inline-block)가 있다.
- block :
<div>,<p>, ... - inline :
<span>, ...
| block | inline | inline-block | |
|---|---|---|---|
| 줄바꿈 | O | X | X |
| 기본 넓이 | 100% | 텍스트만큼 | 텍스트만큼 |
| width,height | 가능 | 가능 | 불가능 |
✔️ margin / border / padding
margin: 제일 바깥쪽. 박스 바깥쪽 여백을 의미.border: 박스의 테두리.padding: 테두리와 content 사이 안쪽 여백을 의미.
✔️ content-box VS border-box
content-box: 말 그대로 content가 차지하는 부분만 width로 측정함.border-box: padding과 border까지의 부분을 모두 합쳐 width로 측정함. 일반적으로 레이아웃 디자인을 할 때는 border-box를 사용한다.
📎 border-box 설정법
* {
box-sizing: border-box;
}점점 내용이 많아져간다... 화이팅🥲
