[데브코스 FE] 2주차 첫번째 수업 2024/07/22

2주차 월요일 수업에서는 피그마로 제시해준 템플릿의 클론코딩을 해보았다. 이제 클론코딩을 실습때 진행해보니레이아웃 잡는 것, 가상요소로 아이콘이나 배경이미지 배치하는 법 등은 방법을 터득한 것 같다. 그렇지만 아직까지 css 코드 작성 요령이나 라이브러리를 활용하는 것 등이 미숙한 것 같다. 이번 수업에서는 'swiper'라는 라이브러리를 이용하여카드가 한 장씩 넘어가도록 만드는 것을 배웠다.또한 지금까지 미숙했던 라이브러리 요소에 커스텀 스타일 입히는 방법도 알아가게 되었다. 이번엔 swiper 적용을 중심으로 내용을따로 정리해보고자 한다. 학습내용swiper 간단 사용법swiper에 커스텀 스타일 입히기swiper 사용시 tip수업 때 질문들 Q&A1. swiper 간단 사용법https://swipe..

• format_list_bulleted TIL(Today I Learn)
• · 2024. 7. 25.
• textsms

[데브코스 FE] 1주차 네번째 수업 2024/07/19

4번째 수업에서는 클론코딩으로 웹퍼블리싱해보는 수업위주였다. 사실 클론코딩으로 html css js 따라하기는 쉽고 기초적인거아니야? 했는데 막상 따라해보니 디테일한 것을 살리더라도 전체 레이아웃에서 틀어지면 다 뜯어고쳐야했기 때문에전체 레이아웃을 올바르게 짜는 것과, 효율적으로 코드를 활용하는 방법등을 많이 배웠던 것 같다. 이번에도 4번째 수업때 새로배운 내용들을 따로 정리해보고자 한다. 학습내용홈페이지 기본 뼈대 구성 (with 풀무원투오 홈페이지)텍스트 수직 정중앙 시키기기타 꿀팁들(html,css,js)수업 때 질문들 Q&A1. 홈페이지 기본 뼈대 구성 with 풀무원투오 홈페이지https://2o.pulmuone.com/main/main.php 풀무원투오 2o.pulmuone.com실습시간에 ..

• format_list_bulleted TIL(Today I Learn)
• · 2024. 7. 24.
• textsms

[데브코스 FE] 1주차 세번째 수업 2024/07/18

3번째 수업에서는 악명높은 css의 grid, position에 대해 배웠다.그리고 알고있었지만 낯설었던 가상요소와 transform에 대해서도 배웠다. grid를 사용하면 레이아웃을 좀 더 자유롭고 유연하게 할 수 있고position과 가상요소, transform을 이용하면 이미지나 아이콘등을 자유롭게 원하는 위치에 배치할 수 있다. 참고로 실습시간에 진행했던 카드뒤집기는 따로 블로그 글으로 작성해두었다!2024.07.18 - [CSS] - CSS 만으로 카드 뒤집기 애니메이션 구현해보기(transform) CSS 만으로 카드 뒤집기 애니메이션 구현해보기(transform)오늘은 카드에 마우스를 올렸을때, 카드가 뒤집히는 애니메이션을 구현해보고자 합니다. 카드 3개를 만들기 위한 기본적인 html 뼈대..

• format_list_bulleted TIL(Today I Learn)
• · 2024. 7. 22.
• textsms

[데브코스 FE] 1주차 두번째 수업 2024/07/17

두번째 수업에는 주로 CSS 에 대해 배우고 실습을 진행하였다. 솔직히 프로젝트를 여러개 진행해보면서CSS는 식은 죽 먹기 아니야? 하고 가볍게 수업에 임했는데이런 나자신을 반성하게 되는 수업이 됐다... CSS 선택자 적는것도 생각보다 룰이 까다로웠고(지금까지 대충 클래스 남발해서 적음) 지금까지 css가 가끔씩 적용이 안될때가 있었는데 그것이 css 우선순위 때문임을 깨달았으며 css 상속이나 변수를 활용하는 것에 있어 아직 나는 주니어구나...^^ 하는 깨달음....  일단 2일차에 새롭게 배운 내용들을 블로그에 기록해보려고 한다!학습내용 태그css 우선순위css 선택자폰트(상속 및 변수 활용)반응형 레이아웃수업 때 질문들 Q&A1. 태그태그는 단독으로 쓰는 것보다, 태그와 함께 감싸서 쓰는 것이..

• format_list_bulleted TIL(Today I Learn)
• · 2024. 7. 21.
• textsms

[데브코스 FE] 1주차 첫번째 수업 2024/07/16

프론트엔드 엔지니어링 데브코스에 합격하고나서7월부터 12월 중순까지 데브코스 FE 과정에 참여하게 되었다! 사실 데브코스 지원하기 전에 SSAFY를 지원했다가 면접때 떨어져서 낙심하고 있었는데,데브코스라는 프론트엔드 전문 코스가 있어서 지원하였고 합격하게 되어서 너무 기뻤다. 프론트엔드 개발자를 함께 꿈꾸는 사람들과공부하면서 배우는 것들을 놓치지 않도록배운것들을 주차별로 꾸준하게 기록해보려고 한다.학습내용HTML 올바르게 사용하기웹페이지 HTML 표준 구조 나누기 및 주의할점에밋 사용법실습 진행하면서 했던 질문들 Q&A1. HTML 올바르게 사용하기🔍 UTF-8 이란?유니코드를 인코딩(encoding)하는 방식이다. 전세계에서 사용하는 약속이다.모든 언어의 문자를 인코딩 가능하게 만들어주는 것이다.(한..

• format_list_bulleted TIL(Today I Learn)
• · 2024. 7. 21.
• textsms

CSS 만으로 카드 뒤집기 애니메이션 구현해보기(transform)

오늘은 카드에 마우스를 올렸을때, 카드가 뒤집히는 애니메이션을 구현해보고자 합니다. 카드 3개를 만들기 위한 기본적인 html 뼈대 구조,애니메이션을 구현하기 위한 사전 css 지식, 마지막으로 완성된 css 코드 이렇게 3개의 순서로 살펴보고자 합니다.html 구조최상위 컴포넌트 └ div class="card" 3개 └ 각 카드당 2개 (각각 앞 뒷면 담당) └ (카드 이미지 담당) 카드 뒤집기 ..

• format_list_bulleted CSS
• · 2024. 7. 18.
• textsms