728x90
반응형

대부분의 사람들은 자기 자신을 위해 일하는 것이 아니라 남들을 위해 일하고 있다.

그들은 먼저 회사의 소유주를 위해 일하고, 세금을 통해 정부를 위해 일하며, 마지막으로 그들에게 융자금을 빌려 준 은행을 위해 일한다.

 

부자가 되는 세번째 비결은 "자기사업을 하라"다. 

경제적인 어려움을 겪는 것은 대개 사람들이 평생 다른 사람들을 위해 일하기 때문이다.

많은 사람들이 그렇게 열심히 일하고도 결국에는 아무것도 갖지 못한다.

 

진짜 자산은 다음과 같은 범주로 구분된다.

1. 내가 없어도 되는 사업. 소유자는 나지만 관리나 운영은 다른 사람들이 하고 있다.

내가 직접 거기서 일을 해야 한다면 그것은 사업이 아니라 내 직업이다.

2. 주식

3. 채권

4. 수입을 창출하는 부동산

5. 어음이나 차용증

6. 음악이나 원고, 특허 등 지적 자산에서 비롯되는 로열티

7. 그외에 가치를 지니고 있고 소득을 창출하거나 시장성을 지닌 것

 

당신만의 사업을 시작하라.

직장을 유지하면서 부채가 아니라 진짜 자산을 사라.

  • 재정적으로 안정이 되려면 자신만의 사업에 관심을 기울여야 한다.
  • 부자들은 자산 부문에 초점을 맞추는 데 반해 다른 이들은 소득명세서에 집중한다.
  • 재정적 곤경에 부딪치는 것은 평생 다른 누군가를 위해 일하는데 따르는 직접적인 결과인 경우가 많다.
    은퇴후 자신이 그동안 기울였던 노력의 결과를 보여줄 수 없는 상태가 되는 사람들이 너무도 많다.
  • 순자산이 정확하지 않은 주된 이유 중 하나는 자산을 매각하는 순간 이득에 대한 세금이 붙기 때문이다.
  • 일단 돈이 들어가면 결코 빼내지 마라. 이렇게 생각하면 좋다. 일단 자산 부문에 들어간 돈은 당신의 직원이 된다.
    그런 돈의 가장 좋은 점은 하루 24시간 일하고, 앞으로 수세대에 걸쳐서도 일할 수 있다는 것이다.
728x90
반응형
728x90
반응형

1. 미디어쿼리란?

미디어쿼리는 CSS3 모듈중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 해준다.

예를 들어, 다음 소스는 미디어 유형이 'screen' 이면서 최소 너비가 '200px'이고 최대 너비가 '360px'일 경우 적용할 CSS를 정의하는 구문입니다.

@media screen and (min-width:200px) and (max-width:360px) {

.....

}

 

앞의 소스에서 조건 사이에 넣은 and를 연산자라고 하는데, 미디어쿼리 구문에서 사용할 수 있는 연산자는 다음과 같습니다.

연산자 설명
and 조건을 계속 추가 가능
, 동일한 스타일 유형을 사용할 미디어의 유형과 조건이 있다면 쉼표을 이용해 추가
only 미디어 쿼리를 지원하는 웹브라우저에서만 조건을 인식
not not 다음에 지정하는 미디어 유형을 제외. 예를 들어 not tv라고 지정하면 TV를 제외한 미디어만 적용

2. 미디어 쿼리의 조건

<style>
  body {
    backgroundurl(images/bg0.jpgno-repeat fixed;
    background-sizecover;
  }
  @media screen and (max-width:1024px) {
    body {
      backgroundurl(images/bg1.jpgno-repeat fixed;
      background-sizecover;
    }
  }
  @media screen and (max-width:768px) {
    body {
      backgroundurl(images/bg2.jpgno-repeat fixed;
      background-sizecover;
    }
  }
  @media screen and (max-width:320px) {
    body {
      backgroundurl(images/bg3.jpgno-repeat fixed;
      background-sizecover;
    }
  }
</style>

3. 화면 회전

미디어쿼리를 작성할 경우, orientation 속성을 사용하면 화면 방향을 체크할 수 있습니다.

orientation 속성은 portrait값과 landscape 값을 사용할 수 있는데, portrait가 단말기 세로방향을 의미합니다.

<style>
  body {
    background-color#eee;
  }
  @media screen and (orientation:landscape) {
    body {
      background-colororange;
    }
  }
  @media screen and (orientation:portrait) {
    body {
      background-coloryellow;
    }
  }
</style>
728x90
반응형
728x90
반응형

1. 가변 글꼴

텍스트 크기를 픽셀(px) 단위로 지정하면 크기가 고정되기 때문에 화면 크기가 작은 기기에서는 매우 작게 표시됩니다.

따라서 반응형 웹디자인을 위해 가변 그리드 레이아웃을 사용할 때는 글자 크기도 유동적으로 바뀌어야 합니다.

 

1) em단위

em 단위는 부모요소에서 지정한 폰트의 대문자 M의 너비를 1em으로 지정한 것으로 1em은 16px 입니다.

 

2) rem

em 단위는 부모 요소의 글꼴을 기준으로 하기 때문에 중첩된 부모 요소의 글자 크기의 영향을 받습니다.

이런 단점을 없애기 위해 만든 단위가 rem입니다.

 

2. 가변 이미지

1) CSS 이용하기

이미지를 가변 레이아웃에 맞게 표시하려면 이미지를 감싸고 있는 부모 요소만큼 커지거나 작아지도록 max-width 속성값을 100%로 지정하면 됩니다.

<style>

.content img {

max-width: 100%

height: auto;

}

</style>

 

2) <img>태그와 secret 속성

이미지 너비값을 max-width:100%로 지정하면 가변 이미지를 간단히 만들수 있지만 고해상도 이미지를 크기만 줄여 표시하더라도 파일 사이즈가 크기 때문에 모바일에서 다운로드하는데 시간이 오래 걸린다.

또한 텍스트가 포함된 이미지일 경우, 모바일 화면에 맞게 줄여 표시하면 텍스트 내용을 알아보기 힘들수도 있다.

img 태그에서 srcset 속성을 이용하면 화면 너비값이나 픽셀 밀도에 따라 고해상도의 이미지 파일을 지정할 수 있다.

728x90
반응형

+ Recent posts