웹개발에 해당되는 글 2건

스터디/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

티스토리툴바