개발자의 개발 블로그

[테이블에서 왼쪽 정렬된 텍스트를 가운데 정렬하는 방법]

text-align : center;  로 가운데 정렬을 할 수 있다. 

td {

text-align : center;

은 가운데 정렬이 되는데, 

th {

text-align : center;

적용이 안된다. 

tr > th로 해야,

적용이 된다. 

[테이블에서 테두리를 따로따로 지정하는 방법]

border : 1px solid red;    // 모든 테두리를 한꺼번에 변경

이외에도, 상하좌우 각각 변경이 가능하다.

border-

left right top bottom 을 붙이면 된다.

상단을 좀 더 굵게 검은색으로 하고싶다면

border-top: 2px solid black;으로 하면 된다.

홈페이지 개발 시, 화면 영역 크기를 제한하려고 한다.

제한하지 않으면, 아래 이미지와 같이 화면 창 끝과 끝까지 텍스트가 길어져 보기 좋지 않다.

그래서, 대부분의 홈페이지들은 중앙에 내용을 위치하며, 너비의 제한을 둔다.

컨텐츠 화면을 중앙으로 배치하는 방법.. margin : 0 auto;

지금 작성중인 티스토리 글쓰기 화면도 마찮가지다.

어떻게하면, 컨텐츠를 중앙으로 옮길 수 있을까?

간단하다. 하지만 모르면 어렵다.

중앙으로 이동하고자하는 div태그에 다음과 같이 style 속성을  추가해주면 된다.

width는 당연하겠지만, 너비다. 900px만 사용하겠다는 의미이다.

margin: 0 auto가 중요하다.

0은 위아래 마진이다. 위아래는 마진이 필요없으므로 0

auto는 좌우 마진이다. auto는 자동이므로 양옆을 균일한 값으로 마진이 발생한다.

따라서, 정중앙으로 컨텐츠 이미지가 이동하게 된다.

아래 사진을 보면 하단이 적용한 텍스트이다. 보기 더욱 깔끔해졌다.

margin을 쓸때는 

상 하 좌 우 모두 따로따로 사용할 수 있다.

또는 

상하 , 좌우 를 두개로 묶어서 사용할 수 있다.

아니면, 동일하게 마진(패딩)을 적용하고 싶다면, 그냥 

라고 쓰면 된다.

패딩도 똑같은 원리로 적용할 수 있다.

1. 다음 지도 API를 검색한다

2. Daum 지도 API 사이트에 들어간다.

3. 웹사이트에 삽입할 것이므로 Web 선택한다.

1일 300,000회까지 사용이 가능하다고 한다. 시작하기 고고~

Daum 지도 Javscript API 는 키 발급을 받아야만 사용할 수 있다. 

그리고 키를 발급받기 위해서는 카카오 계정이 필요하다.

아 맞다.. 다음이 아니라 카카오였지..

키 발급에는 아래 과정이 필요하다. 지도 하나 주는데 까다롭다...

1. 카카오 개발자사이트 (https://developers.kakao.com) 접속한다.

2. 개발자 등록 및 앱 생성한다.

3. 웹 플랫폼 추가: 앱 선택 – [설정] – [일반] – [플랫폼 추가] – 웹 선택 후 추가한다.

4. 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록합니다. (예: http://localhost:8080)

5. 페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 사용합니다.

6. 앱을 실행한다.

도메인이 아직 없는데 뭔 도메인을 입력하라는건지 모르겠다. 필수 입력이라는데... 그냥 원하는 도메인을 입력했다. 

안된다..

등록된 사이트 도메인에서만 지도API를 사용할 수 있기 때문에 반드시 등록해주세요.

 도메인을 만든 뒤 하자. 아니면 서버를 열어서 하자

작성 끝.

정말 쉽네요~

자동완성이 엄청난것 같아요.

약 2자만 치면 자동으로 목록이 나오고, 선택하면 

시작태그와 끝태그 그리고 중요한 속성까지 입력할 수 있게 자동완성되어 보여지네요

맥 기준으로 Option + Shift + F를 통해 HTML 자동 정렬까지 가능하구요~

확장을 통해 브라우저까지 쉽게 열 수 있으니... 이건 뭐 개발 속도가 증가될 수 밖에요 

아톰에서 엄청 삽질했던게 기억나는데

이런 세상이 있었다니..

물론... 알아야 잘 쓸수 있는거니까... 삽질이나 노가다 입력을 통해 HTML 구조에 대해 알고 계시는 것이 좋을 것같아요.

비주얼 스튜디오 코드에서 브라우저를 쉽게 열려면 패키지를 설치해줘야 한다.

1. 보기 메뉴 - 확장을 선택한다.

2. 아래와 같은 창이 나온다. 

3. View in Browser를 입력한다. 그리고 설치한다.

설명은 다음과 같다. 단축키는 Ctrl + F1이라고 한다.

끝났다..

깔끔하게 종료한 뒤, 다시 들어가서 코드에 커서를 놓고

윈도우 : Ctrl + F1

맥 : Command + F1

을 누르게 되면 자동으로 브라우저가 열리며 코드가 적용된것을 볼 수 있다.

유니티에서 간단하게 앱을 종료시키는 방법은 다음과 같다.

일단, 종료 버튼에 On Click에다가 함수를 연결한 뒤, 아래와 같이 한 줄만 써줘도 버튼을 눌렀을 때 앱은 종료된다.

이렇게 하게 되면, 앱이 종료된다.

테스트해보기 위해서는 직접 디바이스에서 해야한다.

PC상의 유니티에서는 아무런 반응이 일어나지 않는다.

1. 자동으로 회전하는 게임오브젝트 만들기

플레이어의 터치나 드래그를 통한 조작이 아니라 자동으로 회전하고 싶다면, 간단하다.

update() 함수에서 프레임마다 호출해주면 된다.

이렇게 하면, 해당 오브젝트가 y축으로 자동 회전하게 된다.

균일한 속도로 돌리고 싶다면 Time.deltaTime()을 곱해주면 된다.

2. 모바일에서 터치를 이용해 게임오브젝트 회전하기

y축 방향으로 좌우 360도 회전을 하고 싶다면 다음과 같이 하면 된다.

이렇게 하면, 모바일 터치를 읽어들여, 움직일 때 회전을 하게 된다.

http://madewithunity.blogspot.kr/2015/09/how-to-rotate-object-with-unity-3d.html

http://kimseunghyun76.tistory.com/194

http://programmingsource.tistory.com/18 

유니티에서도 안드로이드와 같이 생명 주기가 존재한다.

생명 주기(Life Cycle)이란, 유니티 내부에서 알아서 프로젝트 시작부터 종료까지 진행하는 흐름이다.

즉, 사용자가 직접 만들지 않아도 자동으로 호출되는 메소드가 존재한다.

예를 들면 Awake()와 Start() Update() 등등... 이 함수의 호출 흐름을 말한다.

먼저, 4가지 함수만 알아보자.

호출 순서

1. Awake() 

- 스크립트가 실행될 때 단 한번만 호출된다.

- 모든 오브젝트가 초기화된 후에 호출되기 때문에 GameObject.Find, GameObject.FindWithTag 등의 명령어들을 

   안전하게 사용할 수 있다.

- Awake 함수는 항상 Start() 함수 이전에 호출되므로 초기화 순서를 정할 수 있게 된다.

- 코루틴(Coroutine) 사용이 불가능하다.

2. OnEnable()

- 인스펙터뷰에서 게임오브젝트를 활성화/비활성화를 체크한다. 즉, 체크(활성화) 되었을 때 호출된다.

- 만약, 게임오브젝트를 껐다가 다시 켜면, Start()는 불리지 않으므로 작동이 되지 않는다.

- 활성화/비활성화를 사용하고자할 때, 이 함수에 활성화되었을 때 일어날 코드를 넣는다.

3. Start()

- Update() 함수가 호출되기 전에 한번만 호출된다.

- 다른 스크립트의 모든 Awake()가 실행이 끝난 이후에 실행된다.

- 스크립트가 활성화되어 있어야만 호출되어 실행된다.

4. Update()

- 매 프레임마다 호출되는 함수이며, 게임 로직에 핵심적으로 사용된다.

- 스크립트가 활성화 되어있어야 사용이 가능하다.

- 일시적으로 사용하지 않으면 불필요하게 성능저하 발생 가능성이 커진다.(매 프레임 반복 실행이므로 1초에 수십번..)

매번 아무 생각없이 사용하던 GameObject와 gameObject의 차이점에 대해 생각해보게 되었다.

확실하게 알고 넘어가자.

GameObject의 특성

- GameObject는 클래스이다. 객체가 아니다.

- Hierarchy 창에 계층구조를 이루는 게임 오브젝트 객체들을 의미한다.

- 유니티에서 기본적으로 제공되는 객체는 GameObject가 기본이다.

- 게임오브젝트는 게임을 구성하는 모든 요소(눈에 보이지 않는 카메라, 빛 포함)를 뜻한다.

- 스크립트에서 GameObject를 쓰는 이유는 다른 게임오브젝트를 호출하기 위함이다.

gameObject의 특성

- gameObject는 클래스가 아니다. 객체이다.

C# 스크립트 생성후 유니티 Hierarchy내 임의의 게임오브젝트로 스크립트를 Add Component하는데,  

이 과정은 일반적인 객체 생성 과정인  GameObject gameObject = new GameObject(); 

명령어를 자동 선언한 것이나 마찬가지이므로 선언하지 않아도 gameObject는 스크립트로 바로 참조가 가능하다.

쉽게 말하면, 해당 컴포넌트에 할당된 자기 자신이다.

만약 Player라는 게임오브젝트 내 스크립트에 gameObject를 썼다면 Player의 컴포넌트를 조작하는데 사용될 것이다.

- 스크립트에서 gameObject를 사용하면, 해당 게임 오브젝트를 호출한다.

좀 더  디테일한 차이점이 있을 것 같지만, 일단 간략하고 대표적인 차이점은

어떤 GameObject에 Attached된 스크립트 안의 

gameObject는 항상 '해당 GameObject 자신'이고, 

GameObject는 '해당 GameObject 자신'일지 아닐지 모른다.

좀 더 정리가 필요하다.. 아직 명확하지 않다. 뭔가 헷갈린다.

초기화를 하지 않았든, 어쨋든 null이 발생할 가능성이 높다.

널 체크는 간단하지만 중요하다. 널 체크를 꼭 해주자. 방법은 다음과 같다.

만약, Image myImage;으로 선언을 한다면,

if (myImage != null)

   XXXXXXXXX

도 물론 가능하지만, 더욱 간단하게 체크할 수도 있다.

if (myImage)

   XXXXXXXXX

이렇게 해도 된다. 

주의할 점 : null이라면, 이 아니라 null이 아니라면 이 조건값이다.

반대로, null일때 뭔가를 해주고 싶다면 부정연산자 !를 붙여서

if (!myImage)

   XXXXXXXXX

로 작성해야 에러가 발생하지 않는다.

다시한번 말하지만, 

!을 사용하지 않는다 = 널이 아닐때.

!을 사용한다 = 널일 때.