[생활코딩] WEB2 - CSS (1)

https://opentutorials.org/course/3086/18311


폰트의 스타일을 바꾸는 쉽지만 재앙인 방법
->폰트 태그 추가


아톰에디터에서 커맨드 누르고 다중선택해서 동일한 코드 입력
입력한 다음 
쉬프트 +  > 누르면 다같이 한칸씩 선택
옵션 +  > 다음 단어로 커서 넘어감
커맨드 + > 줄 끝으로 커서 넘어감 
커맨드 + D 선택한 블록이랑 동일한 부분 찾아서 선택함

CSS로 스타일에 대한 정의, 유지, 보수

1)CSS 사용 방법 1
CSS는 HTML과는 완전히 다른 언어이기 때문에 
<style>
   이 안에 내용은 CSS 문법에 맞게 처리하도록 하렴 
</style>


여기서의 style 태그는 효과만 있어서는 이 효과를 누구에게 지정할지를 설명할 수가 없기 때문에 a { } 라는 누구에게 줄 것인가를 선택한다는 의미에서 “선택자” “Selector” 라고 부른다
선택자에게 지정될 효과가 color:red;   “선언" “Declaration” 이라고 한다

2)CSS 사용 방법 2


HTML에 style이라는 속성의 값을 
웹브라우저는 CSS라는 문법에 따라 해석해서 그 결과를 스타일 속성이 위치하는 태그에게 적용하게 된다
이 style = “   “ 부분은 HTML의 속성이다
이 선언은 스타일 태그를 직접 사용할때에는 그 태그가 위치한 곳에만 적용하기 때문에 선택자를 쓸 필요가 없다


Selector 선택자.누구에게 줄까 : a 코드
Declaration 선언. 무슨 효과를 줄까  : {}
property 어떤 속성 : color
value 그 속성의 값 : red
어떤 것이 어떤지 알면 질문할 수 있게 된다


무엇을 모르는지를 알면 검색할 수 있고, 질문할 수 있고, 궁금해하기 시작함

CSS 속성을 스스로 알아내는 방법

h1의 폰트 사이즈를 어떻게 키우지?
구글링 css font size property

CSS 선택자를 스스로 알아내는 방법


.네임 {
클래스 정의
}





하나의 태그에는 여러개의 속성이 들어갈 수 있고
여러개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다
(좋은 방법은 아님)
“saw active"에서 active인 빨간색이 되는데
.active가 .saw보다 나중에 등장했기 때문
이 순서를 바꾸면
“saw active”라고 입력해도 .saw의 값이 반영됨
말하자면 최근의 값이 영향력이 큼

그래서 다른 방식이 id를 사용하는 것




태그 선택자 < 클래스 선택자 < 아이디 선택자


이유는?
Id 선택자의 값이 active인 태그가 한번이라도 등장하면 더이상 active는 쓰면 안됨. 단 한번만 등장해야함
ID 선택자가 구체적. 포괄적인것보다 구체적인것의 우선순위를 높임
태그 선택자 a{}를 통해 전체 태그의 디자인을 하고, 예외적인 것에 ID 선택자를 적용

CSS Selector




#생활코딩 #CSS 편! Selector, Declaration, Property, Value 



'스터디 > WEB' 카테고리의 다른 글

[생활코딩] WEB2 - CSS (1)  (0) 2019.02.09
[생활코딩] WEB1 - HTML& Internet 시작  (0) 2019.02.09

[생활코딩] WEB1 - HTML& Internet 시작


웹을 통해서 코딩을 배우는 수업이면서, 코딩으로 웹을 만드는 방법에 대한 수업

 
지도




수업 목록프로젝트의 동기


Atom editor 설치
한글이 깨질 때
<meta charset="utf-8”> 추가


HTML Preview 패키지를 깔아서 
에디터에서 코딩 결과가 우측에 바로 보이도록 했다

CSS
<p style="margin-top:45px;”>



Html title head meta body
<a href= "https://www.w3.org/TR/html5/" target="_blank" title ="html5 specification>


간단 페이지 만들기
고등학교때로 돌아간 느낌


인터넷과 웹
세계 최초의 웹 브라우저가 world wide web


세계 최초의 웹 페이지




Github 원래있던 계정폭파시키고 새로 만들었다!
녹색으로 물들이고 싶은 욕망..




