스터디/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
스터디/Java 2016. 7. 12. 00:40

[Open tutorials] data structure - Linked List, Visualgo

자료구조와 알고리즘의 기초를 시각화해서 이해하기 쉽게 도와주는 학습 사이트.

http://visualgo.net/


원하는 구조를 선택하고, 간단한 데이터를 몇개 입력하면 결과가 시각화되서 화면에 반영되는데, 

하단의 의사코드를 한줄씩 옮겨가면서 무슨 일이 일어난건지 단계별로 확인해볼수 있다. 

학습하고나서 연습문제를 푸는 기능도 있음


자료구조 수업에서 Linked List 단원에서 visualgo를 사용해서 알게되었다. (https://opentutorials.org/module/1335/8821)

이것이 시각화의 힘.. 

노드, 버텍스 이런 개념 자체를 오늘 난생 처음 접하고 있는데 

좋은 수업과 컨텐츠로 시작하게 되서 행운이라는 생각이 들었다.





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

[Open tutorials] data structure 자료구조 수강  (0) 2016.07.07
스터디/Java 2016. 7. 7. 20:24

[Open tutorials] data structure 자료구조 수강



https://opentutorials.org/module/1335


프로세싱에서 array에서 자꾸 에러나서 ArrayList로 바꾸는게 나은가 싶은 생각도 들고

Unity를 위한 C# 강의 듣다가 다시 List에서 막히기도하고

종인이가 방학되면 꼭 들으라고 여러번 강조했던 open tutorial의 자료구조 강의 수강 시작.

다 들으려면 순수 강의시간만 7-8시간 걸린다 ㄷ ㄷ 


정리정돈? 구조화? 이런건 진짜 태어날때부터 안되는 사람이지만..

어려운건 열번쯤 반복하면 언젠가 알게되겠지 뭐... 




<다음에 다시 챙겨볼 다른 강좌>

배열

https://opentutorials.org/course/1223/5373


Collections Framework

https://opentutorials.org/course/1223/6446






- 첫 강부터 왜이렇게 짠하니...



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

[Open tutorials] data structure - Linked List, Visualgo  (0) 2016.07.12