7일차(flex , grid)

초록귤·2021년 11월 8일
0

멋사1기

목록 보기
5/19

align-items:stretch;

바닥까지 쭉 늘어난다.

align-items:center; => cross axis중간방향(세로축의 중간)
align-items:flex-start : 처음 0점
align-items:flex-end (세로축 끝값)

스크린리더가 br태그 만나면 끊어진다. (br로 잘 안옮긴다)

align-content:center; 내용물 모여서 가운데 위치
align-content:flex-end (세로축 끝에)

justify-content: flex-end;
align-items: center;

flex-basis :
axis방향에 따라 커지는 방향이 달라진다. 내부 컨텐츠에 따라 유연한 크기를 가진다.

flex-grow: 1;
flex-basis:말고 width값 변경가능하게 바꿔준다. ( flex-basis 값에서더 늘어나도 되는지 지정하는 값으로, 할당된 값에 따라 자신을 감싸는 컨테이너의 공간을 할당)

flex-grow:2; 특정한 하나의 자식에게만 줄 경우 다른 자식 요소보다 두배의 공간을 할당받음.
만약 자식요소들의 콘 텐츠 크기가 존재한다면 그 컨텐츠의 넓이에 따라 할당되는 값이 달라진다.

basis :0이면 완전히 무시가 된다. width .

aligh-items: container에 적용하는 값
align-self : 부모의 align-items속성을 덮어 flex-item에게 개별적인 align-items속성을 부여한다. 기본값은 align-items와 마찬가지로 stretch이다.

order값이 그 위치를 나타내지 않는다.

우선순위를 말한다. 값이 크면 클수록, 배치되는 ordering상황에서.
order없으면 그냥 그 위치 지킴. 있는애들은 오른쪽으로가서 다른 오더링될 애들 기다림
order는 우선순위다.
음수 주기 가능

랜더링되는 위치상의 변화다.

justify-content:space-around;

레이아웃 연습사이트

grid > container영역 꽉 채우려고 한다.
grid row/ colum

container{
display:grid;
height:100vh;
grid-template-columns
1fr 1fr 1fr; 열이 세개있는데 각각은 동일하다

with hight처럼 딱 자르지 않고, 늘어나는 성질이 있다.

각 셀의 영역 지정
1)grid-column-start:
2)grid-coloumn-end:

.item{/ grid-column-start: 1;
grid-column-end: 3;
/}==grid-column : 1 / span 2

grid-row-end:3; 행방향 차지 == grid-row : 1/3
span이 붙으면 몇칸 차지한다.
숫자가 붙으면 그 라인까지
1/4(그리드라인 4)= 1 / span 3(그리드의 한칸)

< 상표권 , 디자인권 등록 > 중요
상표권 먼저 등록한 사람이 우선권을 가짐. 어떤 것 제작했을 때 중요하다.
등록하기 **

public한 source에 경우, static files 의 경우에는 background-image사용
단순 아이콘은 background-img로 사용

이미지 잘라서 사용 -
로고 선택

과제
탭누르면 영화보기 뜨고, 키보드 탭클릭 밑으로 내려가기.

코드리뷰
이걸 왜 header로 했는지, section으로 했는지 물어봄
코드를 좀 수정해서 주시는건 어떨까요.?(마음에 드는데 코드 잘못쓴 경우)
마지막까지 포기하지말아라...

alt> 앵커태그 어디로 이동하는지 써주는게 좋다.

footer 한 페이지에 한 구역 바닥에 들어갈 수 있음.

Copyright © 2021 la All rights reserved
저작권은 스몰표시. !

질문>

왜 나는 애니메이션 효과가 안보이지?? ㅜㅜ 뭘 눌러야 하는지.

ul> animation> function에서 선택하는거였다!

과 #none의 차이는?
홈페이지 리플레시 #으로 보통 사용하신다고 함.

.css파일 >> 이런 색은 이런 변수로 쓰겠다! 식으로 사용 .
세팅이 보통은 위에 있음.

@charset "utf-8";

/ setting /

/ animaion /
/ reset /
/ utility /
/ util /
.sr-only{
position: absolute;
left : -9999px;
top: auto;
width:1px;
height:1px;
overflow:hidden;
}
/ 말줄임 코드 - 길면 ...으로 표시 /
single line(한줄 말줄임.? )

.sl-ellipsis{
display :block;
white-space:nowrap;
https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
/ layout /
/ design /
/ media query /


/* 네 면 모두 적용 /
padding: 1em;

/ 세로방향 | 가로방향 /
padding: 5% 10%;

/ 위 | 가로방향 | 아래 /
padding: 1em 2em 2em;

/ 위 | 오른쪽 | 아래 | 왼쪽 /
padding: 5px 1em 0 2em;

/ 전역 값 */
padding: inherit;
padding: initial;
padding: unset;


여러 줄에서, 부모 자식명시해야 관리 쉽기 때문에 !
dl안에 유일하게 자식으로 가질 수 있는 건 div !

profile
초록색 귤이 노랑색으로 익어가듯, 실력이 익어가기 위해 노력하는 개발자 lahee입니다. 프론트엔드 개발자를 목표로 성장하고 있습니다.

0개의 댓글