감귤밭 호지차 농장

main{ border: 1px dotted red; display: flex; min-width: 500px; /* height: 600px; flex-direction:row; justify-content: space-between; flex-wrap: wrap; align-items: baseline; */ } div{ border: 1px solid green; font-weight: bold; } #box2{ word-break:break-all; flex-basis: 3; } * { margin: 10px; padding: 10px; }

🦄 오늘은 CSS의 레이아웃을 조정할 수 있는 "FLEX" 녀석에 대해서 배웠습니다. 🍀 오늘의 날짜 : 23년 02월 16일 🍀 오늘의 주제 : CSS /html 활용 flex 🌷햇깔렸던 부분들 + TIP🌷 와이어프레임 (wireframe) 웹/애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계 - 단순한 선이나 도형으로 인터페이스를 시각적으로 묘사한 것. = 진짜 말 그대로 단순하게 레이아웃과 제품의 구조만 보여주는 용도임(UX 판단 노) 와이어프레임을 보고 어떤 목적을 가진 프로그램인지 유추할 수 있다면 이 와이어프레임은 목적을 성공적으로 달성한거임. 레이아웃 리셋 HTML문서는 기본적인 스타일을 가지고 있어서 가끔 요놈들때문에 레이아웃을 잡는데 방해가 되기도 해서 처음부터 리셋 시켜주고 작업하..

코드스테이츠 부트캠프 수강하면서 겸사 겸사 과제 제출 겸 나를 소개하는 페이지를 배운 CSS를 활용해서 만들어 보래서 잉차 잉차 만들어서 완성했는데 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 와 다른 분들 제출한거 보니까 제꺼는 고냥고냥 유치원 작업물 수준... 현타 오지게 맞고 잉차 잉차 수정해야겠습니다. 😂 보이시나요 제 1차 작업물 흐릿하게 보기만 해도 느껴지는 .... 할말하안의 디자인 다른 분들의 디자인을 보니 숨이 턱 막힐 정도의 멋지고 깔쌈한 디자인 뿐이었습니다.... 디자인 창작의 감각이 없는 저같은 사람들은 대책안을 찾아야죵.. 바로 다른 분들의 멋지고 깔쌈한 디자인들을 미친듯이 서칭하고 여기서 디자인의 포인트들을 뽑아낸다음 이를 바탕으로 디자인 하는 수밖에....

🦄 하잇 소데스 오늘은 코드스테이츠 부트캠프 둘째 날 . 어떻게 보면 첫 수업이라고도 할 수 있지용. 원래는 오늘 바로 JS 들어가야 하는데 이번 기수는 초보자들을 위해 HTML/CSS 파트도 간단하게 넣어주셨다고 하니 .. 😗 저야 복습할 겸 너무 좋쥬.. CSS하니 다시 떠오르는 썪어가고 있는 나의 인프런... ㅠ 🍀 오늘의 날짜 : 23년 02월 14일 🍀 오늘의 주제 : HTML 기초 HTML 기초 : 구조를 표현하는 마크업 언어 HTML 시멘틱 요소 : 의미를 가지고 있는 태그들 id와 class 사용법 html 태그만을 이용해서 나를 소개하는 페이지를 만들어보았습니다. 겸사 겸사 inline 요소와 block 요소에 대해 미뤄두었던 정리도 해보았으니 필요하신 분들은 👉 여기 👈 를 클릭해주세용..

🔹inline element 와 block element inline element : 하나의 태그가 브라우저에서 작성된 부분만 영역을 차지해서 다른 태그들이 양 옆에 나란히 위치할 수 있는 요소 ( 텍스트 레벨 요소라고도 함 ) block element : 하나의 태그가 브라우저에서 한 줄을 다 차지하면서 독립적인 덩어리 공간을 가지는 요소 🔹inline 요소와 block 요소의 종류 💡주의점! block 요소는 내부에 block 요소와 inline 요소를 포함 할 수 있으나, inline 요소는 내부에 block 요소를 포함할 수 없습니다. * , 와 같은 특정 block 요소들은 inline 요소만 포함할 수 있으니 참고하라구 * inline 요소를 CSS로 블럭화해서 내부에 블럭 요소를 포함할 수..

