🌱 → 🌳

HTML/CSS를 이용한 YouTube를 클론해 보았다(UI만!) 토이프로젝트를 가장한 사심채우기,, 김성철 당신 덕분에 행복하게 코딩했어.. 아직 모바일 버전밖에 안만들었는데 반응형으로 얼른 고치고, 비디오도 넣어야지 ~ 결과물: https://idyllic-haupia-64c4a9.netlify.app/ YouTube [SUB] Ep.02 한예종 10학번 특집🌟 이상이 & 김성철, 수다가 끝나질 않아!! | 좋아하면 퍼주는 Quiz Alarmㅣ넷플릭스 Netflix Korea 넷플릭스 코리아 조회수 1,23만회 idyllic-haupia-64c4a9.netlify.app 코드 확인: https://github.com/thals0/YouTube-Clone GitHub - thals0/YouTube-Cl..

HTML/CSS, JavaScript를 사용하여 TodoList 만들어보았다. 디자인은 평소에 자주 사용하는 todomate를 참고했다. list가 입력도 해보길 바란다 ! 나중에 벡엔드도 배워서 나만의 todolist app을 완성해봐야지 결과물: https://lambent-beignet-d6fa26.netlify.app Todolist lambent-beignet-d6fa26.netlify.app 코드 확인: https://github.com/thals0/TodoList-netlify GitHub - thals0/TodoList-netlify Contribute to thals0/TodoList-netlify development by creating an account on GitHub. gith..

HTML/CSS 만을 이용하여 starbucks korea 홈페이지를 clone해 보았다 dropdown부분이나 애니메이션 부분은 JavaScript로 구현하면 훨씬 쉬워지겠지만 지금은 CSS에 익숙해지기 위해서 CSS만으로 도전해 보았다 결과물 : https://adorable-basbousa-872b94.netlify.app/ Starbucks Coffee Korea 스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다. adorable-basbousa-872b94.netlify.app 코드 확인 : https://github.com/thals0/StarBucks-Clone GitHub - thals0/StarBucks-Clone Contrib..

https://gregarious-scone-7e095a.netlify.app/ Starbucks Korea 나이트로 콜드 브루 나이트로 커피 정통의 물결치듯 흘러내리는 캐스케이딩과 부드러운 크림을 경험하세요. gregarious-scone-7e095a.netlify.app 아직 header까지 밖에 구현하지 못했지만 조만간 홈 페이지 전체를 clone할 예정이다

앞으로 배울 CSS 속성 박스 모델 글꼴, 문자 배경 배치 플렉스(정렬) 전환 변환 띄움 애니메이션 그리드 다단 필터 📌 박스 모델 글자와 상자 : 요소가 화면에 출력되는 특성, 크게 2가지로 구분 인라인(inline) 요소: 글자를 만들기 위한 요소들 블록(block) 요소: 상자(레이아웃)를 만들기 위한 요소들 ✅ Inline 요소 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도 span tag: 글자를 쓰기 위한 가로 공간 확보 해주는 빈 tag에 가까움 요소가 수평으로 쌓임 ✅ Block 요소 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 요소 ✅ Inline-Block block 요소가 수직으로만 쌓이는 문제점을 해결하고자 나온 개념 디자인이 중요시 되면서 가로로 블..

📌 CSS SELECTOR ✅ 기본 선택자 전체 선택자 (*) 태그 선택자 (tag) class 선택자 (.) id 선택자 (#) ✅ 복합 선택자 일치 선택자 ABCXZY 선택자 ABC와 XYZ를 동시에 만족하는 요소 자식 선택자 ABC>XYZ 선택자 ABC의 자식 요소 XYZ 선택 후손 선택자 ABC XYZ 선택자 ABC의 하위 요소 XYZ 선택('띄어쓰기' 중요!) 인접 형제 선택자 ABC+XYZ 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택 일반 형제 선택자 ABC~XYZ 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택 ✅ 가상 클래스 선택자(Pseudo-classes) 사용자의 행동에 따라 변화하는 가상 상황에 따라서 요소 선택 시 각 요소의 상황에 따라 사용자가 원하는 요소를 선택 할 ..

📌 CSS 상속 ✅ 스타일 상속 자식 요소가 별도의 style 속성이 없을 경우, 부모의 속성 값을 그대로 상속하는 CSS 특성 (단, 상속이 되는 속성과 상속이 안되는 속성으로 구분) ✅ 상속되는 CSS 속성들 모두 글자/문자 관련 속성들(주의: 모든 글자/문자 속성은 아님) font-style: 글자 기울기 font-weight: 글자 두께 font-size: 글자 크기 link-height: 줄 높이 font-family: 폰트(서체) color: 글자 색상 text-align: 정렬 .. ✅ inherit 강제 상속 : 자동 상속 되지 않는 속성 값을 강제로 부모의 CSS 속성값을 그대로 상속하게 하는 방법 ✅ 선택자 우선 순위 참조 방식 우선 순위와는 다른 개념임 같은 HTML 요소가 여러 선택..

📌 질문 (오류 발생) codingon 과제를 하던 중 질문이 발생하였다. 과제는 div와 span tag를 이용하여 2022 7월 달력 만들기 위 사진에서 같은 span tag에 display:inline-block; 했는데 text값이 들어간 span은 아래로(위에 빈칸 발생), text값이 들어가지 않은 span은 위로 붙어서(아래 빈칸 발생) text가 있는 span과 없는 span이 같이 들어간 div칸만 height가 커져있음 뭐가 문제일까 해결 방법이 뭘까 📌 해결 방법 span 요소의 기본 속성인 vertical-align 속성이 base-line 으로 설정이 되어있기 때문에 발생하는 문제였다. 즉, span 요소의 경우 수직 정렬을 글자의 base-line 에 맞추어서 수직 정렬이 일어나..