분류 전체보기
Wecolor Picker 컴포넌트 만들기
Wecolor Picker 컴포넌트 만들기
2022.04.30Assignment 1. 색상박스는 class 속성값이 'colorBox'인 div로 구현하기 2. #709fb0 컬러값이 적힌 작은 박스는 span태그로 하되, 마우스가 색상박스에 올려졌을 때만 보여질 수 있도록 해주기 위해 hover 선택자와 opacity CSS 속성 이용하기 3. heart 버튼과 업로드 날짜 텍스트는 하단에 div 태그를 만들어 flex 속성을 이용해 간격을 유지하기 4. heart 버튼은 태그를 이용하기 My Code #709fb0  451 3days * { box-sizing: border-box; } .bgBox { margin: auto; // 중앙정렬 width: 350px; height: 400px; border-radius: 5%; background-colo..
Weegle - 검색바 만들기
Weegle - 검색바 만들기
2022.04.30Assignment 1. 로고 이미지 주소 : https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png 2. CSS position 속성을 이용하여 아이콘 위치하기. 3. 회색박스에 같은 클래스 이름을 사용하여 CSS를 한 번에 이용해보기. 4. English는 a tag를 이용해 구현하기. 5. Font Awsome에서 아이콘 사용하기. My code Weegle 검색 I'm feeling Lucky Weegle 제공 서비스 : English * { box-sizing: border-box; } .container { position: relative; text-align: cen..
CSS display - block, inline-block, inline 이해하기
CSS display - block, inline-block, inline 이해하기
2022.04.27블록 레벨 요소와 인라인 레벨 요소 CSS에서 display 속성은 웹페이지에서 요소들이 어떻게 보여지고 다른 요소와 어떻게 상호 배치되는지를 결정한다. 이를 이해하기 위해서 우선 블록 레벨 요소가 무엇인지, 인라인 레벨 요소가 무엇인지 살펴본다. 블록 레벨(block-level) 요소 태그를 사용해 요소를 삽입했을 때 혼자서 한줄(width 100%)을 차지하는 요소이다. 해당 요소의 좌, 우측에는 다른 요소가 올 수 없으며 새로운 라인을 추가한다. 너비, 마진, 패딩 등을 이용하여 크기나 위치를 지정하려면 블록 레벨 요소여야 한다. 블록 레벨의 대표적인 태그로는 , , , , , , , , , , 등이 있다. 인라인 레벨(inline-level) 요소 블록 레벨 요소와 달리 줄을 차지하지 않으며 화면..
CSS position - static, relative, absolute, fixed 이해하기
CSS position - static, relative, absolute, fixed 이해하기
2022.04.27CSS position CSS에서 position은 웹 문서 안 태그 요소들을 어떻게 배치할지를 정하는 속성이다. position 속성이 가질 수 있는 속성 값에는 다음과 같이 4가지가 있다. static 요소를 문서의 흐름에 맞추어 배치한다(default 값). relative 이전 요소에 자연스럽게 연결해 현재위치에 배치하여 offset을 지정할 수 있다. absolute 문서의 흐름과 상관없이 가장 가까운 부모 요소중 static이 아닌 요소의 위치를 기준으로 상대적인 offset을 지정할 수 있다. fixed 문서의 흐름과 상관없이 위치를 좌표로 결정하지만 부모 요소가 아닌 브라우저 창이 기준이 된다. offset : top, right, bottom, left으로 해당 기준으로 얼마만큼 떨어져 ..
Semantic Web & Semantic Tags – 시멘틱 웹, 시멘틱 태그 이해하기
Semantic Web & Semantic Tags – 시멘틱 웹, 시멘틱 태그 이해하기
2022.04.26시멘틱이 등장한 이유 웹상에 축적된 정보가 방대해 짐에 따라 많은 문제에 봉착하게 되었다. 웹 기술은 축적된 방대한 데이터에 대하여 키워드에 의한 정보 접근만을 허용하고 있어서 정보 검색할 때 무수히 많은 불필요한 정보가 돌출하여 정보 홍수를 가중하고 있다. 또한 컴퓨터가 필요한 정보를 추출, 해석, 가공할 방법이 없어 모든 정보를 사용자가 직접 개입해서 처리해야 하는 문제가 있다. 이러한 문제들의 근본 원인은 컴퓨터가 정보자원의 의미를 이해하지 못하는데 원인이 있다. 시멘틱(semantic) '의미론적인' 이라는 뜻이다. 웹이 발전하는 과정에서 정보로서의 가치가 중요해지면서 사람에게도 의미 있고, 검색엔진이나 스크린리더와 같은 기계가 활용하기 좋은(이해할 수 있는) 형태의 데이터로 웹을 발전시키기 위한..
김포 마켓컬리 냉동 알바 3개월 후기(feat. 전파트)
김포 마켓컬리 냉동 알바 3개월 후기(feat. 전파트)
2022.03.17국비교육을 수강하고 스스로에게 아쉬웠던 부분이 많았기에 다른 교육인 부트캠프를 추가로 듣기를 마음먹었다. 교육을 듣기 위해서는 돈이 필요했고 수강 시작까지 3개월 안에 생각보다 많은 돈을 마련해야 했다. ‘굳이 3개월 동안 공부할 시간 허비하고 고생을 사서 하냐?’라고 생각하는 사람도 있을 것이다. 맞다. 굳이 이 교육이 아니더라도 충분히 다른 방법도 있지만 나는 이 교육을 꼭 들어야만 할 것 같았고, 물류센터에서 일하면서 게을렀던 나를 채찍질하고, 하고 싶은 무언가를 위해 노력해보고 싶었다. 본론으로 들어가서 김포 마켓컬리 근무에 대해서 자세하게 이야기를 풀어보겠다. 출근 신청부터 출근까지 마켓컬리 신청은 알바몬에서 ‘김포 마켓컬리’를 검색하면 S팀, K팀, W팀 등등 여러 팀이 나온다. 딱히 어느 팀..
(최종)쌍용강북교육센터 - 중간 프로젝트
(최종)쌍용강북교육센터 - 중간 프로젝트
2021.11.21쌍용 교육센터에서 강의를 들으며 최근에 작성한 회고가 8주차이다. 그동안 급하게 지방에서 올라와 단기 원룸에 거주하며 대출 알아보고 원룸 알아보랴, 강의 따라가랴, 프로젝트 진행하랴 애먹었던 것 같다. 그래서 강의를 온전히 내 것으로 흡수하지 못해서 따라가기 벅찬 상태다. 최근에는 중간 프로젝트를 진행했었다. 9월 중순부터 10월 말까지 팀별로 원하는 웹페이지를 만드는 것이었다. 프로젝트는 4명이 한 팀이 되어서 진행하게 되었고 지금까지 배운 내용들을 정리하며 적용해보고 복습하는 시간을 갖는 게 목적이라고 했다. 우리 팀은 식당 후기 사이트를 만들기로 했고 ‘망고 플레이트’, ‘식신’ 사이트를 참고하며 아이디어를 얻었다. 여기서 나는 회원가입, 로그인, 마이페이지 기능을 구현하게 되었다. 중간 프로젝트를..
카카오뱅크 청년 전세자금 대출 무소득자 후기
카카오뱅크 청년 전세자금 대출 무소득자 후기
2021.11.08취준생이 되었고, 지방에서 서울로 올라와 단기 원룸에서 살며 본격적으로 전세 매물을 알아보고자 마음먹었다. 서울에 올라올 때 나는 ‘카카오뱅크’의 청년 전세자금 대출을 계획했으나, 뉴스에서 잔금일이 다 되어 대출 심사에 떨어져 피해를 본 사례들이 여럿 보도되고 있던 터라 고심 끝에 ‘우리은행’에서 대출받기로 마음먹었다. 그런데 슬슬 전세를 알아봐야 할 때쯤 다음과 같은 뉴스들이 인터넷에 터져 나오기 시작했다. 발을 동동 구르고 있던 와중 가까운 친구에게서 카카오뱅크 청년 전세자금 대출 승인이나 전세를 구했다는 연락을 받았다. 취업을 준비하는 비슷한 처지인 친구의 희소식에 나는 곧장 카카오뱅크로 마음을 돌렸다. 카카오뱅크 청년 전세자금 대출 가입조건에서 중요한 부분을 요약하자면 아래와 같다. 만 19~34..
쌍용강북교육센터 8주차 - JSP, CSS
쌍용강북교육센터 8주차 - JSP, CSS
2021.08.301. 웹 디자이너, 퍼블리셔, 프런트엔드 개발자 차이? 8주차에 프런트엔드 부분인 JSP, CSS를 다루는데 프런트엔드 개발자가 정확히 어떤 업무를 담당하는지 궁금해졌다. 왜냐하면 나는 백엔드 개발자가 서버를 담당하고 프런트엔드 개발자가 홈페이지 화면을 구성하고 시각적인 부분을 담당하는 줄 알았다. 그런데 수업 중 웹 디자이너와 웹 퍼블리셔라는 것을 듣게 되었고, 웹 디자이너가 홈페이지를 아름답게 시각적으로 디자인하는 사람임을 알게 되었다. 그렇다면 내가 프런트엔드 개발자에 대해서 잘못 알고 있다는 것인데 내 진로와 관련되어 있으니 조금 알아볼 필요가 있었다. 검색해보니 생각보다 뚜렷한 구분을 짓고 있는게 아니라 애매모호한 경계를 갖고 각자의 역할이 있었다. 우선 크게는 웹 디자인과 웹 개발로 나뉘었고,..