개발자 9Diin의 개발일기

🤷‍♂️ 개요 언제나 그렇듯 하나라도 모르고 개발하는 것보다 가장 기초적인 개념이라도 알고 넘어가자는 의미에서 작성하게 되었다. 그런데 CSS 전처리라고 불리는 것이 SCSS, SASS라고 있던데, 이것이 정확히 뭐가 다른 건지 한 번 살펴보고자 한다. 😎 요약 결론만 짧게 그리고 간단하게 정리해보자면, SCSS와 SASS는 CSS를 편리하게 이용할 수 있도록 도와주며 , 스타일시트가 점점 더 커지고 용량도 많아지고 복잡해지는 까닭에 유지보수가 어려워지고 있어서 이를 보다 편리하게 관리할 수 있게 도와주는 CSS 전처리기라고 볼 수 있다. 그래서 CSS를 편리하게 이용할 수 있도록 도와주며 추가 기능도 있는 확장판(CSS를 확장하는 스크립팅 언어) 정도로 생각하면 좋다고 말할 수 있을 것 같다. 😜 자세..

https://sungjaecloud.tistory.com/339 JSDoc이란 무엇인가? 최근 스타트업에 이직을 하게 되면서, 개발자로서 무지함과 부족함 그리고 여러 가지 만감이 교차하는 요즘이다. 그래도 아직 개발이 너무 재밌기에 웹 프런트엔드 개발자로서 내 역량과 나를 sungjaecloud.tistory.com 위 포스팅에 이어 빠르면 내일 늦으면 차주부터 새로운 회사에서 새로운 업무에 투입이 될 예정이라, 이곳에서 현재 작업하고 있는 작업자들의 스타일과 개발 규칙들을 익힐 필요가 있다고 생각하여 'JSDoc이란 무엇인가?' 포스팅에 이어 'CSS Variables란 무엇인가?'라는 근본적인 질문에 답을 해보는 시간을 가져볼까 한다. 1️⃣ What are CSS variables? Custom ..

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

안녕하세요, '손재의 파이프라인' 블로그 주인장 '손재'입니다. 웹디자인 프런트엔드 개발자가 되기 위한 도전을 한 지 이제 딱 두 달이 넘었네요. 두 달 동안 하루 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..