profile
0년차 iOS 개발자입니다.
post-thumbnail

[Front-end🐥] Adobe 메인 페이지 클론!

1210~1212 : 모듈화 1213~1218 : 메인 페이지 마크업, JavaScript 1219~1220 : JavaScript 못 붙인 것, 미디어쿼리 (4단계) 1. 사이트 분석 마크업을 하기 전에 간단하게 사이트를 분석해 보았다. 사이트가 너무 길어서 안의

2021년 12월 22일
·
0개의 댓글
·
post-thumbnail

[Front-end🐥] MDN Clone

1108~1128 팀원들과 클론 스터디를 진행하기로 해서, MDN 메인 페이지를 클론해보기로 했다. BEM 방식을 사용했더니 이름 짓는데 마크업보다 더 많은 시간이 걸렸다. BEM 예시 프로젝트 와 여러 자료들, BEM을 썼다는 LinkedIn, BBC 등을 한번

2021년 12월 20일
·
0개의 댓글
·

[Front-end] #22.5 인프런 과제 리팩토링

웹 레이아웃 1개, 스마트폰 레이아웃 2개, 태블릿 레이아웃 1개, 반응형 1개를 BEM naming 적용 height는 내용에 종속적으로 - 안의 내용물이 다 달라서 높이가 달라질 수 있는데, 일괄적으로 보여야하는 요소에는 줬다. width는 줄 수 있는 큰 요소에

2021년 11월 29일
·
0개의 댓글
·
post-thumbnail

[Front-end] #21.5 Vanilla.js 페이지 만들기

1. Geo JS Challenge 마지막 날인데, API에서 정보 가져오는 것까지 간단하게 다룬게.. 대박이었다. 사실 지금까지 데이터 흐름 만들고 API 가져와서 데이터 뽑아 쓰는 부분이 좀 어려웠는데 예외처리도 없고 해서 그렇긴 하겠지만.. 되게 간단하게 끝나서

2021년 11월 29일
·
0개의 댓글
·
post-thumbnail

[Front-end🦁] #21 TIL

JavaScript 기본 문법은 한 글에 한번에 정리하기 위해서 글을 나눴다. 오늘은 처음으로 JavaScript를 들은 날인데, 사실 기초라서 간단하게 호로록 짚어주실 줄 알았더니 여러가지 실습 해보면서 처음 접하는 JavaScript type에 대한 논란(?) 이라

2021년 11월 26일
·
0개의 댓글
·
post-thumbnail

[Front-end🦁] #20 SASS, CSS 실무 팁

어제에 이어서 조건문, 반복문, 함수에 대해 진도를 나갔다.\[poistion 을 주면 inline-block 처럼 넓이 전체를 다 차지하는 속성이 없어지게 된다.border를 이용한 화살표 만들기!역시 width는 가장 큰 단위에 주고 부모의 padding을 이용해서

2021년 11월 25일
·
0개의 댓글
·
post-thumbnail

[Front-end🦁] #19 Linux, SASS

실무에서는 debian, redhat 계열을 많이 사용한다. \+) 우리는 실제 서비스를 런칭할 때 url을 사서 붙여야 함.NGINX는 웹 서버! apache가 업계 1등이었는데, 점점 무거워지면서 NGINX를 쓰는 사람들이 늘고 있다고 한다. NGINX란?추가적으로

2021년 11월 24일
·
0개의 댓글
·
post-thumbnail

[Front-end🦁] #18 Tailwind, Linux

어제의 bootstrap에 이어 Tailwind로 UI를 작성해보는 실습을 했다. (자동화순) bootstrap, tailwindcss, tachyons 많이 사용 부트스트랩 + php + mysql부트스트랩 + 워드프레스부트스트랩 + Django부트스트랩 + Nod

2021년 11월 23일
·
0개의 댓글
·
post-thumbnail

[Front-end🦁] #16.5 코테 + 프로젝트 복습

1. Winter Coding Test 프로그래머스 문제 풀려고 들어갔다가 메인 배너에 있어서 지원한 윈터코테! 2. Login Modal 재현님 코드 뜯어보기 모달 띄우는거 내거에도 붙이기. 코드 리뷰 받은 내용 뜯어보기. 현 단계에서 발전 시킬 수 있는게

2021년 11월 20일
·
0개의 댓글
·
post-thumbnail

[Front-end🦁] #16 Vending Machine, Login Modal 마무리! / CSS 실전 팁

