[TIL] 22.10.12

nana·2022년 10월 12일
CSS
0

TIL

목록 보기
6/50
post-thumbnail

오늘 배운 것 - CSS

1. CSS 정의와 작성법

2. CSS 적용 방식

3. 선택자

  • 태그 선택자
  • id 선택자
  • class 선택자
  • 자손 선택자
  • 다중 선택자
  • 전체 선택자
  • 그룹 선택자
  • 가상 클래스 선택자

4. font 기본 속성

5. 박스 모델

6. Inline 요소와 Block 요소

7. CSS 레이아웃 흐름과 float, flex, grid

8. float

9. flex

  • flex-direction
  • justify-content
  • align-items

1. CSS란?

Cascading Style Sheet의 약자
웹페이지의 스타일과 레이아웃을 담당하는 문서로, 웹페이지 기본 문서구조를 보기 좋고 예쁘게 꾸며 배치하는 것이 css의 역할이다.


2. CSS 작성법

div(선택자) {
	background(속성): red(속성값);
}
=> 선언

3. CSS 적용 방식

1) 인라인 방식

속성을 적용할 html태그에 직접 css를 입력해주는 방식이다.
css가 길어질수록 가독성이 떨어지고, 유지보수가 힘들다는 단점이 있어 실무에서 거의 사용되지 않는다.

2) 스타일 태그 이용

html head태그 내에 입력한다.
css양이 많아지면 이 방법 역시 비효율적이다.

3) 분리된 css 파일 연결

link태그를 이용해 html파일과 css파일을 연결시켜 준다.
유지보수가 편리하고 소스코드를 관리하기 좋으므로 실무에서 가장 많이 활용하는 방식이다.

<link href="파일경로/파일명.css" "rel="stylesheet">

4. CSS 선택자

1) 태그선택자

tag {
	property: value
}

2) id선택자

id는 고유한 이름으로, 특정한 하나를 선택할 수 있도록 태그에 이름표를 붙여준다.

#id {
	property: value
}

3) class 선택자

id와 다르게 여러개의 요소에 중복 적용이 가능하다.

.class {
	property: value
}

4) 자손 선택자

부모-자식 태그의 경우 부모-자식의 태그 중 자식태그를 선택할 수 있다. 

.parent .child {
	property: value
}

5) 다중 선택자

두 선택자를 공백없이 붙여서 선택하면 두 조건을 모두 만족하는 태그만 선택한다.
class, id 혼용해서 사용이 가능하다.

.class#id {
	property: value
}

5. font 기본속성

  • font-size: 글자 사이즈 지정. 보통 웹 사이트의 폰트 사이즈는 16~18px 정도 이다.
  • font-weight : 글자 두께 지정
  • font-style : 글자 기울임
  • tesxt-decoration : 글자 꾸밈 (밑줄, 취소선)
  • color : 글자 색 지정

6. 박스 모델

박스모델이란?
웹 브라우저에 html element를 구성할 때 각각의 요소가 차지하는 박스 공간을 정의한 모델이다.
모든 HTML 요소는 박스 형태로 되어있다.

content - padding - border - margin

padding과 margin의 차이점

  • padding : content 안에 적용되어 content 크기나 색이 변하면 같이 적용된다.
  • margin : content에 밖에 적용되에 content 크기나 색이 변해도 같이 적용되지 않는다.

box-sizing 속성

  • content-box : content 영역을 기준으로 box의 사이즈를 적용한다. (기본값)
  • border-box : border영역을 기준으로 box의 사이즈를 적용한다. 컨텐츠와 패딩을 포함한 요소가 box 사이즈가 된다.

📌 레이아웃이 복잡해지고, 수정하기 어려워지기 때문에 전체 선택자(*)로 모든 요소에
box-sizing: border-box를 적용시켜 주는것이 좋다.


7. Inline 요소 vs Block 요소

1) Block

블록 요소를 여러개 연속해서 쌓을 경우, 자동으로 다음 줄로 넘어간다.
좌/우 양쪽으로 늘어나 부모 요소의 width를 가득 채운다.
div, p, ul, h1, h2, h3 태그 등


2) Inline

여러개의 요소를 연속해서 입력해도 자동으로 다음 줄로 넘어가지 않는다.
태그에 할당된 공간 만큼의 width값만 차지한다.
width, height 속성 적용이 안된다. (display 속성을 이용해 인라인 요소를 블록으로 바꿀 수 있다.)
span, a, img, input, button, select, strong 태그 등


8. 선택자 (Selector)

1) 전체 선택자

* {
	property: value
}

2) 그룹 선택자

원하는 선택자 여러가지를 , 를 이용해 선택할 수 있다.

.class1, .class2 {
	property: value
}

3) 가상 클래스 선택자

실제로 html 요소를 수정하지 않고, css만으로 가상 요소를 추가해 선택할 수 있다.

선택자:가상클래스 {
	property: value;
}
  • first-child : 부모박스안에 있는 요소들 중 첫번째 요소를 선택한다.
.class:first-child {
	property: value;
}
  • last-child : 부모박스안에 있는 요소들 중 가장 마지막 요소를 선택한다.
.class:last-child {
	property: value;
}
  • nth-child(n) : 몇번째 요소를 선택할 지 정할 수 있다.
.class:nth-child(2) {
	property: value;
}
.class:first-child(2n) {   // 2n : 짝수번째만 선택 가능. 2n-1 홀수번째만 선택
	property: value;
}
  • hover : 요소 위에 마우스를 올렸을때 전환 효과, 이벤트 효과 등을 줄 수 있다.
