본문 바로가기
반응형

전체 글267

카카오테크캠퍼스 2기 | STEP2 | 1일차(24-06-24) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 1일차(24-06-24) 회고📝 과제 수행 기록조별 그라운드 룰 설정 & 다짐 공유하기스케줄 결석 시 반드시 팀원들에게 알리기 📢 (결석 사유는 공유하지 않아도 됩니다).플래너는 매일 스케줄 📅, 학습일지 제출 📝, 과제 제출 마감일 등을 슬랙에 공유합니다.금요일은 21:00까지 학습 일지를 제출해야 합니다 ⏰. 1인 1역구희원 : 플래너 📅이예지 : 그룹장 🧑‍🏫조중현 : 트래커 📊허윤수 : 리액셔너 💡, 메이커 📜프론트엔드 개발자로서 제 자신이 적합하다고 생각하는 이유 중 하나는, 깔끔하게 정리된 모습을 보는 것을 좋아하기 때문입니다.Git/Github 학습하기소스트리를 많이 사용하여 익숙해졌습니다. Git 명령어로 사용해야 하는 이유는 무.. 2024. 6. 25.
카카오테크캠퍼스 2기 | 10주차(24-06-10 ~ 24-06-16) 회고 ⭕ 카카오테크캠퍼스 2기 | 10주차(24-06-10 ~ 24-06-16) 회고불변성을 유지하는 방법을 배우면서, 참조 타입의 값을 변경할 때 원본을 수정하지 않고 새로운 배열이나 객체를 생성하는 중요성을 깨달았습니다. 🧩 이를 통해 상태 변화가 명확해지고, 디버깅이 용이해졌습니다.클래스 컴포넌트와 함수형 컴포넌트의 차이점을 이해하고, Hook을 사용하여 함수형 컴포넌트에서도 상태와 생명주기 관리를 할 수 있게 된 것은 큰 수확이었습니다. useEffect를 통해 생명주기 메서드를 대체하고, 상태 변경에 따른 컴포넌트의 재렌더링을 관리할 수 있었습니다. 🔄이 프로젝트를 통해 React의 기본 개념과 상태 관리, 불변성 유지의 중요성을 명확하게 이해할 수 있었으며, 이를 통해 더욱 효율적이고 안정적인 .. 2024. 6. 19.
카카오테크캠퍼스 2기 | 9주차(24-06-03 ~ 24-06-09) 회고 ⭕ 카카오테크캠퍼스 2기 | 9주차(24-06-03 ~ 24-06-09) 회고"함수(또는 메서드)가 한 가지 일만 하도록 최대한 작게 만들어라"라는 요구사항에 맞추기 위해 최대한 노력했습니다. TodoApp(src\components\TodoApp\TodoApp.jsx) 컴포넌트를 더 작은 단위로 분리하여 상태 관리를 보다 효율적으로 하려고 시도했습니다. 이를 위해 상태를 저장하는 부분을 여러 컨테이너로 분리했으나, 이 과정에서 각 컨테이너 간에 상태가 공유되지 않는 문제점이 발생했습니다. 😓이 문제를 해결하기 위해 CONTEXT API를 사용할 수 있다는 것을 알게 되었습니다. 하지만 아직 CONTEXT API에 대한 공부가 충분히 이루어지지 않아, 이를 적용하는 데 어려움을 겪었습니다. 앞으로 고급.. 2024. 6. 19.
파이썬 Python | 백준 | 문제 10818번: 최소, 최대 ⭕ 파이썬 Python | 백준 | 문제 10818번: 최소, 최대➡️ 문제 설명N개의 정수가 주어진다. 이때, 최솟값과 최댓값을 구하는 프로그램을 작성하시오. 입력첫째 줄에 정수의 개수 N (1 ≤ N ≤ 1,000,000)이 주어진다. 둘째 줄에는 N개의 정수를 공백으로 구분해서 주어진다. 모든 정수는 -1,000,000보다 크거나 같고, 1,000,000보다 작거나 같은 정수이다. 출력첫째 줄에 주어진 정수 N개의 최솟값과 최댓값을 공백으로 구분해 출력한다. 예제 입력 1 520 10 35 30 7 예제 출력 1 7 35 문제 출처문제를 만든 사람: baekjoon데이터를 추가한 사람: lina, topology 알고리즘 분류수학구현 ➡️ 접근 방법 1: 직접 구현첫 번째 접근 방법은 직접 최솟값과.. 2024. 6. 13.
파이썬 Python | 알고리즘 | ⭐⭐⭐⭐ ArrayList ⭕ 파이썬 Python | 알고리즘 | ⭐⭐⭐⭐ ArrayList➡️ ArrayListArrayList는 배열과 유사한 자료 구조입니다. 배열은 데이터가 연속적으로 저장된다는 점에서 ArrayList와 차이가 있지만, 이해를 돕기 위해 배열과 유사하다고 생각할 수 있습니다. 알고리즘 문제에서는 배열의 삽입과 삭제가 빈번히 일어나므로 시간 복잡도와의 싸움이 자주 발생합니다. 따라서 삽입이나 삭제를 시간 복잡도를 고려하지 않고 무작위로 수행하면 문제를 해결하지 못할 수 있습니다.ArrayList의 특징연속된 메모리 공간: ArrayList는 연속된 메모리 공간에 데이터를 저장합니다.원하는 위치의 값 얻기: 특정 위치의 요소에 접근할 때 O(1)의 시간 복잡도를 가집니다.삽입 및 삭제: 중간에 요소를 삽입하거.. 2024. 6. 13.
파이썬 Python | 입력 처리의 모든 것: 정수와 문자열에서 2차원 배열까지 ⭕ 파이썬 Python | 입력 처리의 모든 것: 정수와 문자열에서 2차원 배열까지정수➡️  ⭐ ⭐ ⭐ 한 줄을 입력받기 한 줄에 입력된 여러 값을 정수로 변환하여 변수에 저장하는 방법입니다.# 한 줄을 입력받아 정수로 변환a, b = map(int, input().split())print(a, b) # 예시 입력: 3 5, 출력: 3 5  input(): 사용자로부터 한 줄의 문자열 입력을 받습니다. 예시: "3 5"split(): 입력받은 문자열을 공백을 기준으로 분리하여 리스트로 반환합니다. 예시: ["3", "5"]map(int, ...): split()으로 분리된 문자열 리스트의 각 요소를 정수로 변환합니다. 예시: [3, 5]a, b = ...: 변환된 정수 리스트의 값을 각각 a와 b 변수.. 2024. 6. 12.
파이썬 Python | 알고리즘 | 카카오 개발자 코딩테스트 및 오픈채팅방 알고리즘 ⭕ 파이썬 Python | 알고리즘 | 카카오 개발자 코딩테스트 및 오픈채팅방 알고리즘카카오의 핵심은 카카오톡입니다. 카카오의 신입 공개 채용 코딩 테스트 문제는 대학교 학부 과정에서 배우는 기초 알고리즘에 충실하지만, 문자열 기반 채팅 애플리케이션인 카카오톡은 카카오의 핵심인 만큼 문자열과 관련된 알고리즘이 항상 출제됩니다. ➡️ 2020년 카카오 개발자 신입 공개 채용 1차 1번 오픈채팅방 문제[프로그래머스 문제 링크](https://school.programmers.co.kr/learn/courses/30/lessons/42888)문제 설명카카오톡 오픈채팅방에서는 친구가 아닌 사람들과 대화를 할 수 있으며, 본래 닉네임이 아닌 가상의 닉네임을 사용하여 채팅방에 들어갈 수 있습니다. 신입사원인 김크루.. 2024. 6. 12.
파이썬 Python | 알고리즘 | 시간 복잡도 ⭕ 파이썬 Python | 알고리즘 | 시간 복잡도컴퓨터는 1초에 약 1억 정도의 연산을 할 수 있다고 가정합니다. ➡️ 알고리즘이 왜 필요한가?구글 검색엔진을 예로 들어보겠습니다. 우리가 구글을 통해 검색할 때, 전 세계에서 업로드된 모든 게시물을 검색 키워드와 비교하여 찾으려 한다면 수백 초 이상의 시간이 걸릴 것입니다. 하지만 실제로 구글과 유튜브는 검색창에 키워드를 입력했을 때 빠르면 1초 안에, 느려도 몇 초 안에 검색 결과를 보여줍니다. 이는 효율적인 알고리즘 덕분입니다. 이러한 이유로 대기업에서는 개발자를 채용할 때 알고리즘 시험을 보며, 개발자들에게 있어서 알고리즘은 필수적인 기술입니다. ➡️ 그래서 구글 검색 엔진은?구글의 검색 알고리즘은 비밀에 부쳐져 있지만, 실무적인 개발 이야기로 추.. 2024. 6. 12.
카카오테크캠퍼스 2기 | 8주차(24-05-27 ~ 24-06-02) 회고 ⭕ 카카오테크캠퍼스 2기 | 8주차(24-05-27 ~ 24-06-02) 회고이번 한주는 실력적으로 스스로에게 만족하지 못했지만, 하루하루 조금씩 발전하는 나를 발견한 순간들이 있었다 😊. 이런 경험을 통해 반복 학습의 중요성을 다시금 느꼈다 📚.아직 자바스크립트가 많이 부족한 상황이다. 요즘 집중력이 떨어지면 자꾸 포기하거나 다음으로 미루게 되는데, 이는 자바스크립트를 제대로 활용하지 못하게 하는 원인 중 하나다. 문제를 찾아보고 답을 알게 되어도 내 코드에 적용하는 데 어려움을 겪고 있다 😔. 모든 것이 아주 느리게 진행되는 것 같다 🐢.곧 STEP 2가 시작되는데, 모르는 것은 무조건 알고 이해하자고 다짐했다 💪. 2024. 6. 11.
카카오테크캠퍼스 2기 | 7주차(24-05-20 ~ 24-05-26) 회고 ⭕ 카카오테크캠퍼스 2기 | 7주차(24-05-20 ~ 24-05-26) 회고JavaScript에서 DOM을 다루면서 노드와 요소의 차이를 명확히 이해하는 것이 중요하다는 것을 느꼈습니다. 처음에는 이 두 개념이 비슷해서 혼동이 되었지만, 실제로는 노드가 요소를 포함하고 있다는 것을 알게 되었습니다. 또한, 노드와 요소를 조작하는 메소드가 다르기 때문에 이를 정확히 이해하고 있어야 JavaScript 메소드를 올바르게 사용할 수 있음을 깨달았습니다. 메소드를 제대로 이해하고 사용하니 웹 페이지를 더욱 효율적이고 안전하게 다룰 수 있어서 큰 도움이 되었습니다. 💡 2024. 6. 11.
카카오테크캠퍼스 2기 | 6주차(24-05-13 ~ 24-05-19) 회고 ⭕ 카카오테크캠퍼스 2기 | 6주차(24-05-13 ~ 24-05-19) 회고자바스크립트의 개념들을 공부하면서 동기와 비동기 프로그래밍에 대해 이해하고 사용하는 것이 얼마나 중요한지 깨달았다. 특히 콜백 함수 대신 Promise를 사용하는 연습이 필요하다고 느꼈다. 이번 스터디를 통해 그동안 콜백 함수를 사용해왔지만, 그 의미와 용도를 깊이 이해하지 못했다는 것을 알게 되었다. 💡공식 문서를 확인하지 않거나, 그냥 보기만 하거나, 아무 생각 없이 예제만 따라 치는 것은 (개인적으로 이러한 행위는 손가락만 고생하는 복사 붙여넣기와 다름없다고 생각한다) 피해야 한다. ✋📄 2024. 5. 24.
웹 구조 Web | 웹 개발 시 주의할 점 ⭕ 웹 구조 Web | 웹 개발 시 주의할 점➡️ 엄격한 문법 준수빈 태그의 슬래시 사용: HTML5에서는 슬래시가 선택적이지만, 일관된 문법을 사용하여 문법의 엄격함을 따르도록 하자! ➡️ 코드의 깔끔함 유지중복 최소화: CSS에서는 스타일의 중복을 최소화하고, 클래스와 ID를 효율적으로 사용하여 코드의 재사용성을 향상함주석 사용: 코드에 주석을 추가하여 다른 개발자들이 코드를 이해하고 유지보수할 수 있도록 함 2024. 5. 16.
HTML | 헤더 섹션 설계 : 헤더 (<header> 태그), 내비게이션 링크 (<a href="/">) ⭕ HTML | 헤더 섹션 설계 : 헤더 ( 태그), 내비게이션 링크 ()➡️ 헤더 ( 태그)시맨틱 태그의 일부로서, 웹 페이지 상단에 위치함주로 로고, 내비게이션 링크, 검색창 등 주요 정보를 그룹화함기능을 수행하기보다는 구조적인 의미를 가지는 역활 ➡️ 내비게이션 링크 ()사용자가 클릭 시 메인 페이지로 이동하는 절대 경로를 제공함서브 메뉴 구성: 태그로 묶인 요소들이 각각의 메뉴 항목을 나타내며, 기능이 완성되기 전까지는 로 설정하여 어떠한 동작도 하지 않도록 함구분선 (::before 사용): 메뉴 항목 간에 시각적으로 구분선을 추가함 ➡️ 검색창를 사용하여 사용자 입력을 사용함사용자가 입력 필드에 포커스를 맞췄을 때 테두리가 변경되도록 border 속성을 사용하여 시각적으로 구분되게 함 2024. 5. 16.
CSS | 요소 임시 삭제 ⭕ CSS | 요소 임시 삭제CSS에서 특정 요소를 화면에서 완전히 숨기는 방법 중 하나는 display: none; 속성을 사용하는 것입니다. 이 방법은 요소를 보이지 않게 하며, 레이아웃에서 해당 요소가 차지하던 공간도 제거합니다. 이 기법은 동적인 웹 인터페이스에서 요소를 일시적으로 숨겨야 할 때 유용하게 사용됩니다. ➡️ display: noneCSS의 display: none; 속성은 요소를 DOM에서 숨기되, 공간도 차지하지 않도록 합니다. 이는 요소가 페이지 레이아웃에 전혀 영향을 주지 않는 것처럼 만듭니다. 예를 들어, 사용자 상호작용에 따라 보일 필요가 없는 정보를 숨길 때 이 속성을 사용할 수 있습니다..hidden-element { display: none;}  ➡️ 주의사항di.. 2024. 5. 16.
CSS | 중앙 정렬 : 수평 중앙 정렬, 수직 중앙 정렬 ⭕ CSS | 중앙 정렬 : 수평 중앙 정렬, 수직 중앙 정렬➡️ 수평 중앙 정렬inline / inline-block 요소inline 또는 inline-block 요소는 텍스트의 흐름을 따라 배치됨부모 요소가 block 요소인 경우 text-align: center; 속성을 설정함.parent { text-align: center;}.child { display: inline-block; /* 또는 inline */} block 요소일반적인 설정block 요소는 기본적으로 전체 가용 너비를 차지함width 속성을 설정하고, 좌우 마진을 auto로 지정함.block { width: 200px; /* 너비 지정 */ margin: 0 auto; /* 위 아래 마진 0, 좌우 마진 auto */} 이.. 2024. 5. 16.
CSS | 폰트 : 구글 폰트(Google Fonts), 기본(권장) 설정, Google Material Icons ⭕ CSS | 폰트 : 구글 폰트(Google Fonts), 기본(권장) 설정, Google Material Icons➡️ 구글 폰트(Google Fonts)https://fonts.google.com/일반적으로 9가의 다른 두께를 지정할 수 있음폰트 파일은 생각보다 용량이 크므로 웹 성능에 영향을 줄 수 있음HTML 문서 내 main CSS 파일보다 상위에 위치해야 함적용 방식Link 방식 (병렬 로딩): 권장 방식 Import 방식 (직렬 로딩)@import url('https://fonts.googleapis.com/css?family=Roboto'); ➡️ 기본(권장) 설정/* 폰트 색상 설정: UI 디자인에서 세련된 느낌을 주는 회색을 사용함 */color: #333;/*크기 설정 */font-.. 2024. 5. 16.
CSS | CSS 초기화 (reset.css) ⭕ CSS | CSS 초기화 (reset.css)크로스브라우징(Cross-Browsing) 문제를 해결하기 위해 CSS 초기화(reset)를 사용함HTML 문서 내 다른 모든 CSS 파일보다 상위에 위치해야 함jsdelivr CDN reset.css모든 HTML 요소의 마진, 패딩, 폰트 크기 등을 초기화함https://www.jsdelivr.com/package/npm/reset-css 2024. 5. 16.
HTML | 메타데이터 : 검색 최적화, 문자 인코딩, 모바일 반응성, 오픈 그래프(The Open Graph protocol) ⭕ HTML | 메타데이터 : 검색 최적화, 문자 인코딩, 모바일 반응성, 오픈 그래프(The Open Graph protocol)➡️ 좋은 메타데이터란?웹 페이지의 내용을 정확하게 반영하고, 사용자가 검색할 만한 키워드를 포함하는 것다양한 레퍼런스를 살펴보면, 사용자가 클릭할 만한, 너무 길지 않은 등의 요소가 중요하다는 점을 강조함결론적으로 정답이 있다기보다는, 정확하고 사용자의 이목을 끌 만한 키워드가 포함되어야 한다고 생각됩니다. ✨ ➡️ 문자 인코딩문자 인코딩을 UTF-8로 설정함UTF-8은 대부분의 문자를 표현할 수 있는 인코딩 방식으로, 글로벌 콘텐츠에 권장함 ➡️ 모바일 뷰포트모바일 장치의 뷰포트를 설정함반응형 디자인에 필수적임  ➡️ 파비콘(favicon)프로젝트 루트 폴더에 favico.. 2024. 5. 16.
CSS | CSS 선택자 : 기본 선택자, 복합 선택자, 동작 기반 가상 클래스 선택자, 가상 클래스 선택자, 가상 요소 선택자, 속성 선택자 ⭕ CSS | CSS 선택자 : 기본 선택자, 복합 선택자, 동작 기반 가상 클래스 선택자, 가상 클래스 선택자, 가상 요소 선택자, 속성 선택자➡️ 기본 선택자전체 선택자 (*)모든 HTML 요소* { margin: 0; padding: 0; }모든 요소의 마진과 패딩을 0으로 적용함태그 선택자지정된 태그를 의미p { font-size: 16px; }모든 태그에 16픽셀의 글꼴 크기를 적용함클래스 선택자 (.)지정된 클래스를 가진 모든 요소.menu { background-color: blue; }menu 클래스에 파란색 배경을 적용함ID 선택자 (#)특정 ID를 가진 단일 요소자주 사용하지는 않음#header { height: 100px; }header ID에 높이를 100픽셀로 적용함 [프론트엔드.. 2024. 5. 16.
CSS | 요소(Element)와 클래스(Class)의 차이 ⭕ CSS | 요소(Element)와 클래스(Class)의 차이➡️ 요소 (Element)HTML 요소는 웹 페이지의 구조를 정의하고 의미를 담당합니다. 이러한 요소들은 특정 태그로 표현되며, 웹 브라우저에 어떻게 내용을 표시할지 알려줍니다. , , , p { color: blue;}➡️ 클래스 (Class)클래스는 HTML 요소에 스타일을 적용하기 위해 사용되는 식별자입니다. 클래스는 점(.)으로 시작하며, 하나 이상의 요소에 재사용 가능한 스타일을 정의할 수 있습니다. .menu, .header, .footer.menu { background-color: #333; color: white; padding: 10px;}.header { font-size: 24px; fo.. 2024. 5. 16.
인사이트(위즈덤 및 에세이) | 매주 앱 1개씩 만들다 보니 글로벌 1000만 앱이 탄생했다 ⭕ 인사이트(위즈덤 및 에세이) | 매주 앱 1개씩 만들다 보니 글로벌 1000만 앱이 탄생했다https://www.youtube.com/watch?v=y2a-OJqCD9I  ➡️ 나의 인사이트 도출미래 변화에 대한 예측보다 변화를 인식하고 이에 "대응하는 능력"이 더 중요하다는 점입니다. 이는 기술, 제품, 서비스 개발에서 사용자의 필요와 시장의 변화를 지속적으로 관찰하고 이에 적응하는 유연성을 필요로 합니다. 구글 검색의 아쉬움을 예로 들면, 사용자 경험을 개선하는 방향으로 기능을 업데이트하고 사용자의 니즈를 정확히 파악하여 그들이 원하는 바를 제공하는 것이 핵심입니다. 가장 중요한 것을 잘 구현하는 것은 사용자 중심 디자인과 지속적인 혁신을 통해 이룰 수 있습니다. ➡️ 나의 기획 방향성 도출채팅 .. 2024. 5. 15.
자바스크립트 JavaScript | JavaScript 변수 선언: var, let, const의 차이점 및 호이스팅 ⭕ 자바스크립트 JavaScript | JavaScript 변수 선언: var, let, const의 차이점 및 호이스팅➡️ var재선언 가능코드의 가독성과 유지보수에 부정적인 영향을 미칠 수 있습니다.var name = "Alice";var name = "Bob"; // 재선언 가능console.log(name); // "Bob" 재할당 가능var number = 1;number = 2; // 재할당 가능console.log(number); // 2 전역 스코프함수 스코프(function-scoped)변수가 선언된 함수 내부에서만 접근 가능하게 하는 스코핑 규칙function testScope() { var insideFunction = "visible";}console.log(insideFunc.. 2024. 5. 14.
자바스크립트 JavaScript | 스크립트 로딩 최적화: defer와 async 속성 ⭕ 자바스크립트 JavaScript | 스크립트 로딩 최적화: defer와 async 속성[프론트엔드/[이론] 웹 기술] - 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스⭕ 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스브라우저는 웹 페이지를 화면에 표시할 때, 렌더링 엔진들은 HTML, CSS, JavaScript 파일을 처리하며 CRP 프로세스를 따릅니다.렌더링 엔진크롬(Chrome): Blisugoring-it.tistory.com[프론트엔드/Javascript] - 자바스크립트 JavaScript | 렌더링 중단 : 스크립트 실행이 렌더링에 미치는 영향 자바스크립트 JavaScript | 렌더링 중단 : 스크립트 실행이 렌더링.. 2024. 5. 14.
자바스크립트 JavaScript | 렌더링 중단 : 스크립트 실행이 렌더링에 미치는 영향 ⭕ 자바스크립트 JavaScript | 렌더링 중단 : 스크립트 실행이 렌더링에 미치는 영향[프론트엔드/[이론] 웹 기술] - 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스⭕ 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스브라우저는 웹 페이지를 화면에 표시할 때, 렌더링 엔진들은 HTML, CSS, JavaScript 파일을 처리하며 CRP 프로세스를 따릅니다.렌더링 엔진크롬(Chrome): Blisugoring-it.tistory.com ➡️ 태그를 만나면, 스크립트의 다운로드(Fetching) 및 실행(Executing)을 위해 문서 파싱을 일시적으로 중단합니다.스크립트 앞의 콘텐츠스크립트 뒤의 콘텐츠CSSOM의 구축은 DOM .. 2024. 5. 14.
웹 구조 Web | 브라우저 렌더링 : CRP 프로세스 ⭕ 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스브라우저는 웹 페이지를 화면에 표시할 때, 렌더링 엔진들은 HTML, CSS, JavaScript 파일을 처리하며 CRP 프로세스를 따릅니다.렌더링 엔진크롬(Chrome): Blink 엔진사파리(Safari): Webkit 엔진파이어폭스(Firefox): Gecko 엔진 ➡️ CRP (Critical Rendering Path) ➡️ DOM(Document Object Model) 트리 생성HTML 파싱 후, DOM 트리를 생성합니다.파싱웹 페이지나 앱이 실행될 때, 브라우저의 자바스크립트 엔진 같은 런타임 환경이 이해할 수 있는 형태로 코드를 변환하는 과정을 말합니다.웹 문서를 작은 조각들인 '토큰(token)'으로 분리하고, 문법적인 구조를 가.. 2024. 5. 14.
CSS | 플렉스(Flex, Flexbox, Flexible Box Layout) 레이아웃 배치 ⭕ CSS | 플렉스(Flex, Flexbox, Flexible Box Layout) 레이아웃 배치레이아웃을 배치하기 위한 기능구성 요소 플렉스 컨테이너(Flex Container): 플렉스 레이아웃을 적용받는 부모 요소 플렉스 아이템(Flex Item): 플렉스 컨테이너 안에 배치되는 자식 요소 축메인축(Main Axis): 아이템들이 배치되는 주 축입니다.교차축(Cross Axis): 메인축에 수직으로 있는 축입니다. ➡️ 플렉스 컨테이너(Flex Container)의 속성배치 설정 - display: flex아이템들은 가로 방향으로 배치됩니다.width: 내용물의 크기만큼 차지합니다.height: 컨테이너의 높이만큼 늘어납니다. 배치 방향 설정 - flex-directionrow (기본 값): 아.. 2024. 5. 14.
CSS | position 위치 속성: Static, Relative, Absolute, Fixed, Sticky ⭕ CSS | position 위치 속성: Static, Relative, Absolute, Fixed, Sticky요소의 위치 지정 기준  ➡️ static (기본 값)요소를 문서 흐름에 따라 배치합니다.positon 설정이 없는 것과 같다.position: static; ➡️ relative (거의 사용하지 않음) static 위치를 기준으로, top, right, bottom, left 값을 사용하여 배치합니다. position: relative;top: 40px; left: 40px; ➡️ ⭐ absolute일반 문서 흐름에서 요소를 제거하고, 위치상 부모 요소를 기준으로 배치합니다.position: absolute;top: 40px; left: 40px; ➡️ fixed일반 문서 흐름에서 요소를.. 2024. 5. 14.
CSS | 여백 속성: Margin 및 Padding ⭕ CSS | 여백 속성: Margin 및 Paddingmargin : 요소의 외부 여백을 설정한다.padding : 요소의 내부 여백을 설정한다. 2024. 5. 14.
CSS | background-size 속성: contain 및 cover ⭕ CSS | background-size 속성: contain 및 cover➡️ contain비율을 유지요소의 더 짧은 너비에 맞춤이미지와 요소의 비율이 다를 경우 이미지가 반복될 수 있습니다.background-size: contain; background-repeat: no-repeat; 옵션이미지가 반복되지 않고, 대신 요소 주변에 빈 공간이 생깁니다.background-size: contain;background-repeat: no-repeat; ➡️ cover비율을 유지요소의 더 넓은 너비에 맞춤이미지가 요소의 가로와 세로를 완전히 덮으며, 이미지의 일부가 잘릴 수 있습니다.background-size: cover; 2024. 5. 14.
Git & GitHub | 커밋 메세지 규칙 - Git Commit Message Conventions ⭕ Git & GitHub | 커밋 메세지 규칙 - Git Commit Message Conventionshttps://gist.github.com/stephenparish/9941e89d80e2bc58a153Any line of the commit message cannot be longer 100 characters. Git Commit Message ConventionsGit Commit Message Conventions. GitHub Gist: instantly share code, notes, and snippets.gist.github.com ():  ➡️ Subject lineAllowed feat (feature)fix (bug fix)docs (documentation)style (fo.. 2024. 5. 14.
반응형

티스토리툴바