전체 글 (119) 썸네일형 리스트형 가계부 카테고리 정리 "어피티"란 경제뉴스 구독 중에 "가계부가 정말로 중요한 이유" 에 대한 글과 함께 내가 가계부를 쓰면서 분류하기 좋을 것 같아 글 부분만 블로그에 적어본다. 어피티 링크(구독하면 좋다). https://uppity.co.kr/ UPPITY 어피티 돈 이야기의 시작, 어피티 uppity.co.kr 고정비 : 월세, 관리비 등 매달 자동이체로 지출하는 비용. 생활비 : 식비, 병원비 등 생존하기 위해 지출하는 비용. 활동비 : 여행, 취미 등 풍요로운 생활을 위해 지출하는 비용. 친목비 : 모임비, 데이트비 등 타인과 어울리기 위해 지출하는 비용. 꾸밈비 : 의류, 헤어, 잡화 등 외적인 꾸밈을 위해 지출하는 비용. 차량비 : 주유비, 자동차보험 등 차량유지를 위해 지출하는 비용. 기여비 : 부모님 용돈,.. [CSS] flex 속성 (flex-basis, flex-grow, flex-shrink) 1. flex-basis : 아이템의 기본크기 기본값 auto #container { display: flex; max-width: 800px; margin: auto; border: 3px solid #000; background-color: #fff; } .item { font-size: 40px; flex-basis: auto; } #container { /* 위와 동일 */ } .item { font-size: 40px; flex-basis: 120px; } 2. flex-grow : 아이템의 너비 비율 기본값 0 flex-grow 값이 1이면 1:1 비율로 맞춰지는게 아니라 여백을 기준으로 비율이 맞춰지는 것이다. .item { flex-grow: 1; } 너비를 똑같이 나타내고 싶을 때는, ... [CSS] flex-basis vs width 차이점 flex-basis가 항상 width에 적용되는 것은 아니다. flex-direction: row인 경우, flex-basis 는 너비를 제어한다. 그러나 flex-direction: column인 경우, flex-basis는 높이를 제어한다. 주요차이점 flex-basis는 flex item만 적용된다. flex container 는 flex-basis 를 무시하지만 width나 height는 사용할 수 있다. flex-basis는 주축에서 작동한다. 예를 들어 flex-direction: column은 플렉스 항목의 크기를 가로로 조정하려면 width 속성이 필요하다. 절대위치에 있는 flex 항목에는 영향을 주지 않는다. #container { display: flex; flex-direction:.. [HTML] strong / b / em strong 해당 콘텐츠의 중요성이나 심각함, 긴급함 등을 강조할 때 사용. 브라우저는 일반적으로 요소의 콘텐츠를 굵은 텍스트로 표현. b HTML5에서 제목(heading)은 부터 태그로, 강조된 텍스트는 태그로, 중요한 의미를 가지는 텍스트는 태그 사용. 하이라이트된 텍스트는 태그로 표현. 따라서 위의 태그들에서 적절한 태그를 찾을 수 없을 때만 마지막 선택지로 태그 사용. em 강조된 텍스트를 표현. HTML5에서도 여전히 지원, 대신 CSS를 사용하면 더욱 다양한 효과를 줄 수 있다. strong vs b 요소는 텍스트 자체의 주의를 끌기 위해 사용, 은 요소의 콘텐츠 자체의 중요성 강조할 때 사용. strong vs em 요소는 구어체 강조와 같이 문장의 의미를 변경하는데 사용("I love c.. [HTML] abbr acronym abbr abbr 단어의 축약형(abbreviation)이나 머리글자로만 된 단어(acronym)를 정의할 때 사용. 브라우저나 번역 시스템, 검색 엔진에 유용한 정보를 제공. 요소 위에 마우스를 올려놓으면 title 속성으로 명시한 단어의 원형이 나타난다. IOC (국제 올림픽 위원회)는 스위스 로잔에 본부를 둔 국제 스포츠 기구이다. acronym acronym 머리글자로만 된 단어(acronym)를 정의. 더 이상 지원하지 않으며 대신 요소를 사용한다. 요소 위에 마우스를 올려놓으면 title 속성으로 명시한 단어의 원형이 나타난다. AJAX 는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다. 모바일 브라우저에서 100vh 오류(직접해보기) 모바일 브라우저에서 100vh 오류 ⛔오류 module 클래스에 100vh 스타일 지정 후, 웹 브라우저 모바일 사이즈에서는 잘 보였으나, 모바일에서는 아래의 이미지처럼 100vh가 적용되지 않고 텍스트가 밀려나는 화면이 보였다. ⏺기준과 문제점. 아이폰기준. 14버전. 무조건 100vh!! 어느 기기든 화면 위아래와 맞춘다. 웹 브라우저에서는 100vh가 적용되나 모바일 크롬, 파이어폭스, 사파리가 적용이 안됨. 모바일 브라우저만 적용하기 위해서 아래 css 적용. @media only screen and (max-device-width: 모바일사이즈) { /* 아래 예제는 640px로 기준! */ /* 스마트폰만 일단 확인(tablet은 별도 필수) */ /* 웹브라우저에서 기기툴바전환할 경우에도 이.. [JavaScript] return이 하는 일 값을 반환하는데 사용. 지역변수의 값을 아는데 사용. 현재 진행중인 함수를 중지(escape). 1. 값을 반환하는데 사용 + 2. 지역변수의 값을 아는데 사용. [예제1] var test = function() { var x = 1; } test(); console.log(test()); // undefined 위의 함수는 실행되지 않는다. 내부 구문들을 실행(test())하였으나 반환할 값이 선언되지 않았다. x를 얻기 위해선 return을 사용하여 값을 반환해야 한다. var test = function() { var x = 1; return x; } var test2 = test(); console.log(test2); test() 함수를 실행할 경우 해당함수는 1을 반환한다. 반환값을 사용하기 .. [CSS] 웹폰트 참고 https://velog.io/@vnthf/%EC%9B%B9%ED%8F%B0%ED%8A%B8-%EC%B5%9C%EC%A0%81%ED%99%94-%ED%95%98%EA%B8%B0 웹폰트 최적화 하기 웹폰트란? 폰트 web safe font - 일반적으로 시스템에 설치된 폰트. 다운로드 없이 사용자에게 의도대로 표현이 할 수 있음. (Arial, Helvetica 등) web font - 설치되어 있지 않아서 브라우저에서 다운로드 velog.io https://d2.naver.com/helloworld/4969726 이전 1 2 3 4 5 6 7 ··· 15 다음