https://twitter.com/Binsworld_dev/status/1093927716200435712
수업준비 때문에 100일코딩에서 유니티 연습을 잠시 접고서 (유니티야 미안해 흑흑) 생활코딩의 WEBn을 듣기 시작했다. HTML-CSS-Javascript 순으로 들어야지. 깃허브 페이지도 계폭하고 새로 세팅! #WWCodeSeoul #100일코딩



'스터디 > WEB' 카테고리의 다른 글

[생활코딩] WEB2 - CSS (1)  (0) 2019.02.09
[생활코딩] WEB1 - HTML& Internet 시작  (0) 2019.02.09

[Unity] 작업노트 - Playmaker 연습하기 8, UI - Input field

181226

Openplay님의 강좌 
Playmaker tutorial - with Unity UI #3: input Field 1

인풋필드에 입력한 텍스트가 상단에 디스플레이 되게 하는 예제

UI 앵커포인트는 Sketch 앱 처럼 좌측상단을 0점으로 바꿔줘야 좀 편한듯


텍스트 입력후 엔터를 치면 text를 string값에 저장하기
Input finished 상태에 인풋필드 오브젝트를 드래그앤드랍하여 Get Property - text (string)

그리고 그 값을 InputMessage 오브젝트를 드래그앤드랍하여 Set Property - text(string) 저장되었던 값으로 지정해준다


1단계 완성!

두번째 영삿ㅇ에서는
입력된 텍스트가 없을 경우의 예외처리에 대한 구현

텍스트가 없는지를 판단하는 state를 하나 추가하고,
없는 것이 참일 경우 경고 메시지를 띄우는 state를 추가

판단 state에서는 인풋필드 오브젝트의 text.Length 값을 가져와 int값에 저장하고,
Int compare 액션으로 들어온 값에 대한 이벤트를 정의한다

입력된 텍스트가 없을때의 state에서 화면에 표시되는 메시지를 Set Property로 지정해준다

텍스트가 제대로 입력되면 괜히 랜덤 방향으로 턴하게 지정해서 마무리하려다가

타이핑할때마다 랜덤으로 바라보다가 입력이 끝나면 제자리로 돌아보는 효과를 낸고 싶어서 state를 하나 더 추가했다

완성 :)


👩‍💻 #100DaysOfCode Day12
Unity Input Field UI + Playmaker Practice




[Unity] Playmaker 플레이메이커 참고 북마크

Hutong 사 홈페이지

Hutong사 유튜브

여러 튜토리얼들 

템플릿 활용하기


디버그


디버그 중 State를 알트+클릭하면 임시로 트랜지션이 되도록 해볼 수 있다

트랜지션 부분을 알트+클릭하면 그 이벤트가 연결된 다음 스테이트로 넘어간다

Debug youtube

커스텀 액션 만들기

스크립트에서 커스텀 액션 접근하기

스크립트에서 플레이메이커 접근하기

팁!

State Machine 디자인하기
-FSM 디스크립션에 이 FSM이 어떤 behavior를 하게될지 서술해본다. 
-그래프뷰에서 대강 배치를 하면서 흐름을 크게 그려본다
-실제로 액션을 넣기 전에 스테이트에 Debug Log를 추가하면서 알트클릭으로 체크하며 테스트한다
-작은 여러 FSM들이 모여 큰 FSM이 되도록
-스탠다이즈된 이벤트 네임을 쓴다 “activate” “turnOn”

NoExit 예제


인벤토리 예제

애니메이션 기능 튜토리얼


[Unity] Playmaker 플레이메이커 공식 튜토리얼 리스트


Hutong 
12 videos


01 - States Example 1 - Light Switch



02 - States Example 2 - Open and Close


03 - Triggers


5 - Breakable Objects


06 - Platform Color Change


07 - Global Variables, Events and Managers - Health Pickup



09 - Pop Up Manager

https://www.youtube.com/watch?v=sFG0kpCvxJ8&index=10&list=PLC759306A1E692A10



10 - Platform Puzzle Chest Opening Game


11 - Access Control Clicking and Quests

Click Manager
QuestManager
GUI_QuestCounter
GUI_QuestStep


12 - Connecting Scripts to Playmaker




Level Load



[Unity] 플레이메이커 Playmaker 액션 레퍼런스 리스트

Action Reference

https://hutonggames.fogbugz.com/default.asp?W2



Animate Variables Actions

These actions animate variable values over time using curves and easing. Use these actions to animate parameters in other actions.

Animation Actions

