[CSS] div보다 작은 border 만들기 (Make border smaller than div length)

div보다 작은 border 만들기

div {
  width   : 200px;
  height  : 50px;   
  position: relative;
  z-index : 1;
}

div:before {
  content : "";
  position: absolute;
  left    : 0;
  bottom  : 0;
  height  : 1px;
  width   : 50%;  /* or 100px */
  border-bottom:1px solid magenta;
}

pseudo 클래스로 넣어주면 된다.

refer

http://stackoverflow.com/questions/8572952/border-length-smaller-than-div-width

The Egg, Andy Weir

출처: http://www.galactanet.com/oneoff/theegg_ko.html

The Egg
Written by Andy Weir
Translated by Soo Choi 최수영

당신은 귀가하는 도중 죽었다.
차사고였다. 그다지 특별한 사고는 아니였지만 치명적이였다. 당신은 죽으며 아내와 두 아이들을 남겼다. 다행히 고통은 없는 죽음이였다. 응급요원들이 당신을 살리기 위해 최선을 다했지만 이미 늦은 일이었다. 사실 몸이 아주 산산조각 나는 바람에 죽는게 나았다.
그리고 그때, 당신은 날 만났다.
“무슨… 무슨 일이 일어난거죠?” 당신은 물었다. “여긴 어딘가요?”
“당신은 죽었어요,” 난 단도직입적으로 말했다. 돌려말할 필요는 없다.
“트… 트럭이 미끄러지고 있었는데…”
“그랬죠.” 나는 말했다.
“내가… 내가 죽었나요?”
“네. 하지만 상심하진 말아요. 다들 언젠간 죽는 법이니까요.” 나는 말했다.
당신은 돌아보았다. 아무 것도 없었다. 당신과 나를 제외하곤. “여기가 어디죠?” 당신이 물었다. “사후세계인가요?”
“그렇다고 볼 수 있죠,” 내가 말했다.
“당신이 하나님인가요?” 당신이 물었다.
“네.” 내가 대답했다. “하나님이에요, 난.”
“내 아이들… 내 아내.“ 당신이 말했다.
“그들은 왜요?”
“그들은 괜찮을까요?”
“보기 좋군요.” 내가 말했다. “방금 죽었는데도 가족을 걱정하다니. 아주 좋아요.”
당신은 나를 홀린 듯이 바라보았다. 당신한테는 나는 하나님이 아니라, 그저 한 남자로 보일 뿐이였다. 여자일 수도 있고. 베일에 싸인 권위자로 보일 수도 있겠다. 절대자라기 보다는 문법 선생님 같은 존재 같다고나 할까.
“걱정마세요.” 난 말했다. “그들은 괜찮을 꺼에요. 당신의 아이들은 당신을 완벽했던 사람으로 기억할꺼에요. 아내는 겉으로는 슬퍼하겠지만, 속으로는 안심하겠죠. 뭐, 둘의 결혼은 실패하고 있었으니까요. 이게 위로가 될진 모르겠지만, 자신이 안심하고 있다는 거에 그녀는 매우 자신을 자책할꺼에요.”
“아.” 당신이 말했다. “그럼 이제 무슨 일이 일어나는 거죠? 천국이나 지옥에 가거나 하는 건가요?”
“아니에요.” 내가 말했다. “당신은 환생하게 될 겁니다.”
“아.” 당신이 말했다. “힌두교 얘기가 맞았네요, 그럼.”
“모든 종교는 다 그 나름대로 맞아요.” 내가 말했다. “저와 좀 걷죠.”
우리는 허공을 같이 걷기 시작했다. “우리는 어디로 가고 있는 거죠?”
“딱히 정해진 곳은 없어요.” 내가 말했다. “얘기하면서 걷는 거죠.”
“그럼 요점이 뭐죠?” 당신은 물었다. “내가 환생하면, 난 다시 백지로 태어나는 거잖아요, 그렇죠? 아기로 말이죠. 그러면 내가 이번 생애에 경험하고 행했던 모든 것들이 다 무의미하게 되는 거고요.”
“그렇지 않아요!” 내가 답했다. “당신은 전 생애에서 얻은 모든 지식과 경험을 가지고 있어요. 그저 지금 당장 기억을 못 할 뿐이죠.”
나는 걷는 것을 멈추고 당신의 어깨를 잡았다. “당신의 영혼은 당신의 상상을 뛰어넘을 정도로 굉장하고, 아름답고, 거대한 것이에요. 인간의 생각은 당신의 존재의 그저 조그만 부분만을 담고 있을 뿐인거죠. 마치 컵에 담긴 물이 차가운지 뜨거운지 보려고 손가락을 담구는 것 같은, 그런 일이에요. 당신의 조그마한 부분을 컵에 담구고, 다시 꺼낼 때 당신은 그 그릇이 담았던 모든 경험을 얻는 거죠.”
“당신은 그간 48년 동안 인간으로 지내왔기 때문에 당신의 거대한 자아를 아직 다 느끼지 못한 것 뿐이에요. 여기서 좀만 지내고 나면, 당신은 모든 것을 기억하기 시작할 겁니다. 하지만 생애와 생애 사이에서 그렇게 할 필요는 없어요.”
“그럼 전 지금까지 몇 번 환생한거죠?”
“많이요. 아주, 아주 많이요. 아주 여러 가지의 삶으로 말이죠.” 내가 말했다. “이번에는 기원전 540년의 중국인 소작농 여자로 태어나게 될 꺼에요.”
“잠시, 뭐, 뭐라구요?” 당신은 더듬으며 말했다. “나를 과거로 보낸다는 말이에요?”
“뭐, 그런 셈이죠. 당신도 알겠지만, 시간은 당신의 세계에서만 존재해요. 나의 세계는 다른 방식으로 돌아가죠.”
“당신은 어디서 왔는데요?” 당신이 물었다.
“물론” – 난 설명하기 시작했다 – “난 분명 어디서론가 왔어요. 여기와는 다른 곳이죠. 그리고 거기서 나같은 존재들은 더 존재해요. 당신은 나의 세계에 대해서 더 알고 싶어한다는 걸 알지만, 솔직히 지금으로썬 이해할 수 없을 겁니다.”
“아.” 당신은 약간 실망한 듯 했다. “잠시만요. 만약 시간 상 다른 곳에 제가 환생하게 된다면, 한번 쯤 내 자신과 맞닥뜨린 적도 있을 수 있겠네요.”
“그럼요. 항상 일어나는 일이죠. 그리고 두 생애 다 자신의 삶 밖에 인지할 수 없으니, 당신은 그런 일이 일어나는 지도 모르고요.”
“그럼 도대체 이러한 일을 하는 목적이 뭐인거죠?”
“지금 진심인가요?” 난 물었다. “지금 진심으로 나에게 삶의 목적을 물어보고 있는 건가요? 약간 진부한 질문이라고 생각 안해요?”
“타당한 질문이라고 생각 하는데요.” 당신은 물러설 기색이 없어보였다.
나는 당신의 눈을 바라보며 대답했다. “삶의 목적, 그리고 내가 이 모든 세계를 만든 이유는, 당신의 성장을 위해서에요.”
“인류 전체 말이에요? 우리가 다 성장하기를 원하는 건가요?”
“아뇨, 당신 한 명이요. 난 이 모든 세계를 당신 하나를 위해 만들었어요. 새로운 생애 하나 하나마다 당신은 자라고 성숙해져서 더 크고 대단한 지능을 가지게 될꺼에요.”
“저만요? 다른 사람들은요?”
“다른 사람들은 없어요.” 당신이 말했다. “이 세상에서 존재하는 건 당신과 저 뿐이에요.”
당신은 나를 멍하게 쳐다보았다. “하지만 지구 상의 있는 수많은 사람들은…”
“다 당신이에요. 당신의 각기 다른 환생이죠.”
“잠시만요. 내가 모두란 말이에요!?”
“이제야 이해하기 시작하는 군요.” 축하의 의미로 등을 툭 치며 내가 말했다.
“내가 이 세상에서 살았던 모든 인간이라는 건가요?”
“그리고 이 후에 살 모든 인간이기도 하죠.”
“내가 아브라함 링컨이였어요?”
“그리고 존 부스 (역주: 링컨의 살인자)이기도 했죠.” 내가 덧붙혔다.
“내가 히틀러였다고요?” 당신은 끔찍한 듯 물었다.
“그리고 그가 살해한 백만명이 넘는 사람들이였죠.”
“내가 예수님이였단 말인가요?”
“그리고 그를 따른 모든 사람들이었죠.”
당신은 조용해졌다.
“당신이 어떤 사람을 피해줄 때마다”–내가 말했다– “당신은 당신 자신을 피해주고 있었어요. 그리고 당신이 다른 사람에게 친절을 배풀 때마다 자기 자신에게 그렇게 한거죠. 과거와 미래를 포함한 이 세상의 모든 사람이 겪은 행복과 불행을 당신은 이미 겪었거나, 앞으로 겪을꺼에요.”
당신은 오랫동안 생각에 잠겼다.
“왜죠?” 당신은 물었다. “왜 이 모든 걸 하는 거죠?”
“왜야하면 어느날, 당신은 나와 같이 될 것이거든요. 그게 당신의 존재이기 때문이에요. 당신은 나와 같은 부류이죠. 나의 자식이에요.”
“우와,” 당신이 놀라서 말했다. “내가 신이란 말인가요?”
“아니, 아직은 아니에요. 당신은 태아에 불과하죠. 아직도 자라고 있는 태아. 시간 상의 모든 생애를 다 살았을 때, 신으로 태어날 만큼 자라나 있을 꺼에요.”
“그럼 이 모든 세계가,” 당신이 말했다, “그저…”
“알과 같은 거죠.” 내가 대답했다. “자, 이제 다음 생애로 환생할 시간이군요.”
그리고 난 당신을 보내주었다.

