본문 바로가기

CSS7

[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.
[clone project]Danstagram - html, css 첫 클론 프로젝트 Danstagram★ 먼저 clone을 하기에 앞서 내가 이 프로젝트에서 무엇을 얻어갈 것인가에 대한 리스트 업을 했다. ✅ 우선 순위 html - 시멘틱 구성 : 왜? 그 위치, 그 태그를 사용했는지 고민하며 작성하기 css - flex속성 능숙하게 사용하기 css- float:left에 대한 의존도 줄이기 ☓☓ 우선 순위 아닌 것 (= 시선 뺐기지 말 것 제발..) 반응형 욕구 "똑.같.이"의 구현의 집착 (픽셀 크기 , 폰트 스타일 등) common - css @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); *{ box-sizing:border-box; margin:0; padding:0; .. 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.
#TIL #210830-0905 08월 30일 (월) 오늘 공부 한 것 wecode 25기 시작 html, css 학습 0에서 시작한다는 마음으로 아는 것도 다시보고 또 보기 08월 31일 (화) 오늘 공부 한 것 html, css 과제 flex속성 실습 재밌었던 Flexbox Froggy css - display 기능 정리 [CSS]영역과 위치 잡기 - display편 단 할 줄 안다는 것과 '효율적'으로 할 줄 하는 것의 차이를 체감 중이다. 그리고 그것을 잘 설명하려면 더 많은 정리를 해야한 다는 것도. 09월 01일 (수) 오늘 공부 한 것 css - position속성 정리 [CSS]영역과 위치 잡기 - position편 web - 시멘틱 웹에 큰 개념 정리 [WEB]시멘틱 웹/요소 (Semantic Web/element) j.. 2021. 9. 5.
[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.
유튜브 영상 팝업 작업 - 자동 재생, 자동 정지 ◆ 유튜브 영상을 팝업으로 보여줄 때 1. 팝업이 열릴 때 자동 재생 2. 팝업이 닫힐 때 자동 정지 html PLAY CLOSE css .gray_mask{ display:none; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); } #popup{ display:none; position:absolute; } jQuery $(function(){ var embed = $('.youtube'); $('.video').empty(); /* click 'PLAY' button */ $('.pop_open').click( function() { // show popup background $('.gray.. 2020. 7. 14.

티스토리툴바