개발자 9Diin의 개발일기

렌더링이란 무엇일까? 렌더링이란 HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말한다. 브라우저마다 다르겠지만, 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있다. 크롬은 블링크(Blink), 사파리는 웹킷(Webkit), 파이어폭스는 게코(Gecko)라는 렌더링 엔진을 사용한다. 렌더링 과정 1. DOM(Document Object Model), CSSOM(CSS Object Model) 생성 사용자가 브라우저를 통해 웹 사이트에 접속하면, 서버로부터 HTML, CSS 등 웹 사이트에 필요한 리소스를 다운로드한다. 브라우저가 페이지를 렌더링 하려면 먼저 HTML 코드는 DOM, CSS는 CSSOM 트리를 생성해야 한다. 1.1 DOM 트리 생성 - ..

안녕하세요, 프런트엔드 개발자 '손재'입니다. 프런트엔드 개발자라는 업을 가진 지 벌써 2달이 지났습니다. 아직 수습 기간이라 Vue.js 공부를 깊게 하고 있지만, 공부를 하면서 어려웠던 점, 그 어려웠던 과정을 기술 블로그 작성을 통해 기록하고 있는데요. 공부를 하면서 미니 프로젝트를 진행할 때마다 오늘 포스팅의 주제인 파비콘(favicon.ico) 파일을 가장 먼저 생성하곤 합니다. 파비콘 파일을 가장 먼저 생성하는 이유는 프로젝트를 할 때 상용되는 일종의 관례는 아니고, 그냥 개인적으로 저의 습관입니다. 그냥 파비콘 아이콘을 미리 생성해놓고 설정해놔야 지금 내가 만들고 있는 웹의 이름과 얼굴을 지어주는 느낌이랄까? 그래서 오늘은 간편하고, 쉬운 파비콘() 파일을 만드는 방법과 어디서 쉽게 만들 수..

안녕하세요, '손재의 파이프라인' 블로그 주인장 '손재'입니다. 웹디자인 프런트엔드 개발자가 되기 위한 도전을 한 지 이제 딱 두 달이 넘었네요. 두 달 동안 하루 8시간씩 학원에서 시간을 보내면서(물론 매일 8시간을 집중하진 않음) 나름 열심히 했다고 말은 못 하겠지만, 최근 들어 다행히도 재미를 붙여 html과 css를 활용해 웹페이지를 야무지게 만들어보고 있습니다. 제가 이번에 만들어 본 웹페이지는 https://dribbble.com/shots/15826286-Wine-shop-Just-relax 이 웹사이트에서 해외 개발자분이 올려놓은 걸 연습 삼아 따라 해 봤습니다. Wine shop Just relax dribbble.com 이 개발자분이 만들어 놓은 사이트는 반응형까지 구현을 하셨는지는 모..

안녕하세요, '손재의 파이프라인' 블로그 주인장 손재입니다. 오늘은 HTML과 CSS로 만들어본 간단한 지하철 노선도 웹디자인을 한 번 보여드릴까 해요. 저는 어디까지나 초보자이기 때문에 딱 디자인 구현 정도만 할 줄 아는 상태라서 퀄리티는 굉장히 떨어진답니다. 그래도 제가 놀고 있는 게 아니라 조금씩 실력이 느는 걸 기록하고 싶어 포스팅하는 것이니까 너무 나쁘게만 보지 말아 주세요. 그럼 시작하겠습니다. 반응형 작업은 아직 하지 않았고, 제가 만들고 싶은 웹 페이지의 확대 모습이라고 보시면 될 것 같아요. 우연히 2호선을 타고 가는데 지하철 창문 밖 틈새 사이로 보였던 노선 이름의 디자인을 보고 문들 떠올라 서울시에도 각 지하철 역마다 어떤 맛집, 관광지, 볼거리 등이 있는지 유저들이 직접 소개해주는 ..

안녕하세요, '손재의 파이프라인' 블로그 주인장 '손재'입니다. 2021년 04월 15일부터 7일간 포토샵과 일러스트를 맛보는 시간을 거쳐, 정확히는 04월 22일부터 현재까지 약 50일 간 국비지원을 받아 웹퍼블리셔 / 프런트엔드 과정을 듣고 있습니다. 아시는 분들은 모두 아실 테지만, 사실 국비지원 과정을 통해 프런트엔드 개발자가 된다는 건 생각보다 어렵고, 국비지원과정 커리큘럼 과정 자체가 프런트엔드까지 다루기엔 굉장히 시간이 부족합니다. 그래서 저도 처음엔 프런트엔드 과정까지 배울 수 있겠구나 싶었지만, 생각보다 배울 컴퓨터 언어가 굉장히 많기도 하지만 HTML, CSS, JavaScript를 배우는 것도 버겁지만, 이를 최대한 활용하는 수준까지 되는 것도 힘들 것 같다는 생각이 들더라고요. 그래..

안녕하세요, '손재의 파이프라인' 블로그를 운영 중인 주인장 '손재'입니다. 지난 4월 22일부터 저는 본격적으로 국비과정으로 진행되는 웹디자인 프런트엔드 과정을 수강 중에 있습니다. IT 개발자 직업군에는 특히 국비지원 과정에서는 생각보다 전공자보단 비전공자의 비율이 훨씬 높습니다. 그래서 아무래도 비전공자들은 처음부터 이해하기가 어렵기도 하지만, 따라가는데 급급할 수밖에 없지요. 그래서 무엇보다도 복습이 철저하게 진행돼야 하는데, 이곳을 빌어 저는 개인적인 복습도 진행하면서 제가 만든 자료와 공부 내용도 공유하고자 이렇게 포스팅을 진행하게 되었습니다. 'CSS의 정의' 기초 편을 보기 전에 아래 링크를 클릭하여 'HTML의 정의'편을 가볍게 보고 오시길 바랍니다. https://sungjaecloud..

안녕하세요, '손재의 파이프라인' 블로그 주인장 '손재'입니다. 저는 국비지원을 받으면서 프런트엔드 과정 수업을 듣고 있는데요. 이제 한 달 반 정도의 시간이 흘렀는데 제대로 된 웹 페이지 하나 구현할 줄 모르기에 여간 답답한 심정이 아닐 수 없습니다. 물론, '웹 디자인'이라는 분야에 입문한 지고작 한 달 반 밖에 되지 않았지만, 그래도 제가 너무 멍청한 건지 노력이 부족한 건지 모르겠지만, 아무튼 실력이 하나도 늘지 않았습니다. 그래도 포기하지 않고, 공부를 하고 있습니다. 초심을 잃지 않기 위함도 있고, 다시 기초부터 다지기 위해 오늘은 HTML의 정의에 대해 공부하고자 개인적인 기록을 남겨보겠습니다. 오늘 우리가 알아볼 파트는 바로 프런트엔드 과정에서 기초가 될 수 있는 HTML과 CSS 중 HT..