Ch.Covelope

미디어 쿼리 미디어쿼리는 사이트에 접속하는 디바이스에 따라 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 으로 마크업 구조를 먼저 생각하고 진행했는데 다른 분들은 등으로 그 안에서도 나름 시멘틱 하게 구성하려고 노력하신 거 같다. 근데 나는 그림인데 어떤 태그가 맞는지 잘 떠오르지 않아 의 클래스만 주어서 만들었다. (한참 멀었다) 아래는 마크업 코드 보는거처럼 아주 단순하다 얼굴 부분에는 눈코입 눈썹 메이크업 그리고 귀와 그림..