1. Vending Machine CSS 통일성 있게 작성하자. float로 줬다면 float로! line-height로 중앙 정렬 했다면 계속 line-height로. media query : 나는 귀찮아서 주어진 디자인 크기에서만 잘 동작하게 맞추었는데 세분화

2021년 11월 19일
·
0개의 댓글
·
post-thumbnail

[Front-end🦁] #15 벤딩머신 레이아웃 구현 프로젝트

1. Animation 문자열을 글자별로 자른 뒤 입체적으로 돌리는 애니메이션을 구현해 보았다. 문자열을 자르기 위해 가져온 라이브러리 근데 단어별이 아니라 글자별이라서 조금 아쉬웠다. js 코드를 바꿔보려고 했지만... 봐도 잘 모르겠어서..... --으로 숫자

2021년 11월 18일
·
0개의 댓글
·
post-thumbnail

[Front-end🦁] #14 쿨찐 테스트🆒

조코딩 님의 수업을 듣는 날이었다. 1. 쿨jjin 테스트 마크업을 잡고, 부트스트랩을 이용했다. 부트스트랩은 클래스를 미리 만들어둬서 웹을 만들기 편하게 해주는 프레임워크인데, 디자인이 나온 페이지가 아닐 때 사용하기 엄청 편할 것 같다!! > 꿀팁✨ > J

2021년 11월 17일
·
0개의 댓글
·
post-thumbnail

[Front-end🦁] #13 Grid Project

1. Grid 1-1. 복습, holy grail layout grid 에 대해 간단하게 복습하고 어제 만든 holy grail layout 도 flex 대신 grid를 사용해서 다시 만들어 보았다. 001~003.html 1-2. grid + animation

2021년 11월 16일
·
0개의 댓글
·
post-thumbnail

[Front-end🦁] #12 Flex Project

1. 복습 1-1. font 보통 ttf 파일로 적용한다. 웹폰트로도 많이 사용한다. 웹폰트 불러올 때 깜빡임 방지 1-2. flex 복습 기본 속성들에 대해서 복습했다. #6-2 margin-right: auto; 로 잡으면 간격을 자동으로 잡아준다.

2021년 11월 15일
·
0개의 댓글
·
post-thumbnail

[Front-end🦁] #11 1만 시간의 법칙 + 반응형

1112 1. 1만 시간의 법칙 어제 진행한 수업에서 @media 를 이용해서 모바일 사이즈에 맞춘 화면 구현을 못하고 끝내서, 해당 부분부터 진행했다. 코드 리뷰와 코드에 관련된 내용은 #10에 전부 정리해 두었다.

2021년 11월 12일
·
0개의 댓글
·
post-thumbnail

[Front-end🦁] #10 1만 시간의 법칙

1111 @media query 복습, 프로젝트 실습

2021년 11월 11일
·
0개의 댓글
·
post-thumbnail

[Front-end🦁] #9 Media Query (+ z-index, CSS stacking order)

1. Coding Convention 2. 라이캣 그리기 - Animation 카드 뒤집기 3. Media Query 4. 1만 시간의 법칙 웹페이지 제작 - Media Query 5. 느낀점 모바일을 우선적으로 설계한다는게 충격적이었다. 지금까지 경험상

2021년 11월 10일
·
0개의 댓글
·
post-thumbnail

[Front-end] #7.5 tablet layout / 반응형 web

#6.5-1 에 한번에 쓰려고 했는데 생각보다 스마트폰 레이아웃 구현에서 새로 알게된 내용이 많아서 글이 너무 길어져서 태블릿 클론으로 분리하고, 프로젝트 하나인 반응형 웹까지 같이 담았다. 1. tablet layout 1-1. 태블릿 클론 1 1. header

2021년 11월 8일
·
0개의 댓글
·
post-thumbnail

[Front-end🦁] #7 CSS flex, grid / animation 맛보기

\[velog 가운데 영역이 돌아가는 효과가 나는 코드이다. 코드를 똑같이 가져가서 8개(li 요소 9개)로도 만들어보았다.소스코드(4개), 소스코드(8개)애니메이션을 위한 주요 코드만 정리했다.\[애니메이션 overflow가 height를 넘어서는 요소를 가려주는 효

2021년 11월 8일
·
0개의 댓글
·
post-thumbnail

[Front-end] #6.5 Web Clone, Font / Smartphone layout

인프런 HTML & CSS 15~16강에서 진행하는 실습을 강의 듣기 전에 직접 해보았다.소스코드최상단 nav를 global navigation bar, menu1~8이 적힌 nav를 local navigation bar라고 부른다.버튼 구현 시에는 anchor tag

2021년 11월 5일
·
0개의 댓글
·