본문 바로가기

html5

프로그래머스 Dev-Matching 2021 상반기 과제 올해 상반기 프로그래머스 Dev-Matching을 준비하면서, 지난해 상반기 과제를 풀어보았다. 과제 개요 https://programmers.co.kr/skill_check_assignments/100 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 고양이 사진과 파일 정보가 담긴 API로 일종의 사진 탐색기를 만드는 것이 과제이다. 다른 모듈을 사용하지 않고 바닐라 JavaScript로 만들어야 하며, 제한 시간은 3시간이었다. 우선 첫 화면(root)을 렌더링하는 함수를 구현했다. async/await 비동기 함수로 만들었고, 여기서 Loading은 .. 2022. 3. 12.
[HTML] HTML 마크업 한 눈에 보기 말이 필요없다. div 덕지덕지 하지 말고 웹 표준 잘 지켜서 마크업해보자. 2021. 11. 4.
[HTML] table 구성 익숙해지기 과거에도 HTML로 표(table)을 몇 번 만들어봤지만, 할 때마다 헷갈린다. 멋사 강사님께서 친절하고 디테일하게 알려주시긴 했지만, 결국 내가 해보지 않으면 아무런 의미가 없다. (표 만드는 것이 아니더라도, 코딩은 무조건 내가 해야 는다!) th th th th th td td td td td td td td td td Table Row = 로 한 줄을 묶어야 한다. , , , 을 활용하여 웹 접근성을 향상시킨다. (없어도 상관은 없음) 셀 병합은 가로로 합칠 땐 colspan, 세로로 합칠 땐 rowspan을 사용한다. table에서 중요하게 챙길 것은 위의 세 가지로 요약해볼 수 있겠다. 테이블 제목 구분 도서명 가격 판매량 1 Hello 1,000 1 2 Apple 2,000 2 3 Romeo.. 2021. 11. 4.
[HTML] emmet 문법으로 생산성 부스트업 하기 HTML 마크업을 하다보면 비슷한 태그를 여러개 써야 하는 수고로움이 많이 생긴다. 과거에 마크업을 할 때, 나는 항상 괄호 열고 쓰고 괄호 닫고를 노가다로 반복해왔는데 참 지루하고 성가시다고 여겼다. 그런데, 멋사 프론트엔드 스쿨을 통해서 emmet 문법으로 손쉽게 여러 태그를 만들어내면서 생산성을 '향상'하는 수준이 아니라 로켓을 단 수준으로 부스트업할 수 있다는 사실을 알았다. 그동안 괄호 열고 닫고 한 시간이 너무 아깝다 ^^;;; h1 h1{hello world} hello world h1+p h1{hello}*3 hello hello hello h1#one h1.one 입력할 때, emmet 문법으로 입력하고 키보드의 Tab을 누르면 자동으로 완전한 코드로 변환된다. 예컨대 'h1'을 입력하고.. 2021. 11. 2.
[FE-0] 멋쟁이사자처럼 프론트엔드 스쿨 OT 코딩에 관심있는 사람이라면 한 번은 들어봤을 멋쟁이사자처럼🦁 평소 서비스기획과 Product Owner 업무에 관심이 많았고, 앱웹 서비스를 쓰면서 인터페이스를 이렇게 바꾸면 더 유저 경험이 개선될텐데 하는 고민도 갖고 있었다. 그러던 도중, 알 수 없는 인스타그램 알고리즘이 멋쟁이사자처럼에서 프론트엔드 과정 스쿨 1기를 모집한다는 소식을 전해주었고 며칠을 고민하다가 자기소개서와 인터뷰 영상을 촬영해보냈다. 솔직히 자기소개서와 인터뷰 영상에는 긴 시간을 투자하진 않았다. 프론트엔드 스쿨 수료 후 해보고 싶은 것들을 정리하는데 집중했고, 인터뷰 영상도 나의 솔직한 생각을 의식의 흐름대로 말하고 적당히 편집해서 제출했었다. 생각해보면 이런 점이 오히려 합격의 큰 이유지 않을까 스스로 자평해본다. :) OT는.. 2021. 11. 2.