.ux { flex-grow:1; }
close
프로필 배경
프로필 로고

.ux { flex-grow:1; }

  • 분류 전체보기 (61)
    • UX 디자인 (10)
    • HTML&CSS (18)
    • JS (2)
    • 폰트 (11)
    • Tool&작업환경 (6)
    • 업무 Tip (7)
    • 제품리뷰 (5)
    • Box (0)
    • 내맘대로 포스팅 (1)
  • 홈
  • UX 디자인
  • HTML&CSS
  • JS
  • 폰트
  • Tool&작업환경
  • 업무 Tip
  • 제품리뷰
  • Box
  • 내맘대로 포스팅
  • 태그
CSS의 변수(Variables)

CSS의 변수(Variables)

변수란? 변하는 값을 '변수'라고 합니다. 부가세를 계산하는 프로그램을 만든다고 예를 들어보겠습니다.부가세 = 입력 금액 * 0.1  금액을 입력하면 0.1을 곱해서 부가세가 얼마인지 계산을 해주겠지요. 이 때  '입력 금액'은 사용자가 입력하는 값이니 언제든 바뀔 수 있습니다. 입력 금액에 따라 계산 결과값은 달라지기 때문에 '부가세'도 바뀔 수 있지요. 이렇듯 바뀔 수 있는 값을 담는 공간을 '변수'라고 합니다.  CSS의 변수는 왜 필요한가?CSS의 문법은 무척 쉽습니다. 아래와 같이 단조로운 구성으로 되어 있습니다..클래스 { 프로퍼티 : 프로퍼티 속성; }#아이디 { 프로퍼티 : 프로퍼티 속성; } 작성하기 쉬운 문법은 CSS의 큰 장점입니다. 쉽게 웹페이지를 생성하고 디자인할 수 있다는 점에서..

  • topic HTML&CSS
  • · 2024. 9. 15.
  • textsms
티스토리 제목(h2, h3, h4) 글자크기 바꾸는 방법

티스토리 제목(h2, h3, h4) 글자크기 바꾸는 방법

스킨에 기본 적용되는 제목, 본문의 글자크기티스토리에서 블로그 글을 작성할 때 제목 1, 제목 2,..., 본문 2, 본문 3까지 문단의 스타일을 지정하도록 되어 있습니다. 글자 크기를 별도로 지정하는 옵션이 없기 때문에 네이버 등 다른 블로그에서 넘어오신 분들은 당황스러울 수 있습니다. 티스토리에서는 제목의 서식 디자인을 스킨에서 제어합니다. 그리고 티스토리는 블로그 스킨에 대한 커스텀이 굉장히 자유롭습니다. 마음에 드는 티스토리를 선택하거나 다른 유저가 만들어둔 스킨 파일을 다운로드하여 업로드하는 것도 가능합니다. 저도 지금은 '쭈미로운 생활'님이 제작한 '한눈에 스킨'을 다운로드하여 커스텀한 후 사용하고 있습니다.  티스토리 스킨은 커스텀이 가능합니다제 포스트 글 중 하나를 골라 '개발자도구'를 열..

  • topic HTML&CSS
  • · 2024. 9. 15.
  • textsms
한컴오피스(한글), MS 워드에서 복사한 글이 블로그에 붙여넣기 잘 안되는 이유

한컴오피스(한글), MS 워드에서 복사한 글이 블로그에 붙여넣기 잘 안되는 이유

.hwp .doc 문서에서 복사-붙여넣기 했는데 뭐가 잘 안 돼요…주변 사람들, 클라이언트한테서 정말 많이 받는 질문입니다. 표를 복사-붙여넣기 했는데 표 모양이 이상하게 나온다든지, 중간에 문구가 끊겨서 저장이 되고 수정해도 적용이 안된다든지 하는 내용의 질문이요. 어떻게 보면 너무도 당연한 일인데 아래에서 설명할 위지윅(WYSISYG)만 익숙한 사람들에게는 참 미스터리한 일인가 봅니다. 위지윅(WYSIWYG)위지윅은 What You See Is What You Get의 약자로 직역하면 "보이는 대로 얻는다"라는 뜻을 가지고 있습니다. 프로그램이나 브라우저에서 원하는 디자인의 문서를 만들어내려면 코드 형태의 문장으로 작성해야 합니다. 비전문가는 코드로 만들어진 문서의 내용을 읽고, 편집하는 것이 사실상..

  • topic HTML&CSS
  • · 2024. 9. 14.
  • textsms
