본문 바로가기

D.evelop/CSS4

[CSS]권장 작성법 Refactoring 세션에 배운 것 CSS part. css 유지보수가 javascript유지보수보다 힘듦 권장 속성순서 레이아웃에 영향을 많이 주는 순서 >>>> 적게 주는 순서 인접 속성끼리 묶어서 1. Layout Properties (position, float, clear, display) 2. Box Model Properties (width, height, margin, padding) 3. Visual Properties (color, background, border, box-shadow) 4. Typography Properties (font-size, font-family, text-align, text-transform) 5. Misc Properties (cursor, overf.. 2021. 9. 12.
[Flex]기존 css를 Flex속성으로 수정하기 html, css학습과제 중 주어진 화면을 똑같이 구성해 보는 문제 2개가 있었다. 하나는 absolute, 하나는 flex를 사용해서 작업했다. 그러다 도현 멘토님 시범을 보고 '나는 flex 사용이 더디니까 flex로 더 연습해 보는게 좋겠다'는 생각이 들어 기존 absolute작업물을 바꿔보기로 했다. CSS플렉스박스 flexbox 고유의 유연성이란 서로 다른 공간에서도 똑같은 콘텐츠를 감당한다는 의미이기 때문이다 - ⌜inclusive design patterns⌟ Hedydon Pickering 기존 작업물 - absolute 사용 See the Pen by KANG DAN (@kangdanne) on CodePen. [새로 배운 점] body에 widht, height값 100%을 준 뒤 .c.. 2021. 9. 6.
[CSS]영역과 위치 잡기 - position편 [오늘 또 뿌셔볼 CSS 속성] position - 부제 : 여기 가져다 달라니까, 왜 저기로 가져가?😡 ◼︎ position 속성 - 정의 (w3school) [ position 속성을 사용할 때 받은 느낌 ] static 편안함. absolute 하나의 자유로운 자아. 원하는 위치 아무대나 이동 가능. 자유분방함. !주의 : 집밖으로 나갈 수 도 있음. relative absolute가 방황하지 않게 보호자가 되어줌. 이 보호자만 있으면 absolute 어디로 튀든 보호자를 기준으로 이동하게 됨. fixed 묵묵히 자기자리에서 자기가 맡은 일을 하는 이...소나무 같은 친구🌳. sticky 잘 안써서 안친함. sticky는 주로 js로 만들었음. ✅ position:absolute;와 position.. 2021. 9. 1.
[CSS]영역과 위치 잡기 - display편 :: 내 기록용 블로그라고 하지만 속성 정의를 일일이 나열 해둔건 다시 안볼 것 같음😎 :: w3schools같은 많은 문서와 강의에서 CSS를 아주 잘 정의 해두었고, 직접 속성을 수정해보면서 실행 시켜볼 수 있는 기능까지 있음. :: 아마 난 여기 적어둬도 헷갈릴 때 "공신력있는 사이트"에서 검색하고 있을 게 분.명.함🤓 [▼▼여기부터 찾는 습관 들이기▼] w3schools-css MDN - css tcpschool - css "youtube"에 "css"설명해 주는 영상들 완.전.유.용. 그래서 여러 예제를 시도해 "왜 그 속성을 사용했는지" 거슬러 올라가는 과정을 기록해두는게 더 유용할 것 같다고 판단했다. css를 갖 배우는 과정 중 ✅ display 속성 - inline, inline-bloc.. 2021. 8. 31.

티스토리툴바