se-eun 님의 블로그

웹( Web )- WWW- HTTP특징- 문자, 소리, 그림, 동영상을 통해 정보 전달- 하이퍼 링크로 연결해 정보 탐색 가능- 웹 문서는 주로 HTML로 구성웹 디자인 고려사항- 웹 표준 준수, 모든 브라우저에서 기능 작동- 로고, 그래픽, 텍스트를 일관된 위치에 배치하여 UI를 직관적으로 설계- 자바스크립트(JS)를 최소화하여 성능 최적화- 텍스트의 가독성을 높이고, 특정 태그나 플러그인 의존 지양웹 디자인 가이드라인- 디자인 일관성 유지- 운영 및 관리를 위한 지침 제공- 신속하고 효율적으로 제작모바일 기기용 웹 디자인- 간단한 디장니과 세로 열 중심의 탐색 구조를 채택- 반응형 웹 디자인을 통해 화면 크기에 마젝 레이아웃 조정 (*필수)- 모바일에서 지원하지 않는 디자인 기능은 사용하지 않음 컴퓨..

사용성( Usability )- 사용자 인터페이스 설계 시 가장 우선적으로 고려해야할 요소- 사용자가 제품이나 시스템을 얼마나 빠르고, 쉽고, 편리하고, 효율적으로 사용할 수 있는지 유용성( Utility )- 디자인이 제공하는 기능- 사용자가 원하는 기능이나 필요한 요소를 제공하고 있는지를 평가   사용자 인터페이스 ( User Interface, UI )- 일반적으로 두 다른 세계가 만나 소통하는 접점 사용자 인터페이스 종류 - GUI  : 그래픽 사용자 인터페이스- Touch UI   : 터치 사용자 인터페이스- Voice UI  : 음성 사용자 인터페이스- Gesture Ui  : 제스처 사용자 인터페이스- CLI ( Command Line Interface )  : 명령 줄 인터페이스   UI ..

스토리보드개념- 웹 사이트나 애플리케이션 개발을 위한 설계도이자 작업 지침서 특징- 각 화면의 흐름과 상세한 정보를 포함- 스토리 보드의 완성은 기획 단계의 마무리를 의미하며,디자이너 - 시각 인터페이스 설계개발자    - 프로그램 설계, 코딩 진행 구성- 표지 : 프로젝트의 기본 정보를 담는다- 개정 이력 : 문서 변경 사항과 수정내용을 기록- 화면 설계 : 페이지의 레이아웃, 메뉴 구성 위치,  콘텐츠 배치 등 전체 화면 구성을 보여줌- 서비스 흐름도 : 사이트 내의 정보와 서비스 흐름을 시각적으로 나타냄 스토리보드 작성 과정표지 작성개정 이력정보 구조도 ( Information Architectur )서비스 흐름도 ( flow chart )화면 설계5-1 페이지 정보 영역5-2 화면 설계 영역5-3..

📝  노트로 돌아가기  이전글 2025.01.03 [html, css]다음글 2025.01. [html, css]나이스스크롤을 이용한 스크롤바 커스텀하기   이메일 발송 폼   이미지 팝업https://lokeshdhakar.com/projects/lightbox2/#getting-started   See the Pen Untitled by se.eun (@se-eun) on CodePen.">See the Pen Untitled by se.eun (@se-eun) on CodePen.

📝  노트로 돌아가기  이전글 2024.12.31  [html, css]다음글 2025.01.03 [html, css]텍스트량에 따라 유연하게 길어지는 디자인 See the Pen Untitled by se.eun (@se-eun) on CodePen.">See the Pen Untitled by se.eun (@se-eun) on CodePen.   내비버튼 작동 See the Pen 실무 팁 - 작업 6, 내비버튼 작동 by se.eun (@se-eun) on CodePen.">See the Pen 실무 팁 - 작업 6, 내비버튼 작동 by se.eun (@se-eun) on CodePen.   function Part__showPart(no) { $('.part-group'..

📝  노트로 돌아가기  이전글 2024.12.30  [html, css]다음글 2025.01.02 [html, css]회전 애니메이션 See the Pen Untitled by se.eun (@se-eun) on CodePen.">See the Pen Untitled by se.eun (@se-eun) on CodePen.  animation에 전달해줄 수 있는 속성들은 다음과 같다.animation: 띄어쓰기로 쭉 나열하면 아래의 속성들을 한 번에 지정할 수 있다.animation-name: 애니메이션의 중간 상태를 지정하는 이름. @keyframes블록에 작성animation-duration: 한 싸이클의 애니메이션이 재생될 시간 지정animation-delay: 애니메이션이 시작을 지연시..

📝  노트로 돌아가기  이전글 2024.12.24  [html, css]다음글 2024.12.31 [html, css]글자 크기와 밑줄 너비 맞추기 See the Pen 글자 크기와 밑줄 너비 맞추기 by se.eun (@se-eun) on CodePen.">See the Pen 글자 크기와 밑줄 너비 맞추기 by se.eun (@se-eun) on CodePen.  .menu_3 > ul > li > a { display: block; padding: 0 20px;}.menu_3 > ul > li > a > span{ position: relative; padding: 20px 0; display: inline-block;}.menu_3 > ul > li > a > span::aft..

📝  노트로 돌아가기  이전글 2024.12.23  [html, css]다음글 2024.12.30 [html, css]fullpage, animate.css 조합  Animate.css library이미지를 누르면 사이트로 이동합니다    See the Pen 실무 팁 - fullpage, animate.css 조합 by hyeji (@hjyee) on CodePen.">See the Pen 실무 팁 - fullpage, animate.css 조합 by hyeji (@hjyee) on CodePen.    Google Font to Svg Path Google Font to Svg Path이미지를 누르면 사이트로 이동합니다   tilt.js tilt이미지를 누르면 사이트로 이동합니다  이미지에..

📝  노트로 돌아가기  이전글 2024.12.19  [html, css]다음글 2024.12.24 [html, css]활성화된 슬라이드 내용을 별도 공간에 표시하기 See the Pen Untitled by se.eun (@se-eun) on CodePen.">See the Pen Untitled by se.eun (@se-eun) on CodePen.   내용이 복잡하고 어려우니 영상 복습하기 !!

📝  노트로 돌아가기     **복습, 코드정리를 위한 다시만드는 클론코딩   이전글클론 코딩 [아이들나라]  아이들나라 I-nara이미지를 누르면 사이트로 이동합니다     1단계 See the Pen i-nara 1단계 by se.eun (@se-eun) on CodePen.">See the Pen i-nara 1단계 by se.eun (@se-eun) on CodePen.  ⬇⬇ 이미지 눌러서 미리보기 이동하기 header 메뉴 및 사이드 메뉴 javascript, event 작성   $(document).ready(function () { $(".menu__hamburger").click(function () { $(".side__menu, .side__menu__bg, body..