콘텐츠기획자의 IT입문서

이번 과제는 내가 좋아하는 프론트엔드 작업 뜯어보기다! 어떤 프로덕트를 선정할까 고민하다가 음악 스트리밍 서비스 '바이브'로 선정하였다. 바이브는 웹과 앱을 모두 지원하며, 웹 페이지의 경우 반응형 웹으로 구성되어 있다. 앱 서비스의 경우 코드를 확인할 수 없으니 웹 페이지를 바탕으로 어떤 식으로 서비스가 구성되어있는지 살펴보려 한다. 모든 페이지를 다루려면 꽤 많은 시간이 소요될 것 같아 메인화면에서의 HTML, CSS를 파악하고 어떤 식으로 동작하도록 설계되어있는지 분석해보았다! (그래도 많아서 스크롤 압박 예상됨^_ㅠ) HTML : 콘텐츠의 레이아웃 바이브의 index 페이지는 크게 , 'container'라는 이름을 가진 , , 'player'라는 이름을 가진 태그로 구성되어 있다. 대부분의 웹 ..

포트폴리오를 위해 작업했던 팀프로젝트 2개 모두 백엔드 중심에다가 실제로 배포가 되지 않았다 보니 스스로 얼만큼 작업을 할 수 있는지 역량 파악이 어렵다는 피드백을 받았다... 그래서 급 작업해보는 중인 도너츠샵 페이지 한 4시간 작업한 것이라 index 틀 잡고 script만 작성해보았다. 리소스들은 다 구글링해서 조합한 것들이고 오늘까지 한 것은 총 5시간 정도 소요되었음. (그중 원하는 이미지 찾는데만 1시간 30분 넘게 소요된듯..) 반응형 괴로운데 재밌음.. 아무래도 내가 모바일 사용이 높다보니 반응형 포기 못해~!~!

- 문제점 - 은 파일 선택 버튼과 파일명이 출력되는 부분이 하나로 되어있기 때문에 스타일을 변경하고자 해도 생각한대로 잘 안된다. 이럴 경우 을 통해 스타일링을 해주면 된다! 1. label과 input을 연결한다. 2. input을 hidden 처리한다. 3. 스타일을 label에 적용한다. 나는 추가적으로 파일명을 노출 시키고 싶어서 이 부분은 스크립트로 작동되게 했다. jQuery만 썼더니 자바스크립트로 어떻게 작성해야할지 너무 헷갈린다..^_ㅠ (리액트 공부 전 다시 자바스크립트부터 공부해야겠다.) 에 변화가 있을 경우 에 파일명을 노출 시킬 것이라 에 onchange로 기능을 주었고 스크립트는 아래와 같이 작성해주었다. function addImg(){ var fileName = documen..

CSS 길이 단위는 생각보다 많다..! 그래서 실제로 뭘 써야할지 잘 모르겠다ㅜ 우선 고정은 px, 반응형에 따라 사이즈 변화가 필요할 경우 %, em을 쓰고 있긴한데 (이유도 모른체 폰트 사이즈도 px로 주는 나란 사람..ㅎ) 그외 다양한 단위들은 왜 있는 것이며... 어떤 경우에 써야하는지 문득 궁금해져서 서치 후 정리해본다. CSS 길이 단위 1. 절대 단위 단위 사이즈 (px 기준 반올림 적용) 설명 cm 37.8px mm 3.8px in 96px px 1px - 모니터에 따라 상대적인 크기를 가짐 - PC버전 코딩에서 주로 사용 pt 1.3px - 인쇄용 단위 - 주로 문서에서 많이 사용하는 단위 - 크로스 브라우저 결과가 매우 다를 수 있어 웹에서는 사용하지 않는 편 pc 15.6px 2. 상..

맥북 계산기 따라 만들기 계산기 구조 form, input 태그만으로 계산기 구성한다. 계산기 결과창 및 버튼인 input 태그들을 div로 감싼 뒤 id를 주어 묶는다. input태그들의 클래스는 버튼 색상을 참고하여 result, clear, zero, operator로 구성. type이 button인 input 태그는 버튼 클릭시 document.forms.result.value로 작동하도록 구성. CSS를 통해 스타일 디자인 음.. 그리드로 해서인지 result 부분만 별도 높이 조절을 못하겠다 ^_ㅠ 그래서 아직은 미완성이나 작동은 잘 됨!