본문 바로가기

전체 글393

CSS의 Box Model (Padding, Margin, Border) Box Model이란?CSS는 모두 박스 형태로 이루어져있다. 이것을 CSS의 Box Model 이라고 한다. 이해하기 전에 아래의 그림을 먼저 보겠다. 개발자 도구에서 볼 수 있는 그림이다.Content: 우리가 실제로 눈으로 보는 내용물 (사진에서는 파란색 박스)Padding: 내용물을 감싸고 있는 여백 영역 (안 쪽 여백)Border: 내용물을 감싸고 있는 최종적인 외곽선Margin: 내용물을 감싸고 있는 외곽선 밖의 여백 영역 (바깥 쪽 여백)Box Model의 CSS 속성Content내용물이 어떤 것인지에 따라 다르다. 내용물이 글자라면 글자와 관련된 꾸밈 효과를 설정할 수도 있고 이미지라면 이미지와 관련된 꾸밈 효과를 설정할 수 있다.그러나 기본적으로 박스 모델 자체는 아래와 같이 설정하는 경.. Programing/CSS 2025. 5. 12.
CSS 속성 : 폰트의 기본 속성 서론CSS에서는 여러가지 스타일을 지정할 수 있다. 그 중에서 이번 포스트에서는 가장 기본이 되는 서체를 스타일링 할 수 있는 속성 중 가장 많이 사용되는 속성에 대해서 알아볼 것이다.CSS 폰트의 기본 속성폰트 종류 지정font-family: 'Noto Sans', Arial, sans-serif;font-family는 문서 또는 요소의 폰트를 지정하는 것이다.속성 값 개수 : 속성 값에는 개수 제한이 없지만 보통 3개, 많아야 5개 정도로 지정한다.너무 많이 적으면 성능에서 불리하기 때문에 3~5개 선에서 마무리하는 것이 일반적이다.속성 값 의미 : 첫번째 값부터 차례대로 폰트 적용을 시도한다. 사용자의 PC나 웹에 해당하는 폰트가 없으면 2순위, 3순위 폰트로 적용을 시도한다.속성 값 적용 방법첫번.. Programing/CSS 2025. 5. 12.
CSS 선택자 (Selector) CSS 선택자(Selector)란?CSS를 정의하다 보면 HTML의 특정 요소를 정확하게 선택해야 하는 일이 많이 생긴다.그렇지 않으면 의도하지 않은 대로 스타일이 적용될 수 있기 때문이다. 물론 in-line 방식으로 요소마다 전부 태그 안에 style 속성을 주어 하나하나 스타일을 적용해주면 CSS를 선택해 줄 필요는 없겠지만, 문서가 긴 경우에는 매번 그렇게 하기 어렵고, 스타일이 중복되는 경우에 재활용하는 측면에서도 비효율적이기에 CSS를 위해서 HTML 요소마다 특정한 선택자를 부여해줄 수 있다.CSS 선택자의 종류태그(tag) 선택자말 그대로 요소 자체를 이야기 하는 것이다. 즉 div 태그면 div 태그, span 태그면 span 태그 자체를 전부 통 틀어서 선택하겠다는 의미이다.사용 방법은.. Programing/CSS 2025. 4. 9.
CSS을 적용하는 방법 3가지 CSS 적용 방식 3가지CSS를 적용하는 방법, 즉 작성하는 방법은 크게 세 가지가 있다. 그런데 실무에서는 태그로 연결하는 방식 단 하나만 주로 사용하고 나머지는 거의 사용하지 않기 때문에 알고만 있으면 돼서 이번 포스트는 가볍다.in-line 작성 방식HTML 문서 내에 직접적으로 CSS를 정의하는 방법이다.인라인 방식위 예제를 보면 style 속성을 사용하여 CSS의 key:value를 직접적으로 적은 것을 볼 수 있다.이렇게 적게되면 CSS의 여러가지 적용방식 중 겹치는 부분이 있다면, 예를 들어서 인라인 작성 방식에서는 위 div의 배경색을 red로 했는데, 별도 .css 파일의 클래스 지정, 아이디 지정 등으로 다른 컬러로 또 중복해서 적어놨다면 인라인으로 작성한 CSS가 HTML 문서에 직.. Programing/CSS 2025. 4. 8.
[2025-03-14] TIL을 1년 쓰고 느낀 점 TIL이란?TIL이란 Today I Learned의 약자이다. 즉 오늘 내가 배운 것 기록해둔 자료를 의미한다.작년 이맘때 쯤 서른이 넘은 나이에 부트캠프에 처음 들어가면서, 뭔가 새로운 길이 열릴 것 같다는 기대감에 부풀었고, 평소에도 이것저것 메모하고 학습하는 것을 좋아하는 성격이었기 때문에 부트캠프에서 처음으로 소개받은 TIL 작성에 대해서 들었을 때는 충격 그 자체였다.나는 군 복무 시절부터 일기를 꾸준히 작성해왔지만 내 일기의 목적은 그 날의 생각정리, 훗날 다시 읽었을 때 내 생각의 변화를 알 수 있고 추억 속에서 휘발되기엔 아까운 나라는 사람의 인생을 기록하고 싶었기 때문이다.내가 살면서 공부했던 게 이것 뿐이겠는가? 군대에 가면 총 쏘는 방법을 알아야 하고, 경계 근무 요령에 대해서도 배워.. Programing/TIL 2025. 3. 14.
CSS의 구성 요소 (Selectors, Property, value)와 우선순위 총 정리 CSS 학습의 중요성CSS를 학습하는 데 있어서 가장 중요한 것은 직접 타이핑 해보는 것이다.퍼블리셔가 아니라 프론트엔드 과정을 희망하고 학습을 시작했다면, 이것 말고도 배워야 할 게 산더미이고 그 중에서 자바스크립트와 알고리즘, API 통신의 벽을 만나는 순간 사실 화면을 그리는 CSS의 중요도는 떨어질 수밖에 없다.뒤로 갈수록 학습량이 현저히 줄어들기 때문에 처음에 HTML과 CSS를 배우는 단계에서 명확히 이해하고 넘어가는 것이 좋다. 본인도 이미 부트캠프 전과정을 수료했고 눈에 띄는 결과물도 만들어냈지만 결국 다시 처음부터 학습하는 이유는 기본기가 부족하다고 느껴졌기 때문이다.이후에 bootstrap, NextUI, TailwindCSS 등 다양한 라이브러리를 만나게 되면서 실제로 내가 하나하나 .. Programing/CSS 2025. 3. 10.
HTML5 기본 템플릿 코드 <body> 아래에는 태그 내에 작성하는 태그들에 대해서 설명하겠다. 기본 구조 관련 태그 : 페이지 또는 섹션의 머릿말 (로고, 내비게이션 등) : 내비게이션(메뉴) 영역 : 페이지의 메인 컨텐츠 : 논리적으로 그룹화된 콘텐츠 블록 : 독립적인 컨텐츠 (뉴스, 기사, 블로그 글 등) : 보조 정보 (광고, 사이드바 등) : 페이지 또는 섹션의 바닥글 (저작권, 연락처 등)위 까지는 시멘틱 태그(Sementic Tag)라고 말한다.시멘틱 태그란 별다른 기능을 하는 것은 아니지만 "이 안에는 이런 내용이 있다"라는 것을 검색 엔진 봇에게 알려주는 것으로, html 문서를 봇이 더 쉽게 파악할 수 있게 도와주는 기능을 한다.비슷한 태그로 가 있는데, 구획을 나누는 태그로 기능을 하진 않지만 코드 내에서 영역을 구분 짓.. Programing/HTML 2025. 3. 4.
초심자 MongoDB 시작하기 MongoDB 가입하기MongoDB를 사용하는 두 가지 방법이 있다고 한다.로컬에 설치하는 방법클라우드 (MongoDB Atlas)를 이용하는 방법둘 다 해볼 것이지만 이번 포스팅에서는 두번째 방법으로 해보겠다. 로컬에 설치하는 방법을 간단히만 말하자면,https://www.mongodb.com/try/download/community 이곳에서 MongoDB Community Edition 설치설치 후 터미널에서 mongod 입력그러면 mongodb://localhost:27017 에서 MongoDB가 실행됨.이번엔 두번째 방법, 클라우드(MongoDB Atlas)를 이용하는 방법이다.https://www.mongodb.com/atlas 이곳에서 MongoDB 무료 계정을 만든다.이메일 인증을 완료하고,.. Programing/Server 2025. 3. 4.
CSS란? CSS란?Cascading Style Sheets의 약자웹 페이지의 디자인과 레이아웃을 담당HTML이 웹 페이지의 구조를 결정한다면 CSS는 그렇게 정해진 구조에 스타일(색상, 폰트 크기, 여백, 정렬 등)을 적용하는 역할등장배경원시 웹 페이지는 HTML 하나로만 구성되었다.이것들도 나름의 스타일을 적용하기 위해 아래와 같이 인라인으로 스타일을 지정했다.안녕하세요!제목입니다문제는 이러한 방식은 웹 페이지가 복잡해지면 코드가 너무 복잡해진다는 단점이 있었음.메인 컨텐츠와 디자인이 뒤섞여 있다 보니 유지보수에도 어려움이 있었음.또한 웹 브라우저를 볼 수 있는 다양한 기기가 등장함에 따라 크로스 브라우징이 필요했는데 위 방식으로는 불가능했음.그러다 CSS는 1996년 W3C (World Wide Web Con.. Programing/CSS 2025. 3. 4.
[MongoDB] 데이터를 JSON으로 한 번에 업데이트 하는 방법 ✅ 불편함MongoDB는 Compass라는 GUI 프로그램을 제공한다.그런데 GUI를 제공한다 하더라도 JSON의 DOCUMENTS가 수 천, 수 만 개가 되면 도저히 엄두가 안 난다. 다양한 보기 방식을 지원해서 CSV 형태의 테이블로 보면 수정이 편할 것 같지만, 엑셀 프로그램 같이 후다닥 할 수 있는 것이 아니다.한 셀마다 마우스로 일일이 update 버튼을 눌러줘야 수정이 가능하기 때문에, 수정해야 할 데이터가 수 십 개가 넘어가면 어떤 방식으로 수정하든, GUI를 이용하는 것은 고통스럽다. ✅ JSON 내려 받아 수정하기여러 방법이 있지만, 그 중에서 좌측 상단 메뉴에서 EXPORT DATA를 통해 JSON 파일로 내보내고, VSCODE를 이용하여 빠르게 수정한 뒤 다시 merge 하는 방법을 .. Programing/Server 2025. 2. 20.

티스토리툴바