본문 바로가기

프론트엔드164

카카오테크캠퍼스 2기 | STEP2 | 12일차(24-07-09) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 12일차(24-07-09) 회고📝 타입 추론# 기존 코드const items: Item[] = getItems();# 수정 코드const items = getItems();처음에는 getItems() 함수가 반환하는 값의 타입을 명시적으로 지정하는 것이 안전하다고 생각했다. 하지만 코드가 길어지면서 타입 어노테이션이 불필요하게 복잡해 보였다.TypeScript의 타입 추론 기능을 활용하여 items 변수의 타입을 생략했습니다. getItems() 함수의 반환 타입이 명확하기 때문에 TypeScript 컴파일러가 자동으로 items 변수의 타입을 Item[]으로 추론한다. 코드를 간결하게 유지하면서도 타입 안정성을 확보할 수 있었다.타입 추론에 대한 이해가 부족.. 2024. 7. 17.

카카오테크캠퍼스 2기 | STEP2 | 11일차(24-07-08) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 11일차(24-07-08) 회고📝 Context API 사용한 인증 관리Context API 사용 방법createContext 메서드를 사용하여 context를 생성한다.생성한 context를 사용할 컴포넌트에 값을 전달하기 위해 Provider로 감싼다.Provider의 프로퍼티인 value에 전달할 데이터를 넣는다.Provider의 value에 담은 데이터를 전달할 때는 두 가지 방식이 있다: Consumer 컴포넌트와 useContext 훅. 이번 프로젝트에서는 useContext 훅을 사용했다.Context 생성Context는 전역적으로 사용할 값을 제공하기 위해 사용된다.export const AuthContext = createContext(unde.. 2024. 7. 17.

카카오테크캠퍼스 2기 | STEP2 | 10일차(24-07-05) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 10일차(24-07-05) 회고📝 React 네이밍 규칙모든 파일과 폴더를 컴포넌트에 맞추어 PascalCase로 작성하다 보니, 어떤 기능을 하는지 파악하기 어려웠다. 예를 들어, 컴포넌트와 유틸리티 파일이 같은 형식으로 작성되어 구분이 쉽지 않았다. 이러한 문제를 해결하기 위해, 폴더와 파일 네이밍 규칙을 좀 더 세분화할 필요가 있었다.폴더 및 파일 네이밍 규칙디렉토리 폴더명컴포넌트 폴더: PascalCase (대문자로 시작) - 컴포넌트임을 한눈에 파악할 수 있도록예: Header, Footer, UserProfile일반 폴더: CamelCase (소문자로 시작)예: components, services, utils서브폴더: CamelCase (소문자로 .. 2024. 7. 10.

카카오테크캠퍼스 2기 | STEP2 | 9일차(24-07-04) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 9일차(24-07-04) 회고📝 type 및 interfaceTypeScript를 학습하면서 헷갈렸던 부분 중 하나는 type과 interface의 차이점이었다. 처음에는 둘 다 비슷한 역할을 하는 것 같아 어느 상황에서 어떤 것을 써야 할지 혼란스러웠다. 그래서 둘의 차이점을 명확히 이해하고자 공부하게 되었다.typetype은 모든 타입을 선언할 때 사용할 수 있다. 기본 타입뿐만 아니라 복합 타입(union, intersection)도 선언할 수 있다.확장 불가능한 타입을 선언하고 싶다면 type을 사용한다.type StringOrNumber = string | number;interfaceinterface는 객체에 대한 타입을 선언할 때 사용할 수 있다... 2024. 7. 10.

카카오테크캠퍼스 2기 | STEP2 | 8일차(24-07-03) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 8일차(24-07-03) 회고📝 OutletReact Router를 처음 접하고 사용하면서 고민을 하게 되었다. 라우팅 구조를 어떻게 더 효율적이고 관리하기 쉽게 만들 수 있을까 하는 것이었다. 특히, 여러 경로에서 공통으로 사용되는 레이아웃을 어떻게 처리할지에 대한 고민이 많았다. 초기 구현처음에는 각 경로에 대해 개별적으로 컴포넌트를 렌더링하는 방식으로 설정하였다.각 경로마다 일일이 컴포넌트를 정의해주어야 한다.import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';import Footer from '@/components/Footer';import Header from '@/co.. 2024. 7. 9.

카카오테크캠퍼스 2기 | STEP2 | 7일차(24-07-02) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 7일차(24-07-02) 회고📝 Git/Github 세팅프로젝트 디렉토리로 이동작업 환경에서 프로젝트 파일을 관리하는 위치이다. 이 위치는 프로젝트 파일을 한곳에서 접근하고 관리할 수 있는 곳이다.C:\\Users\\User\\Desktop\\workspaceGit 저장소 클론기존에 작업한 레퍼지토리도 있지만(https://github.com/sugoring/react-gift-react-foundation), 새로운 프로젝트에서 실행하는 방법을 익히고 싶어서 해당 레퍼지토리(https://github.com/kakao-tech-campus-2nd-step2/react-gift-ui-flow)를%EB%A5%BC) 클론했다.네트워크 상태가 불안정하여 클론 속도가.. 2024. 7. 9.

카카오테크캠퍼스 2기 | STEP2 | 6일차(24-07-01) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 6일차(24-07-01) 회고📝 설정 관련 PR 리뷰ESLint 설정ESLint 설정은 프로젝트를 진행하면서 워닝/에러가 표시되는 부분을 확인하고 필요한 설정을 추가해 나가는 방식이 좋음.설정 파일 종류: .eslintrc.json, .eslintrc.cjs, .eslintrc.js 등 다양한 파일 이름이 있는데, 이는 작성 방식과 빌드 크기에 차이가 있을 수 있으나 큰 영향을 미치지 않음.ESLint와 Prettier 설정ESLint: JavaScript/TypeScript 코드를 일정한 규칙에 따라 작성하도록 돕는 도구. (예: 사용되지 않는 변수 경고, import문 순서 경고)Prettier: 코드 포매팅 도구로, 코드의 모양을 예쁘게 만들어 줌. (예.. 2024. 7. 8.

카카오테크캠퍼스 2기 | STEP2 | 5일차(24-06-28) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 5일차(24-06-28) 회고📝 StorybookStorybook은 컴포넌트의 다양한 상태를 직접 눈으로 확인할 수 있는 환경을 제공한다. 버튼의 색상이나 크기를 변경하면서 실시간으로 UI 변화를 확인할 수 있었다. UI의 일관성을 유지하는 데 도움이 되고, 컴포넌트를 개발할 때 오류를 줄이고 효율적으로 작업할 수 있다.다양한 상태에서 컴포넌트가 어떻게 보이는지 미리 확인할 수 있어 디자인의 일관성을 유지하는 데 도움을 주었다. 실시간으로 UI를 조정할 수 있어 사용자 경험을 개선할 수 있었다. 📝 Storybook 설치 및 설정설치 명령어Storybook을 처음 설치할 때, 타입스크립트로 설정하기 위해서 package.json 파일을 열어 의존성에 타입.. 2024. 7. 1.

카카오테크캠퍼스 2기 | STEP2 | 4일차(24-06-27) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 4일차(24-06-27) 회고📝 ESLint, Prettier (Airbnb)1. typescript-eslint 설정eslint와 typescript는 각각의 parser를 사용하여 다른 AST(Abstract Syntax Tree)을 생성하기 때문에, 이를 해결하기 위해 typescript-eslint를 설정하였다.다양한 설정 파일을 다루는 것이 어려웠으나, 최종적으로 최신 버전으로 설치하는 것이 가장 좋다는 결론에 도달하였다.npm install --save-dev eslint TypeScript와 ESLint의 통합을 위해 필요한 typescript-eslint 관련 라이브러리를 설치하였다.npm install --save-dev @typescript-.. 2024. 7. 1.

카카오테크캠퍼스 2기 | STEP2 | 3일차(24-06-26) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 3일차(24-06-26) 회고📝 tsconfig.jsontsconfig.json을 파일에 관하여, 문제가 생겼을 때 검색해서 나온 대로 설정했을 뿐, 정확히 무엇을 하고 있는지 이해하지 못했다. 🤷‍♂️tsc 사용하기tsconfig.json을 만들지 않고도 tsc를 사용할 수 있다는 사실을 알았다. tsc 명령어를 통해 원하는 .ts 파일을 .js로 컴파일할 수 있었다.$ tsc hello.ts tsc는 tsconfig.json 파일 없이도 바로 사용할 수 있었다. 그렇다면 왜 tsconfig.json을 설정해야 할까? 🤔 매번 명령어에 옵션을 주는 것이 번거롭고, 프로젝트에서 일정한 설정을 유지하기 위해서였다.vscode는 기본적으로 TypeScript에.. 2024. 7. 1.

카카오테크캠퍼스 2기 | STEP2 | 2일차(24-06-25) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 2일차(24-06-25) 회고📝 Create React AppBabel을 사용하여 트랜스파일링하고, Webpack으로 파일들을 번들링 하는 구조자바스크립트 기반으로, 최근에는 다양한 언어를 이용하여 자바스크립트의 한계를 극복하는 번들러와 트랜스파일러가 등장하고 있다. 자바스크립트는 싱글 스레드 언어로, 프로젝트 규모가 커지면 빌드 시간이 증가하여 개발 생산성이 저하될 수 있다.이러한 문제를 해결하기 위해 새로운 도구들이 등장하였다.번들러 Webpack > Vite개발 단계에서는 esbuild를 통해 빌드하고, 프로덕션에서는 rollup을 통해 번들링 한다. 현재는 rollup을 통해 프로덕션 빌드를 진행하지만, 추후 esbuild가 발전하면 프로덕션 빌드도 e.. 2024. 7. 1.

카카오테크캠퍼스 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 | 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 2 3 4 5 6 다음

티스토리툴바