본문 바로가기
반응형

전체 글130

[CSS 기초] 마진 vs 패딩 차이, 박스 모델 완벽 이해하기 CSS에서 요소의 여백과 레이아웃을 조정하는 가장 기본이자 중요한 개념인 margin, padding, 그리고 박스 모델(Box Model)에 대해 정리해보았습니다. 1. 마진(Margin)이란?마진은 HTML 요소의 바깥쪽 여백을 설정하는 속성입니다.요소와 요소 사이의 간격을 조절할 때 사용하며, 외부 여백이라고도 부릅니다. 1) 주요 특징인접한 다른 요소와의 거리를 조절합니다.음수 값도 허용되며, 이를 이용해 요소를 겹치게 할 수도 있습니다.단위는 px, %, em 등이 사용됩니다..margin-example { margin: 10px; /* 모든 방향 */ margin-left: 20px; /* 왼쪽만 */ margin: 10px 20px; /* 위아래 10px, 좌우 20px */} #CSS.. 2024. 7. 5.
[HTML/CSS 기초] 웹폰트, 텍스트 스타일, 자간·행간, 목록 디자인까지 총정리 HTML과 CSS를 활용해 텍스트 스타일을 더욱 세련되게 꾸밀 수 있는 방법에 대해 정리해보았습니다. !important 우선순위 설정부터 웹폰트 적용, 텍스트 장식, 그리고 목록 스타일 지정까지 다양한 속성을 알아보았습니다. 1. !important 사용법CSS에서 !important는 스타일 우선순위를 강제로 높이고 싶을 때 사용합니다. 일반적으로 인라인 스타일보다 강력하게 적용됩니다.h1 { color: brown !important;}레드향 위 예제에서는 style 속성으로 green을 지정했지만, !important가 적용된 brown이 우선 적용됩니다. #CSS우선순위 #important사용법특정 스타일을 강제로 적용하고 싶을 때 사용하는 우선순위 지정 키워드입니다. 2. CSS 외부 스타일.. 2024. 7. 4.
[HTML/CSS 기초] 멀티미디어 태그, 폼 태그, 레이아웃 구조, CSS 문법 총정리 1. CMD 도스 명령어 요약CMD 명령어는 윈도우 운영체제에서 시스템 작업을 자동화하거나 문제를 해결할 때 유용하게 사용됩니다. 대표 명령어는 다음과 같습니다.CD, DIR, COPY, DEL: 파일과 디렉터리 관련 작업 수행ECHO, PAUSE, REM: 배치 파일에서 사용되는 제어 명령TASKLIST, TASKKILL, SHUTDOWN: 시스템 관리IPCONFIG, PING, NETSTAT: 네트워크 확인 및 점검#CMD 명령어: 윈도우 명령 프롬프트에서 사용되는 시스템 제어 명령어들입니다. 다양한 작업을 명령줄로 빠르게 수행할 수 있습니다. 2. 멀티미디어 태그 사용법1) 이미지 태그 src: 이미지 파일 경로alt: 이미지가 없을 경우 대체 텍스트width, height: 크기 조절 2) 오디.. 2024. 7. 3.
[HTML] 멀티미디어 삽입과 폼 요소 태그 정리 웹 페이지를 더욱 풍부하게 만들기 위해서는 이미지, 오디오, 비디오 등 다양한 멀티미디어 요소를 삽입할 수 있어야 합니다. 또한 사용자로부터 입력을 받을 수 있는 폼(Form) 요소도 웹 페이지 구성에 있어 매우 중요한 부분입니다. 이 글에서는 HTML로 멀티미디어를 삽입하는 방법과 폼 요소를 구현하는 방법을 정리하였습니다. 1. 멀티미디어 사용하기→ 웹 페이지에 이미지, 음악, 영상 등을 삽입할 수 있는 기능입니다. 1) 이미지 삽입: 웹 문서에 이미지를 삽입할 때 사용합니다. 2) 주요 속성src: 이미지 파일의 경로를 지정합니다.alt: 이미지를 불러오지 못할 경우 보여줄 대체 텍스트입니다.width, height: 이미지의 크기를 지정합니다. 하나만 설정하면 비율에 따라 자동 조정됩니다.3) 외부.. 2024. 7. 2.
[HTML] VS Code 확장 프로그램 설치 및 HTML 기초 문법 정리 웹 개발을 시작할 때 가장 먼저 배우게 되는 언어는 HTML입니다. HTML 코드를 효율적으로 작성하기 위해서는 개발 도구인 Visual Studio Code (VS Code) 와 다양한 확장 프로그램을 활용하는 것이 좋습니다. 이 글에서는 VS Code의 확장 프로그램 설치 방법과 기본적인 HTML 문법을 정리하였습니다. 1. 프로그램 확장파일 설치비주얼 스튜디오 코드(Visual Studio Code)는 마이크로소프트에서 제공하는 무료 코드 편집기입니다.아래는 웹 개발에 유용한 VS Code 확장 프로그램들입니다.번호확장 프로그램설명1Material ThemeVS Code에 구글 Material 디자인 테마 적용2Material Icon Theme파일/폴더 아이콘을 보기 좋게 변경3Auto Renam.. 2024. 7. 1.
[SQL] SQL VIEW(뷰) 개념 정리와 실습 예제 데이터베이스를 다루다 보면 복잡한 SELECT문을 반복적으로 사용할 때, 이를 더 간단하게 처리할 수 있는 방법이 필요합니다.이럴 때 사용하는 것이 바로 VIEW(뷰)입니다. 이번 글에서는 뷰(View)의 개념과 특징, 그리고 생성 및 삭제 방법에 대해 정리하겠습니다. 1. VIEW(가상 테이블)란?VIEW는 하나 이상의 테이블이나 또 다른 뷰에서 유도된 결과 집합을 저장한 가상의 테이블입니다.기존 테이블을 직접 수정하거나 복사하는 것이 아니라, 저장된 SELECT문을 통해 실행 시점에 동적으로 데이터를 보여주는 구조입니다. VIEW의 특징데이터를 직접 저장하지 않음→ 뷰는 쿼리만 저장하며, 실제 데이터는 원본 테이블에 존재합니다.복잡한 쿼리를 단순화 가능→ 여러 테이블을 조인한 복잡한 SELECT문을 .. 2024. 6. 28.
반응형

티스토리툴바