[1213 테킷]

아침

자바스크립트:

// 싱글라인 ignored

/* */ 다중라인 ignored

 

본 수업

블로그 리뷰

cascading 한 요소에 중복된 스타일을 주게 되었을때, 순차적으로 이해하는 것.

 

reset.css에 있었던 img {vertical-align:top;}

top을 기준으로 정렬되는 것이 스타일을 잡기 훨씬 수월하다.

 

 

시각적 보정의 예

원이 살짝 더 앞으로 빠져있다 -> 시각적 보정을 위해 해 놓은 것.

 

 

2. flex-basis | flex-grow | flex-shrink

flex-item에 사용하는 프로퍼티

 

flex-basis는 아이템의 기본 크기를 설정한다. 

flex-grow

가용범위는 그냥 숫자만 쓴다.

Verticle-align

인라인과 인라인 요소 사이의 세로 정렬

사실,flex box는 이해되는데 충분한 시간이 필요하다. 마라톤이다.

 

 

<>

<img class="img"> -> 똑같은 걸 클래스의 이름으로 짓는 것은 비추이다.

img {

vertical-align: top;

}

img 초기화 할 때 이렇게 하기도 한다.

 

display: block

inline block 개념을 MDN보고 구체적으로 정리하기

 

background-size: contain

 

작업순서 체화 시키기.

- Img에도 쉐도우 넣어주면서 진행하기 파악을 위해

개발에 있어서 사용하기 편리하게 하는 것은 굉장히 중요한 이슈이다.

display: block으로 바꾸어주면 마우스를 대기만 해도 전체가 잡히기 때문에 용이하고, 키보드의 tab으로도 탐색이 가능하다. 

 

hover에서 덜컹거리는 걸 없애는 방법

근데 사실 border-left 컬러를 바꿀 수도 있다. 

 

h1과 p도 담백하게 reset상태로 만들어주는 것이 좋다. 

 

폰트의 줄간격을 조절하는 line-height는 고정값을 주는 px보다 상대값인 em을 사용하는 것이 좋다. 폰트사이즈에 비례해서 line-height가 결정되기 때문이다. (line-hight는 결국 맥락에 따라 다르게 설정하는 것이 좋다.)

 

현실적으로 1px까지 맞추는 것은 웹상에서 한계가 있다. 

 

background-position: right bottom;

background-origin: content-box;

 

<nav class="actions">

<a class="btn view"></a>

<a class="btn like"></a>

<a class="btn share"></a>

</nav>

 

이름을 지어줄 때 actions 괜찮음!

코드를 짤 땐 재사용성을 고려해서 짜는 것이 중요하다. 

 

image sprite 

목적은 성능의 최적화

 

자식의 크기가 커졌을 때, 부모가 같이 커질 수 있다. 

flex-items는 내부 콘텐츠보다 더 작아질 수 없게 구성되어 있다.

flex-item는 min-width가 자신의 콘텐츠  보다 작아질 수 없다.

min-width :미니멈 위스, 최소한으로 보장되는 width

flexitems가 내부의 컨텐츠 크기보다 작아질수 없는데 그게 min-width 값이 auto로 설정되어 있기 때문이고 이 값이 0이되면 컨텐츠의 크기보다 작아질수 있다 가 되는거군요

 

프로덕트 완성도에 관심이 많은 사람.

flex-grow: basis값에 + 알파되는 값

Flex-box 개념 다시 시작

flex-basis와 min-width는 모두 요소의 너비를 제어하는 CSS 속성입니다. 하지만, 두 속성의 역할과 동작 방식은 다릅니다.

flex-basis는 flexbox 모델에서 사용되는 속성으로, flex 요소의 기본 너비를 설정합니다. flex-basis 값은 flex 요소의 flex-grow, flex-shrink 값에 따라 유동적으로 변경될 수 있습니다.

min-width는 모든 요소에서 사용 가능한 속성으로, 요소의 최소 너비를 설정합니다. min-width 값은 flex 요소의 flex-basis 값보다 작을 수 없습니다.

따라서, flexbox 모델을 사용하는 경우 flex-basis와 min-width 속성을 함께 사용하면, 다음과 같은 효과를 얻을 수 있습니다.

• flex 요소의 너비는 flex-grow, flex-shrink 값에 따라 유동적으로 변경되되, min-width 값보다 작아지지 않습니다.
• flex 요소의 너비는 min-width 값 이상으로 설정할 수 있습니다.

flex-item의 width값은 flex-basis+min-width로 받아들여도 된다.

flex-wrap

justify-content: flex-end;

justify: 행의 끝을 나란히 맞추다 (가로축이 기준)

align: 일직선으로 하다. (세로축이 기준)

 

Main axis

Corss axis

align-items

flex로 정중앙 만들기 

 

/* 직계 부모에게 flex 처리 해주면 자식의 세상이 바뀜 */

/* auto이면 안에 있는 크기 만큼 정해진다. */

/* flex grow: 내가 살아가고 있는 방 사이즈, grow값은 flex-basis 값을 기준으로 나오는 것이고 grow는 비율로서 분배한다. */

}