수직 정렬에서 가장 간단한 방법은 CSS로 vertical-align 속성에 middle을 주는 것입니다.
그러나 vertical-align 속성은 inline 요소 혹은 table-cell 요소에만 적용이 된다는 한계점이 있습니다.
그래서 div태그에서 vertical align을 하기가 굉장히 까다롭습니다.
div태그는 태그 중에서 block 요소에 속하기 때문에 위에 있는 vertical-align 요소가 동작하지 않기 때문입니다.
그러나 css에서는 요소의 특징을 변경할 수 있는 display라는 속성을 제공하는데, 바로 이것을 가지고 div태그의 요소를 바꾸어 간단하게 수직 정렬을 적용할 수 있는 방법을 알아보겠습니다.
CSS에서
div {
display: table-cell;
vertical-align: middle;
}
이렇게 적용해 주시면, 바로 div 태그에 수직정렬이 적용되는 것을 보실 수 있습니다.
table-cell이외에도 inline에도 vertical-align이 적용되지만, inline을 요소로 적용하게 되면, 미리 div에서 적용하였던 width와 height 등 여러 속성이 적용이 안되는 문제점이 있기 때문에 바로 table-cell로 바꾸어 준 것입니다.
그리고 vertical-align은 top, middle, bottom으로 설정해주시면 각 수직 상단, 중단, 하단으로 정렬됩니다.
여담으로 요소를 flex로 만들어서 수직 중앙정렬을 먹일수도 있습니다.
div {
display: flex;
align-items: center;
}
* 사실 이 방법은 약간의 꼼수에 가까운데, table : table-cell의 관계를 무시한 채 강제적으로 div의 block 요소만 table-cell요소로 바꾸어준 것이기 때문입니다. table : table-cell 요소는 html에서 <table> : <td>의 요소이며, 사실 html에서는 <table> 아래에 <td>가 들어가야 제대로 동작하는 것에 비교해보면 사실 상위에 div를 하나 더 만들어서 그 상위 div를 display: table;로 만들어주는 것이 엄밀하게 제대로 사용한 것이라고 볼 수 있습니다.
5. 저장기능은 없으므로 저장힐 필요가 있을 때 내용을 복사하여 다른 매체에 붙여넣기 하거나
1) 크롬에서는 오른쪽 상단의 메뉴 아이콘(점 3개 모양)을 클릭한 다음, '도구 더보기'에서 ‘페이지를 다른이름으로 저장’을 선택하면 된다. 나중에 메모를 브라우저에서 열어 볼 수 있다.
2) 파이어폭스에서는 탭을 텍스트로 저장하는 기능을 보유하고 있다. 파이어폭스의 메뉴 아이콘을 클릭하고, ‘페이지 저장’을 클릭한다. 탐색기 창이 열리면 '파일 형식' 드롭다운 메뉴에서 ‘텍스트 파일’을 선택. 이러면 텍스트 파일로 저장된 것이므로 다음에 해당 메모를 열 때는 일반 메모장에서도 열린다.
6. 저 위의 주소에서 색깔별로 각각, 글자크기, 줄간격, 최대 가로 길이, 상하좌우 여백이다. 각자 자신의 취향대로 바꾸어서 쓸 수 있다.
천간 10개 (갑, 을, 병, 정, 무, 기, 경, 신, 임, 계)와 지지 12개(자, 축, 인, 묘, 진, 사, 오, 미, 신, 유, 술, 해)의 조합으로 이루어 집니다.
얼핏 10*12의 120개의 갑자가 나올 것 같지만, 60갑자인 이유는, 두개의 조합이 동시에 움직이기 때문이에요.
그래서 천간의 홀수 번째 글자는 지지의 홀수 번재 글자와만 만나게 되어 60개 조합이 생기게 된답니다!
[10*120/2=60 혹은 빨간 표신된 '갑'이 들어간 천간이 6번 반복되니까 6*10=60!]
이걸 육십갑자(六十甲子) 혹은 줄여서 육갑(六甲)이라고 부른다고 하네요!
또한 띠를 표시할 때 이렇게 표시하기도 하죠. 백말 띠, 황금돼지 띠 이렇게요.
근데 의외로 이거를 변환해주는 사이트나 프로그램이 없더군요!
이번 추석 때 친척들과 이야기 하는데 참 사람의 개인 년도로 태어난 해의 간지를 찾기가 너무 힘들었어서 만들어봤습니다!
그냥 연도만 아래에 입력 해 주시면 그 해에 해당하는 간지를 표기해 줍니다!
또한 천간과 지지 옆에 한글로 이것이 무엇을 뜻하는지를 병기해 놓아서 읽기에 굉장히 좋습니다!
예를 들어 아래 입력하는 공간에 1592를 입력하면... 임진년이 나옵니다! 이 해는 임진왜란이 있던 해이죠! 이렇게 역사적으로도 간지를 사용하여 역사적 사건을 표기한답니다! 임진년은 검은 용의 해였네요!
그럼 잘 쓰시고 좋은하루 되세요!!
[저 처럼 한 해 찾는다고 몇십분 동안 핸드폰으로 계산해가며 검색하지 마세요.....!]
* 버전 1과 버전 2를 같이 올립니다!
* 버전 1은 간단하게 해당 년도의 천간지지, 띠, 서기, 단기 만을 알려주며 계산결과가 빠릅니다.
* 버전 2.0는 버전 1에 더해서 더 자세하게, 음력 1월 1일을 기점으로 바뀌는 천간지지의 특성을 반영하여, 양력 몇월며칠부터가 진짜로 해당 년도의 천간지지인지 알려주지만, 계산이 보통 10초 내외로 느리며 가끔씩 네트워크 오류로 작동이 안될수도 있으나 이때는 약 5분 정도 있다가 다시 계산해주시면 됩니다.
* 버전 2.1은 버전 1에 더해서 더 자세하게, 음력 1월 1일을 기점으로 바뀌는 천간지지의 특성을 반영하여,양력 몇월며칠부터가 진짜로 해당 년도의 천간지지인지 알려줍니다. 음력계산은 단순한 로직이 아니라 아주 복잡한 계산을 하기에 생활천문관 서버와 통신이 필요하기 때문에 통신시간이 조금 걸립니다. 그러나 버전 2.0에서 문제였던 느린 통신시간과 네트워크 먹통의 문제를 해결하여 버전 2.1에서는1.5초 내외로 통신속도를 개선하였으며, 네트워크 오류 문제를 해결하여 2.0에 비해 먹통이 되는 문제를 완벽히 개선하였습니다.