OTE: These actions use the Legacy Animation System in Unity. There is a newer animation system called Mecanim Animator that can be controlled with Animator Actions. However, in some situations it can be simpler to use these animation actions.
Most Animation Actions require an Animation Component on the game object. 
*가끔 옵션들이 히든되어있을수 있기 때문에 Debug 뷰 선택해야 될 수 있음
애니메이션과 애니메이션이벤트를 유니티 Animation View 에서 생성할 수 있다. 이렇게 만들어진 애니메이션은 PlaymakerFSM으로 animation events 형태로 전달 가능하다
- 게임오브젝트를 서택해서 Window>Animation에서 애니메이션을 추가하고, 타임라인에 애니메이션이벤트를 추가한다. 그리고 SendEvent(String) 함수를 선택하여 보낼 이벤트명 설정. 그러면 PlaymakerFSM에서 보내짐



유니티 Legacy Animation System


Animator Actions

Animator Actions use Unity's powerful Mecanim Animator System. Most Animator Actions require an Animator Component on the game object. 

유니티 Mecanim Animator System


Application Actions

https://hutonggames.fogbugz.com/default.asp?W671

High level actions to control the application.


Array Actions

https://hutonggames.fogbugz.com/default.asp?W1196

These actions are used with Array Variables. An Array lets you work with a collection of values.



Audio Actions

Audio actions control AudioSource components on game objects. Note, the AudioSource component provides a nice GUI to control advanced audio features. 


Camera Actions



Character Actions

Character Actions work with a Character Controller on a Game Object.


Color Actions

Color actions manipulate color variables.

https://hutonggames.fogbugz.com/default.asp?W417



Convert Actions

Convert Actions convert variables between different types.

NOTE: 1.9.0 can now auto-convert between many variable types.


Debug Actions



Device Actions

https://hutonggames.fogbugz.com/default.asp?W490

모바일 디바이스



Effects Actions

https://hutonggames.fogbugz.com/default.asp?W198


Enum Actions

https://hutonggames.fogbugz.com/default.asp?W1197


GameObject Actions

GameObject Actions deal with Unity Game Objects and the scene hierarchy.


GUI Actions

GUI actions require manual placement. For automatically laid out controls see GUI Layout Actions.

Unity also has a GUI Element system which uses GUIText and GUITexture components on game objects. See GUI Element Actions

See also PlayMakerGUI Inspector


GUI Element Actions

https://hutonggames.fogbugz.com/default.asp?W361

GUI Elements are set up in the Unity editor by adding GUIText or GUITexture components to a game object (Main Menu > Component > Rendering...).

These GUI Elements respond to mouse events in Playmaker (MOUSE OVER, MOUSE DOWN...), so it's very easy to set up their states.

GUI Element actions control the appearance of GUI Elements:


GUILayout Actions

https://hutonggames.fogbugz.com/default.asp?W414
GUILayout actions mirror Unity's GUILayout system. See Unity Docs.


 

Input Actions



Level Actions

Level actions deal with level loading and creation.


Lights Actions

https://hutonggames.fogbugz.com/default.asp?W384

Lights actions perform operations on Unity Lights.



Logic Actions

Logic actions perform comparisons and tests on variables. (Compare, Test, Switch...). They generally send events based on the results.


Material Actions


Mesh Actions



Unity Physics docs:

Vector3 Actions

Physics actions make heavy use of Vector3 variables. See Vector3 Actions.


Physics 2d Actions

https://hutonggames.fogbugz.com/default.asp?W1267


PlayerPrefs Actions

https://hutonggames.fogbugz.com/default.asp?W545


Quaternion Actions

https://hutonggames.fogbugz.com/default.asp?W1258



Rect Actions

https://hutonggames.fogbugz.com/default.asp?W673



Rect Transform Actions

https://hutonggames.fogbugz.com/default.asp?W1580



RenderSettings




Scene Actions




ScriptControl Actions




StateMachine Actions

https://hutonggames.fogbugz.com/default.asp?W15



String Actions







[Unity] 작업노트 - Playmaker 연습하기 7, get/set property 2- 환쟁이님 강좌

환쟁이(slee16) 강좌 따라 연습하기 계속
플레이메이커 액션 - Get/Set Property 두번째 파트

Rigid body의 gravity 옵션 켜기
Mesh Renderer에서 Cash Shadow 켜고 끄기

terrain에 큐브를 하나 만들어주고
게임오브젝트 manager_box 를 만들어 FSM 추가
Ready 스테이트에 <Get Key Up> 액션, ready_push 이벤트 추가

Result 스테이트에 cube 오브젝트를 프로젝트뷰에서 드래그앤드랍

