최신 글

  • 왕복 4시간 걸리는 웹에이전시 출근 3주차 후기

    왕복 4시간 걸리는 웹에이전시 출근 3주차 후기

    와 벌써 출근한지 3주차가 다 되어간다. 출퇴근 시간 때문에 걱정하고 어리바리하게 출근한 첫날이 바로 며칠 전 같은데 직장인의 시간은 정말 빠르게 지나가는것 같다. 국비수업을 첫 계기로 웹퍼블리셔 공부를 하고 몇 년간 취업을 하지않았기 때문에 그 기간동안 과연 내가 취업을 할 수 있을지 여러모로 고민이 많았는데 내가 출근을하고 있다는게 아직도 얼떨떨하고 신기하다. 왕복 4시간 출퇴근회사 출퇴근은... 왕복 4시간이지만 생각보다는 할만하다. (물론 아직 3주차라서 그럴 수도 있다) 원래는 출퇴근 시간을 잘 활용해서 인강도 보고 책 읽으면서 다녀야지! 했는데 공부는 무슨 지옥철 겪으면 넋빠져서 그냥 넋놓고 다니거나 웃긴거 보면서 다니는게 최선이었다^^ 한 번에 쭉 가기라도 하면 좀 편할텐데ㅎ 출근할 때마다 ..

  • 웹퍼블리셔 취뽀 완료

    공부를 기록하던 블로그를 여기서 velog로 옮겨 버려서 여기를 방치하다가 조회수가 꾸준히 나오는걸 보고 여기를 그냥 방치하는게 좀 아까워졌다. 국비 수업을 들은 이후 방황하던 21년도부터 공부하던걸 기록하던 곳이라 나름의 추억이 담기기도 했고? 퍼블리셔 면접을 보러 다니면서 여기에다가 면접 기록, 면접 일기나 후기 같은 것을 써보려고 했는데 놀랍게도 처음 간 면접에서 한 번에 붙어버려서 그 계획도 무산이 되었다. 그동안의 걱정과 불안이 무색하게도 첫 면접에서 규모있는 웹에이전시에 합격하게 됐다. 회사 건물도 그렇고 여러가지 시스템도 굉장히 마음에 들고 팀원분들도 친절하셔서 즐겁게 다니고 있다. 재직하면서 이런 저런 실수도 할 테고 앞으로 5주간은 과제 받으면서 피드백 받을테니 그런것들을 기록해보려고 한..

  • 4주차: 디자인 시안으로 코딩하기

    4주차: 디자인 시안으로 코딩하기

    실무에서 처럼 디자인 시안을 받았다고 가정하고 작업했다. bg 사용할 때는 span class="blind"로 텍스트 플라인드 처리하고 이미지 설명 img 사용할 때는 alt 꼭 써주기 > 리더기가 읽기 때문에 디자인 시안 종류 psd는 용량이 크고, 폰트 영역을 잡거나 이미지를 저장할 때 힘들다. 피그마, 재플린, xd는 이미지 1배수, 2배수, 3배수 등 배수 별로 이미지를 다운로드 가능, 폰트도 누르면 바로 카피가 가능하므로 사용이 쉽다. 피그마, 재플린, xd로 시안을 받으면 360 이나 380 포토샵으로 시안을 받으면 640, 720 > 2배수 (해상도 때문) 올바른 태그 사용 영역에 대한 제목 콘텐츠에 대한 제목 문장강조, 게시글 제목 단어강조, 이벤트기간 작성자 작성일 전화번호는 a태그로 전..

  • [JS] async vs defer, 스크립트를 HTML에 포함할 때 효율적인 방법

    [JS] async vs defer, 스크립트를 HTML에 포함할 때 효율적인 방법

    HTML에서 스크립트를 포함할 때 어떤게 더 효율적인 방법일까? 사용자가 HTML을 다운 받았을 때 브라우저는 HTML 마크업을 위에서부터 한 줄 씩 분석하고 이해한 것을 CSS와 병합해서 DOM 요소로 변환하게 된다. 끝부분에 script를 넣는 경우 body의 내용이 렌더링 된 이후 async 속성 사용 브라우저가 를 만나면 다운로드와 동시에HTML 파싱이 진행되며 스크립트 다운이 완료되면 스크립트를 실행하고 HTML 파싱은 멈춘다. async 속성의 스크립트는 DOM 요소를 조작하지 않고 앞뒤에 로드되고 실행될 스크립트와 의존성이 없는 코드를 포함시키는 것이 좋다. HTML 파싱 > 스크립트 발견 > 파싱과 동시에 스크립트 다운 > 스크립트가 로드되면 HTML 파싱을 멈추고 스크립트 실행 > 나머지..