기억속으로, 이은미

함께 느꼈던 많은 슬픔도, 난 후회하지 않았어.
내게 남겨진 너의 사랑이 흩어져가기 전에 내게 돌아와.


오후 햇살마져 지나간 거리에
오랜 기억들은 내곁에 찾아와
뭐라고 말은 하지만 닮아갈수 없는 지난날
함께 느꼈던 많은 슬픔도 후회하진 않았어
내게 돌아와 담고 싶은 기억 속으로
내게 남겨진 너의 사랑이 흩어져가기 전에
내게 돌아와 닫고 싶은 기억속으로
내게 남겨진 너의 사랑이 미소질수 있도록
언제부터인지 알수 없지만
오랜 시간들이 낯설게 느껴져
돌이킬수 없겠지 우리의 숨가쁜 지난날
애써 지우려 했던 슬픔이 끝나기 전에는
내게 돌아와 닫고 싶은 기억속으로
내게 남겨진 너의 사랑이 흩어져가기 전에
내게 돌아와 닫고 싶은 기억 속으로
내게 남겨진 너의 사랑이 미소질수 있도록

세계의 한계

나의 언어의 한계가 나의 세계의 한계다
– 루트비히 비트겐슈타인

아는 만큼 보이고, 그것에서 더 생각을 뻗어나가, 단어로 정의내릴 수 있다.
물론 단어로 정의할 수 없는 것들이 있다.
인공지능의 한계도 생각나는데, AI를 만들기 위핸 딱 딱 떨어지는 logical한 것들을 input하다보니, ‘사랑’같이 정의할 수 없는 개념들을 넣을 수 없다는 것들.