플레이하면 큐브는 공중에 떠있고, 엔터를 누르면 Gravity가 적용되어 아래로 떨어진다 



위 예제의 큐브를 내가 만든 캐릭터 프리팹으로 교체해보고 싶었는데 생각보다 문제가 복잡해졌다

단순 큐브의 meshRender 오브젝트의 get/set property는 간단한데, 캐릭터는 상위폴더아래에 몇개의 메쉬/메쉬렌더러가 별도로 있기 때문
그래서 아래 링크를 참고해서 몇단계를 더 거쳤다

우선 변수형은 Object(게임오브젝트와의 차이를 이제서야 알았다)를 만들고 타입에서 갖가지 서브 요소타입을 정할 수 있다

 Player 1 게임오브젝트의 child인 yellowbody를 새 게임오브젝트 변수 get child에 저장하고, 
(플레이어를 구성하는 여러 파트가 있지만 그냥 몸통 부분만 일단 받아오고 나머지는 그림자 cast shadow를 아예 첨부터 꺼버렸다)
그 yellow body 게임오브젝트중 메시렌더러 부분을 아까 만든 object 변수에 저장한다


그리고 get/set property는 아까 드래그드랍을 바로 했던것과는 달리 리스트에서 변수를 불러온다

플레이!

엔터를 누르면 gravity가 활성화 되어 아래로 떨어졌다가 다시 초기 위치로 돌아가게 되고,
스페이스를 누르면 그림자가 생겼다가 없어졌다 하게 된다!


[Unity] 작업노트 - Playmaker 연습하기 6, get/set property - 환쟁이님 강좌

환쟁이(slee16) 강좌 따라 연습하기 계속
플레이메이커 액션 - Get/Set Property 첫번째 파트


Get / Set Property 를 유니티 UI와 연결하는 연습

Create Empty Object - UI에서 Image 선택 - 소스에서 Knob 선택 - Imagey Type Filled 를 선택 - Fill amount에 따라 원의 채워지는 퍼센트가 달라진다

-Property_Guage라는 게임오브젝트 만들고 
-circle_increase 스테이트에 아까 만든 UI 이미지를 드래그앤 드랍하면 이런 메뉴가 뜬다.
-Image에서 Set Property 선택



FillAmount 변수(0~1)에 따라 원의 채워짐이 달라지는데 이때 <animate float> <set float value>를 이용해 f_animfloat이 f_circleamunt까지 변화할때 curve곡선에 따라 변화도록 해준다



결과!


스페이스바를 누르면 값이 조금씩 증가하도록 변경
Stanby 스테이트에 <Get Key up> 추가하고 ready_to_push 이벤트

Circle_increse 스테이트에 <float add> 추가

숫자가 1이상이 되는지를 판단하는 스테이트를 추가하고 conf_no conf_yes 이벤트 추가하여 분기
1이상이 되면 reset 스테이트에 <set float value> 를 0으로 하고, 다시 standby 스테이트로 보낸다



플레이! 스페이스바 누를때마다 원이 커지고 1이상이 되면 reset 됨



100일코딩, 100DaysOfCode 시작!

https://twitter.com/Binsworld_dev

100일코딩 도전을 위해 트위터부계정을 하나 더 만들었다.


#100daysofcode 는 하루에 한시간 이상 코딩을 하고, 그 간략한 내용과 해시태그를 트위터에 남기기만 하면 된다.

봇이 리트윗도 해주고 참여자들끼리 서로 격려해주기도 하기 때문에 왠지 영어로 적는편이 더 흥할것 같다.. 

아래 홈페이지에서 좀더 자세한 프로젝트 소개가 되어있다.

https://www.100daysofcode.com/



나중에 좀더 시간이 나면 아래를 참고해서 기록 남기는 방법도 좀더 고민해봐야겠다

https://medium.freecodecamp.org/how-to-transform-your-100daysofcode-log-into-a-visual-experience-d048334af8d9



'오늘하루 > 하루하루 작업' 카테고리의 다른 글

100일코딩, 100DaysOfCode 시작!  (0) 2018.11.11

[Unity] 작업노트 - Playmaker 연습하기 5, 두 플레이어의 이동 - 환쟁이님 강좌

환쟁이(slee16) 강좌 따라 연습하기 계속
플레이메이커 예제 #2 - 플레이어의 이동  2

-두개의 오브젝트에서 하나를 선택하여 GameObject에 변수에 저장
-변수에 저장된 오브젝트를 제어

1.Manager_Control 오브젝트. PlayerSelect FSM


