커리까지

생활코딩 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 left가 우선, top이 우선. 포지션 이 값의 기본은 static다. 원래 위치해야하는곳에 정적으로 위치힌다. 바꾸고 싶으면 상대적으로 바꾼다. 이 때 오프셋을 사용할 수 있다.

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

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

마진이 사라지는 경우가 있음. hello world hello world 마진이 겹쳤다. 마진값중에 더 큰 값이 두 개 사이의 마진값이 된다. 만약에 양쪽다 마진이 있다면 2배가 되어버린다.

Cascading style sheet의 약자가 css 웹브라우저 1900년대 초반에는 기본적인 디자인이 있었음 사용자도 본이이 사용하는 웹페이지의 권한이 있었야 한다는 의견이 나오기 시작 웹 페이지를 만드는 사람도 어떤 모습으로 보여지는기 결정권이 있어야한다는 의견도 나옴 이러한 조화를 위해서 css가 대두되었는데 조건이 필요함. 우선순위 웹브라우저 < 사용자 < 저자