북극에 사는 사람들은 ‘눈’을 정의하는 단어가 몇십개가 된다고 하였나.
그들이 보는 ‘눈’은 내가 보는 눈보다 훨씬 디테일할 것이다.

그런 디테일로 삶을 살고프다.

[jquery] 브라우저 시작 지점 바꾸기

jQuery

jquery로 하면 크로스브라우징 할 필요 없이 간단하다.

var app_offset_top = $('.article-apps').offset().top;
$(window).scrollTop(app_offset_top);

javascript

창 위치를 판단하는 크로스 브라우저 코드 (IE, 오페라 vs 파이어폭스, 사파리/크롬은 양쪽 지원)

var leftPos = (typeof window.screenLeft "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop "number") ? window.screenTop : window.screenY;

이 짓 하고 있었는데 멘토님이 지나가시다가 “jquery쓰세요”하시며 알려주셨다.

로컬에서 개발하던 것을 쉽고 엘레강스하게 다른 기기에서 보기(feat. Pow)

서론

드디어 크로스 브라우징을 할 때가 되었다.
나는 매우 의욕이 없어지고 집에 가고 싶어지며 기분이 다운되었다.
테스트 폰 / 윈도우 노트북을 구할 생각에 막막해졌으며,
인터넷 익스플로러를 켜서 내 더러운 코드를 돌려 깨지는 것들을 다 디버깅할 생각을 하니 심장이 내려앉았다.

무거운 VMWare를 설치해 나의 청순한 맥에 윈도우를 들여놓기도 싫었고(미안 윈도우)
Browser Stack이란 솔루션으로 브라우저 내에서 가상머신을 돌리는 것을 free trial로 24시간만 써볼까 했더니, 그것도 IE 8, 9는 유료 버전만 되는 등 생각처럼 되지 않았다.

그런 절망 속에서 Pow가 나타났다!

Pow

예전에 로컬 서버를 이름으로 관리해주는 툴인 pow 사용법 글을 올렸었는데, 그 곳에서 지원해주는 기능이 있다.

예를 들어, pow로 돌린 내 앱 url이

http://pinkfong-china-apps.dev/

라면, 원하는 다른 기기를 같은 망에서 접속하고(동일 와이파이를 사용한다던지…)

http://pinkfong-china-apps.10.0.12.100.xip.io/

란 url로 들어가주면
S__12828781

OH OH
아름답게 접속 된다
OH OH

이는 장고나 npm 등등에서도 많이 지원해 주는데, pow를 사용하면 쉽고 엘레강스하게 돌릴 수 있다.

결론

  1. pow와 anvil은 참 좋다.
  2. 두근두근하며 IE와 안드로이드 기본 브라우저에서 돌려보았는데 transition이 되지 않는 것만 빼곤 아름답게 동작해서 한시름 덜었다.

9와 숫자들, 높은 마음

정말 사실은 낮은 몸에 갖혀있대도

우리는 높은 마음을 가지고 살며, 밝은 눈으로 바라보자.

로맹가리의 새들은 페루에 가서 죽다의 ‘고매한 선구자들’이었나 하는 단편도 스쳐 지나가네.

무엇에 치이더라도, 잃지 않을 마음


엽서 위에 새겨진 예쁜 그림 같은
그럴듯한 그 하루 속에
정말 행복이 있었는지

몸부림을 쳐봐도 이게 다일 지도 몰라
아무도 찾지 않는 연극
그 속에서도 조연인 내 얘긴

그래도 조금은 나
특별하고 싶은데
지금 그대와 같이 아름다운 사람 앞에선

높은 마음으로 살아야지
낮은 몸에 갇혀있대도
평범함에 짓눌린 일상이
사실은 나의 일생이라면

밝은 눈으로 바라볼게
어둠이 더 짙어질수록
인정할 수 없는 모든 게
사실은 세상의 이치라면

품어온 옛 꿈들은
베개맡에 머릴 묻은 채
잊혀지고 말겠지만

높은 마음으로 살아야지
낮은 몸에 같혀있대도
평범함에 짓눌린 일상이
사실은 나의 일생이라면

활짝 두 귀를 열어둘게
침묵이 더 깊어질수록
대답할 수 없는 모든 게
아직은 너의 비밀이라면

safari(혹은 webkit브라우저)에서 CSS Transition이 깜빡이며 잘 나오지 않을 때

flickering CSS Transition in safari(webkit browser)

Problem

앱 다운로드 드롭다운같은 메뉴를 만들려고 ul li요소에 CSS transition을 먹인 애니메이션 요소를 만들었는데
크롬에선 잘 나오는 반면 safari에서는 mouse hover시 불규칙적으로 깜빡거리며 잘 안보이는 것이었다.

Solution

css hover safari not working라는 키워드로 검색을 해봤더니 나랑 같은 증상(safari에서 flickering)으로 고생하는 사람들이 많았다.
해결책은
1. -webkit-transform: translate3d(0,0,0)를 깜빡이는 요소에 집어넣어
2. -webkit-backface-visibility: hidden;를 넣어라
등등이 있었는데, 나는 모두 되지 않았고, stackoverflow에서 아무도 추천하지 않았던 답변인
3. transition을 all말고 특정지어서 해보세요^^
에서 얻어 걸렸다. 후…

Conclusion

  1. 위의 방법들을 해보셔요.
  2. transition: opacity .3s;처럼 all말고 필요한 것만 특정지어보셔요.
  3. 멘토님 says “CSS 애니메이션은 잘 고려하고 쓰세요”
    스크린샷 2015-09-09 오후 3.03.54
    일단 IE9까지도 안되고 한국 안드로이드 브라우저는 4.1보다 낮은 것들도 엄청 많습니다.
    후 jquery animation으로 고쳐야겠다

Refer

https://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit
http://www.bluepiccadilly.com/2012/01/prevent-flickering-css-transitions-and-transforms-webkit
http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker

CSS 요소 수직정렬 (block, inline-block)

1. Inline / Inline-block 요소

보고 공부한 링크
vertical-align속성을 사용한다.

  • 요소 자체만을 정렬하고, 내용에는 영향을 미치지 않음
  • table cell에 적용할 때는 내용에 영향.
  • 정렬하는 요소를 다른 인라인 요소에 상대적으로 정렬.
    • 그래서 같은 줄에서 인라인 요소 크기 따라 높낮이 달라질 수 있고,
    • 그 줄에 있는 line-height설정에 따라서도 달라질 수 있음.
  • 속성값
    • baseline: 기본값. 부모 요소의 기준선(글자에서 꼬리 뺀거)에 맞춤.
    • sub: 부모의 아래첨자 기준선에 맞춤.
    • super: 부모의 위첨자 기준선에 맞춤.
    • text-top: 요소의 맨 위를 부모 font의 맨 위에 맞춤.
    • text-bottom: 요소의 맨 아래를 부모 font의 맨 아래에 맞춤.
    • middle: 부모 요소 중앙에 위치
    • top: 요소 맨 위를 줄에서 가장 큰 요소의 맨 위에 맞춤.
    • bottom: 요소 맨 아래를 줄에서 가장 낮은 요소에 맞춤.
    • 값(px, cm): 0px는 베이스라인과 같음. 높아질수록 올라감.
    • 값(%): line-height의 백분율. 0%는 baseline.

이미지 수직 가운데 정렬

  1. 이미지를 담을 div만들어 div에 line-height속성 사용
  2. 이미지에 vertical-align:middle
  3. line-height는 이미지 height보다 높아야 함.
<div id="content"><img src="molamola.png"></div>
#content {
    line-height: 200px;
}
#img {
    vertical-align: middle;
}

