코딩하는 등산가

클론 코딩 유튜브 사이트 따라 만들기 - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 와이어 프레임 만들어 보기 따라 만들어 보기 - 따라 만들어본 페이지 입니다. - 이미지 파일을 넣지 못해서 이미지 부분은 없습니다. - html과 CSS를 위주로 연습을 하기에는 좋은 클론 코딩인거 같습니다.

CSS 정리 - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. - 부모의 크기에 따라서 사용하는 경우는 %와 em을 사용 - 브라우저의 크기에 따라서 사용하는 경우는 v*와 rem을 사용합니다. 1. em level 1 level 2 level 3 level 4 .level1 { font-size: 2em; } .level2 { font-size: 2em; } .level3 { font-size: 2em; } .level4 { font-size: 2em; } - 부모 요소보다 2배씩 커지게 됩니다. 2. rem rem의 경우는 전체 브라우저 창의 크기를 기준으로 하기 때문에 일정한 크기를 갖습니다. .level1 { font-..

CSS 정리 - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. CSS의 반응형 유닛 CSS 문법 복습 .box{ width:200px; height:200px; color:#ffffff; font-size: 10px; } Selector -> box Property -> width, height, color, font-size Value -> 200px, #ffffff , 10px.... 픽셀 모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위 픽셀의 문제점은? 컨테이너의 사이즈가 변경되어도 컨텐츠가 그대로 고정된 값으로 유지 됩니다. 이러한 문제점때문에 %를 이용하고 있습니다. 상대적인 유닛 사용 - 전부 다 쓰기 보다는 ..

CSS 정리 - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. FlexBox - flexbox를 이용해서 박스의 배치가 수월해졌습니다. float : left center right 옵션 Container에 지정하는 속성 값 - display - flex-direction - flex-wrap - flex-flow - justify-content - align-items - align-content item에 지정하는 속성 값 - order - flex-grow - flex-shrink - flex - align-self 전체 코드 - index.html 코드 1 2 3 4 5 6 7 8 9 10 index.css 코드 .co..

CSS 정리 - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 원하는 위치에 원하는 박스를 배치하는 것이 가장 중요합니다. 이를 하기 위해서 display와 position에 대해서 잘 이해해야 합니다. CSS 연습 코드 1. block, inline-block - html 코드 1 2 3 1 2 3 - CSS 코드 div, span { width: 80px; height: 80px; margin: 20px; } div { background: red; display: inline-block; } span { background: Blue; display: block; } - 여기서 display에서 inline-block의 ..

CSS 정리 - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. CSS란? Cascading Sytle Sheets의 약자 HTML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어입니다. - 우리가 작성하는 스타일 - 사용자의 취향에 맞게 하는 스타일 - 브라우저 상에서 기본적으로 지정된 스타일 Selectors - 전체를 선택하는 경우 * - type을 선택하는 경우 Tag - ID를 선택하는 경우 #id - Class를 선택하는 경우 .class - State를 사용하는 경우 : - Attribute를 이용하는 경우 [ ] CSS 설정 연습해 보기 - index.html First Second Button 1 But..