[02] 2022.07.19

Rio·2022년 7월 19일
0

React

목록 보기
3/8
post-thumbnail

☝🏻 CSS란?

Casacading Style Sheet의 줄임말로 Html이 페이지의 구조를 설계했다면 페이지의 스타일 담당하는 부분이다.

  • 담당하는 내용
    font / background-color / width,height ...etc

Html에 style을 적용하는 방법은 다양하다.

  1. 인라인 스타일: Html파일 안에서, 태그에 style속성을 직접 추가하기
  2. 스타일 태그: Html파일 안에서, style 태그를 분리해서 적용
  3. 문서 간의 연결 CSS 파일을 별도로 만들어, 필요한 Html 파일에 연결

처음에는 1,2번 방법으로 했다가 Html 파일이 너무 길어지고, 코드의 재사용과 유지보수가 어려웠다.
CSS의 속성들도 제대로 이해할 겸 복습을 해보자.


😆 선택자

- 기본 선택자

1. 전체 선택자

모든 요소들을 선택 적용

* { color : red; }

2. 태그 선택자

특정 tag에만 선택 적용

p { color : red; }

3. 클래스 선택자

특정 class에만 선택 적용

.text { color : red; }

4. 아이디 선택자

특정 id에만 선택 적용

#text { color : red; }

id는 고유한 식별자 기능으로 중복 사용이 불가능하다!!

- 그룹 선택자

다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용한다.
쉼표(,)를 이용해 선택자를 그룹화한다.

h1, p, div { color : red; }

선택자가 겹치는 경우

  • 선택자가 겹치는 경우: 기본적으로는 나중에 작성된 스타일이 적용이된다.
p { color : red; } //정의했는데 
p { color : black; } //밑에서 또 정의한 경우 뒤에 것을 적용
  • 선택자가 다르지만 요소가 겹치는 경우: 선택자 우선순위에 의해 적용될 스타일이 결정된다.
p { color : red; }
#board { color : black; } //우선 순위에 따라 id 선택자에서 정의한 속성이 적용
  • 선택자 우선순위
    id 선택자 > class 선택자 > tag 선택자

🕹 text 속성

  • font-family : 글꼴
  • font-size : 글자 크기
  • text-align : 글자 정렬 방식
  • color : 글자 색상
* { 
	font-family : Times, monospace, serif; //여러개 지정시 우선순위 적용 가능!
    font-size : 16px;// px,rem,em 단위가 있다.
    text-aling : left; // left,right: 좌우정렬 center : 가운데 justify : 양끝 정렬
    color : red; 
    
}

💣 Block레벨 요소 / inline 요소

블록 레벨 요소

자기가 속한 영역의 너비를 모두 차지하여 블록을 형성

div, p, h1

인라인 요소

자기에게 필요한 만큼의 공간만 차지

span, a

display 속성

해당 부분을 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의해 속성을 변경할 수 있다.

//블록 레벨 요소인 div 요소를 인라인으로 만들기
div { display: inline; }
//인라인 요소인 a 요소를 블록 레벨로 만들기
a { display: block; }

이외에 inline-block, none 등 다양한 요소들이 있다.

inline의 경우, content의 내용에 따라 자동으로 너비와 높이가 결정되므로 수정이 불가능하다. 이런 경우 inline-block으로 display속성을 변경해주면 설정이 가능하다

🍉 박스 모델

브라우저가 요소를 Rendering할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다.
이 영역을 'Box'라고 표현하며, CSS는 박스의 크기, 위치, 속성을 결정하게 된다.

박스의 4개 영역

  • 콘텐츠 영역 (Content)
  • 안쪽 여백 (Padding)
  • 경계선(테두리) (Border)
  • 바깥쪽 여백 (Margin)
  • 박스 모델 이미지

box-sizing

해당 속성은 요소의 너비와 높이를 계산하는 방법을 지정한다.

  • content-box : default. 너비와 높이가 콘텐츠 영역만 포함
  • border-box : 너비와 높이가 padding과 border영역까지 포함

너비와 높이가 같더라도, box-sizing 속성값에 따라 크기가 달라질 수 있다!


🍅 Background

콘텐츠의 배경을 정의

속성

  • background-color : 배경색
  • background-image : 배경이미지
  • background-position : 배경 이미지 초기 위치
  • background-size : 배경 이미지 크기
  • background-repeat : 배경 이미지 반복 방법

배경 속성 더보기


🍻 Float과 Clear

Float

요소가 문서의 일반적인 흐름에서 제외되어, 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른족에 배치되게 한다.

속성값

  • none : 기본값
  • left : 자신이 속한 박스의 왼편에 떠 있기
  • right : 자신이 속한 박스의 오른쪽에 떠 있기

문서의 흐름에서는 제외되지만, 필요한 만큼의 공간을 차지!

Clear

float 요소 이후에 표시되는 요소가 float을 해제하여 float 요소의 아래로 내려가게 할 수 있다.

속성

  • none : 기본값
  • left : float이 left인 요소의 아래로 내려간다.
  • right : float이 right인 요소 아래로 내려간다.
  • both : float이 left와 right인 요소의 아래로 내려가겠다.

Position

요소를 어떻게 배치할지 정의

속성

  • static : 기본값
  • relative : 문서 흐름에 따라 적용하되, 상하좌우 위치 값에 따라 offset을 적용
  • absolute : 일반적인 문서 흐름에서 제거, 가장 가까운 position 지정 요소에 대해 상대적 offset을 적용
  • fixed : 일반적인 문서 흐름에서 제거, 지정한 위치에 고정
  • sticky : 일반적인 문서 흐름에서 제거, 스크롤 동작이 존재하는 가장 가까운 요소에 대해 offset적용
profile
우당탕탕 개발 기록지

0개의 댓글