검색결과 리스트
글
스터디/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
'스터디 > WEB' 카테고리의 다른 글
| [생활코딩] WEB1 - HTML& Internet 시작 (0) | 2019.02.09 |
|---|
RECENT COMMENT