스터디/WEB 2019. 2. 9. 23:47

[생활코딩] 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' 카테고리의 다른 글

[생활코딩] WEB1 - HTML& Internet 시작  (0) 2019.02.09
스터디/WEB 2019. 2. 9. 23:45

[생활코딩] 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
스터디/Unity 2018. 12. 26. 23:56

[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




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