🌱 → 🌳

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 요소가 수직으로만 쌓이는 문제점을 해결하고자 나온 개념 디자인이 중요시 되면서 가로로 블..

📌 Tag 선택 메뉴(드롭 다운)을 만드는 태그 : select 폼 생성 name: select : select 폼의 옵션 값 생성 value: 실제적으로 전달되는 값(컴퓨터가 읽는 값) selected: 최초에 선택된 값으로 설정 disabled: 옵션은 보이지만 선택을 못하도록 설정 : option을 그룹화 label: optgroup 이름 설정 예시 코드 black sliver skyblue pink

📌 질문 (오류 발생) 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 에 맞추어서 수직 정렬이 일어나..

📌 HTML 구조 tag 메타 데이터를 포함하기 위한 태크 title : HTML 문서의 제목 style: HTML 문서의 style 정보 정의 link: 외부 리소스와의 연결 정보를 정의(CSS 파일 연계 등) script: JavaScript 정의 meta: 페이지 설명, 키워드, 저자, 화면 크기 등의 정보(주로 브라우저 또는 검색 엔진에서 사용) tag HTML 문서의 내용을 담는 태그 📌 Tag 속성 type : 말머리 기호 변경 start: 시작 값 변경 reversed: 역순으로 시작 속성 target: 링크 된 문서를 열었을 때 문서가 열릴 위치 표시 현재는 div 사용을 더 많이 함 (table 사용 빈도 하락) : 표를 감싸는 태그 : 표 내부의 행 : 표 내부의 제목 칸 : 행 내부의..