본문 바로가기
  • 쪄늬와 함께하는 스터디🍀
반응형

전체 글59

박스 모델 (Box Model) 알아보기 CSS Box Model 이란? 웹페이지의 모든 요소는 사각형 박스로 취급되며, 콘텐츠(Content), 내부 여백(Padding), 테두리(Border), 외부 여백(Margin)으로 이루어진다. 콘텐츠 (Content) 는 텍스트나 이미지 등 실제 내용이 들어가는 영역이며, 패딩 (Padding) 은 콘텐츠와 테두리 사이의 여백이다. 보더 (Border) 는 요소의 테두리이고, 마진 (Margin) 은 요소 바깥쪽의 여백으로 다른 요소와의 간격을 조절한다. CSS에서는 이러한 영역의 크기와 여백을 조절하여 요소의 전체 크기와 배치를 결정한다. Content: 텍스트, 이미지 등 실제 콘텐츠가 표시되는 영역Padding: 콘텐츠와 테두리 사이의 내부 여백Border: 콘텐츠와 패딩을 둘러싸는 테두리M.. 2026. 10. 28.
요소 크기 값 단위 알아보기 CSS 크기 단위?CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다.(그 외의 크키 단위는 rem, ch, ex, lh, rlh,vw,vh 등이 있다.)px은 절대값이고 em, %는 상대값이다. 프로퍼티 값이 0인 경우, 단위를 생략할 수 있다.대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100% 로 설정되어 있다.px 단위는? px은 픽셀(화소) 단위이다. 주로 너비(width), 높이(height), 여백(margin, padding), 테두리(border), 글꼴 크기(font-size) 등을 지정할 때 사용합니다.예를 들어 width: 200px;라고 작성하면 해당 요소의 너비를 200 CSS 픽셀로 지정한다는 의미입니다. px는 크기를 명확하게 지정할 수 있어 웹 디자.. 2026. 10. 28.
UXUI Design - OneDay App Service 01. main- 메인은 악보를 배우고 학습하며 힐링할 수 있는 분위기를 연상시키도록 디자인했습니다.- 사용친화적인 느낌, 친근한 느낌을 고려하면서 기하학적인 도형을 사용할 때도 라운드 형태로 구성했습니다. 02. Overview- 궁금한, 의문스러운 의 느낌이 들며, 깔끔하게 디자인하여 내용을 돋보이게 구성했습니다. 03. Desk Research- 악보 학습 및 구매 서비스에 대해서 사용자가 어떤 생각을 중점적으로 생각하는지 정리했습니다.- 서비스 이용에 대해 가장 어렵게 느낀 부분을 3가지를 핵심 키워드로 구성했습니다. 04. Service Research- 유사 서비스에 대한 간단한 설명과 장단점을 정리하였으며, 장단점을 분석 후 단점을 보완할 수 있도록 했습니다. 05. Persona- 사용자.. 2025. 10. 13.
서산 내 손에 해봄 서산 내 손에 해봄사이트 소개1. 설명 : 정규수업 외에 지역사회의 연대, 협력을 강화하고 학교와 지역사회의 다양한 교육과 돌봄 자원을 연계하여 온마을이 함께 학생 성장 발달을 온마을이 함께 학생 성장 발달을 지원합니다.2. 수행기간 : 2024.12 ~ 2025.033. 주요업무 : UX/UI디자인 및 퍼블리싱4. 사이트 : https://seosanhb.kr/main 서산 내손에 해봄 App긴급늘봄 프로그램 신청 필요할 때 이용할 수 있는 긴급늘봄 프로그램 신청으로 보호자의 부담을 줄여드리겠습니다. 자세히 보기 늘봄 안내 가이드 늘봄학교 사이트 이용 매뉴얼로 처음 이용하seosanhb.kr UI 포인트1. 일러스트 활용- 학생과 보호자 그리고 강사가 사용하는 사이트라는 점을 고려하여 친근감 있는 일러.. 2025. 8. 8.
행정중심복합도시건설청 누리집 행정중심복합도시건설청 누리집 디자인 개편사이트 소개1. 설명 : 행정중심복합도시건설청은 누구나 풍요로운 삶을 누리고 지속가능하고 미래지향적인 도시에 살수 있도록 "동반성장 균형발전선도", "내일을 준비하는 혁신모델구현", " 보다 살기 좋은 정주여건 조성"을 목표로 두었으며 광역도시계획, 건설기본·개발계획 수립 및 변경, 실시계획 승인 등의 건설사업을 추진하였습니다.2. 수행기간 : 2024.11 ~ 2025.05 3. 주요업무 : 홈페이지 디자인 개편 및 퍼블리싱 4. 사이트 : https://naacc.go.kr/WEB/main/index.do 행정중심복합도시건설청행정중심복합도시건설청에 오신 것을 환영합니다naacc.go.krUIUX 문제점 파악1. 웹 접근성이 고려되지 않은 메인 높이- 메인의 높이.. 2025. 8. 7.
CSS 속성의 상속과 우선순위 적용 CSS 속성 상속가능과 불가능- 상속하는 속성은 자식에게 영향을 줌속성상속 가능width/heightnomargin/paddingnobordernobox-sizingnodisplaynovisibilityyesopactiyyesbackgroundnofont/coloryesline-heightyestext-alignyeswhite-spanceyespostionnooverflowno 상속되는 속성 자식에도 적용CSS Cascading- css를 사용하다보면 한 태그에 여러 스타일이 겹치는 경우가 발생하여 우선적용에 대해 결정하는 것을 캐스케이딩이라 함- 캐스케이딩에는 1. 스타일 우선순위  2. 명시도 3. 선언순서 세가지 규칙이 있음1. 스타일 우선순위 - css가 어디에 선언 되었는지에 따라 우선순위.. 2024. 11. 26.
LIST