지금까지의 모든 아폴로 미션은 11호를 위한 것이었다 해도 과언이 아닐만큼 아폴로 11호는 막중한 임무를 띠고 있었다

나무 위키 아폴로 11호에서

출처 : 위키피디아. 나무위키도 위키피디아 링크

Houston, Tranquility Base here. The Eagle has landed.
휴스턴, 여기는 고요의 기지.이글은 착륙했다.
착륙 약 18초 후, 20:17:58 UTC, 닐 암스트롱

네, 너무 흥분 탓에 썰이 길었습니다.

Apollo 11호 때 사용했던 소스코드가 깃헙에 올라 왔습니다.

2016/07/08 Today’s Best

chrislgarry/Apollo-11
_Apollo-11 - Original Apollo 11 guidance computer (AGC) source code._github.com

네, 물론 어셈블리로 되어 있어서 해독도 다시 돌려보는 것도 취지에 어긋납니다만, 역사적인 깃헙인 것 같아서 오늘은 소개 정도로만 그칠까 합니다.

최근 어셈블리 소스가 종종 올라와서 공부를 해야 하나 고민중입니다만, 그럴 일은 없겠죠?

Guidance Computer 의 어셈블리 소스코드를 컴퓨터 박물관에서 찾아서 오픈소스화 했다고 합니다.

우리나라 최초의 워드 프로세서 같은 것도 이런 식으로 소스코드가 공개 되면 좋겠다는 생각을 했습니다만

로보트 태권V 원본 복귀도 어려웠던 걸 생각하면 요원한 일이겠죠?

By Keen Dev on July 7, 2016.

Exported from Medium on May 31, 2017.

개인적으로 좋아하는 형태의 프레임워크 중 하나입니다.

번역하면 제목도 “ javascript 필요 없어요” 정도가 적당할 거 같은데 보통은 jaavascript로 구현을 하는 작업 몇가지들을 CSS만으로 구현했습니다.

2016/07/07 Today’s best

NamPNQ/You-Dont-Need-Javascript
_You-Dont-Need-Javascript - Css is powerful, you can do a lot of things without js._github.com

Accordion / Toggle

아코디언/토글 UI 의 JSfiddle은 다음과 같습니다. Javascript는 없다고 당황하지 마시고 다른 탭을 눌러주세요.

아코디언의 기본적인 구현 방식은 일단 input type 을 Radio 로 두고 체크가 되었을 때 display를 바꿔주는 방식으로 구현이 되어 있습니다.

.accordion \[type=radio\], .accordion \[type=checkbox\] {  
display:none;  
}

.horizontal \[type=radio\]:checked ~ label ~ .content {   
visibility:visible;  
width:442px;  
padding:0 10px;  
border:1px solid \#542437;  
border-left:0;   
}

Carousel

회전 목마 UI 입니다.

이벤트를 걸게 되는 부분은 위의 예제와 같이 input 엘리먼트에 :checked~ 를 걸게 되어 있군요.

.carousel-open:checked + .carousel-item {  
position: static;  
opacity: 100;  
}

\#carousel-1:checked ~ .control-1,  
\#carousel-2:checked ~ .control-2,  
\#carousel-3:checked ~ .control-3 {  
display: block;  
}

또 여러가지 재미있는 예제들이 있습니다만 가장 제 눈을 끈 것은 뭐니뭐니해도 Modal 이었습니다.

Modal/Popup

모달 컨테이너 클래스의 CSS입니다

.modal-container {  
background: rgba(black, .75);  
opacity: 0;  
color: white;  
width: 100%;  
height: 100%;  
position: fixed;  
top: 0;  
left: 0;  
visibility: hidden;  
transition: opacity .5s, visibility 0s linear .6s;  
z-index: 2;  
.modal-toggler:checked + & {  
opacity: 1;  
visibility: visible;  
transition: opacity .5s;  
}  
}

By Keen Dev on July 7, 2016.

Exported from Medium on May 31, 2017.