참고로 현재 집 와이파이가 제대로 켜지지 않고 우분투인지 뭔지 굉장히 분노해 있는 상태쓰~🤐 왜 12시쯤만 되면 와이파이가 아주 먹통이 되는지 ... 강제로 홧병 생성 중 ㅎㅎ 🍀코드스테이츠 부트캠프 - 프론트엔드 코스 첫 날 드디어 기다리던 코드스테이츠 부트캠프 - 프런트 엔드 코스 첫 날인 OT가 아침 9시부터 시작되었습니다. 오늘은 간단하게 앞으로 어떤식으로 코스가 진행 될 것이고 어떠한 방식으로 공부를 하면 좋을지 와 같은 유용한 정보들을 소개해주셨습니다. 굉장히 많은 수강생분들이 계셔서 기대 반 걱정 반으로 OT에 임했고 다양한 정보들을 얻을 수 있었습니다. 작년 7월 말에 퇴사 후 독학으로 공부하면서 생각보다 24시간을 효율적으로 쓰지 못하고 있다고 생각이 들었었는데... ( 최대 공부 시간 ..

여긴 제 개인 일기장 ^^ ㅎㅎ 회고록은 아닙니다데스!! 뒤로가기 오네가이시마스~😚 찐 회고록은 여기 기록 정신없이 벌써 2월 중순이 되었음. 오 .... 정말 시간은 나를 기다려주지 않고 혼자서 막 달려가는 듯... 오늘은 고대하던 코드스테이츠 부트캠프 첫 날 OT 였음. 강사님들이 계속 프론트엔드는 맥 프로를 권장한다고 말씀해주셔서 살짝 멘붕이 왔지만,, 나같은 양 어깨에 아직 삼성 노트북 할부를 이고 있는 할부노예들은 악으로 깡으로 우분투 깔아야지 ㅋㅋㅋㅋㅋ ( 저 우분투 처음 들어용!) ㅋㅋㅋㅋㅋㅋㅋ ;ㅂ ; 이제 수업도 들어가니까 9 - 6시까지는 정신없이 집중하고 그럼 끝나고 또 정처기 이제 D-21남아서 미친듯이 공부해야 하는데 거기다가 이번 달에 JS기초랑 인프런 CSS 강의 끊어놓은거 다..

자바스크립트는 원시값(문자열, 숫자 등)을 마치 객체처럼 다룰 수 있게 해줌. 원시값에도 객체처럼 메서드를 호출할 수 있다는 거임. 다만 객체처럼 사용하는 거지 객체는 아닌거임!! 원시값과 객체의 차이점 🔹원시값( primitive type) - 원시형 값이다. - 종류 (문자string, 숫자number, *bigint, 불린boolearn, 심볼symbol, null, undefined) 총 7가지 🔹객체 - 프로퍼티에 다양한 종류의 값을 저장할 수 있음 → 장점 중 하나 - { } 대괄호를 사용해 만들 수 있음! 자바스크립트에는 여러 종류의 객체가 있는데 함수도 객체의 일종. 자바스크립트는 날짜, 오류, HTML요소(HTMLelement) 등을 다룰 수 있게 해주는 다양한 내장 객체를 제공. 이 객..

옵셔널 체이닝(optional chaining) 을 사용하면 "프로퍼티" 가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다. 참고로 옵셔널 체이닝은 연산자가 아닌 함수나 대괄호와 함께 동작하는 특별한 문법 구조체 (syntax construct)입니다. 옵셔널 체이닝이 등장한 배경 사용자 중 몇 명은 주소 정보를 가지고 있지 않았을 때, use.address.street 을 사용해 주소 정보에 접근 하면 에러가 발생할 수 있습니다. 혹은 자바스크립트를 사용해서 페이지에 존재하지 않는 요소에 접근해서 요소의 정보를 가져오려고 할 때 문제가 발생하는 경우가 있습니다. 옵셔널 체이닝 존재 전에는 이러한 문제를 해결하기 위해 && 연산자를 사용했으나, 중첩 객체의 특정 프로퍼티에 접근하기 위해 거쳐야..

❌ 아직 해결되지 않은 궁금증이 있는 게시물 : 클릭 ▶ 문제 설명 정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소의 평균값을 return하도록 solution 함수를 완성해주세요. ▶ 조건 0