티스토리

검색하기내 프로필

블로그 홈

뚜로그

구독자
1

구독하기 방명록
신고

인기글

  • 웹디자인기능사 실기 코드 D-3 푸른마을공감수3댓글수1조회 3
  • 피그마 컴포넌트 취소, 해제 방법공감수1댓글수0조회 1
  • 웹디자인기능사 실기 코드 D-4 리빙샵아울렛공감수4댓글수1조회 1

주요 글 목록

  • UI/UX 디자이너가 완벽하게 알아야 할 UI 기본 용어글 내용

    1. Splash Screen(스플래시 스크린)스플래시 스크린은 모바일 앱을 접속할 때 로딩 되는 시간 동안 표시되는 화면일반적으로 로고이미지, 애니메이션을 사용함.2. Status Bar(상태바)기기의 최상단에 위치하며 현재 상태 및 시스템의 정보를 제공함3. Navigation Bar네비게이션 바는 뷰 사이의 이동을 도우며 컨텐츠를 조작하는 역할을 함4. Tab Menu탭을 했을 때 화면이 전환되는 인터페이스5. Swipe View상세페이지 간 이동을 할 때 Tab을 터치하는 방법도 있지만 옆으로넘기는 Swipe 동작을 통해서도 이동 할 수 있음6. Tab Bar하단 네비게이션바라고 불리며 UI에서 가장 많이 이용되는 구성요소탭을 통해 뷰 사이를 빠르게 전환할 수 있고 현재 자신이 머물고 있는 위치도..

    좋아요1
    댓글0작성시간2025. 3. 19.
    게시글 이미지
  • 웹디자인기능사 실기 코드 F-4 하이글로벌컴퍼니글 내용

    HTML 회사소개 사업소개 회사활동 인재채용 CEO 인사말 기업문화 경영방..

    좋아요0
    댓글0작성시간2025. 2. 25.
    게시글 이미지
  • 웹디자인기능사 실기 코드 F-3 오픈뱅킹글 내용

    HTML 조회 이체 공과금 외환 계좌조회 거래내역조회 휴먼계좌조회 ..

    좋아요4
    댓글0작성시간2025. 2. 24.
    게시글 이미지
  • 웹디자인기능사 실기 코드 F-1 주식회사 기능건설글 내용

    HTML 회사소개 기업정보 CEO인사말 연혁 조직도 지속가능경영 ..

    좋아요5
    댓글1작성시간2025. 2. 21.
    게시글 이미지
  • 웹디자인기능사 실기 코드 E-4 철길마을글 내용

    HTML 철길마을 마을소개 마을의 유래 볼거리 찾아오시는 길 주변맛집 ..

    좋아요1
    댓글0작성시간2025. 2. 20.
    게시글 이미지
  • 웹디자인기능사 실기 코드 E-3 영상박물관글 내용

    HTML 박물관소개 인사말 박물관연혁 박물관 조직도 오시는 길 ..

    좋아요2
    댓글0작성시간2025. 2. 18.
    게시글 이미지
  • 웹디자인기능사 실기 코드 D-4 리빙샵아울렛글 내용

    HTML 인기모음전 베스트상품 업종별샵 인덕션용품 수저모음 도마모음 그릇모음 접시모음 ..

    좋아요4
    댓글1작성시간2025. 2. 17.
    게시글 이미지
  • 웹디자인기능사 실기 코드 D-3 푸른마을글 내용

    HTML OnSale 기획전 푸른마을 레시피 매장안내 할인행사 덤증정 ..

    좋아요3
    댓글1작성시간2025. 2. 14.
    게시글 이미지
  • CSS display : flex; 단번에 익히기!글 내용

    일을 하면서 종종 느끼는 것은display : flex; 를 알기 전과 후로 업무의 질이 달라졌다는 것이다. float를 이용한 방식과 inline-block, block을 이용한 정렬방식도 있지만display : flex; 를 이용하면 정말 쉽게 레이아웃을 구현할 수 있다.  Flex(플렉스)  Flex(플렉스)는 Flexible Box , Flexbox라고 부르기도 한다.Flex는 레이아웃 배치 전용으로 고안된 기능이다.레이아웃을 만들때 사용하던 Float, inline-block등을 이용한 기존의 방식보다 훨씬 편리하고 간편하다. 예시를 들기위한 HTML코드는 다음과 같다! box1 box2 box3 부모 요소인 div.container 를 Flex container(플렉스 컨테이너)라고 부르고자식..

    좋아요0
    댓글0작성시간2025. 2. 13.
    게시글 이미지
  • 웹디자인기능사 실기 코드 A-1 JUST쇼핑몰글 내용

    HTML 탑 블라우스 티 셔츠 니트 아우터 자켓 코트 ..

    좋아요1
    댓글1작성시간2025. 2. 11.
    게시글 이미지
  • css페이지 인쇄 시 배경색 보이지 않을 때글 내용

    인쇄 (Ctrl + P)HTML 페이지의 background-color 속성이 인쇄 미리보기에 적용되지 않는 현상이 발생인쇄 미리보기 시 배경색이 전부 사라짐 print-color-adjust@media print { body { print-color-adjust: exact; -webkit-print-color-adjust: exact; /*크롬*/ color-adjust: exact; /*파이어폭스*/ }} print-color-adjust는 economy와 exact 둘 중 하나를 지정해야 함 기본값은 economy 임이 속성을 exact로 설정하면 보이는 화면을 정확히(exactly) 표시하게 됨. 대안사용자가 인쇄 설정에서 직접 배경 그래픽을 체크하여 인쇄하도록 하는 방법도 있..

    좋아요0
    댓글0작성시간2025. 2. 11.
    게시글 이미지
  • 웹디자인기능사 실기 코드 A-2 Green복지재단글 내용

    실제로 내가 시험볼때 나왔던 문제다!솔직히 유형이 다양해서 A유형에서 나올줄 몰랐는데 당황!시험을 준비하고 계신분들이라면 A쉽다고 넘기지말고 꼼꼼히 보는것 추천!  HTML 재단소개 후원하기 자료실 스토리 설립취지 연혁 찾..

    좋아요0
    댓글0작성시간2025. 2. 11.
    게시글 이미지
  • CSS 글자가 공간에서 넘칠 때 말줄임표 사용하는 방법글 내용

    See the Pen Untitled by hyesu (@ddururu) on CodePen. overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;  두 줄일 경우 -webkit-line-clamp:2; 를 적용 하여 줄을 맞추고말줄임표는 text-overflow:ellipsis; 를 사용하면 적용 가능

    좋아요0
    댓글0작성시간2025. 2. 10.
    게시글 이미지
  • tabulator 내부에 scroll 적용하는 법글 내용

    tabulator를 이용해 그리드를 표출했지만디자인과 어울리지 않게 기본 scroll이 적용되었음. 코드는 다음과 같다 class = “tabulator-tableholder“에 적용시켜야 css 가 적용됨.tabulator-tableholder::-webkit-scrollbar{ width:16px; }.tabulator-tableholder::-webkit-scrollbar-thumb{background:  rgba(85,147,255, 0.6); border-radius: 10px; background-clip: padding-box; border: 5px solid transparent; }.tabulator-tableholder::-webkit-scrollbar-track{background: ..

    좋아요1
    댓글0작성시간2025. 2. 7.
    게시글 이미지
  • 웹디자인기능사 슬라이드 fadeIn fadeOut 구현하기글 내용

    See the Pen slides fadeIn_Out by hyesu (@ddururu) on CodePen.

    좋아요2
    댓글1작성시간2025. 1. 31.
    게시글 이미지
  • Switch문과 삼항연산자글 내용

    Switch문어떤 값을 가진 대상을 두고 조건값과 일치하는지를 확인하고 동작을 수행하는 방식(if : 조건식을 두고 조건의 진위 여부에 다라 동작을 수행하는 방식)조금 더 간결하고 의미가 명확해 보인다는 장점case가 값으로 딱 정해진 경우에만 사용가능조건이 비교식인 경우 사용불가let food = "buger"switch (food) { case 'pizza': console.log("피자 주세요") break; case 'buger': console.log("버거 주세요") break; default: console.log("메뉴에 없는 음식입니다")}//버거주세요 case 키워드를 작성하고 조건값을 입력한 뒤 콜론(:)으로 case문의 끝 지점을 구분해 준다.(참고로 이..

    좋아요2
    댓글1작성시간2025. 1. 29.
    게시글 이미지
  • Css로 체크 모양 아이콘만들기글 내용

    See the Pen 체크 아이콘 만들기 by hyesu (@ddururu) on CodePen.

    좋아요2
    댓글1작성시간2025. 1. 28.
    게시글 이미지
  • css로 사다리꼴 만들기글 내용

    See the Pen 사다리꼴 by hyesu (@ddururu) on CodePen.

    좋아요1
    댓글0작성시간2025. 1. 28.
    게시글 이미지
  • <label>태그를 이용한 input radio 버튼 디자인글 내용

    두가지 중 하나를 선택하는 선택지가 있을 경우에라디오 버튼 보다는 버튼 형태를 많이 사용하는데,라디오 버튼의 기능을 갖지만 모양은 버튼 형태로 만들 수 있다.  See the Pen Untitled by hyesu (@ddururu) on CodePen.

    좋아요1
    댓글0작성시간2025. 1. 27.
    게시글 이미지
  • 변수 문제 풀기글 내용

    let a = 1;let b = 2;console.log(a,b);//1,2let c = a;//c에 a값(1)을 담겠다.a = b;//a에 b값(2)을 담겠다.b = c; // b에 c값(1)을 담겠다.console.log(a,b);//2,1​ 어떤 코드를 넣어야console.log ( a , b ) // 2,1 값이 나올까?let a = 1let b = 2 console.log(a,b) // 1,2 /* 코드 후에*/ console.log(a,b) // 2,1 처음에 잘 이해 되지 않았지만.주석 처리한 문구처럼 생각하고 문제를 풀어보니 해결됨

    좋아요1
    댓글0작성시간2025. 1. 26.
    게시글 이미지
문의안내
  • 티스토리
  • 로그인
  • 고객센터
© Kakao Corp.