코딩하는 짱구

오늘은 Day 5 2023년 04월 17일 오늘은 오전 9시부터 11시 전 까지는 자습및 복습 시간이다. 오늘도 자습을 시작해 보자!! 오후에는 페어분과 코드 리뷰를 하고 나머지 시간에는 자습및 복습을 할 생각이다. 2023.04.17 - [프론트앤드 부트캠프/과제] - 목업 계산기 만들기 목업 계산기 만들기 2번째 과제인 목업 계산기 만들기!! HTML 코드 0 AC enter 7 8 9 + 4 5 6 - 1 2 3 * 0 . / CSS 코드 * { margin: auto; padding: 0px; } /* 뒷 배경화면 */ body { display: flex; justify-content: center; align-items: center; height: 100vh; backg colco-codin..

프론트앤드 부트캠프/Day 2023. 4. 17. 19:51

2번째 과제인 목업 계산기 만들기!! HTML 코드 0 AC enter 7 8 9 + 4 5 6 - 1 2 3 * 0 . / CSS 코드 * { margin: auto; padding: 0px; } /* 뒷 배경화면 */ body { display: flex; justify-content: center; align-items: center; height: 100vh; background: url('/Users/bagdahae/Desktop/코드스테이츠/2023.04/계산기/확정/계산기 목업/이미지/IMG_1920.jpg') no-repeat center fixed; background-size: cover; /* border: 1px solid red; */ } /* 계산기 몸통 */ .calculato..

프론트앤드 부트캠프/과제 2023. 4. 17. 12:58

오늘은 Day 4 2023년 04월 14일 오늘도 오전 9시부터 12시 전 까지는 자습 시간이다. 오늘도 자습을 시작해 보자!! 오늘 부터 페어 활동을 한다고 한다. 처음 해보지만 모두 모두 화이팅!! 9 : 00 ~ 12:00 자습 Unit4 [HTML/CSS] 활용 오늘의 목차 Chapter1. 레이아웃 Chapter2. Flexbox Chapter3. 실습 Chapter1. 레이아웃 Chapter1-1. 와이어프레임 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 합니다. 목업(Mock-up) 프론트엔드 개발에서 목업(mock-up)은 디자인 시안 혹은 시뮬레이션으로, 개발하려는 웹사이트나 어플리케이션의 디자인을 시각적으로 보여주기 위한 것입니다. 목업은 보통 그..

프론트앤드 부트캠프/Day 2023. 4. 15. 12:56

오늘은 Day 3 2023년 04월 13일 오늘도 오전 9시부터 5시 전 까지는 자습 시간이다. 오늘도 자습을 시작해 보자!! 화이팅!! 9 : 00 ~ 17:00 자습 Unit3 [CSS] 기초 목차 Chapter1. CSS 기초 Chater2. 박스모델 Chapter3. CSS Selector Chapter1. CSS 기초 CSS (Cascading Style Sheets) HTML이나 XML 같은 마크업 언어의 표현을 꾸며주는 스타일 시트 언어 더보기 HTML이나 XML 같은 마크업 언어의 표현을 꾸며주는 스타일 시트 언어입니다. CSS는 웹 문서의 디자인 요소들을 지정하고 제어하기 위한 규칙 집합으로, 웹 사이트나 애플리케이션의 레이아웃, 색상, 폰트, 배경, 그림자, 애니메이션 등 다양한 스타일..

프론트앤드 부트캠프/Day 2023. 4. 13. 11:49

어떤 분야에서든 유능해지고 성공하기 위해선 세 가지가 필요하다. 타고난 천성과 공부 그리고 부단한 노력이 그것이다. To become an able and successful man in any profession, three things are necessary, nature, study and practice. 오늘은 수업 2일차 아직은 기초단계라 큰 두각을 나타낸 이렇다할 프로젝트가 없지만 기초를 다지며 사이드로 프로젝트를 해야할 것을 찾아봐야겠다. 공부하며 그때 그때 내가 잊어 버리지 않도록 DAY 카테고리에 시간과 수업 순서에 따라 정리본을 올리고 회고록 카테고리에는 내가 이해하기 힘들었던 부분이나 중요한 부분을 따로 올려야겠다!! Tree structure _ 트리 구조 HTML 문서 시작 h..

프론트앤드 부트캠프/회고록 2023. 4. 12. 21:49

CSS 박스 모델은 HTML 요소들이 화면에서 차지하는 공간을 정의하는 모델입니다. 각각의 HTML 요소는 박스(Box)로 취급되며, 이 박스는 크기, 여백, 테두리 등의 속성을 가지고 있습니다. 박스 모델은 크게 Content, Padding, Border, Margin으로 구성됩니다. Content : 요소가 실제로 차지하는 공간으로, 내용이 위치하는 영역입니다. Content의 크기는 width와 height 속성을 사용하여 정의합니다. Padding : Content 영역과 Border 영역 사이의 간격입니다. Padding은 Content 영역의 크기에 영향을 주지 않습니다. Padding의 크기는 padding-top, padding-right, padding-bottom, padding-le..

웹 < 프론트앤드 >/CSS 2023. 4. 12. 16:39

HTML 문서의 레이아웃 웹 페이지의 구역별 구조는 보통 다음과 같습니다. Header : 웹 페이지의 머리말을 담는 영역으로, 로고, 타이틀, 검색창, 메뉴 등의 요소를 포함합니다. Navigation : 웹 페이지의 메뉴를 담는 영역으로, 주로 Header 영역 내부에 위치합니다. 사용자가 원하는 페이지로 이동할 수 있는 링크들을 제공합니다. Main : 웹 페이지의 본문을 담는 영역으로, 주요 콘텐츠를 포함합니다. 여러 개의 Section으로 구성될 수 있습니다. Section : 웹 페이지의 섹션을 담는 영역으로, 여러 개의 Section으로 나누어질 수 있으며 각 Section은 제목과 내용으로 구성됩니다. Article : 웹 페이지의 본문 콘텐츠 중에서 독립적인 내용을 담는 영역입니다. Se..

웹 < 프론트앤드 >/HTML 2023. 4. 12. 16:34

오늘은 Day 2 2023년 04월 12일 오늘은 오전 9시부터 5시 전 까지는 자습 시간이다. 아침에 긴가 민가 해서 줌 수업 하는줄 알고 줌에 들어갔는데 줌 수업은 아니었다. 자습을 시작해 보자!! 오늘도 화이팅!! 9 : 00 ~ 9 :30 자습 Unit2 [HTML] 기초 Unit2 오늘의 목표 Chapter1. 웹 개발 이해하기 개념학습: 기초 개념을 학습합니다. 퀴즈: 학습한 개념의 이해도를 퀴즈를 통해 점검합니다. 환경설정: 학습을 위한 툴의 설치와 환경설정을 진행합니다. 튜토리얼: 주어진 안내에 따라 학습과 실습을 진행합니다. Chapter2. HTML 기초 개념학습: 기초 개념을 학습하고 코드샌드박스를 이용해 적용합니다. 퀴즈: 학습한 개념의 이해도를 퀴즈를 통해 점검합니다. 실습: 학습..

프론트앤드 부트캠프/Day 2023. 4. 12. 14:18