div 세로로 배열하기

세월이 흘러 table은 낡은 것이 되고 요즘엔 전부 div로 화면을 구성하더라. ㅠ.ㅠ

table의 td는 style의 vertical-align을 지정하여, 텍스트와 이미지를 배치할 수 있지만, div 태그안에서는 vertical-align이 적용되지 않습니다. div에 vertical-align을 지정하려면 아래와 같이 합니다.

 x:left, y:bottom 정렬

 

 

x:center, y:bottom 정렬

 

x:center, y:center 정렬

display: table; 은 table 태그 이외의 것을 table처럼 화면에 표시하도록 합니다.
그리고 display: table-cell; 이 적용된 태그는 테이블의 셀과 동일하게 취급하기 때문에
td와 마찬가지로 vertical-align을 사용할 수 있습니다.

 

angluar2에서 외부 js 파일 이용하기

화면에 지도를 띄우려하니, 당면한 도전은 angular2에서 외부 js파일의 함수를 호출하는것이다. angular2의 template와 html 파일에서는 script 태그를 인식하지 못하기 때문에 조치를 해줘야 한다.

맞는 방법인지는 모르나 아래와 같이 해결할 수 있다. 일단 index.html 파일에 내가 원하는 외부 js 파일을 include 한다.

그리고, 내가 원하는 app/~.component.ts 파일의 최상단부에 호출을 원하는 메쏘드를 선언한다. 이미 앞서의 index.html 파일에 javascript를 include 했기 때문인지 단순히 include 해주기만 하면된다.

*.component.html 에는 일반 html코드 내용을 적절히 추가해준다.