티스토리

ChipTuneX

검색하기

블로그 홈

ChipTuneX

mystory2254.tistory.com/m

응원해 주세요 ✌️

구독자: 8

방명록 방문하기

주요 글 목록

[새싹x코딩온] CSS 완벽 정리 4부 - CSS 박스 모델 & 크기 단위 정리 CSS 완벽 정리 4부 – CSS 박스 모델 & 크기 단위 정리웹 개발에서 CSS는 필수적인 역할을 합니다.특히 크기 단위, 박스 모델, 여백(margin & padding), 테두리(border), 박스 크기 설정(box-sizing) 등의 개념을 이해하면 더 직관적이고 깔끔한 디자인을 만들 수 있습니다.이 글에서는 CSS 속성을 초보자도 쉽게 이해할 수 있도록 상세한 설명 + 예제 코드(CSS & HTML) 와 함께 정리해보겠습니다! 🚀✅ 1. CSS 크기 단위 – 절대 단위 vs 상대 단위CSS에서 크기를 정의할 때는 절대 단위와 상대 단위를 사용할 수 있습니다.단위유형설명px절대 단위고정된 크기 (화면 크기와 상관없이 일정)em상대 단위부모 요소의 폰트 크기를 기준으로 결정rem상대 단위최상위 .. 공감수 5 댓글수 10 2025. 3. 21.
[새싹x코딩온] CSS 완벽 정리 3부 - CSS 폰트 & 텍스트 스타일링 (수정) CSS 완벽 정리 3부 – CSS 폰트 & 텍스트 스타일링웹사이트를 디자인할 때 CSS 속성을 제대로 이해하면 텍스트를 가독성 있게 조절하고,불필요한 요소를 숨기거나, 넘치는 콘텐츠를 효과적으로 처리할 수 있습니다.이번 글에서는 CSS 속성(폰트 스타일, 텍스트 속성, 요소 숨김, 오버플로우 처리 등) 을 쉽게 설명하고,초보자도 이해할 수 있도록 예제 코드와 함께 자세히 정리해보겠습니다! 🚀✅ 1. CSS 속성 – 폰트 스타일 (font 관련 속성)폰트 스타일을 설정하면 글자의 크기, 굵기, 줄 간격, 폰트 종류 등을 조절할 수 있습니다.아래 속성들을 조합하면 가독성이 뛰어난 웹페이지를 만들 수 있습니다.속성설명예제font-weight글자의 굵기 설정font-weight: bold;font-size글자.. 공감수 2 댓글수 6 2025. 3. 19.
[새싹x코딩온] CSS 완벽 정리 2부 - 선택자 종류와 활용법 CSS 완벽 정리 2부 - 선택자 종류와 활용법!웹사이트에서 HTML 요소에 스타일을 적용하려면 CSS 선택자(Selector) 를 잘 활용해야 합니다.CSS 선택자는 특정 HTML 요소를 선택하여 원하는 스타일을 적용하는 역할을 합니다.이 글에서는 기본 선택자부터 복합 선택자, 가상 클래스, 가상 요소, 속성 선택자까지자세한 설명과 예제 코드와 함께 알아보겠습니다. 😊✅ 1. CSS 선택자란?✔ CSS 선택자(Selector)란?CSS에서 특정 HTML 요소를 찾아서 스타일을 적용하는 기능효율적인 스타일 적용과 유지보수를 위해 필수적인 개념✔ CSS 기본 문법선택자 { 속성: 값;} h1 { color: blue; font-size: 24px;} ✔️ 설명h1 → 선택자 (어떤 요소에 적용할지 .. 공감수 1 댓글수 0 2025. 3. 18.
[새싹x코딩온] CSS 완벽 정리 1부 - 스타일을 입히는 기술! CSS 완벽 정리 1부 – 스타일을 입히는 기술!웹사이트를 만들 때, HTML은 구조(뼈대) 를 담당하고, CSS(Cascading Style Sheets)는 디자인(옷, 색, 배치) 을 담당합니다.이번 글에서는 CSS의 개념, 네이버에 CSS가 없다면 어떻게 보일까? 그리고 CSS를 적용하는 다양한 방식과 우선순위까지 쉽게 설명해드릴게요! 🚀📌 1. CSS란?✅ CSS(Cascading Style Sheets)란?웹페이지의 디자인과 레이아웃을 담당하는 스타일 언어HTML 요소의 색상, 폰트, 크기, 배경, 배치 등을 조정 가능하나의 CSS 파일로 여러 개의 HTML 페이지에 일관된 스타일 적용 가능✅ CSS를 적용하면?💡 밋밋한 HTML 페이지가 → 세련된 웹사이트로 변신! ✔️ CSS 적용 전 .. 공감수 1 댓글수 3 2025. 3. 18.
[새싹x코딩온] GIT 사용법 완벽 정리 – 포트폴리오부터 GitHub 사용법까지! GIT 사용법 완벽 정리 – 포트폴리오부터 GitHub 사용법까지!프로그래머라면 꼭 알아야 하는 필수 도구 Git!오늘은 Git과 GitHub의 개념, 설치 방법, 주요 명령어까지 완전 초보도 쉽게 이해할 수 있도록 정리해드리겠습니다. 🚀📌 1. Git을 왜 사용해야 할까? – 포트폴리오로 활용하기Git은 코드를 효율적으로 관리하고 협업할 수 있도록 도와주는 버전 관리 시스템입니다.GitHub와 연동하면 개인 프로젝트 및 포트폴리오로 활용할 수도 있습니다.✅ GitHub를 포트폴리오로 활용하는 방법1️⃣ 개인 프로젝트 코드 저장 – 포트폴리오 사이트나 앱을 공개 가능2️⃣ 오픈소스 프로젝트 참여 – 유명한 프로젝트에 기여하며 실력을 쌓기3️⃣ 기업이 개발 실력을 확인 가능 – 깃허브 활동이 적극적인 .. 공감수 4 댓글수 4 2025. 3. 13.
[새싹x코딩온] HTML 기본 개념 5부 – 웹 표준을 위한 시맨틱 태그(Semantic Tags) 완벽 정리! 🎨 HTML 기본 개념 5부 – 웹 표준을 위한 시맨틱 태그(Semantic Tags) 완벽 정리!HTML을 작성할 때, 와 같은 일반적인 태그만 사용하면 웹페이지의 구조를 명확하게 구분하기 어려울 수 있습니다.이를 해결하기 위해 의미를 가지는 시맨틱 태그(Semantic Tags) 를 사용하면 코드 가독성을 높이고 SEO(검색 엔진 최적화)에도 유리합니다.이번 HTML 5부에서는 시맨틱 태그의 개념, 종류, 그리고 실제 활용 예제까지 알아보겠습니다! 🚀📌 1. 시맨틱 태그란?시맨틱(Semantic) 이란 "의미가 있는" 이라는 뜻입니다.즉, 시맨틱 태그는 HTML 요소의 의미를 명확하게 전달하는 태그를 의미합니다.✅ 예제 비교🚫 비시맨틱 태그 사용 예시 (잘못된 방식) ✔️ 시맨틱 태그 사용.. 공감수 5 댓글수 6 2025. 3. 6.
[새싹x코딩온] HTML 기본 개념 4부 – Table 태그를 활용한 표 만들기! 🎨 HTML 기본 개념 4부 – Table 태그를 활용한 표 만들기!웹페이지에서 데이터를 표(table) 형태로 정리하면 가독성이 높아지고 정보를 효과적으로 전달할 수 있습니다.이번 HTML 4부에서는 HTML의 태그를 활용하여 표를 만드는 방법을 쉽게 설명해드릴게요! 🚀📌 1. 태그란? 태그는 HTML에서 표를 만들 때 사용하는 요소입니다.✅ 기본 문법 셀 1 셀 2 셀 3 셀 4 ➡️ 출력 결과:셀1셀2셀3셀3 ✅ 태그 설명 → 표를 생성 → 행(row) 추가 → 열(column) 추가 (데이터를 입력하는 칸)📌 2. 태그 속성 활용하기 태그는 기본적으로 스타일이 없기 때문에 여러 속성을 추가해 더 보기 좋게 .. 공감수 2 댓글수 0 2025. 3. 6.
[새싹x코딩온] HTML 기본 개념 3부 – 사용자 입력을 위한 Form 태그 완벽 정리! 🎨 HTML 기본 개념 3부 – 사용자 입력을 위한 Form 태그 완벽 정리!웹사이트에서 회원가입, 로그인, 검색, 댓글 작성 등을 할 때 사용자의 입력을 받는 요소가 필요합니다. 이를 가능하게 하는 것이 바로 HTML Form 태그입니다.이번 HTML 3부에서는 , , 등 다양한 입력 태그와 그 사용법을 예제와 함께 쉽게 설명해드릴게요! 🚀 📌 1. 태그란? 태그는 사용자로부터 입력을 받고 서버로 데이터를 전송하는 역할을 합니다.✅ 기본 문법 이름: ✅ 속성 설명action="submit.php" → 입력 데이터를 보낼 서버 주소method="POST" → 데이터를 전송하는 방식 (GET, POST 사용 가능)📌 2. 입력값을 받는 태그 태그는 사용자가 정보를 입력할 수.. 공감수 2 댓글수 2 2025. 3. 5.
[새싹x코딩온] HTML 기본 개념 2부 – 다양한 HTML 태그 종류 총정리! 🎨 HTML 기본 개념 2부 – 다양한 HTML 태그 종류 총정리!이전 HTML 1부에서 HTML의 기본 개념과 문서 구조를 배웠다면, 이제는 본격적으로 HTML 태그 종류를 알아볼 차례입니다.이번 HTML 2부에서는 웹페이지를 구성하는 데 필수적인 태그들을 예제 코드와 함께 쉽게 설명해드릴게요! 🚀📌 1. 제목 태그 ( ~ )HTML에서는 제목을 나타내는 부터 까지의 태그가 있습니다. 숫자가 작을수록 글씨 크기가 크고 중요도가 높습니다.제목 1 제목 2제목 3제목 4제목 5제목 6 ✅ 제목 태그 활용 예시 → 웹페이지의 메인 제목 (SEO에 가장 중요한 태그!) ~ → 소제목이나 부제목Z📌 2. 본문 태그 () 태그는 문단(Paragraph) 을 의미합니다.HTML은 웹사이트를 만들 때 사용.. 공감수 1 댓글수 0 2025. 3. 5.
[새싹x코딩온] HTML 기본 개념 1부 : HTML의 기초부터 구조까지! HTML 기본 개념 1부 – HTML의 기초부터 구조까지!📝 HTML이란?HTML(HyperText Markup Language)은 웹페이지의 기본 골격을 만드는 마크업 언어입니다. 우리가 보는 모든 웹사이트는 HTML로 구조가 형성되어 있으며, CSS와 JavaScript를 사용해 스타일과 기능을 추가합니다.✅ HTML의 특징정적 문서를 구성하는 기본 언어태그(tag) 기반의 문서 구조CSS, JavaScript와 함께 사용됨📌 HTML 구조HTML 문서는 기본적으로 다음과 같은 구조를 가집니다. 안녕하세요! HTML을 배워봅시다. ✅ HTML 세부 구조 → HTML5 문서임을 선언 → HTML 문서의 시작과 끝 ✅ 내부 요소 → 웹페이지의 제목 (브라우저 탭에 표시됨) → 한글 포함 모든 .. 공감수 3 댓글수 6 2025. 3. 3.
[새싹x코딩온] "Figma Tools 사용법" 완벽 정리 1부 – 기본 개념부터 실전 활용까지! 디자인 작업을 할 때 꼭 필요한 Figma Tools, 제대로 알고 사용하면 훨씬 더 효율적으로 디자인할 수 있습니다.이번 글에서는 Frame, Guide, Grid, Grid & Breakpoint, 도형 그리기 등 Figma의 필수 도구 5가지 를 하나씩 쉽게 설명해드리겠습니다. 실전 예제도 함께 다룰 예정이니, 끝까지 읽어보세요! 🚀📌 1. Frame – 디자인의 기본 단위!🖼️ Frame(프레임)란?Frame은 Figma에서 아트보드 역할을 하는 공간입니다. 웹, 모바일, 태블릿 등 다양한 디바이스 크기에 맞춰 디자인을 할 수 있습니다.✅ Frame 사용 방법1️⃣ 단축키 F 를 누르거나 왼쪽 툴바에서 Frame 아이콘 선택2️⃣ 상단 패널에서 원하는 디바이스 크기 선택 (예: iPhone .. 공감수 3 댓글수 3 2025. 3. 2.
[새싹x코딩온] 디자인 툴 완전 정복! Figma부터 Photoshop까지 : 디자인 툴 종류 🎨 디자인 툴 완전 정복! Figma부터 Photoshop까지디자인을 할 때 필수적으로 알아야 하는 디자인 툴(Design Tools)! 하지만 용어가 생소하고, 각 툴의 차이를 잘 모르면 어떤 프로그램을 사용해야 할지 고민될 수 있습니다.이번 글에서는 디자인 작업에 필수적인 개념과 함께, 대표적인 디자인 툴의 종류와 특징을 쉽게 정리해보겠습니다. 특히, 요즘 대세인 Figma의 특장점과 가입 방법까지 소개하니 끝까지 읽어보세요! 😊📌 1. 디자인에서 꼭 알아야 할 개념디자인 툴을 제대로 활용하려면, 기본적인 개념부터 이해해야 합니다.🖥️ 해상도(Resolution)란?참고사이트 : https://gs.statcounter.com Statcounter Global Stats - Browser, O.. 공감수 5 댓글수 3 2025. 3. 1.
[새싹x코딩온] Apple의 디자인 철학 : 단순함에서 완벽함을 찾다 🍏 Apple의 디자인 철학 : 단순함에서 완벽함을 찾다Apple의 핵심 원칙, 왜 특별할까요?Apple의 제품을 보면 첫눈에 "애플스럽다"라는 느낌이 듭니다. 군더더기 없는 디자인, 직관적인 사용성, 그리고 완벽한 마감까지—이 모든 것이 Apple의 디자인 철학에서 비롯됩니다. 그렇다면 Apple은 어떤 원칙을 바탕으로 제품을 만들까요?Apple의 디자인 철학을 이해하면, 왜 이 브랜드가 오랫동안 사랑받아왔는지 알 수 있습니다. 이번 글에서는 Apple이 지켜온 핵심 원칙을 살펴보고, 실제 제품에서 이를 어떻게 적용했는지 예시를 들어보겠습니다.🍎Apple의 핵심원칙🍏 1. 단순함 – 복잡함 속에서 본질을 찾다Apple 디자인의 가장 중요한 원칙은 단순함(Simplicity) 입니다. 단순함이란 단.. 공감수 2 댓글수 2 2025. 2. 28.
[새싹x코딩온] 색상과 타이포그래피 : 효과적인 디자인의 핵심 요소 UI/UX에서의 색상과 타이포그래피: 효과적인 디자인의 핵심 요소디지털 제품의 사용자 경험을 설계할 때 가장 기본적이면서도 강력한 영향력을 가진 두 가지 요소가 있습니다. 바로 색상(Color)과 타이포그래피(Typography)입니다. 이 두 요소는 사용자의 감정, 행동, 인지에 직접적인 영향을 미치며, 브랜드의 정체성을 표현하는 핵심 수단이기도 합니다. 이번 포스트에서는 UI/UX 디자인에서 색상과 타이포그래피를 효과적으로 활용하는 방법에 대해 알아보겠습니다.UI/UX COLOR색상은 디자인의 첫인상을 결정짓는 강력한 요소입니다. 적절한 색상 선택은 사용자의 감정을 불러일으키고, 정보의 계층을 명확히 하며, 브랜드 아이덴티티를 강화합니다.색상 모델디지털 환경에서 색상을 표현하는 다양한 방식이 있습니다.. 공감수 2 댓글수 2 2025. 2. 27.
[새싹x코딩온] 디자인 시스템의 모든 것 : 개념부터 사례까지 디자인 시스템의 모든 것: 개념부터 사례까지 일관된 사용자 경험을 위한 필수 요소, 디자인 시스템의 세계로 함께 떠나보세요. 디자인 시스템이란?디자인 시스템은 제품이나 서비스의 디자인 언어를 표준화하고 체계화한 규칙과 원칙의 집합입니다. 단순한 UI 키트나 스타일 가이드를 넘어, 디자인 원칙, 컴포넌트 라이브러리, 패턴, 문서화된 가이드라인을 포함하는 포괄적인 시스템입니다.효과적인 디자인 시스템은 디자이너와 개발자가 일관된 사용자 경험을 제공하기 위해 함께 사용하는 '단일 진실의 원천(Single Source of Truth)'이 됩니다. 이는 제품 전반에 걸쳐 시각적 일관성뿐만 아니라 기능적 일관성도 보장합니다.디자인 시스템의 장점효율성 확보디자인 시스템은 재사용 가능한 컴포넌트와 패턴을 제공하여 디자.. 공감수 1 댓글수 0 2025. 2. 26.
[새싹x코딩온] UI/UX 란 : 디자인 사고 오늘 새싹(SeSAC) APPLE, UI/UX 4기로 1일 차 교육을 참석을 했습니다.오전에 오리엔테이션 진행이 되었으며, 오후에 UI/UX에 대해서 배우는 시간을 가졌습니다. 이렇게 교육을 듣고, 글을 쓰는 것은 처음이네요. ^^ 하루하루 글을 남기고 싶은 생각이 들어서... 기쁜 마음(?)으로... UI/UX란? UI (User Interface) 아이콘, 색감, 타이포그래피 등으로 보이는 시각 디자인을 의미한다. UX (User eXperience) 이용자가 편리하고 만족할 수 있도록 UI를 디자인하는 것을 의미한다. ex) 경쟁사 파악, 사용자의 분석하여 콘텐츠 개발 및 개선사항를 반영하여 UI 디자인하는 것 디지털 디바이드 인터넷을 사용할 수 있는 계층과 그렇지 않은 계층 사이에 발생하는 접근.. 공감수 9 댓글수 16 2024. 10. 22.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.