콘텐츠기획자의 IT입문서

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

네이버페이 연동을 위해서 사업자정보를 넣어야 한다. (없으면 검수 과정에서 피드백이 오니 빠르게 대응해서 재검수 요청하면 됨!) 그중 사업자정보확인이 가능하게 구현해야하는 것이 필수인데 스타일난다 쇼핑몰의 푸터를 보면 이런 식으로 들어가 있다! 아래 링크의 개발 가이드에서 상세하게 알려주니 코드를 그대로 복붙하면 끝!! https://www.ftc.go.kr/www/bizCommList.do?key=3765 등록현황 - 공정거래위원회 본자료는 전자상거래시장에서 소비자가 정확한 사업자 정보를 가지고 안전한 거래를 할 수 있도록 전국 시,군,구에 신고된 통신판매업자의 신원정보를 전자상거래소비자보호법 제12조4항 에 따 www.ftc.go.kr HTML [사업자정보확인] SCRIPT *물음표 부분에 사업자번호..

IMG MAP 이미지의 부분마다 링크를 다르게 연결하고 싶다면 을 사용해주면 된다. 이미지 태그에는 usemap="#맵핑명" 을 추가해주고 맵 태그에는 name="맵핑명" 으로 연결해주면 적용이 된다 :) 좌표는 어떻게 구할까? 라고 한다면 포토샵, 그림판과 같은 이미지 에디터 프로그램을 통해 구할 수 있다. 포토샵으로도 좌표를 구해봤지만 이상한 곳으로 좌표가 찍히길래 그림판으로 좌표를 찾아서 적용했더니 정상 작동한다! ​ 참고로 서치하다 image map 에디터 사이트를 발견해서 나중에 쓸 일 있을까 해서 기록해 둔다. http://maschek.hu/imagemap/imgmap/ maschek.hu - Online Image Map Editor maschek.hu 반응형 MAP 좌표 기준이기 때문에 ..

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

김버그의 HTML & CSS 강의를 결제하고 강의 극초반에는 내용에 비해 비싸다고 생각했는데 26% 들은 지금 시점에서 드는 생각은 잘 선택했다는 것!!! HTML, CSS 기본이야 어디서든 무료로 배울 수 있지만 본 강의는 +어떻게 제대로 사용하는지 알려줘서 도움이 된다 :) 👇 내가 듣고 있는 강의는 요고! 👇 이미지를 사용할 때도 그 의미를 파악하는 것이 좋다. 단순하게 이미지를 넣으려면 태그를 쓰면 되지 않나? 라고 생각할 수 있지만 정말 의미가 있는 이미지가 아니라면 태그를 사용하기 보단 CSS에서 이미지를 넣어주는 것이 더 의미에 부합하다는 것! 가령 아래와 같은 카드 뉴스 형태를 제작해야 한다고 할때 어떤 방식으로 코드를 짤 것인가? 가장 먼저 생각나는 코드는 단순하게 태그를 쓰는 것인데, ..

여태 사용하는 태그 위주로 사용하다보니 Semantic하게 작성하지 못하는 듯 해서 정리하는 ! HTML을 작성 할 때 염두해야 할 사항 1. 정보전달을 위해 Semantic하게 작성 할 것 2. 위계 질서를 잘 정리하여 한 눈에 파악하기 용이할 것 내용 태그는 일반적으로 열린 태그, 닫힌 태크가 쌍으로 이룬다. attribute는 태그의 성격을 조금 더 디테일하게 만들기 위한 것으로 value와 함께 사용한다. 예) 안녕하세요 1. 구획 구분 (Sectioning Elements) *Sectioning Element 내에는 반드시 heading 태그가 포함되어야 함. (책의 목차와도 같은 의미이기 때문) 구분 태그 추가 설명 +) 추가적으로 구역을 나눌 때 알아둬야 할 태그 : 도입부 (어디든 사용 가..

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

HyperText Markup Language 정보를 표현하기 위해 방법들을 구조화한 언어 HTML의 구성 요소들은...? 1. 태그 : 정보 전달을 위해 각각의 의미에 맞춰서 사용해야 한다. 2. 속성값 3. 텍스트 : 보여지는 문자 정보 HTML의 구조와 필수 TAG 구분 태그 설명 문서 형식 선언 - Document Type Declaration - HTML에서는 필수적으로 사용해야한다. - 선언을 하지 않으면 문서를 대충 자기방식대로 표현하기 때문!! 즉, 오류 없이 잘 렌더링 해달라는 선언 HTML - 제작하고 있는 html 문서의 시작과 끝 - , 만이 안에 속 할 수 있음 - 화면에 보여지는 정보를 어떻게 보이게 할 것인지에 대한 정보 - 필수 태그 : - 그외 포함하는 태그 : , , - ..