티스토리에 파비콘 적용시키기

티스토리에 파비콘 적용시키기

티스토리 블로그에 파비콘을 적용시키고 싶다면, 이전에 발행한 파비콘 생성부터 따라해보시길 바랍니다. 2024.09.11 - [HTML&CSS] - 파비콘 만들기 (.ico 파일 변환) 파비콘 만들기 (.ico 파일 변환)파비콘은 브라우저의 탭, 주소창, 북마크 목록에 나타나는 작은 아이콘입니다. 로고나 심볼에서 파행되고 작은 사이즈에서도 인식되도록 디자인됩니다. 파비콘의 일반적인 크기는 16X16 pixel 또flexbox.tistory.com 파비콘 파일을 생성했다면 티스토리 블로그 관리 모드에 접속합니다. (단축키 Q) [관리>블로그] 메뉴에 접속하면 아이콘과 파비콘을 업로드할 수 있는 칸이 보입니다.파비콘 항목에 [불러오기] 버튼을 클릭해서 생성한 .ico 파일을 선택합니다. 파일을 선택하면 [변경..

  • topic HTML&CSS
  • · 2024. 9. 12.
  • textsms
파비콘 만들기 (.ico 파일 변환)

파비콘 만들기 (.ico 파일 변환)

파비콘이란?파비콘은 브라우저의 탭, 주소창, 북마크 목록에 나타나는 작은 아이콘입니다. 로고나 심볼에서 파행되고 작은 사이즈에서도 인식되도록 디자인됩니다. 파비콘의 일반적인 크기는 16X16 pixel 또는 32x32 pixel입니다. 요즘은 스마트폰을 통해 웹에 접속하는 일이 많기 때문에 레티나 화면에서도 화질저하 없이 표시되도록 32픽셀을 추천합니다.  Tip. 배경이 투명한 파비콘을 만들고 싶다면 포토샵에서 배경을 투명(tranparent)으로 이미지 작업을 하고 확장자를 변환하는 방법이 있습니다. 32x32 픽셀: 작업 표시줄 바로가기 아이콘, macOS 파비콘 및 레티나 기반 스마트 기기의 크기96x96 픽셀: 바탕 화면 바로 가기 아이콘 및 Chrome 파비콘 크기180x180 픽셀: Appl..

  • topic HTML&CSS
  • · 2024. 9. 12.
  • textsms
HTML 메타태그 <meta> - 문서에 대한 메타 데이터 정의

HTML 메타태그 <meta> - 문서에 대한 메타 데이터 정의

태그에 대한 정의 태그는 HTML 문서의 데이터에 대한 정보를 담고 있습니다. 메타데이터는 페이지에 표시되지 않지만, 검색엔진·컴퓨터가 인식할 수 있습니다. 검색 태그에는 작성자, 페이지 설명, 키워드, 뷰포트 설정 등의 정보를 지정할 수 있습니다. 태그는 빈 요소이므로 닫는 태그가 불필요합니다. 태그의 예시 검색최적화(SEO)를 위한 Tipdescription은 페이지를 요약하는 정보를 구체적으로 기입해야 합니다. 나쁜 예 : 좋은 예 : 과거에는 태그의 keywords 값이 검색에 영향을 많이 미쳤으나, HTML 문서 컨텐츠와는 무관하게 검색만을 위해 과도하게 키워드를 넣는 사람들이 많아 신뢰성이 떨어지자 현재는 거의 영향을 미치지 않습니다. viewport의 세부 속성width : 뷰포트의 가로 크..

  • topic HTML&CSS
  • · 2024. 9. 11.
  • textsms
  • navigate_before
  • 1
  • 2
  • 3
  • navigate_next
notifications_none Notice
  • flexbox, 그는 누구인가!
article Category
  • 분류 전체보기 (61)
    • UX 디자인 (10)
    • HTML&CSS (18)
    • JS (2)
    • 폰트 (11)
    • Tool&작업환경 (6)
    • 업무 Tip (7)
    • 제품리뷰 (5)
    • Box (0)
    • 내맘대로 포스팅 (1)
tips_and_updates Recent Articles
grade Popular Articles
textsms Recent Comments
local_offer Tags
  • #애플
  • #웹폰트
  • #UX 디자인
  • #프리텐다드
  • #폰트
  • #UX디자이너
  • #선택자
  • #사용자 경험
  • #UX디자인
  • #CSS
trending_up Visitors
Today
Yesterday
Total
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바