HTML & CSS22 flex item 속성 flex-basis flex-item 의 기본 크기를 설정한다. (부모의 flex-direction이 row일 때는 너비, column일 때는 높이) 메인 축 기준★ default 는 auto 이다 -->기존 자기 자신의 width or height 를 base로 가질래 !! 하는 것이 => auto width: 200px 일 경우 default : auto 라면 base 는 200px. 그렇다면 flex-basis : 0 일경우? 자기 자신의 content 크기 만큼 가진다. flex-direction이 row 라고 가정해보자. 각 flex items 들에게 flex-basis width 값을 주었을 경우 (좀 더 유연하다) flex-basis : 100px; (아이템이 점유하는 크기) 아이템 원래 요.. 2021. 6. 26. 부트스트랩 부트스트랩 클래스의 스타일은 절대로 건들지 말라 ( margin ,padding : top, botton 은 ㄱㅊ) landing 도 flex 이런거 주지말자 container row col - 순서를 지키고 부트스트랩의 스타일을 건드리지 말자!@ (디자인시안) 아! col 10칸을 사용하는구나! 를 캐치하면 된다. 하지만 실제 pc 에서 그리드 사용은 아래 사진 처럼 될 것이다. 현재 10칸을 먹고있으니까 2칸이 남아있는 상태 그렇다면 중앙으로 보내주기 위해서 어떻게 해야할까? justifiy-content-center 사용하자 2021. 4. 15. visibility: hidden,opacity: 0 ,display: none 무슨 차이 일까 참고 stackoverflow.com/questions/14731049/visibilityhidden-vs-displaynone-vs-opacity0 visibility:hidden vs display:none vs opacity:0 I'm currently starting on an animation project. In the project I'll have more than 40000 divs and animate them iteratively. If any of divs are in passive state (i.e. it's not animating at least for 2 stackoverflow.com 2021. 4. 14. box-shadow blur :흐린정도 spread : 그림자 사이즈 2021. 4. 13. Background why use Background ? 1. 호스트들이 어떤 이미지를 올 릴지 모르는 경우. ex) facebook instargram. -> (어떤 이미지가 업로드가 될 지 모르니까 이미지의 비율은 제 각각 다르니까 , 우린 어떤 사진을 받게 될 지 예측불가.) 어떤 사람은 가로 가 긴 이미지를 업로드 할 수 있고, 또 다른 사람은 세로가 긴 이미지를 업로드 할 수 있기 때문. width 300 height 200 이렇게 규격이 있으면 항상 이 규격안에 업로드를 시켜줘야 하는 것 이기 때문. 즉, 정해지지 않은 이미지라 생각이 들 경우 background 를 사용한다. img 같은 경우 부모의 width 사이즈가 얼마던 간에 width를 무시를한다. (자기 본디 사이즈를 찾아가는 성격) 그래서 width.. 2021. 4. 12. Typography 브라우저는 기본적으로 html 적용 된 font-size 는 16px 이다. * em : 실제로 적용된 font-size 기준으로 1 em 이라고 본다. ex) font-size: 24px == 1em. width : 20em; 20em 은 얼마인가 ? -> 20*24 => width: 480; *rem : root root: html 자체 (뿌리) * line height (줄 높이) 즉, 줄 간격 line height 줄 경우 em 을 많이 사용. font-size에 비례해서 값을 줄 경우 em 을 생략한다 ★ 관례 ★ line-height : 24px; *letter spacing 글자 간격 마찬가지로 em 자주 사용 em 생략 하면 안 된다. 글자 = 100 글자에 비례해서 1% 줄이고 싶다면 ?.. 2021. 4. 11. 반응형 반응형을 위해서는 반드시 이러한 코드가 있어야 한다. " width 를 잡을 경우 사용자의 크기에 맞춰서 width를 맞춰 줘 " 반응형을 제작 시 항상 모바일을 먼저하는 걸 추천한다. iPhone 5핸드폰을 기준으로 잡고 하면 어지간해서는 깨지지 않는다. 2021. 4. 9. 이전 1 2 3 4 다음
