본문 바로가기
반응형

전체 글132

VSCode 코드 글자 확대 - Ctrl + Mouse Wheel 줌 세팅하기 VSCode 코드 글자 확대 - Ctrl + Mouse Wheel 세팅하기 업무를 위해서는 이제 듀얼 모니터 사용이 디폴트가 된 시대 같은데요, 얼마 전 구매한 포터블 모니터로 노트북고 함께 작업을 하곤 합니다. 포터블 모니터는 15인치에 해상도가 2560 x 1600 이다보니, 1:1 비율에서 글자가 매우 작게 보이더라구요. 깨알 같은 코드들을 살펴보자니.. 어이쿠 눈이야... 싶습니다. 윈도우에서 디스플레이 배율을 높이는 방법도 존재하지만, 이렇게 하면 디자인 작업할 때는 또 눈대중이 많이 달라지더라구요. 그래서~! VSCode에서 코딩을 할 때만, 가독성을 위해 글자를 키워서 사용하곤 합니다. Ctrl + / Ctrl - 컨트롤키(Ctrl)를 누른 채로 플러스(+) 키를 누르면 화면이 확대되고, 컨.. 2023. 1. 13.
CSS 선택자? 우선 '#', '.' 2개만 기억하세요 CSS 선택자(CSS Selector) CSS는 뼈대를 이루는 HTML 문서에 피부(또는 옷)를 입히는 역할을 해줍니다. 예쁘게 꾸며주는 역할을 합니다. 그래서 원하는 곳에 변화를 잘 주려면, 원하는 위치를 잘 콕~ 찝어 내는 게 중요해집니다. 프로그래밍 혹은 코딩이라는 건 결국 컴퓨터를 시켜서 '손 안대고 코를 푸는 것'입니다. 그래서 CSS를 이용해서 스타일링을 할 때에도 '무언가를 선택하는 일'은 매우 중요한 기능이 됩니다. section과 div 사용해서 의미론적으로 구분해보기 누구나 잘 알고 있는 를 이용해서 간단하게 HTML 문서를 마크 업 해보았습니다. 이번에는 section, div를 사용해서 의미론적으로 구분을 해볼 수 있도록 했습니다. 애국가 동해물과 백두산이 마르고 닳도록 하느님이 보.. 2023. 1. 12.
Form 전송에 대한 이해 기초(+ 매우 중요한 label 태그) Form 전송에 대한 이해 기초 html을 공부하다가 태그에 대해서 배우기 시작하면, 드디어 뭔가 프로그래밍 적인 단계에 들어서게 되는 느낌이 듭니다. 뭔가를 입력 받고 서버로 전송하고 할 수 있는 기능이 바로 태그의 역할이기 때문입니다. form의 사전적의미는 '입력양식'들을 의미하는데요, 사용자에게 입력 받게 되는 입력란들과, 그것을 서버로 전송하는 버튼은 모두 ~ 사이에 위치하게 됩니다. 버튼도 form 태그 안에 포함되어 있어야합니다.(Javascript를 사용하지 않는다는 전제하) 로그인창 UI를 이용한 예제 가장 흔하게 접할 수 있는 form 예제는 바로 화면일 것입니다. 사용자가 ID와 PW를 입력하고 버튼을 눌러 입력한 값을 서버로 전송하면, 로그인을 시켜줄지 말지를 실행하게 되죠. 아래 .. 2023. 1. 11.
[HTML] <div> 태그와 <span> 태그의 차이는? 태그와 태그의 차이 예전에 HTML을 공부하면서, div와 span의 차이에 대해서 개념을 제대로 이해하지 못하던 시기가 있었습니다. 지금 돌아보면 진짜 별것도 아닌 내용인데 말입니다. 그냥 문득 그 때가 생각이 나서 조금 기록을 해봅니다. HTML 학습요령 HTML 학습에만 해당하는 내용은 아닐 것 같은데요, 저는 일단 비슷한 녀석들이 눈에 띄이면 '어떻게 서로 다른가?'라는 측면으로 비교해두는 편입니다. 머리가 나빠서 그런지 그런 임팩트를 줘야 이해가 쉽고, 기억에 남더군요. 그래서 div와 span 태그의 경우에도 이해가 되지 않던 개념을, 상호 비교를 통해 비로소 명확하게 이해를 할 수 있게 된 것 같습니다.(머리가 정말 나빠요...ㅜ.ㅜ) div : division, '구분, 구역' 정도의 의미.. 2023. 1. 10.
HTML / CSS / Javascript 각자의 역할은 무엇일까? HTML / CSS / Javascript 각자의 역할은 무엇일까? 아들놈들이 언젠가 코딩에 관심을 갖고 시작하게 될 때, 한번 봐주었으면 하는 마음으로 웹페이지 제작에 관한 기초적인 내용을 정리해둡니다. 우리는 크롬, 엣지 등의 브라우저를 통해 다양한 웹사이트 혹은 웹페이지에 접속할 수 있습니다. "접속"이라는 표현을 쓰다보니 어딘가로 찾아가서 웹페이지를 열람하는 것으로 이해하기 쉽지만, 사실 이전 포스팅에서 살펴본 GET요청 방식으로 요청을 한 후 "내 컴퓨터"에 내려 받은 웹페이지를 열람하는 것이 인터넷의 특징입니다. 즉, 서버에 '접속'한 후 요청한 웹페이지를 결국 내려 받기 위해 인터넷이라는 망이 필요해지는 것 뿐입니다. 아무튼 인터넷을 탐험하는 브라우저들은 그렇게 동작하고 있었습니다. 사람으로.. 2023. 1. 9.
Node.js + Express로 초간단 서버 만들기, 3분 컷 Node.js + Express로 초간단 서버 만들기 '서버'라는 말을 들으면 어떤 이미지를 떠 올리시나요? 대부분의 사람들은 아마도 이런 형태를 떠올릴 것이라 생각합니다. 뭔가 대단히 복잡한 기계장치로 보이고, 대단히 이해하기 어려운 장비처럼 보입니다. 그런데, Server라는 것은 생각보다 "간단"하다는 사실을 알고 계시나요? 서버가 별건가? 서버는 간단하게 서버는 Server입니다. 즉, 원래 뜻은 식당 등에서 서빙을 하는 사람을 지칭합니다. 삼겹살 2인분 갖다 달라면 갖다주는 분이 바로 'Server'인 것이죠. 한국에서는 '고깃집 알바생'이라고 봐야 할라나요? 컴퓨터 세계에서 말하는 서버의 개념도 비슷합니다. 사용자가 무엇인가를 '요청하면 요청한 걸 갖다주는 프로그램'입니다. 컴퓨터 서버 세계의.. 2023. 1. 8.
반응형

티스토리툴바