728x90 Study109 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편: 피그마 시작하기 – 기본 개념과 인터페이스 익히기 1. 피그마 설치 및 시작하기1) 피그마 계정 만들기피그마 공식 웹사이트인 figma.com에 접속합니다.Sign up 버튼을 클릭해 회원가입을 합니다. 이메일이나 구글 계정을 이용해 가입할 수 있습니다.2) 피그마 데스크톱 앱 설치하기 (선택 사항)피그마는 웹 브라우저에서 바로 사용할 수 있지만, 데스크톱 앱을 설치하면 더 편리하게 사용할 수 있습니다.Download Figma 링크를 통해 데스크톱 앱을 다운로드하고 설치합니다.설치 후 피그마 계정으로 로그인하면 웹에서와 동일하게 사용할 수 있습니다.2. 피그마 대시보드 구성피그마에 로그인하면 대시보드가 나타납니다. 대시보드는 프로젝트와 파일을 관리할 수 있는 곳입니다.1) 주요 기능 살펴보기New File: 새 피그마 파일을 만들 때 사용합니다.Dra.. 2024. 10. 30. C# 11편: 디자인 패턴으로 코드의 재사용성 및 유지보수성 향상시키기 1. 디자인 패턴이란?**디자인 패턴(Design Pattern)**은 자주 발생하는 문제를 해결하기 위한 객체지향 설계 원칙으로, 코드의 구조를 표준화하여 재사용성과 유지보수성을 높이는 데 도움을 줍니다. 특히 C#에서는 다양한 디자인 패턴을 활용하여 효율적이고 확장 가능한 코드를 작성할 수 있습니다. 디자인 패턴은 크게 세 가지로 분류됩니다:생성 패턴: 객체 생성 방식을 관리하는 패턴구조 패턴: 클래스 및 객체를 조합해 더 큰 구조를 만드는 패턴행위 패턴: 객체 간 상호작용을 정의하고 관리하는 패턴2. 생성 패턴 (Creational Patterns)생성 패턴은 객체 생성 방식을 제어하여 필요할 때 유연하게 객체를 생성하고, 코드의 결합도를 낮추는 패턴입니다. 2.1 싱글톤 패턴 (Singleton .. 2024. 10. 30. 이전 1 ··· 8 9 10 11 12 13 다음 728x90
