All'alba vincerò

At dawn, I will win!

2024/04 27

HTML 태그 총 정리

📌  DOCTYPE: 문서의 형식을 지정하는 역할웹 브라우저에게 해당 문서가 어떤 HTML 버전으로 작성되었는지 알려준다.DOCTYPE 선언에는 종종 DTD를 참조하는 URL이 포함된다.이 URL을 통해 브라우저는 해당 DTD를 가져와 문서의 구조를 검증하고 올바른지 확인할 수 있다.  📌 DTD (Document Type Definition): 문서 내에서 사용할 태그를 정의하기 위한 일련의 구문 규칙 XML 문서의 구조와 유효성을 정의하는 것DTD로 명시되는 규칙은 요소(element) 및 선언들의 집합이 포함웹 문서 등에 대해 유효 요소(element)들을 이용해 문서 구조를 정의  🔺 XHTML DTD의 3가지 타입Strict 타입 : CSS를 포함하는 정형화된 마크업이 필요할 때 사용 (엄..

HTML 2024.04.25

웹 표준과 웹 접근성 / HTML

📌 웹 표준(Web Standards) : HTML, CSS, Javascript, DOM 등 웹에서 표준적으로 사용되는 기술 W3C(World Wide Web Consortium)가 만들었다.  ✨ W3C(World Wide Web Consortium) : 웹 기술의 표준을 개발하고 유지하는 국제 기구 팀 버너스리(Tim Berners-Lee, 웹 창시자)가 1994년에 창설했다.웹의 발전과 표준화를 촉진하기 위해 다양한 기술적인 규격과 가이드라인을 제정한다.   📌 웹 접근성(Web Accessibility) : 모든 사용자가 웹 사이트 및 웹 애플리케이션을 이해하고 이용할 수 있는 능력 장애가 있는 사람, 고령자 등을 포함한 모든 사용자가 웹을 사용할 수 있도록 하는 것을 목표로 한다.웹 사이트..

HTML 2024.04.25

Git CLI

📌 Git CLI * git으로 관리할 폴더에서 실행  1. git init : 저장소 생성 (git 초기화) 2. git add : Staging Area로 보냄 (확정) 3. git status : 현재 상태 확인 4. git commit -m : 파일의 변경 사항에 대한 메세지 생성 5. git restore : (한 번이라도 commit 한 적 있을 때) 작업 내용 취소 6. git log : 커밋 이력 확인 7. git remote : 원격 저장소(Remote) 브랜치 8. git clone : 원격 저장소에서 로컬 저장소로 복제 9. git reset : 이전 상태로 복원 (이력 제거) 10. git checkout : 과거 커밋 이력 확인 11. git branch : 브랜치(branch)..

Git 2024.04.24

버전 관리(Version Control)와 Git 기초

📌 버전 관리 (Version Control) : 소프트웨어 등을 개발할 때 어떤 내용을 어느 시점에 누가 변경했는지에 대한 `변경점`을 관리하는 것을 의미 프로젝트의 변경 사항을 추적 이전 버전으로의 복원이나 협업을 용이하게 함 소프트웨어 개발 생명 주기를 관리하는 데 도움을 줌 🔺 VCS (Version Control System) : 버전 관리를 효과적으로 수행할 수 있는 도구  🔺 버전 관리 시스템의 종류 1. 로컬 버전 관리 시스템(Local Version Control System) : 서버 없이 로컬 컴퓨터 내에서 데이터 베이스를 사용하여 파일의 버전을 관리.  2. 중앙 집중식 버전 관리 시스템 : 서버에서 최종 버전을 관리하는 방식으로 로컬에서 서버의..

Git 2024.04.24

CLI (Command Line Interface, 명령줄 인터페이스)

📌 CLI (Command Line Interface, 명령줄 인터페이스) : 디렉토리 생성 및 이동, 복사, 이름 변경, 삭제 등을 미리 약속된 명령어를 사용하여 실행하는 환경운영체제는 기본적으로 CLI를 제공하며 Windows는 CMD(Command Prompt), Mac OS는 Terminal을 사용한다.Windows의 CMD와 Mac OS의 Terminal에서 지원하는 CLI 명령어가 다르다.  📍 GUI (Graphic User Interface, 그래픽 인터페이스) : 그래픽을 통해 사용자와 컴퓨터가 상호작용하는 방식 🔺 경로1. 루트 디렉토리 (Root Directory): 모든 파일과 폴더를 담고 있는 최상위 폴더Windows는 보통 C 드라이브를 의미..

Git 2024.04.23

[VS Code] git bash에서 log 실행 시 VS Code의 한글이 깨지는 현상

📌 현상VS Code에서 git bash로 파일을 생성하고 log를 실행했는데 한글이 깨진 현상이 발생했다.    📌 노력1번 방법code ~/.bashrc를 열어서 아래 코드 붙여넣기LANG=ko_KR.UTF-8LC_CTYPE="ko_KR.UTF-8"LC_NUMERIC="ko_KR.UTF-8"LC_TIME="ko_KR.UTF-8"LC_COLLATE="ko_KR.UTF-8"LC_MONETARY="ko_KR.UTF-8"LC_MESSAGES="ko_KR.UTF-8"LC_ALL=ko_KR.UTF-8=> 실패 ❌  2번 방법git config --global i18n.commitencoding "UTF-8" git config --global i18n.l..

Error 2024.04.23

[CSS] writing-mode / text-orientation : 텍스트 세로 쓰기 모드

📌 writing-mode : 텍스트 정렬 방향을 지정한다. horizontal-tb : 가로 정렬 - 초기값 (기본값) vertical-rl : 세로 정렬 - 블록 컨테이너의 표시 방향: 왼쪽 ⬅ 오른쪽 vertical-lr : 세로 정렬 - 블록 컨테이너의 표시 방향: 왼쪽 ➡ 오른쪽 📌 text-orientation : 한 줄에 있는 텍스트의 방향을 설정한다. 세로 쓰기 모드(writing-mode)인 경우에 효과가 있으며 수직 방향의 제목을 달때 유용하다. mixed : 우측 방향으로 세로 정렬 + 영어는 정방향 sideways : 우측 방향으로 세로 정렬 upright : 세로 정렬 출처 CSS writing-mode 속성 – 텍스트 세로 쓰기 모드 설정 - 코딩에브리바디 writing-mode..

CSS 2024.04.10

Arlet창 UI 만들기

📌 Arlet창 UI 만들기 ✨ UI 만드는 단계 1. HTML/CSS로 미리 디자인 2. 언제, 어떻게 보여줄 지 JS로 구현 목차 1. JS로 HTML 조작하는 법 2. function 함수 3. class로 찾기 4. event 실행하기 📌 JS로 HTML 조작하는 법 document.getElementById("변경할 html의 id").변경 요소 = "변경 내용"; : 변경할 html의 id의 요소를 찾아 내부의 html 변경 요소를 "변경 내용"으로 변경 HTML 요소 ⇒ Element getElementById("변경할 html요소의 id") ⇒ 셀렉터(Selector) document.getElementById("hello").style.color = "red"; 📌 JS 조작 문법 HTM..

[CSS] object-fit: 박스의 크기에 맞게 요소 크기를 조정

📌 object-fit : 요소의 크기에 맞게 태그와 태그의 크기를 조정하는 속성 📍속성 contain 비율을 유지하면서 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절한다. 딱 맞추기 때문에 남는 공간이 발생할 수 있다. cover 비율을 유지하면서 요소 콘텐츠 박스를 가득 채운다. 비율이 맞지 않으면 일부가 잘린다. fill 기본값 박스 크기에 맞춰 요소 크기를 조절한다. none 크기 조절 ❌ scale-down none과 contain 중 대체 콘텐츠의 크기가 더 작아지는 값을 선택한다. 출처 object-fit - CSS: Cascading Style Sheets | MDN CSS object-fit 속성은 나 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인..

CSS 2024.04.04