본문 바로가기

D.evelop111

[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.
[Git]깃 설치 오류 homebrew-core is a shallow clone 왜 맨날 나만 오류나...?🤯 1. Homebrew 설치 https://brew.sh/ Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 이 코드를 복사해서 설치하는데 뭔가 신통치 않았다. any key어쩌고 하는 글이 나오면 enter키를 눌러야함. 2. error만남 homebrew-core is a shallow clone 이런 코드를 시작으로 메시지가 왕창 뜬다. 여기서 엄청난 방황을 시작함. shallow clone : git 리파지토리의 전체 이력 중 일부만 받아오는 행위(실제 객체를 복사하지 않고 레퍼런스만 복사) 잘 살펴보면 first run : 어쩌고라는 경로를 알려준다. 그 경로를 그대로 복사, 붙혀넣기 해서 ente.. 2021. 9. 9.
[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.
[Chrome 개발자 도구] 콘솔 패널 DevTools - console panel 구글 크롬 개발자도구 Chrome DevTools console panel ::개발자 도구 보는 법 1. 마우스오른쪽 클릭 > 메뉴 > '검사'선택 2. 단축키 Mac : [Cmd + Opt + i] Window : [Cmd + Opt + i] 또는 [F12] :: Console 패널 보는 법 :: Console 패널의 기능 현재 페이지에서 실행중인 javascript의 console을 확인, 테스트 할 수 있다. console 패널에 코드를 입력하면 입력하면 브라우저에서 바로확인 가능하게 해준다. :: 화면을 새로고침 해도 console 내용이 지워지지 않고 남게 하는 방법은? 크롬의 개발자 도구에서는 console 옆 설정에서 "Preserve log"를 눌러주면 된다. ❗️기록이 남아있다고 해서 데.. 2021. 9. 5.
[WEB]시멘틱 웹/요소 (Semantic Web/element) Semantic web / Semantic element ✅ 시멘틱 웹(Semantic web)이란? 시멘틱 요소를 사용해 '의미'와 '관련성'을 고려해 구성된 웹 이런 웹을 만드는 작업을 '시멘틱 마크업(semantic markup)'이라고 한다. 아무리 유익한 콘텐츠라도 접근하기 어렵고, 찾기 어려우면 시간과 비용이 낭비된다. 공유 되지 않고, 남들이 찾지 못한 나만의 멋진 정보를 찾아내는 재미가 있을 수있지만, 알 수 없는 서버에서 발견되지 못한 지식이 우주폐기물처럼 떠다니고 있을 수도. ✅ 시멘틱 요소(Semantic element)란? 의미론적인 요소. 사람이 작성한 문서를 의미있는 태그로 사용함으로서 컴퓨터가 해석하기 쉽게 해준다. 자료 : w3schoool - HTML Semantic Ele.. 2021. 9. 1.
[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.

티스토리툴바