📌 오늘의 생각
오늘 학습한 내용중 가장 기억에 남는 거것은 flex이다. flex를 활용하게 되면 레이아웃을 구성할 때, 효과적으로 요소들을 움직이고 조절할 수 있지만, 처음 개념을 접했을 때는 가장 이해가 안되는 개념이었다. 브라우저를 활용하여 개념을 하나씩 적용해보고 이해가 안되는 부분을 확인하면서 학습을 진행하였다.
📒 목차
- CSS란?
- 선택자
- font 기본 속성
- 박스모델 및 box-sizing
- inline / block
- CSS 레이아웃의 흐름
- 정렬 (flex, position)
CSS
1️⃣ CSS란?
- 단순한 문서 형태인 HTML을 예쁘게 꾸며주고 구조를 잡아주는 역할을 한다
✅ CSS 기본 용법
선택자 (Selector)
- 어떤 HTML 요소를 선택하여 스타일을 적용할 것인가
선언 (Declaration)
- 구체적으로 어떠한 스타일을 적용할 것인가
속성 (Property)
- 스타일의 종류
속성 값 (Property value)
- 어떠한 값으로 지정
✅ CSS 적용 방법
inline style
- 태그에 직접 style 속성을 주어 css 작성하는 것
- 간편하지만 적용하는 스타일이 많이지면 가독성이 떨어지고 유지보수가 어렵다
<style>태그 사용
- html 파일의 head 부분에 style 태그 적용하기
- 적용되는 스타일이 많아지면 유지보수 어렵다
CSS 파일 분리하기
<link>태그는 head태그 안에 있어야 한다- 실무에서 가장 많이 사용하는 방식
- 유지보수 및 소스코드 관리 용이
href: 참조할 css 파일 경로
rel: 해당 파일과의 관계 (stylesheet)
<link href="파일명.css" rel="stylesheet" />
2️⃣ 선택자
✅ 태그, id, class 선택자
태그 선택자
- 다른 조건 없이 태그명만 적으면 된다
/* 태그 선택자 사용방법 */ 태그 { property : property value; } /* 사용 예시 */ div { background-color : red; }
id 선택자
- '#' + 'id명'
/* id 선택자 사용방법 */ #id { property : property value; } /* 사용 예시 */ #title { font-size : 24px; }
class 선택자
- "." + "class명"
/* class 선택자 사용방법 */ .class { property : property value; } /* 사용 예시 */ .box { border : 2px solid red; }
✅ 부모 자식 선택자
- 기본 선택자 여러 개 연결해서 사용
- 선택자 사이의 공백 유무에 따라 나뉘어진다 (부모자식 ↔ 다중)
- 여러 선택자들 사이에 공백을 넣어 연결하면 부모자식 선택자가 된다
- 특정 부모 안에 있는 자식 요소 선택 가능
- 공백을 넣어야 한다!!
/* 자손 선택자 사용방법 - 선택자1 안에 있는 선택자 2를 선택한다. */ 선택자1 선택자2 { 속성 : 속성값 } /* 자손 선택자 사용방법 - 선택자1 안에 있는 선택자 2를 선택한다. */ 선택자1 선택자2 { 속성 : 속성값 }
✅ 다중 선택자
- 기본 선택자 여러 개 연결해서 사용하기
- 선택자 사이의 공백 유무에 따라 나뉘어진다 (부모자식 ↔ 다중)
- 여러 선택자들 사이에 공백 없이 연결하면 다중 선택자가 된다
- 중첩된 선택자들을 모두 만족하는 요소 선택
- 공백을 넣으면 안된다
/* 다중 선택자 사용방법 */ 선택자1선택자2 { 속성 : 속성값 } /* 자손 선택자 사용예시 - .box 이면서 동시에 #title인 요소를 선택한다. */ .box#title { color : red }
✅ 전체 선택자
- HTML의 모든 요소를 선택한다
*{ property : property value } * { box-sizing: border-box }
✅ 그룹 선택자
- 여러 선택자를 그룹으로 묶는 기능
- 코드의 길이를 줄여주는 효과가 있다
/* 동일한 속성을 반복적으로 사용 */ h2 { color : blue; } p { color : blue; } div { color : blue; } //------------------------- /* 그룹 선택자를 이용해서 한번에 처리 */ h2, p, div { color : blue }
✅ 가상 클래스 선택자
- 특정 이벤트마다 적용 할 스타일 선택할 수 있다
- 선택자: 가상클래스{ 속성 : 속성값 }
:first-child
- 첫번째 자식 선택
.container-boxs:first-child{ margin-left: 0; }
:last-child
- 마지막 자식 선택
.container-boxs:last-child{ margin-right: 0; }
:nth-child(n)
- n번째 자식 선택
- ( )안에 연산식 넣을 수 있다
.contentsBox:nth-child(n){ color: red; }
:hover
- 마우스를 요소에 올렸을 때 동작
.some-box:hover{ background-color: red; }
3️⃣ font 기본 속성
font-size
- 글자 사이즈
font-weight
- 글자 두께
font-style
- 글자 기울임
text-decoration
- 글자 꾸밈 (밑줄, 취소선…)
color
- 글자 색
4️⃣ 박스모델 및 box-sizing
✅ 박스모델 (box-model)
- 모든 HTML 요소는 박스모양으로 구성되어 있다
margin
- 테두리와 이웃하는 요소 사이의 간격 / 외부여백
border
- 내용과 패딩을 감싸는 테두리
padding
- 내용과 테두리 사이의 간격 / 내부 여백
content
- 실제 내용이 차지하는 영역
✅ box-sizing 속성
content-box
- content 영역을 기준으로 크기 적용
border-box
- border 영역을 기준으로 크기 적용
5️⃣ inline / block
✅ inline / block 변경하기
display: block /* inline -> block */ display: inline /* block -> inline */
✅ inline 요소 vs block 요소
block 요소
- 블록 요소를 여러개 연속해서 쌓을 경우 자동으로 다음 줄로 넘어간다.
- 좌우 양 쪽으로 늘어나 부모 요소의 너비를 가득 채운다.
inline 요소
- 여러개의 요소를 연속해서 입력해도 자동으로 다음 줄로 넘어가지 않는다.
- 태그에 할당된 공간 만큼의 너비만 차지한다.
✅ inline / block 태그들
6️⃣ CSS 레이아웃의 흐름
- 과거 : float
- 이후 : flex
- 최신 : grid
- 현대 웹에서는 flex와 grid를 혼용하여 사용하고 있다
- float가 쓰이지 않는 이유
- 반응형 웹에 적합하지 않기 때문
-❗ 반응형 웹 : 모바일, 태블릿, PC 등의 기기에 너비에 맞추어 레이아웃이 변하는 웹
-
✅ float 레이아웃
7️⃣ 정렬 (flex, position)
- 어떤 요소를 원하는 곳에 위치시켜 사용자가 접근하기 편하게 하는 것
flex
- 여러 태그를 하나로 묶어 정렬
- 정렬시 기준을 부모박스로 둔다
- flex에서 부모 자식간 크기 관계
- flex 묶었을 때, 부모영역에 width or height 주게 되면, 자식의 크기에 따라 자동으로 부모 영역이 전환되지 않는다. 즉, 부모 크기가 고정된다
/* 부모박스 */ display: flex; /* 행기준: row, 열기준: column */ flex-direction: row; flex-direction: column; /* flex-direction 기준 수평 방향으로 자식박스 정렬 */ justify-content: center; /* flex-direction 기준 수직 방향으로 자식박스 정렬 */ align-items: center;
✅ position
- flex에 종속되지 않고, 박스를 개별적으로 위치시키는 것
absolute
/* 박스의 절대 위치 */ div { position: absolute; top: 0px; left: 0px; }
relative
/* 부모 박스 기준으로 상대위치 */ div { position: relative; top: 0px; left: 0px; }
fixed
/* 화면을 기준으로한 절대 위치 */ div { position: fixed; bottom: 0px; }