Terrain,  플레이어 1, 2 추가 


Manager_Control 오브젝트에 PlayerSelect PlayerMove 두 FSM 추가



CheckObject 스테이트
클릭한 게임오브젝트를 Obj_Object 변수에 저장 <Mouse Pick>
LayerMask에서 Terrain, Invert Mask 선택하면 terrain빼고 다른 레이어만 인식
(Mouse Pick / Mouse Pick Event의 차이는 무엇일까 다음에)



Reset State
오른쪽클릭-Mouse_Cancel- 선택한 오브젝트를 변수에서 해제 

*문제점 

클릭해보면 변수 필드에 Obj_Object의 value가 Player2 오브젝트가 아니라 그 안에 있는 세부 캡슐 조각 Capsule(4)들이 선택딘다.
혹시나 해서 빈게임오브젝트를 상위에 두고 캡슐들을 그 아래로 묶어 다시 프리팹으로 만들보았지만 결과는 그대로.
나중에 실제 게임에서 '얼굴을 클릭하면, 몸을 클릭하면, '이렇게 분할조건을 만드는데는 쓸수있겠지만.. 가장 상위 단위의 오브젝트 (Capsule(8)이 아닌 Plyaer2 )를 선택되게 하려면 어떻게 하면 좋을까?collider 추가?
=> 환쟁님의 답변 : collider 추가 맞음

*오브젝트를 만들때는 위치값, 보는 방향 원점을 항상 첨부터 잘 조정해두자. 


2.Manager_Control 오브젝트. PlayerMove FSM

오브젝트에 PlayerSelect와는 별도로 PlayerMove FSM을 하나 더 생성한다

-Standby 스테이트에 Obj_Check 이벤트 추가 (global 체크). 이후에 PlayerSelect에서 이벤트를 보낼때 사용 
-Check Object 스테이트에 진행 분리
  • 1_PlayerSelectFSM으로부터 GameObject 변수를 받아와서 Obj_Selected 변수에 쌓는다 (global체크)  <Get Fsm Game Object>
  • Select_N Select_Y 이벤트 추가
  • <Get Object Is Null> 오브젝트가 Null 인지 판단하고
    • Null 이면 Select_N 이벤트로 이전 스테이트로 돌아가고
    • Null이 아니면 Select_Y로 Ready To Move 스테이트로 이동

-
-ReadyToMove 스테이트에 마우스 오른쪽/왼쪽 클릭 구분하여 분기
-Mouse_Click , Mouse_Cancel 이벤트 등록
-<Get Mouse Button Down> 액션 추가

-Set target 스테이트에는 MousePick 된 오브젝트를 Obj_Selected 변수에 넣고, 그 위치를 Vec3 변수인 Pos_Pick에 넣게된다
-이때 PlayerSelect와는 반대로 LayerMask 1 을 Terrain을 선택해서 TerraIn만 선택

*위 그림에서  실수를 했음. Obj_Select에 Store를 하는 바람에 Terrain이 움직여버림. 아래와 같이 Pos_Pick만 Store 하도록.




-Move 스테이트에는 <Move Towards> 추가하여 선택된 오브젝트를 Pos_Pick까지 이동하게 한다.
-Ignore Vertical은 Y값 이동 막음
-오브젝트 위치 0.5 거리까지 가면 FINISHED 이벤트가 발생하여 다시 ReadyToMove 스테이트로 이동


마지막으로 1_PlayerSelect FSM으로 가서 Check Object 스테이트에 Send Event Object_Check를 보내준다.

그러면 2_PlyaerMove 의 StandBy 스테이트가 이벤트를 받아 다음 스테이트로 넘어가게 된다.

플레이 결과!

원하는 캐릭터를 왼쪽 클릭하고 땅을 클릭하면 그쪽으로 이동, 우클릭하면 해제하고 다른 캐릭터 선택 가능!

*이걸 만약에 그냥 캐릭터를 좌클릭할때마다 이전에 선택된 캐릭터를 해제하고 해당 캐릭터를 선택하는 방식으로 메카닉을 바꾸려면..
PlayerSelect FSM에서 캐릭터를 우클릭시 Obj_Selected가 Null 인지 아닌지를 체크하는 과정을 한번 더 넣어야할듯


Move 스테이트에 <Smoothy Look At>을 추가하여 좀더 자연스럽게 바라보며 이동하도록 응용해보았다.
프리팹내의 캐릭터 오브젝트가 회전를 첨부터 잘 맞춰두는 것이 중요한것 같다..