cogito30's Web Develope Blog

인기글

• [Figma] Figma 주요 기능별 사용법 - 아이콘 및 이미지 추가 이제 4단계인 아이콘 및 이미지 추가를 진행하겠습니다. 이 단계에서는 아이콘을 사용하고 이미지를 추가하는 방법을 배워보겠습니다.4. 아이콘 및 이미지4.1 아이콘 사용주요 기능:아이콘은 시각적 요소를 추가하여 디자인을 보완합니다.사용법:아이콘 라이브러리 검색: 피그마 커뮤니티에서 Components 탭을 클릭하고 Icons를 검색하여 무료 아이콘 라이브러리를 찾습니다.아이콘 추가: 원하는 아이콘을 선택하고 프로젝트에 추가합니다.예시:네비게이션 바에 사용할 아이콘을 추가합니다.실습:피그마 커뮤니티에서 Icons를 검색하여 무료 아이콘 세트를 찾습니다.원하는 아이콘을 선택하고 Homepage 프레임에 추가합니다.실습 단계별 스크린샷:아이콘 라이브러리 검색:피그마 상단 메뉴에서 Assets 탭을 클릭합니다.C.. 댓글 0 2024.06.08

• [웹 디자인] 17일차: 플렉스박스를 이용한 반응형 레이아웃 플렉스박스란?플렉스박스(Flexbox)는 CSS의 레이아웃 모델로, 컨테이너 안의 아이템을 쉽게 정렬하고 배치할 수 있게 해줍니다. 플렉스박스는 반응형 디자인을 구현하는 데 매우 유용하며, 다양한 화면 크기와 기기에 맞게 레이아웃을 조정할 수 있습니다.플렉스 컨테이너와 아이템플렉스 컨테이너: display: flex를 설정한 요소입니다.플렉스 아이템: 플렉스 컨테이너 안에 있는 모든 직계 자식 요소입니다.예제: Item 1 Item 2 Item 3.container { display: flex;}플렉스박스를 이용한 기본 레이아웃주축 방향 설정 (flex-direction)플렉스 컨테이너의 주축 방향을 설정합니다.row: 기본값, 가로 방향column: 세로 방향예제:.container { dis.. 댓글 0 2024.08.17

• [Figma] Figma 주요 기능별 사용법 - 반응형 디자인 이제 6단계인 반응형 디자인을 진행하겠습니다. 이 단계에서는 오토 레이아웃을 설정하고 프레임을 리사이징하는 방법을 배우게 됩니다.6. 반응형 디자인6.1 오토 레이아웃주요 기능:오토 레이아웃은 요소가 반응형으로 배치되도록 합니다.사용법:오토 레이아웃 설정: 요소를 선택한 후, 오른쪽 패널에서 Auto Layout 옵션을 활성화합니다.레이아웃 설정: 오토 레이아웃 패널에서 방향, 간격, 패딩 등을 설정합니다.예시:카드 레이아웃을 오토 레이아웃으로 설정합니다.실습:카드 요소들을 선택하고 오토 레이아웃을 활성화합니다.방향을 Vertical, 간격을 20px로 설정합니다.실습 단계별 스크린샷:오토 레이아웃 설정:Homepage 프레임에서 카드 레이아웃을 구성할 여러 요소(예: 이미지, 텍스트 박스, 버튼 등)를.. 댓글 0 2024.06.08

• [Figma] Figma 주요 기능별 사용법 - 네비게이션 설계 이제 5단계인 네비게이션 설계를 진행하겠습니다. 이 단계에서는 링크를 설정하고 컴포넌트를 사용하는 방법을 배우게 됩니다.5. 네비게이션 설계5.1 링크 설정주요 기능:링크는 페이지 간 네비게이션을 가능하게 합니다.사용법:프로토타입 모드로 전환: 상단 메뉴에서 Prototype 탭을 클릭하여 프로토타입 모드로 전환합니다.링크 설정: 요소를 선택하고 링크 아이콘을 클릭하여 연결할 페이지나 프레임을 선택합니다.예시:네비게이션 바의 메뉴 항목에 링크를 설정합니다.실습:Prototype 탭에서 네비게이션 바의 메뉴 항목을 선택합니다.링크 아이콘을 클릭하여 다른 프레임이나 페이지로 연결합니다.실습 단계별 스크린샷:프로토타입 모드로 전환:피그마 상단 메뉴에서 Prototype 탭을 클릭합니다.링크 설정:네비게이션 바.. 댓글 0 2024.06.08

• [개발 규칙] 협업 규칙 협업을 위해 JavaScript 코딩 컨벤션을 명확히 정의하고, 이를 팀 내에서 일관되게 사용하기 위해 다양한 도구와 방법을 활용할 수 있습니다. 아래는 협업을 위한 구체적인 방안입니다.1. 코드 스타일 가이드 설정팀 내에서 사용할 코드 스타일 가이드를 선택하거나 정의합니다. Airbnb, Google, Standard 등 유명한 스타일 가이드를 참고할 수 있습니다. 스타일 가이드 문서를 작성하고 공유합니다.2. 린터(Linter)와 포매터(Formatter) 설정코드 스타일을 자동으로 검사하고 포맷팅하는 도구를 설정합니다.ESLint 설정ESLint는 코드 스타일을 강제하기 위한 린터입니다. 프로젝트 루트에 .eslintrc.js 파일을 생성하고 다음과 같이 설정합니다:module.exports = {.. 댓글 0 2024.06.08

최신글

• [웹개발] JavaScript 주요 메서드 2 Fetch API(비동기 요청)더보기메서드설명fetch(url)GET 요청(기본)fetch(url, { method: "POST", body })POST 요청fetch(url, { method: "PUT", body })PUT 요청fetch(url, { method: "DELETE" })DELETE 요청response.json()JSON 데이터를 파싱response.text()텍스트 데이터로 변환response.statusHTTP 상태 코드 반환response.ok응답 성공 여부(true/false)fetch("https://api.example.com/data") .then((response) => response.json()) .then((data) => console.log(data)) .c.. 2025.04.03

• [웹개발] JavaScript 주요 메서드 1 문자열(String)더보기메서드설명length문자열 길이 반환toUpperCase()대문자로 변환toLowerCase()소문자로 변환trim()앞뒤 공백 제거slice(start, end)부분 문자열 추출substring(start, end)부분 문자열 추출replace("찾을값", "바꿀값")문자열 치환split("구분자")문자열을 배열로 변환includes("문자")특정 문자 포함 여부 확인indexOf("문자")특정 문자 위치 반환(없으면 -1)let text = " Hello JavaScript! ";console.log(text.length); // 19console.log(text.toUpperCase()); // " HELLO JAVASCRIPT! "console.log(text.trim().. 2025.04.03

• [웹개발] JavaScript 요약 변수 선언더보기let name = "Alice"; // 변경 가능const age = 25; // 변경 불가능var city = "Seoul"; // (과거 방식, 사용 지양, 호이스팅 문제 발생 가능)자료형더보기// 기본 자료형 (Primitive Types)let str = "Hello"; // 문자열let num = 42; // 숫자let bool = true; // 논리값let nothing = null; // 값 없음let unknown = undefined; // 정의되지 않음let symbol = Symbol(); // 유일한 값// 객체 자료형 (Object Types)let obj = { key: "value" }; // 객체let ar.. 2025.04.03

• [웹개발] CSS 2025.04.02

• [웹개발] Frontend 키워드 정리 Frontend- Frontend: UI/UX를 구현하는 작업- HTML(웹페이지 구조 정의) / CSS(웹페이지 스타일 정의) / JavaScript(웹페이지에 동적 기능 추가) (개발 역량)- DOM 조작 및 이벤트 처리 / 반응형 웹 디자인(RWD) / 웹 성능 최적화(Lazy Loading, Code Splitting)- REST API 및 GraphQL 통신 / 상태관리(Redux, Recoil, Vuex, Zustand) / 웹보안(XSS, CSRF) (개발 환경)- 패키지 관리자(npm, yarn)- 번들러 및 빌드 도구(Webpack, Vite)- 스타일링(Tailwind CSS, Styled Components, Sass)- 테스트(Jest, Cypress, React Testing Li.. 2025.04.02