개발누나

grid-column: 1/13; -> 라인 1에서 13까지 12 조각으로 나뉘는게 첫 시작이 1이라, 끝 번호는 13호가 됨 -> 그래서 grid-column 1/12; 로 하면 맨 끝 칸이 비게 된다. grid-column: 1/ span 12; -> 1에서부터 12칸 가기 ex) grid-column: 1/ span 2;는 -> 라인이 더해진다고 생각 (1+2) (그래서 3번째줄까지) grid-column: 1/13과 같다. 이하는 어떤 오류에서인지 (원인은 아직 찾지 못했다) 13칸까지 안나오고 14칸이 나온다.

수업 일지/HTML, CSS, Flex, Grid 2021. 3. 22. 19:00

autofill 보다는 auotofit을 더 많이 쓴다? 마지막에 img 크기를 주지 않으면, 이렇게 맨 아래 사진만 살고 다 형들을 겹쳐서 위로 올라감 -> img 크기 설정 그리고 margin, padding들 안주면 -> 띄어져서 그림이 있음 -> 반응형처럼 이 동그라미들을 빈 공간에 크게 해줄거다~~ // 이건 grid가 아니라 고정 크기를 사용한 것 그리드 만드는 법 1) 개수 고정 auto-fit ?? 2) 크기를 고정 auto-fill grid 쓸거니까 안녕 ~ *차이 알기* (column 기준으로 함) reapeat (10, 1fr) 여백을 다 쓰는 근데 flex-grow와의 차이점은 너비가 같다는거 repeat (10, 100px) repeat (auto-fill, 100px) -> 오른..

수업 일지/HTML, CSS, Flex, Grid 2021. 3. 16. 14:31

빨리 사이트 만들어보고 싶다고 간질간질해야합니다~ 엉망이 돼어도 얼른 만들어보고 싶다는 마음 :) Grid Layout flex에서 2번에서, '4'가 여백을 채워주게 할 수 있지~ 예전 flex 전에는 안됐는데~ 비슷한 놈이 나온 것. grid라고 :) *grid의 필요성* > 먼저 '반응형'을 이해해야 한다. pc first - pc가 기본인데 > 모바일로도 잘 보게끔 줄이는 mobile first - 모바일을 기본으로 > pc에서 부족한 부분 채우는 (이게 유형) (선생님은 너무 그리드에 맞춰서 만드는 것도 별로라고 하심) px이 아니라 column의 개수로 맞춰주게 된 것. 사람들은 grid가 아니라 px로 막 주면서, grid처럼 보이게끔 '막' 사용하는 사람이 정말 많다. -> 원하는 결과가 ..

수업 일지/HTML, CSS, Flex, Grid 2021. 3. 15. 14:30

flex 개념이 딱! 박혀있는 상태에서 grid(격자형)를 배워야 한다. -> 써보고 익숙해지기 static > relative > absolute (많이 쓰이는 순서) flex grid multicolumn 총 6가지 지금까지는 테이블을 가지고 놀았는데, grid는 박스로 -> 편한데 복잡하다. (grid는 4개를 가지고 논다) // flex를 먼저 익숙해지자. [static] 블록 position: static; 블록일 경우 -> 밑으로 (형 다음이 아우), 형이 커지면 아래로 더 밀려나고 인라인일 경우 -> 옆으로 (형 옆이 아우) -> relative, absolute로 바꿀 수 있다. [absoulte] - 형과는 상관없이 절대 위치 뭘 기준으로 300 300일까? -> 문서 끝에서의 기준 (문..

수업 일지/HTML, CSS, Flex, Grid 2021. 3. 12. 14:30

Q. 초록색 내용이 많아도 footer가 밑에 있기를 바람 (내용이 있든 없든 저 파란색이 아래로 오게끔 하고 싶음) - 밑에 하얀 공백이 있으니, 파란색은 저 부분 높이 그대로 맨 아래로 + 나머지 초록색 채우기 - 초록색에 flex-grow : 1 html 가장 바깥쪽인 body에 display : flex; -> 근데 이러면 박스가 나 오른쪽으로 누워버림 -> 그래서 flex-flow: column nowrap; 초록에 - flex-grow: 1; 근데 초록이 늘어날 줄 알았는데 안 늘어남 이유는) 아래 하얀색이 여백이 아니기에 - 여백은 body가 저 아래 하얀색까지면 여백인데, 파란색까지라면 여백이 없는 것 -> 그러니 초록이가 안늘어나는거 그래서 body에서 여백 만들어줘야함 - body에 h..

수업 일지/HTML, CSS, Flex, Grid 2021. 3. 11. 14:29

flex - basis flex - grow flex shirink 들을 잘 이해하는게 중요하다~ 여유공간 줄일 때의 옵션이 shrink 1 shrink 2는 여유공간이 2배로 작아짐 // 컨텐츠 적힌 부분은 좁혀지지 않고 (이거 실습해보기) flex-grow 1은 여백 나눠가지겠다는거 -> 2명이 나눠가질 때는 비례적으로 1:1 (똑같이) 1:2 (3분할 해서 나눠갖는거) shorthand for - 순서 중요! (grow가 먼저~!) - 만약에 flex-basis만 설정하고 싶을 때는 -> ex) flex : ? 2 100px; ? 자리에 뭐가 들어가야할까. -> 0이 맞는 듯 *방향과 관련해서 쓸 수 있는 녀석들 wrap은 여러 층을 쓸 수 있다. 굳이 오른쪽에 쓰는 이유 : 슬라이드에서 왔다갔다 ..

수업 일지/HTML, CSS, Flex, Grid 2021. 3. 10. 14:30

*복습 큰 방 - height, 수치 - background-color - min-height 두번째 방 - margin-left : auto 세번째 방 - width - display : flex -> 같은 줄에 나오게 됨 * diplay 크게 2개 - block 이냐 inline 이냐 - block 같은 라인에 x 무조건 수직!으로 방을 만듦 - block에다가 스타일을 좀 준 애들이 list-item - table은 약간 가변 크기를 갖는 층들이 같은 column?을 갖도록 하는거 (table-cell) - 너비너 높이를 줄 수 있는게 inline-block 주로 단일 태그들이 이렇다. ex) img, input 등 누구 감싸고 있는 애들이 아니라 자체 태그인 것들이 주로 이 형태. 단일태그는? h..

수업 일지/HTML, CSS, Flex, Grid 2021. 3. 9. 14:33

* 복습 - height, width -> em, rem, ex, px, cm, mm.... - min-height, max-height * 두 번째 방 설정 - 큰 방 안에서 컨텐츠를 나눠야 header 안에서 울타리가 있는지 봐보자. -> h1, section까지 같이 묶어야 하니 div로 묶기 - 부모가 가지고 있는 것의 100%를 의미. (부모의 높이 똑같이 가지고 가는 것) ex) 50%면 부모의 반 - 만약 부모가 10%라면? 10%의 50% header의 부모는? -> 빨간색만 뜸 - inherit은 px은 둘 다 같은데 %는 영향이 다르게 미침 사진 두번째 방 (보라색)이 왼쪽으로 치우쳐짐 ㅠ 왼쪽으로 쏠리게 하고 싶지 않음 (가운데 정렬하고 싶을 때) 위에 형 자리를 줄이면 아래것들이 올..

수업 일지/HTML, CSS, Flex, Grid 2021. 3. 8. 14:31