커리까지

wrap 컨테이너보다 아이템이 크다면 다음줄로 넘어간다. stretch 아이켐이 컨테이너 높이만해진다. flex-end, start 아이템 본인만의 크기가 된다. justify-content 정렬하기 align-content 같은 행에 있는 것들을 한 그룹으로 본다. order 순서를 바꿀 수 있다.

생활코딩 html css javascript 생활코딩은 일반인을 위한 코딩 수업입니다. AD 홈페이지 flex를 줘서 가운데 내용만 화면이 커질때 커지고 작아지는 속성을 부여한다. nav와 광고부분은 크기를 그대로 유지한다.

1 2 3 4 5 2번째 자식의 flex 기본크기를 지정해준다. flex의 방향에 따라 지정된다. 컬럼이면 컬럼크기, 로우면 로우크기 .item{ background-color: tomato; color: white; border: 1px solid white; } flex-grow의 값이 기본이 0이다. 그래서 밑에 여백이 남는다. .item{ background-color: tomato; color: white; border: 1px solid white; flex-grow:1; } flex-grow의 값을 1로 주면 채워진다. 여백을 공평하게 나눠갖는다. .item:nth-child(2){ flex-grow: 2; /* flex-basis: 200px;*/ } 2번째 자식만 더 많이 나눠가지고 싶다..

1 2 3 4 5 부모에게 display: flex; 을 주는게 시작이다. flex 적용 후 달라졌다. flex는 태그들을 정렬하는 방법 flex-direction: row 가 기본값 flex-direction: row-reverse; 하면 뒤바뀐다. flex-direction: column 컬럼으로 정렬 flex-direction: column-reverse; height: 300px; 를 부여하면 flex를 한 것과 안 한것의 차이가 드러난다. .container{ background-color: powderblue; height: 300px; display: flex; flex-direction: column-reverse; } 원래 밑에쪽에 공간이 있었는데 reverse를 통해 바꾸니 순서가 바뀌..

주로 레이아웃 잡을 때 사용한다. 테이블 구조화된 정보를 의미 테이블로 레이아웃을 짜는게 문제점이 많았다. 플럭스가 드디어 등장함. 플럭스를 사용하기 위해서 부모와 자식이 있어야 한다. 서로 부여해야 할 속성이 다르다.

other parent me large 부모 값중 위치가 정해지지 않은 것들중에 absolute가 적용된다. 스크롤을 내려도 me는 고정되어있다. 특정한 요소를 고정시키고 싶으면 fixed를 사용한다. #me{ background-color:blakk; color:white; position: fixed; left:0px; bottom:0px; width:100%; text-align:center; } me가 맽밑에 고정된다. fixed도 absolute랑 비슷하다. 부모 크기도 자식과 연결이 끊겼기 때문에 자식의 크기를 포함하지 않는다. 자식은 부모와 연결이 끊겨서 본인 크기만 가져간다.

other parent me #me{ background-color:blakk; color:white; position: relative; left:0px; top:0px; } relateive를 하면 부모를 기준으로 만들어지고 absolute를 하면 부모 기준 상관없이 html 기준으로 시작된다. #me{ background-color:blakk; color:white; position: absolute; } 포지션 값이 없으면 부모를 기준으로 시작한다. 기본값은 원래 있어야 할 곳에 있는 곳이 기본값이다. 크기를 키우고 싶으면 width:200px;를 추가한다. other parent me ststic가 아닌 부모가 나타날때까지 지나가다가 static가 아닌게 나오면 거기서부터 시작한다. 부무와의 관..

포지션은 각각의 위치를 정해준다. other parent me left가 우선, top이 우선. 포지션 이 값의 기본은 static다. 원래 위치해야하는곳에 정적으로 위치힌다. 바꾸고 싶으면 상대적으로 바꾼다. 이 때 오프셋을 사용할 수 있다.

normal 두개의 마진이 겹쳤다. 시각적인 요소가 없으면 마진이 없어진다. 시각적인 요소가 없다면 위,아래 중에 큰 값이 그것의 마진값이 된다. 시각적인 요소가 들어가면 위,아래 마진이 모두 들어간다.

부모와 자식 모두에 마진이 있을경우 Hello world 부모 태그의 border를 주석처리한 경우 child의 마진값이 부모의 마진 보다 넘어가면 내려간다. parent는 child의 마진까지 작아지면 움직이지 않는다. 부모가 투명한 경우 -> 부모와 자식과 비교했을 때 더 큰값이 사용된다.