바닥까지 쭉 늘어난다.
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 !