TIL 20일차

float

수평정렬 역할

• 현재는 1차원 레이아웃을 Flex가 담당
• float를 사용하는 요소의 형제들을 float를 전부 사용하게 처리해야한다.
• flex와 grid를 제외하곤 display가 block 형태로 자동으로 바뀐다.
  => inline때와 다르게 가로 / 세로 넓이를 가질 수 있게 된다.
  =>( 개인적으로는 수평으로 가로 / 세로가 가능하니 inline-block 형태이지 않을까 싶다 )

float 문제 해제하기

1) overflow:hidden ( 실질적 해결 방법 X )

2) 가상요소 선택자

::after를 추가하여 대상의 내부의 가장 뒤쪽에 가상의 요소를 만든다.

사용예시

.container::after{
  content:"";			//content는 필수
  display:block;
  clear:both;
}

float 오른쪽 정렬 사용방법

기존의 오른쪽 정렬은 먼저 정렬된 것이 오른쪽에 가 있는다.
이를 해결하기 위해서 전체적으로 float:right를 하고 해당 내용안에서 각각의 태그들을 float:left로 처리하여 정렬을 시긴다.

border : 4px solid

색깔을 따로 지정하지 않을 경우 글자색으로 같이 처리된다.

BEM (block, Element, Modifier)

CSS 제작 방법론으로, 일종의 네이밍 컨벤션 (CSS 개발 방법론)

• 각각 __와 --로 구분한다

Position

• absolute와 fixed는 자동으로 display : block의 역할을 수행한다.

absolute

absolute를 기준으로 부모중 기준으로 삼을 위치를 정해야한다.
정하는 방법은 부모에 relative / absolute / fixed / sticky 중 하나가 있어야한다. (transform도 적용되는 것 같다)
없을 경우 화면의 viewPort를 기준으로 배치한다.

fixed

기본적으로 ViewPort를 기준으로 처리하나 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 해당 태그를 가진 곳을 기준으로 fixed한다.

<div class="parent">
  <div class="child"></div>
</div>
<style>
.parent {
  width:300px;
  height:200px;
  background-color:skyblue;
  transform : scale(1);
}

.child{
  width:200px;
  height:100px;
  background-color:purple;
  position:fixed;
  bottom:0px;
  right:0px;
}
</style>

쌓임맥락 (stacking context)

가상의 Z축을 사용한 HTML 요소의 3차원 개념화

• z-index가 아니어도 transform이나 opacity를 이용해 z-index와 같은 형태를 표현할 수 있다.

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<style>
.item{
  width:200px;
  height:200px;
  font-size:40px;
}

.item:nth-child(1){
  background-color:skyblue;
}
.item:nth-child(2){
  background-color:orange;
  opacity : 0.5;
  position : relative;
  z-index : 1;
}
.item:nth-child(3){
  background-color:tomato;
  transform : scale(1.5);
}
</style>

2번은 3번보다 아래에 있어야하나
position:relative에 z-index에 의해 맨위에 있다.

Flex / Grid

1차원레이아웃 / 2차원레이아웃

코드스피츠 css rendering 6회차

Flex-box 총정리

inline의 특징

인라인 요소는 글씨처럼 취급되어 사용되므로 서로간의 공백이 존재한다.

• 공백 존재

<span>a</span>
<span>b</span>

• 공백 존재 X

<span>a</span><span>b</span>

배포

1. EC2
2. AWS S3(File만 제공) + cloudfront
3. github pages(정적사이트)
4. Firebase
5. netlify
6. vercel : 팀으로 만들경우 돈 나간다.

SPA 배포 문제 해결

• netlify : _redirects 파일에 /* /index.html 200의 내용 추가
• vercel : 별도의 설정파일인 json파일을 추가한다.