728x90 분류 전체보기226 HTML 기초 강의 4편: CSS 레이아웃(Flexbox와 Grid)으로 웹 페이지 구성하기 1. CSS 레이아웃 개요CSS 레이아웃을 사용하면 HTML 요소들을 화면에 배치하고, 다양한 디스플레이 환경에서 반응형 웹 페이지를 구성할 수 있습니다. 주요 레이아웃 방식으로 Flexbox와 Grid가 있으며, 각 방법을 사용하여 콘텐츠를 쉽게 정렬할 수 있습니다. 2. Flexbox 레이아웃Flexbox는 1차원 레이아웃 시스템으로, 행 또는 열 방향으로 요소를 배치하고 정렬하는 데 유용합니다.Flexbox 기본 설정먼저, display: flex; 속성을 사용해 Flex 컨테이너를 설정한 다음, 하위 요소들을 배치할 수 있습니다. .container { display: flex; /* Flex 컨테이너 설정 */ justify-content: center; /* 가로 정렬: 가운데 */.. 2024. 11. 4. 피그마 초보 강좌 5편: 팀 협업과 피드백 관리 이번 강좌에서는 피그마의 팀 협업 기능을 활용해 여러 팀원들과 동시에 작업하고, 피드백을 효율적으로 관리하는 방법을 다룹니다. 피그마는 여러 사람이 하나의 파일에서 실시간으로 협업할 수 있는 장점이 있어, 디자인 검토와 피드백 관리가 원활합니다.1. 피그마 파일 공유 및 권한 설정1) 파일 공유하기피그마에서 디자인 파일 상단의 Share 버튼을 클릭합니다.링크를 복사하거나 이메일 주소를 입력하여 공유할 수 있습니다.링크를 복사하면 이메일 없이도 파일에 접근할 수 있어 빠르게 공유할 수 있습니다.2) 접근 권한 설정하기View: 파일을 보기 전용으로 설정해 다른 사람이 수정하지 못하도록 제한합니다.Comment: 팀원이 댓글만 남길 수 있도록 제한하며 파일을 보호할 수 있습니다.Edit: 팀원이 편집 가능.. 2024. 11. 3. HTML 기초 강의 3편: CSS로 웹 페이지 스타일링하기 1. CSS 소개CSS(Cascading Style Sheets)는 HTML 요소의 스타일을 정의하는 언어입니다. HTML이 웹 페이지의 구조를 정의한다면, CSS는 그 구조의 시각적 디자인을 설정합니다. CSS는 크게 인라인 스타일, 내부 스타일, 외부 스타일 시트 세 가지 방식으로 적용할 수 있습니다. 2. CSS 기본 적용 방식1) 인라인 스타일HTML 태그 내 style 속성을 사용하여 스타일을 지정합니다. 소규모 스타일에 적합합니다.이 문장은 파란색이고, 글씨 크기는 20px입니다.2) 내부 스타일 시트HTML 문서의 내부 스타일 시트로 스타일 적용 3) 외부 스타일 시트별도의 .css 파일에 스타일을 작성하고, HTML 문서에서 태그로 불러옵니다. 여러 HTML 파일에 동일한 스타일을.. 2024. 11. 3. 피그마 초보 강좌 4편: 프로토타이핑과 인터랙션 설정하기 이번 강좌에서는 프로토타입(Prototype) 기능을 통해 디자인 화면 간의 전환을 설정하고, **인터랙션(Interaction)**을 추가해 실제 앱처럼 작동하는 인터페이스를 만들어보겠습니다. 피그마의 프로토타입 기능을 통해 사용자의 흐름을 미리 시뮬레이션할 수 있어 UX 테스트나 디자인 리뷰 시 유용합니다.1. 프로토타입 모드 이해하기피그마에서 프로토타입 모드로 전환하면 각 화면을 연결하고 전환 효과를 설정할 수 있습니다. 상단 Prototype 탭을 선택하여 프로토타입 모드로 전환하면 설정 옵션이 오른쪽 패널에 표시됩니다.Trigger(트리거): 사용자가 인터랙션을 시작하는 동작으로, 클릭, 드래그, 호버 등이 있습니다.Action(액션): 트리거에 의해 실행되는 동작으로, 예를 들어 다른 화면으로.. 2024. 11. 2. HTML 기초 강의 2편: 리스트, 테이블, 폼 태그로 웹 구성하기 1. 리스트 태그 (List Tags)리스트 태그는 항목들을 나열할 때 사용합니다. HTML에서는 순서가 있는 리스트와 순서가 없는 리스트 두 가지가 있습니다.순서가 없는 리스트 (, )순서가 없는 리스트는 태그로 감싸고, 각 항목은 태그로 작성합니다. HTML CSS JavaScript순서가 있는 리스트 (, )순서가 있는 리스트는 태그를 사용합니다. HTML 배우기 CSS 배우기 JavaScript 배우기2. 테이블 태그 (Table Tags)데이터를 표로 정리할 때 테이블 태그를 사용합니다. 테이블은 , , , 태그로 구성됩니다. 이름 나이 직업 홍길동 30 개발자.. 2024. 11. 2. 피그마 초보 강좌 3편: 컴포넌트와 Variants 활용하기 이번 강좌에서는 컴포넌트(Component) 기능을 통해 반복되는 디자인 요소를 쉽게 관리하고 재사용하는 방법을 알아보겠습니다. 특히, 컴포넌트의 Variants(변형) 기능을 활용해 버튼이나 카드 등의 다양한 상태를 한 번에 관리할 수 있습니다. 이 기능을 활용하면 프로젝트 전체에서 일관성을 유지하면서도 효율적으로 디자인을 수정할 수 있습니다.1. 컴포넌트(Component)란?컴포넌트는 UI 디자인에서 자주 사용하는 요소(버튼, 카드, 입력 창 등)를 하나의 모듈로 만들어 재사용할 수 있는 기능입니다. 컴포넌트로 만든 요소는 다른 곳에서도 쉽게 복제해 사용할 수 있고, 원본 컴포넌트를 수정하면 복제본들도 자동으로 업데이트됩니다.컴포넌트를 사용해야 하는 이유일관성 유지: 버튼, 카드 등 자주 사용하는 .. 2024. 11. 1. HTML 기초 강의 1편: 웹 페이지 기본 구조와 태그 HTML 기초 강의 1편: 웹 페이지 기본 구조와 태그HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 이번 강의에서는 HTML의 기본 구조와 자주 사용하는 태그들에 대해 설명합니다. 1. HTML 기본 구조HTML 문서는 선언으로 시작하고, 전체 구조는 , : HTML5 문서임을 선언합니다. : HTML 문서의 루트 요소입니다. HTML 기초 강의 1편 HTML은 웹 페이지의 구조를 정의하는 언어입니다. 다양한 태그를 사용해 페이지를 구성합니다. HTML 태그 예시 아래는 HTML에서 자주 사용하는 태그입니다. 링크 예제 OpenAI 사이트 방문 이미지 예제 단락 예제 이것은 하나의 단락입니다. 간단한 용어 정리태그(Tag).. 2024. 11. 1. 피그마 초보 강좌 2편: 도형, 텍스트, 색상 스타일 활용하기 이번 강좌에서는 피그마의 기본 도구인 도형, 텍스트, 색상 스타일을 활용하는 방법을 다룹니다. 이 강좌를 통해 도형과 텍스트의 크기, 위치, 색상을 조정하고, 자주 쓰는 색상과 텍스트 스타일을 저장하여 일관성 있는 디자인을 만들 수 있습니다.1. 도형(Shape) 도구 사용하기피그마에서는 직사각형(Rectangle), 원(Ellipse), 선(Line) 등 기본 도형을 사용해 쉽게 UI 요소를 디자인할 수 있습니다.1) 도형 추가하기상단의 Shape Tool을 클릭하거나 단축키 R을 눌러 **Rectangle(직사각형)**을 선택합니다.원하는 위치를 클릭하고 드래그하여 직사각형을 만듭니다.마찬가지로, **Ellipse(원)**은 O를 눌러 추가하고, **Line(선)**은 L을 눌러 추가할 수 있습니다... 2024. 10. 31. C# 12편: ADO.NET으로 데이터베이스와 상호작용하기 1. ADO.NET이란?ADO.NET은 C#에서 데이터베이스와 상호작용할 수 있도록 도와주는 데이터 액세스 기술입니다. ADO.NET을 사용하면 SQL Server, MySQL, Oracle과 같은 관계형 데이터베이스 시스템과 연동할 수 있으며, 데이터를 조회하고 조작할 수 있습니다. 주요 구성 요소로는 Connection, Command, DataReader, DataSet과 DataAdapter가 있습니다.2. 데이터베이스 연결데이터베이스와 연결하려면 SqlConnection 객체가 필요합니다. **연결 문자열(Connection String)**을 설정해 데이터베이스 위치, 사용자 정보 등을 입력합니다.SQL Server 연결 예시using System; using System.Data.SqlCli.. 2024. 10. 31. 이전 1 ··· 18 19 20 21 22 23 24 ··· 26 다음 728x90
