Ch.Covelope

셀렉트 박스 만들기. 기존의 셀렉트 박스는 태그와 태그로 함께 사용되며 디자인 자체가 없다? 고 볼 수 있을 정도로 심플하다. 근데 저 상태에서 디자인을 커스텀 하기에는 한계가 있어서 기존의 태그를 사용하는 게 아니라 button 태그와 ul, li 그리고 약간의 Javascript 를 사용하여 커스텀할 수 있다. 아래는 아무것도 하지 않고 기존 방식으로 만든 셀렉트 박스이다. ul , li에서 셀렉트 박스 같은 효과를 주려면 ul의 기본 스타일은 display:none으로 안 보이게끔 만들어 주고 on 이 되었을 때 아래처럼 나올 수 있게 만들어 줘야 한다. 그건 자바스크립트로 버튼을 클릭했을 때 ul 이 on이 될 수 있도록 짜면 되는데 아직 자바스크립은 배우지 않아서 강사님이 짜주신 코드를 사용하여..

css, html 로 자판기 만들기! 이번 과제는 다른 회사의 코딩 테스트로 나온 과제라고 알고 있는데 회사 코테에서는 자바스크립트 (Js)까지 함께 구현해야 하지만 아직 배우지 않은 부분이고 자바스크립트 코드를 봤는데 하나도 이해가 가지 않았다... 그래서 이번 과제는 html. css를 이용해서 ui를 만들어보는 과제였고 함께 코딩하는 방식으로 진행되었다. 작업은 화면 구성 요소들 중에 중복되는 부분들을 다 만든 게 아니고 모듈처럼 하나씩만 만들고 나중에 필요한 부분을 복사해서 사용하고 배치들은 flex와 float으로 하였고 약간의 미디어 쿼리를 사용해서 반응형으로 만들어 주었다. 딱히 어려운 부분은 없었는데 피그마에서 최소 폰트로 잡힌 게 9px 이였는데 크롬에서는 최소 폰트가 있어서 적용이 안되..

카드 호버 그리고 클릭 효과 만들기. 오늘은 수업시간에 코드펜에 있는 카드가 떠오르는 거 같은 UI를 클론 코딩하였다. 코드 펜에 있던 코드는 html, css , Js 세가지 중 우리는 html 과 css 로 js 가 없는 부분으로 클론 코딩하게 되었는데 원본 코드는 양이 엄청나게 많아서 힘들겠구나 생각했었다. 하지만 강사님께서 그러한 코드들이 노력하면 충분히 줄일 수 있는 내용들이고 그걸 하기 위해서 고민하는 것에 시간이 아깝다고 생각하지 말고 항상 더 나은 방법을 생각하라고 하셨다. 아래는 카드 하나의 마크업이다. 원하는 만큼 늘려서 카드의 배열을 해주고 (전체 코드는 github에) css 스타일을 주면 된다. 이번 시간에는 grid를 사용했는데 16개의 카드를 만들고 (위에 코드*16) grid..

미디어 쿼리 미디어쿼리는 사이트에 접속하는 디바이스에 따라 css 로 해당 디바이스에서 최적화된 화면으로 보이게끔 만들어주는 것으로 css 에서 원하는 디바이스의 화면에 맞게 레이아웃을 재구성한다. 1차로 강사님의 도움 없이 클론 코딩으로 미디어쿼리를 적용할 웹페이지를 피그마에 올라온 디자인을 보고 만들었고 2차로 강사님과 처음부터 끝까지 마크업 css 그리고 미디어쿼리 까지 다 같이 만들었다. 1차로 만들었던 코드와 2차로 강사님과 함께 새로 짠 마크업을 비교하면서 처음보다는 많이 나아졌지만 아직 만족할만한 구조를 짜기에는 멀었다는 걸 느꼈다. css 에서도 불필요한 코드들이 많이 있었고 정리하는 부분들도 느낄 수 있었던 수업이었다. 나는 처음에 미디어 쿼리의 개념을 듣고 나서 그럼 그냥 바디나 최상단..

피그마에서 디자인을 보고 로그인 창 만들기. (CSS 로 체크박스 디자인 바꾸기) 지금까지 배웠던 html, css를 기반으로 로그인 모달 창을 만드는 과제를 하게 되었다. 화면 구성의 굉장히 단순하고 과제를 받고 나서는 금방 할 수 있을 거 같다고 자만했었다(과제 이름도 간단한 모달창..). 그런데 시작하고 나니 그게 아니었다. 왜 항상 과제나 수업시간 때 머리로는 엄청 간단하고 이해도 잘되는데 막상 해보려면 백지가 되고 배웠던 것들이 머릿속에서 뒤죽박죽 되는지 모르겠다. 아래는 피그마에 올라온 참고 디자인이며 처음 로그인 팝업창은 해도 되고 안 해도 되는 영역이고 아래 모달창이 메인 과제이다. 기본 구성으로 만들고 미디어 쿼리를 써서 반응형으로 만들어 주면 된다. 화면만 보면 별거 없어 보이고 마크업..

