하나가 하나인가.
한 사람이라고 똑같은 한 사람이 아니다.
일당백. 어떤 사람은 한 사람이 백 사람의 일을 한다.
한 개라고 똑같은 한 개가 아니다. 작고 크고, 가볍고
무겁고, 낮고 높고, 얕고 깊고, 한 개라도 천 가지의
다양함이 있다. 하나의 결과가 하나의 원인에
의한 것이 아니다. 복합적 상호작용.
여러 보이지 않는 수많은 원인이
실타래처럼 뒤엉켜 있다.


- 박영신의《옹달샘에 던져보는 작은 질문들》중에서 -


* 한 사람의 발명가가 세상을 바꿉니다.
한 사람의 좋은 지도자가 세상을 바꿉니다.
많은 사람들이 그 한 사람을 뒤따르며 과학을
발전시키고 산업을 일으킵니다. 한 사람이
그 한 사람에 머물지 않습니다. 한 사람이
다른 사람과 어울려 복합적 상호작용을
일으킬 때 엄청난 위력을 발휘합니다.
천 가지 만 가지 총천연색의 다양한
빛깔을 빚어냅니다.  

지금 혹시 내 인생이
왜 이렇게 꼬이나 싶어 괴롭다면 무엇이 나를
힘들게 하고 있는지 종이에 하나씩 하나씩 써봐.
써놓고 나서 그것이 정말 그렇게 힘들어할 만한 가치가
있는지 생각해 보는 거야. 별것도 아닌 일을 가지고
지나치게 고민하는 것도 자존심 상하는 일 아닌가?
인생길을 달리다 보면 누구나 터널을 만나게 돼 있어.
터널이 어둡다고 멈춰 선다면, 그보다 어리석은 일이
어디 있겠어. 조금만 지나면 곧 터널 끝이 나오는데
말이야. 꼼수 부리며 피하고 싶어? 갓길은
위험하다는 사실을 명심하고 살기를 바라.

- 양순자의 《어른 공부》중에서 -


* 일이 어렵고 힘들면
그것을 헤쳐나가기보다는 피해 가고 싶어서
이리저리 머리를 굴립니다. 터널이 어두워도 그냥
지나가야 하듯이, 삶이 힘들더라고 그냥 천천히 앞으로
나아가다 보면 곧 터널 끝에 이릅니다. 그렇듯 힘든 삶도
어느새 지나가고 옛이야기할 때가 있겠죠. 요즘 갈수록
더욱 힘들어지는 세상이지만 기쁜 성탄을 맞으며
더욱 긍정적인 감사의 마음으로, 웃으며
좋은 하루를 보내시길 바랍니다.

제374회 욕심이 번뇌를 만든다

https://www.youtube.com/channel/UCSsWdUwr4UonSCAVH-k0_Lg

그렇습니다. 누구나
삶을 살고 사람들을 만나다 보면
"저분이 참 좋은 분이었는데 왜 저렇게 되었을까?"
라는 생각이 살며시 드는 안타까운 때가 있을 겁니다.
이유는 간단하죠. 어느 순간 성찰을 중단했기
때문입니다. 성찰에는 절대 끝이 없습니다.
끝이 있어서도 안 되고요.

- 이문수의《누구도 벼랑 끝에 서지 않도록》중에서 -


* 사람을 대하면서
깜짝 놀랄 때가 더러 있습니다.
지금까지 알고 있던 것과는 전혀 다른 사람으로
변한 모습을 보게 될 때입니다. 좋은 쪽으로 변화라면
다행인데 너무도 실망스러운 모습으로 변해 있을 경우
크게 놀라게 됩니다. 그런 모습은 자기관리 실패를
뜻합니다. 스스로 자신을 돌아보는 성찰의
시간이 부족했기 때문입니다. 성찰은
사람을 아름답게 변화시킵니다.

순간에 행복하십시오. 그것으로 족합니다.
우리에게 필요한 것은 오직 매 순간뿐,
그 이상도 그 이하도 아닙니다. 지금 행복하십시오.
그리고 당신이 행동을 통해 당신보다 가난한 이들을 포함하여
다른 사람들을 사랑한다는 것을 보여주면 당신은 그들에게 또한
행복을 주는 것입니다.
- 마더 데레사, ‘마더 데레사의 단순한 길’에서


‘많은 것이 필요치 않습니다.
그것은 그냥 한 번 웃어주는 것 일 수도 있습니다.
모두가 더 많이 웃는다면 세상은 보다 나은 곳이 될 터이죠.
그러니 웃고 즐거워하십시오. 하느님께서 당신을 사랑하심에 기뻐하십시오.’
이어지는 내용입니다. 모두들 행복한 크리스마스 되시기 바랍니다.

이미지 갤러리 한 줄에 4개씩 보여지다가, 모바일 세로일때 (가로 480px 이하일때) 한 줄에 2개씩 보여주기. 

이미지는 width=100% 로 하고 넓이는 div에서 조절. 

object-fit:contain

<div>
 	<div class='img_contain_left' ><img src='image/1번.jpg' width='100%'  ></div>
 	<div class='img_contain_left' ><img src='image/2번.jpg' width='100%'  ></div>
 	<div class='img_contain_left' ><img src='image/3번.jpg' width='100%' ></div>
 	<div class='img_contain_left' ><img src='image/4번.jpg' width='100%'  ></div>
 	<div class='img_contain_left' ><img src='image/5번.jpg' width='100%'  ></div>
 	<div class='img_contain_left' ><img src='image/6번.jpg' width='100%'  ></div>
 	<div class='img_contain_left' ><img src='image/7번.jpg' width='100%'  ></div>
 	<div class='img_contain_end'  ><img src='image/8번.jpg' width='200px'  ></div>
 </div>

    @media screen and (min-width: 480px) {                
        .img_contain_left {
        width:23.5%;
        float:left;
        object-fit: contain;
        margin: 0.25rem!important;
        }
        .img_contain_end {
        width:23.5%;
        float:left;
        object-fit: contain;
        margin: 0.25rem!important;
        }
    }
    
    @media screen and (max-width: 480px) {    
        .img_contain_left {
        width:47%;
        float:left;
        object-fit: contain;
        margin: 0.25rem!important;
        }
        .img_contain_end {
        width:47%;
        float:left;
        object-fit: contain;
        margin: 0.25rem!important;
        }
    }

1. meta viewport 설정

<meta name="viewport" content="width=device-width, initial-scale=1" />

2. 4개의 반응형 분기점

- 낮은 해상도의 PC, 태블릿 가로 : ~1024px

- 태블릿 가로 : 768px ~ 1023px

- 모바일 가로, 태블릿 : 480px ~ 767px

- 모바일 : ~480px

3. 3개의 반응형 분기점

- PC : 1024px ~

- 태블릿 가로, 세로 : 768px ~ 1023px

- 모바일 가로, 세로 : ~768px

4. Media Query 사용법

@media screen and (min-width:1024px) {
	/* Desktop */
}
@media screen and (min-width:768px) and (max-width: 1023px) {
	/* Tablet */
}
@media screen and (max-width:767px){ 
	/* Mobile */
}

5. PC / Tablet / Mobile 구분해서 CSS 파일 작성 

<link href="style_pc.css" media="screen and (min-width:1024px)" rel="stylesheet" />
<link href="style_tablet.css" media="screen and (min-width:768px) and (max-width:1023px)" rel="stylesheet" />
<link href="style_mobile.css" media="screen and (min-width:320px) and (max-width:767px)" rel="stylesheet" />

https://record22.tistory.com/98