strawberry fields

🍐 미디어쿼리란? CSS를 공부하다보면 미디어쿼리에 대해 자연스레 알게된다. 미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로 다른 레이아웃을 생성할 수 있기 때문이다. 보통 스크린 사이즈를 조건으로 많이 사용하며, 특정 스타일이 인쇄된 문서 또는 화면 판독기에서만 사용되도록 할 수 도 있다. 🍐 미디어쿼리 기본문법 미디어 쿼리 기본문법은 아래와 같다. css 코드와 함께 작성하며, 사이즈조건 부분에는 'max-width: 1024px'과 같은 조건을 넣어주면 된다. 또한 all / screen / print / speech 네 가지 미디어 유형을 지정해 줄 수 있다. @media screen and (사이즈조건) { body { background-color: green; }..

💌 HTML, CSS, JS를 사용해서 프로필 만드는 과제를 부여 받았다. 자기 PR의 시대인데(?) 나는 나에 대해 설명하는게 어렵고, 어필하는건 더 어렵다.. 프로필에 어떤 내용을 써야하지? 고민을 많이 했는데 그럼에도 불구하고 매우 축약 되어 있는 내 프로필..😳 최대한 깔끔한 레이아웃으로 작업하려고 했고, 블로그/ 깃허브도 HTML 태그를 이용해서 연동 시켰다. CSS 효과도 나름 넣으려고 사진을 확대하는 transform/ transition 도 사용하였다. JS는 딱히 어디에 사용할 곳이 없어서 패스함..  추후에는 프로젝트도 추가하고 더 다채로운 나의 프로필이 되기를 바라며.. 본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

🌷 HTML 강의를 듣고 safe homes 랜딩페이지 클론코딩 과제를 부여 받았다. 클론코딩이라고는 하지만, HTML로 뼈대 잡는 것만 우선 하라고 하셨는데 CSS 작업을 안하니 정렬도 안되고 내가 잡는 뼈대가 이게 맞는건지(?) 더 헷갈려서 CSS도 함께 작업했다. 시맨틱 태그의 중요성을 강조하셔서, 최대한 의미있는 태그들을 써보려고 했지만 header/ footer외에는 거의 div와 span을 남발하여 쓴 것같다. CSS도 display, poisition, grid등의 개념이 헷갈려서 자꾸만 구글링 하는 나를 발견.. 조금 더 딥하게 공부해야겠다고 생각했다. 🌷 코드를 올려 놓은 깃허브 주소도 첨부합니다. https://github.com/udemy-team13/training/tree/main..

🍐 시맨틱 태그란? HTML 을 쪼금 공부해보셨다면 '시맨틱 태그'에 대해 모두 들어보셨겠지오 처음 공부를 할 땐 div 태그도 무엇인지 잘 몰라서.. '시맨틱 태그' 에 대해 이해할 여력도 없었는데 이제 여력이 조금 생겼다(?) 오늘 강사님이 HTML 전반적인 내용을 설명해 주셨고, 시맨틱 태그의 중요성에 대한 과제를 내주셨다. 시맨틱 태그란 무엇인가? 시맨틱(semantic)은 '의미의, 의미론적인' 이라는 뜻을 가지고 있기 때문에 말 그대로 시맨틱 태그는 '의미가 있는 태그'라고 할 수 있다. 우리가 주로 쓰는 div, span은 이름만 보고 어떤 내용인지 유추가 어려운 반면, header, nav, main, section, aside, footer등의 태그는이름만으로도 내용을 정확하게 명시해준다..

🤹🏻‍♀️ 아이디어 스케치란 무엇인가? 공상 속에 있는 80%를 20%의 현실로 만드는 것이다. 혼돈(경험) -> 스토리맵 -> 아이디어 스케치의 과정을 거쳐서 '상품화'가 된다고 할 수 있다. 말 그대로 내 머릿속에 나열되어 있는 아이디어들을 스케치 하는 것 🤹🏻‍♀️ 스케치의 효율성은? 시간을 절약할 수 있다. (공상을 현실적 밑그림으로 만든다) 큰 구조를 파악할 수 있다. (전체스토리를 알 수 있음) 스토리텔링 -> 진행과정의 스토리를 파악할 수 있다. 🤹🏻‍♀️ 효과적인 스케치 한 장에 한 개의 주제만을 담아야 한다. 그리는데 3분 이상의 시간을 소요하지 말자. 스토리를 그려라. 알고 있는 개념은 생략하라. 🤹🏻‍♀️ 실무에서의 아이디어 스케치 흐름 전개 상품에 들어갈 요소 정의 -> 카피 확장 ..

🍎 이전 시간 강의들을 토대로 액티비티 다이어그램을 만들어 보았다. 처음 들어보는 주제 + 해보는 과제라 생각보다 어렵고, 나의 생각의 가지들이(?) 매우 편협함을 발견 .. 매우 단순하지만 첫 시간에 내가 기획했던 '반려견 기록' 플랫폼을 토대로 다이어그램을 만들어 보았다. 플랫폼 자체가 '기록'에 목적을 두었기 때문에 어떤 광고 효과나, 플랫폼을 통해서 얻는 무언가가 없어서 그런지 더 심플하게 느껴졌다. 관리자는 그냥 기록한 것들을 관리만 하면 되는..? 만약 이것이 흥행하면(?) 추후에 광고등을 어떻게 관리할지도 추가할 수 있지 않을까 싶었다. 🍎 Activity Diagram을 구성할 때 화살표나 노드를 표시하는 도형들이 더 있는데, 나는 생략했당.. 동그라미는 Initial node, 마름모는 ..

🦭 UML이란? UML은 Unified Modeling Language의 약자로 소프트웨어 개발뿐만 아니라 많은 산업 전반의 비 소프트웨어 시스템에서도 중요한 역할을 담당한다. UML은 시스템 상호작용, 업무흐름, 시스템 구조, 컴포넌스 관계 등을 그린 도면이다. 예를들어 어떤 집의 구조를 설명할 때, '방2개에 화장실이 1개가 있고.. 화장실 옆에 통창이 있는 베란다가 있으며...'이렇게 구구절절 설명하는 것보다 집의 도면을 한번에 보여주는 것이 더욱 효과적이다. UML 다이어그램을 사용하는 이유도 비슷하다. 프로그래밍을 단순화 시켜 표현하여 의사소통하기 좋고 또 대규모 프로젝트 구조의 로드맵을 만들거나 개발을 위한 시스템 구축에 기본을 마련한다. 🦭 UML 모델링의 이점 시각화, 이해도, 정확성, 의..

유데미 x 스나이퍼 팩토리 부트캠프 1일차에는 플랫폼 관련 강의를 들었다. PM 23년차인 당근대장님이 무려 4시간이나 강의를 진행해주셨다! 틈틈히 싸이월드나^^,, 도토리 등등,, 내 연배에 맞는 이야기가 나와서 반가웠다(?) ✓ 플랫폼이란? 한 문장으로 정의 하자만 교류 속에 이뤄지는 다양한 소통, 거래를 통해 발생하는 트래픽을 기준으로 기업과 개인이 공동의 이익을 형성하는 곳이다 기차가 정차하는 곳도 '플랫폼'이라고 하지만 우리가 사용하는 구글이나 인스타그램, 유튜브 등도 플랫폼이라 할 수 있다 ✓ 플랫폼의 진화 근 몇 십년 동안 플랫폼은 굉장하게 진화하였고, 이제는 자동화되어 OpenAI chatGPT의 시대까지 도래하였다. 내가 보고, 듣고, 만드는 것을 넘어서서 AI가 인간의 영역으로 존재하고..

🧘🏻‍♀️ 객체지향 프로그래밍이란? 아직 면접을 본 적 없지만,, 면접 단골 질문이라고 하는 객체지향 프로그래밍에 대해 알아보도록 합시다. 우선 객체란 무엇인가? 객체는 프로그램에서 사용되는 데이터 또는 식별자에 의해 참조되는 공간을 의미하며 값을 저장할 변수와 작업을 수행 할 메소드(함수)를 서로 연관된 것들끼리 묶어서 만든 것이다 객체가 레고의 조각이고 레고의 조각을 조립해서 무언가를 만드는 방식을 객체지향 프로그래밍이라 할 수 있다. 예를 들어 '도서 관리 프로그램'을 만들어 본다고 가정하자. 이를 객체지향으로 구현하게 되면 책의 제목, 저자, 페이지수와 같은 자료형 필드와 대출하기, 반납하기 등의 메소드를 책이라는 객체에 묶어서 관리하는 것이 가능해진다. 이렇게 되면 추상적이었던 동작도 직관적으로..

DOM, Virtual DOM 등.. 줏어 들어보긴 했지만 누군가 설명하라고 한다면 머뭇거리게 되는 개념이지요 (^^) 훗훗 우선 DOM이란 무엇일까요? 처음 HTML을 공부할때 DOM tree를 잘 알아야 한다, DOM, node 등등의 중요성에 대해 많이 줏어 들었는데요. 🦖 DOM이란? Document Object Model의 줄임말 입니다. 말그대로 문서객체모델이지요. HTML의 각 요소들(element)을 tree 형태로 표현한 것을 DOM이라고 하는데요. 아래 구조를 보면 더 쉽게 이해할 수 있습니다. 하나의 root(뿌리)에서 여러가지 요소들이 가지를 친 것 같은 모습이죠. DOM tree안에는 각각의 element에 상응하는 Node가 들어 있는데요, 개발자들은 DOM구조에 접근을 하고 원..