움직이는 버튼 만들기! 처음에 포스팅했던 버튼 만들기. https://covelope.tistory.com/entry/HTML-CSS-%EB%A1%9C-%EB%B2%84%ED%8A%BC-%EB%A7%8C%EB%93%A4%EA%B8%B0 HTML , CSS 로 버튼 만들기. HTML 과 CSS 로 버튼 만들기. 자바 스크립트 없이 CSS 의 속성을 이용해서 간단하고 효과적인 버튼을 들 수 있다. 처음 만들어 보는 거라 아직은 속성들이 정확하게 어떻게 작동하는지는 헷갈리지만 covelope.tistory.com animation과 다양한 속성들 활용. 여기서 만들었던 방법에서 animation 과 skew 등 다른 추가적인 속성들 이용해서 다른 디자인에 버튼 두 가지를 더 만들었다. 처음 포스팅했던 때와 같..

HTML 과 CSS 로 버튼 만들기. 자바 스크립트 없이 CSS 의 속성을 이용해서 간단하고 효과적인 버튼을 들 수 있다. 처음 만들어 보는 거라 아직은 속성들이 정확하게 어떻게 작동하는지는 헷갈리지만 몇 번 더 만들어 보면 더 괜찮은 버튼을 만들 수 있을 같다. 기본적인 HTML 버튼 하나를 만들기 때문에 마크업은 단순하다. Hover:Me 꾸미기를 위한 CSS 수업 중 실습으로 만든 거라 정리가 잘 안된 거 같다. 쓸데없는 속성들이 껴 있을 수도 있음(하나씩 실험하면서 하느라..) .c22 { box-sizing: border-box; background-color: rgb(32, 32, 32); width: 300px; height: 300px; border-radius: 100%; transiti..

Youtube 클론 코딩 하기! 수업을 하면서 이해가 되는 부분들도 있고 안 되는 부분들이 있는데 안 되는 부분들이 시간이 갈수록 점점 많아지면서 이걸 어떻게 해야 할까 고민이 많았다. 첫 번째는 그냥 모르는 부분 부분만 따로 공부하기 두 번째는 그냥 클론 코딩이나 직접 뭔가를 만들면서 쓰게 되는 태그나 속성들 그리고 모르는 부분들을 사용하면서 익혀나가기 뭐 둘 다 다하면 좋겠지만 물리적인 시간은 정해져 있고 체력도 무한이 아니라 어느 때는 첫 번째 어느 때는 두 번째로 번갈아가면서 너무 지겹지 않은 공부가 되게 하는 걸로 방향을 정했다. 처음 해보는 클론 코딩이라 너무 거창 한거 말고 그리고 유튜브를 보면서 천천히 따라 하되 이해가 안 되는 부분에서 스탑 하고 구글링 하고 이해하고 그다음 다시 시작하는..

수업 중에 배운 HTML과 CSS를 이용해서 코딩으로 캐릭터 만들기! 5일 차 때 했던 대회인데 사정이 있어 조금 늦게 포스팅하게 되었다. 기본적인 내용은 제목에 적혀 있듯이 배운 내용을 바탕으로 캐릭터를 그리는 거다. 나는 코딩으로 그림을 그릴 수 있다는 사실도 이번에 처음 알았고 생각보다 엄청나게 많은 것을 할 수 있다는 것도 알게 되었다.(실력이 좋다는 전제하에) 일단 HTML 으로 마크업 구조를 먼저 생각하고 진행했는데 다른 분들은 등으로 그 안에서도 나름 시멘틱 하게 구성하려고 노력하신 거 같다. 근데 나는 그림인데 어떤 태그가 맞는지 잘 떠오르지 않아 의 클래스만 주어서 만들었다. (한참 멀었다) 아래는 마크업 코드 보는거처럼 아주 단순하다 얼굴 부분에는 눈코입 눈썹 메이크업 그리고 귀와 그림..

HTML, CSS 를 활용하여 네이버 박스 UI 만들어 보기! 수업중에 배운 내용으로 html 과 css 를 활용하려 네이버(Naver) 페이지의 일부분인 로그인 박스를 만들어 보기로 하였다. 처음에는 굉장히 단순하게 보여서 (단순한 거 맞음) 10분이라는 제 한 시간 안에 충분히 만들 수 있다고 생각했고 그것은 생각일 뿐이라는 걸 느끼게 되었다. 아래는 실제 서비스 되고 있는 네이버 로그인 박스의 UI이다. 이렇게 보면 큰 사각박스 안에 로그인 버튼과 텍스트 몇 자가 끝인데, 처음 우리가 float이라는 속성(property)을 배우고 나서 하는 실습이라 그 속성을 활용하여 만들기로 하였다. 처음에 나름 호기롭게 출발하고 마크업도 나름 구조적이고 어떻게 하면 저 작은 부분을 시멘틱 하게 만들 수 있을까..

Javascript Javascript(자바스크립트)는 정적인 HTML 문서를 프로그래밍 적으로 제어 하여 동적으로 만들어 주거나 클라이언트(사용자) 와의 상호 작용을 할수 있게 하는 언어이며 웹 브라우저가 해석해서 사용할수 있는 유일한 프로그래밍 언어이다. 근래에는 웹 뿐만 아니라 게임, 서버 프로그래밍등 다양하게 범위를 확장시키고 있는 언어이다. HTML과 CSS 와 다르게 자바나, C언어 일반 프로그래밍 언어과 유사한 문법 구조를 가지고 있다. 하지만 다른 언어와 다르게 타입을 명시할 필요가 없는 인터프리터 언어이다. 객체 지향 언어이며 AJAX를 이용해 서버와 실시간 통신도 가능하다. 객체 지향 언어란 - 완성된 하나의 데이터를 처리하는게 아닌 , 다수의 "객체" 를 만들고, 각 객체들의 역할이 ..

멋쟁이 사자처럼 HTML의 마무리 CSS의 시작. 오늘은 멋쟁이사자처럼(멋사)에서 기본적이고 아주 기초적인 HTML수업을 마무리하고 CSS로 넘어가는 날이었다. 물론 HTML은 앞으로도 계속해서 사용되기 때문에 마무리가 되었다고 해서 끝이 아니고 꾸준히 예습, 복습을 해야겠다. VScode 금일은 시작하기전 vscode (visual studio code:에디터)에서 수업에 필요한 익스텐션을 설치하였다. - Html tag wrap-이라는 익스텐션이었고 이름 그대로 주요 기능은 HTML의 tag를 wrapping 해주는 것이다. 원하는 문장이나 단어를 드래그하고 "Alt + W" (맥은"Option+W") 를 누르면 해당 문장, 단어에 TEXT 이런 식으로 태그로 감싸주는 기능이다. 그 이후에 원하는 태..

계속해서 연습과 복습으로 구조와 시멘틱에 대해 이해하기. 멋사 2일 차 수업 때 html 수업 후 각자 http://www.paullab.co.kr/about.html 해당 주소의 페이지를 보고 html로 구조를 생각하면서 시멘틱 한 마크업을 작성하는 과제를 받았다. (수업에서 배운 내용 한도에서 최대한) 처음에는 로만 사용해서 작성하는줄 알고 금방 해버렸는데 내가 잘못 이해했다는 걸 알고 다시 처음부터 작성했는데 다 하고 나서 강사 님하고 비교해보니 너무나도 많은 부족함이 눈에 보였다. About 페이지의 최상당 부분 내가 작성한 html About " 기술의 교육 기회를 누구나 차등없이 받을 수 있게 대중화, 보편화, 시스템화 하는 것 " 우리는 교육 특권의 대중화, 고급 IT 기술의 상용화를 도모합..

수업내용 github 계정 및 기본 사용법 HTML , CSS , 기초 Q&A 마크업 실습 github은 멋사에 참여하기 전 생활코딩님의 유튜브를 보면서 독학을 할 때 알게 되었고 그때 잠깐 아주 잠깐 해보다가 전혀 감도 안잡히고 이게 중요한 건가 싶어서 계정을 만들고 이해 없이 한두 번 따라 하고 내려놓았다.근데 오늘 수업이 있기전 개발자로 일하는 친동생에 가 github에 대해서 기본적인 개념과 왜 사용하고 왜 잘해야 되는지를 배우고 오늘 수업을 들으니 한결 이해가 잘되고 어려워도 계속해봐야겠다는 생각이 들었다. 동생은 Git 에 대한 이해와 공부 그리고 github을 따로 각각 알아야 한다고 했지만 일단은 github 먼저 하기로 하였고 이전에 독학때보다는 괜찮다 라는 생각을 했다. (https:/..

드디어 전문교육을 시작하게 되었다. 아주 어릴 적부터 그림을 그리고 미술고등학교 미대 그리고 중간에 전공을 바꿔 패션 전문대를 졸업하고 패션 회사에서 2년간 근무하였다. 그리고 또 무슨 바람이 불었는지 크게 보면 같은 계열이지만 다른걸 도전하다 실패하고 집안 사정으로 거의 3년 동안 정말 하기 싫은 일을 하다가 프론트 개발자로 일하는 동생(쌍둥이 동생 둘 다 개발자)의 권유로 이쪽 분야에 관심이 생기고 혼자 조금씩 해보니 흥미가 생겨 이곳저곳 학원을 알아보고 면접도 보던 중에 국비 프론트 과정을 알게 되어 정말 운 좋게 함께 하게 되었다. 사실 혼자 조금 해보기 했어도 그냥 백지 수준이고 공부했다고 말하기도 부끄러운 정도라 이런 과정이 걱정 되기도 했지만 너무 원하던 커리큘럼만 딱 꼽은 강의라 너무 좋았..