04.28.2022 CSS TIL

😸 CSS TIL

 

😽 Done it

😼 Float

: 뜨다라는 의미이며 웹 page에서 어떻게 띄어서 텍스트와 함께 배치할 것 인가에 대한 속성(대부분 block요소로 변경(flex, grid 제외))

=> 각 item에 float속성을 넣은 후 마지막 item의 형제에서 float요소를 해제 해줘야지 container가 item을 제어 할 수 있다.

float control

1. 마지막 item을 만들어 float이 없는 곳에다가 clear를 주어 float 요소 제거
2. .container에 overflow:hidden을 준다. (근본 없음)
3. ::after로 가상으로 item을 만들어서 clear:both(flaot의 left, right 속성 제거)를 부여

• .container 부분에 추가
• flaot요소가 해제 전까지 .container 내부에는 float요소만 있어야 정렬이 됩니다. => float요소가 아닌 다른 형제 요소가 있으면 정렬 X

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

 

😼 Position

: 요소 위치 특성 정의

=> 현재 요소에 position이 있으면 조상 요소 중 position: (relative, absolute, fixed, stickey)을 기준으로 top, bottom, right, left를 설정하는 것

• fixed: viewport를 기준으로 지정(조상 요소에 transform, perspective, filter가 있으면 기준 변경)
• relative 제외 absolute, fixed는 자동으로 block요소로 바뀐다.

요소 쌓기

transform < opacity로 쌓기도 하지만 주로 z-index를 이용해서 쌓는다.

z-index: static을 제외한 relative, absolute, fixed, sticky + flex, grid의 item(자식)에서만 사용 가능 :)

😼 Flex container

: 1차원 layout 에서 사용

.container(부모요소)에 display:flex, inline-flex를 넣고 사용합니다.

align-itmes: 교차축 1줄 제어
align-content: 교차축 2줄 이상 제어
flex-wrap: nowrap: 기본값
align-content: stretch: 기본값
gap: 0px: items 사이 사이에 간격을 준다.

😼 Flex items

맨 처음 있는 것은 기본값입니다.

flex-grow: 0: 증가 너비 비율
flex-shrink: 1: 감소 너비 비율
flex-basis: auto: 요소의 기본 너비로 해당 요소의 width를 무시한다.
align-self: auto: align을 개별적으로 설정(auto인 경우 container의 align-itmes을 상속받아 사용한다.

😼 Vue 스터디

Computed 속성

과도한 html속 속성 사용을 막기 위한 것

캐싱

() 미사용
geonwooage 부분이 병경된다면 실행

<p>{{ hello }}</p>

methods: {
  hello() {
    return this.geonwooage > 27 ? '늙음' : '젊음'
  }
}

메서드

() 사용
렌더링 될 때마다 항상 함수 실행

<p>{{ hello() }}</p>

methods: {
  hello() {
    return this.geonwooage > 27 ? '늙음' : '젊음'
  }
}

 

😺 Feeling

금일 Css 부분과 Vue스터디를 진행하였는데 우선 Css부분을 이야기해보면 한번에 완벽히 이해하는 것을 버려서 많이 많이 봐야 겠습니다. 그리고 이 방법이 저한테 잘 맞는 것 같아서 좋습니다. :0
그리고 Vue 스터디를 하는데 규범님이 주도하에 진행였는데 프로그래머스에서 규범님을 잡아야 할 것 같습니다. 그리고 이런 일기 같은 것을 컴퓨터 타이핑 말고 손으로 쓰고 싶다.... ㅜㅜ 

 

📖 REF

https://ofcourse.kr/css-course/float-%EC%86%8D%EC%84%B1
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
https://developer.mozilla.org/en-US/docs/Web/CSS/grid
https://v3.ko.vuejs.org/guide/introduction.html