[생활코딩] 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