한줄 텍스트 수직 가운데 정렬

  1. 텍스트 div만들어 div에 div랑 같은 크기의 line-height속성
  2. 필요하면 div에 height값도 적용.

Refer

vertical-align속성 자세히 알기
수직으로 가운데 정렬 5가지
Vertical align middle on an inline-block anchor tag

삶을 위한 지침

삶을 위한 지침

다른 사람들이 기대하는 것보다 더 많이, 그리고
진심으로 기뻐하며 주라.
자신이 가장 좋아하는 시를 외우라.
들리는 모든 것을 믿지는 말라.
때로 자신이 갖고 있는 모든 것을 써버려라, 아니면
실컷 잠을 자라.

첫눈에 반하는 사랑을 믿으라.
다른 사람의 꿈을 절대로 비웃지 말라.
꿈이 없는 사람은 가난한 사람이니까.
사랑은 깊고 열정적으로 하라. 상처받을 수도 있지만,
그것만이 완전한 삶을 사는 유일한 길이다.

위대한 사랑과 위대한 성취는
엄청난 위험을 동반한다는 사실을 기억하라.
실패하더라도, 그것을 통해 배움을 얻는 일에까지
실패하지는 말라.

때로는 침묵이 가장 좋은 해답이 될 수 있음을 기억하라.
변화하는데 인색하지 말라. 그러나
자신의 가치관을 지키라.
무엇보다 바람직하고 존경할 만한 삶을 살라.
늙어서 자신의 생을 돌아볼 때
또다시 그것을 살게 될 테니까.

신을 믿으라, 하지만 차는 잠그고 다니라.
숨은 뜻을 알아차리라.
당신의 지식을 남과 나누라,
그것이 영원한 삶을 얻는 길이므로.
기도하라, 헤아릴 수 없이 많은 힘이 거기에 있다.

자신이 실수한 것을 깨닫는 순간, 즉시 바로잡으라.
즐겁게 대화를 나눌 수 있는 사람과 결혼하라,
늙으면 그것이 아주 중요해질 테니까.
하지만 가끔 혼자 있는 시간을 가지라.

일년에 한 번은, 전에 전혀 가보지 않았던 곳을 찾아가라.
돈을 많이 벌었다면
살아 있을 때 다른 사람을 돕는데 쓰라,
그것이 부가 가져다주는 가장 큰 만족이다.

자신이 원하는 걸 얻지 못하는 것이 때로는
큰 행운일 수 있다는 점을 기억하라.

규칙을 배우고 나서, 그중 몇 가지를 위반하라.
무엇을 얻기 위해 무엇을 포기했는가를
자신의 성공을 평가하는 기준으로 삼으라.
자신의 성격이 곧 자신의 운명임을 기억하라.