.class:hover {
	property: value;
}

9. CSS 레이아웃

css 레이아웃이란, css를 이용해서 단순 문서 형태인 html을 보기 좋기 배치하고 효과적으로 재배열 하는 것이다. 관련 기능, 완성된 배열 등을 포괄적으로 지칭한다.

CSS 레이아웃의 흐름

Float -> Flex -> Grid

1) Float

모바일 개념이 생기기 전, 전통적으로 사용해 왔던 레이아웃 방식이다.
현대 웹에서 거의 사용되지 않는다. (반응형 웹에 적합하지 않기 때문)

📌 반응형 웹이란?
모바일, 태블릭, pc 등 접속하는 기기의 너비에 맞추어 레이아웃이 변하는 웹 페이지이다.

float는 잘 사용되지 않는데 왜 배워야 할까?
오래된 웹 페이지의 경우 float를 사용했기 때문에 코드를 읽을 수 있어야 한다.
또한, 레이아웃이 어떻게 변해왔는지 알면 flex를 더 효과적으로 사용할 수 있기 때문이다.

2) Flex

flex 속성을 이용해 레이아웃을 잡아준다.
레이아웃 구현 목적을 위해 개발된 속성으로, float에 비해 편리하다.

3) Grid

grid 역시 레이아웃 구현을 위해 개발된 속성이다.

📌 flex와 grid는 레이아웃을 위해 개발된 속성이라는 공통점이 있지만, 차이점도 있기 때문에 상황에 따라 혼용하여 사용된다.


10. Float

float는 div와 같은 block 요소가 normal flow로 부터 벗어나서 컨테이너의 좌측 혹은 우측으로 감싸는 형태로 강제로 배치할 수 있게 도와주는 속성이다. 마치 뉴스 기사처럼 배치할 수 있다.

float: none (기본값)
float: left
float: right

clear: none (기본값)

float 영향을 받고있는 요소들에 추가로 줄 수 있는 속성이다.
float 때문에 억지로 상단으로 끌어올려진 다음 요소들의 영역을 다시 아래로 끌어내려준다.

clear: both

clear: left와 clear: right의 모든 요소의 영향력을 해제할 수 있다.
float한 태그들 마지막에 작성해준다.


11. Flex

css 레이아웃 배치에 중점을 두고 고안되었기 때문에, 기존의 float방식보다 훨씬 수월하고 간단하게 레이아웃을 잡을 수 있다. 다양한 레이아웃 커스텀을 훨씬 더 쉬운 방식으로 가능하다.

부모박스 요소의 속성을 flex로 변경해준다.
block, inline이 아닌 flexable-box라는 독자적인 속성을 가진 요소로 구분된다.

display: flex;

📌 flex를 적용하면 자식박스들의 width와 height는 본인 컨텐츠 크기만큼 설정된다.

1) flex-direction

정렬의 기준을 설정한다.
row(중심축 가로)
column(중심축 세로)

display: flex;
flex-direction: row(기본값)/ column;

2) justify-content

중심축 방향을 정렬한다.

  • flex-start (기본값) : 컨테이너 시작점을 기준으로 정렬
  • flex-end : 컨테이너 끝부분을 기준으로 정렬
  • center : 컨테이너 가운데를 기준으로 정렬
  • space-between : 컨테이너 안의 요소들이 균일한 여백을 두고 배치된다. 양 끝의 아이템에는 여백이 존재하지 않는다.
  • space-around : 컨테이너 안의 아이템들 사이 여백을 주면서 균일한 간격을 가지고 배치된다. 양 끝의 아이템에도 여백이 존재하기 때문에 양 끝의 여백과 사이에 있는 여백이 균일하지 않다.
  • space-evenly : 모든 여백의 크기가 균일하다. 
display: flex;
flex-direction: row(기본값)/ column;
justify-content: flex-start(기본값);

3) align-items

중심축 반대 방향을 정렬한다.
세로 방향의 정렬을 어떻게 할 것인지 결정한다.

  • stretch (기본값) : 컨테이너 영역을 세로로 가득 채운다.
  • flex-start : 컨테이너의 시작점을 기준으로 정렬한다.
  • flex-end : 컨테이너의 끝점을 기준으로 정렬한다.
  • center : 중앙을 기준으로 정렬한다.

📌 align-items 는 flex-item이 한 줄일 때만 우선 적용된다.
두 줄 이상일 때에는 align-content 라는 속성을 사용해야 한다.

📌 flex-direction이 바뀌면 중심축의 방향이 바뀐다.
justify-content와 align-item의 정렬 방향도 함께 바뀌기 때문에 주의해야 한다.


오늘의 회고

기초 강의가 끝나고 css강의를 들은 첫 날이다. css에 대해 더 자세한 내용을 알 수 있어서 좋았다.
특히, float를 사용하지 않고 flex를 사용한 정렬이 너무 간편하고 수정도 쉬운것 같다.

아 그리고 vscode에서 너무 편리한 기능을 알게되었다. div를 입력하고 tab키를 누르면 태그가 자동으로 작성되고, div.class로 작성하면 class까지 작성된다. 기초 수업에서는 왜 안알려 주셨나요..?

profile
nana
프론트엔드 개발자 도전기
이전 포스트

[TIL] 22.10.11

다음 포스트

[TIL] 22.10.13

0개의 댓글