아래 질문에 대답할 수 있다면 이 수업은 듣지 말고 다음 수업인 '제어할 태그 선택하기'로 바로 넘어가셔요.
- CSS는 어떤 목적의 언어인가요?
- CSS를 웹페이지에 삽입하는 방법은 무엇인가요?
- style 속성은 무엇인가요?
- 선택자가 무엇인가요?
댓글
-
스킵 -
스킵
-
완료
-
감사합니다 완료
-
OK!
-
스킵 완료
-
항상 감사합니다.!!
-
.= class
#= id
css 복습 완료! -
완
-
완료
-
완료
-
만약 class 값을 설정하려는 특정 단어가 1억개라면 어떻게 해야하나요. 한번에 class 값을 동시에 지정해 줄 수 있나요?
-
감사합니다! css는 패스하고 지나갈게용!
-
1. Style 속성을 이용해서 CSS 사용하기
-> style이란 속성의 CSS를 넣으면 디자인을 할 수 있다.
<h2 style="background-color:coral;color:powderblue"> javascript </h2>
-> 이를 이해하여 다른 속성들 역시 검색하여 디자인할 수 있다.
2. Style 태그를 이용해서 CSS 사용하기
-> 특정 단어에 대해 정보를 제어할 수 있고 줄바꿈이 되는 무색무취 태그 : <div>
-> 줄바꿈이 되지 않는 태그 : <span>
Style 태그 : script처럼 웹브라우저에게 <style> </style>안에 감싸져 있는 텍스트가 CSS라는 것을 웹브라우저에게 알려주는 부분자.
<style>
.js{
font-weight: bold;
color:red;
}
</style>
<span class="js">김민아</span>
여기서 .js가 선택자이다.
3. 웹페이지에 있는 요소들을 잘 제어하기 위해서는 선택자를 잘 활용해야 한다.
class 선택자는 이름 앞에 .이 붙고
id 선택자는 이름 앞에 #이 붙는다는 약속이 있다.
Class -> 어떤 대상들을 grouping한다. (교실) '.'
Id -> 특정 대상을 식별한다. (학번) '#'
태그 앞에 아무것도 안붙었을 경우 해당하는 태그 전체를 대상으로 한다.
<style>
.js{
font-weight: bold;
color:red;
}
#first{
color:green;
}
span{
color:blue;
}
</style>
<span id="first" class="js">김민아</span>
우선순위는 id > class > 아무것도 안붙은 태그 -
CSS 복습할때 다시 와서 들으면 좋겠군요! -
완료 -
CSS수업을 지난주에 마쳤는데 다 까먹은 듯 다시 들었습니다.
아직은 왕초보라 듣고 또 들어야 하네요. -
완료!
-
패스~
-
다음!
-
완료
-
완료
-
무색 무취의 태그 <div> 하지만 줄바꿈이되므로, <span>으로 감싸준다.
<span style="[CSS 문법]"> 식으로 디자인을 수정할 수 있다.
<head>부분에 <style> span { CSS } </style> 식으로 더 편하게 디자인을 넣을 수 있다.
선택자를 이용해 태그 선택자( ), 클래스 선택자(.), id 선택자(#)를 이용해 포괄적 그리고 세부적으로 디자인을 넣을 수 있다.
tag class id
좌측일수록 포괄적, 우측 세부적으로 적용. id는 페이지에 여러번 지정하면 규약위반.
그리고 포괄적용된 후 세부적으로 덮어 씌워지는 작업이 내부적으로 이루어진다.
예제에서는 빨강 파랑 초록으로 해서 우선순위만 보여줬지만, 실제로는 빨강으로 그린 다음, 파랑으로 그리는 식이다.
tag를 빨강 class에 font-weight:bold;를 하면, class는 빨강색의 굵은 글씨가 된다. -
완료
-
20191107 완료 -
완료
-
클래스는 grouping이 가능하며 아이디는 학번처럼 중복이 불가능한 유일한 선택자
-
완료
-
20191024
-
완료 -
감사합니다
-
완료
-
완료
-
완료
-
20190930 Ted 완료!
-
id는 한번, class는 여러번
-
id 랑 class가 뭐가 달라요???
-
강의완료했어요~재밌고 유익한 강의 감사합니다!
-
완료
-
20190914 수강완료
감사합니다! -
수강완료. 감사합니다~
-
감사합니다
-
완료 -
감사합니다!
-
완료
-
완료
css 선택자속성 복습
id:우선순위 1위, 한페이지에서 한번밖에 사용하지 못한다. #을 써서 적용한다. id=#
class:우선순위 2위, class뜻은 반이라는 뜻으로 css그룹핑의 개념이다. " . "(마침표)를 써서 적용한다 .=class
일반태그:우선순위 3위
<div>태그는 무색무취의 태그로써 개별로 편집하기위해 인위적으로 설정하는 태그이다.
이러한 기능과 비슷한 <span>이라는 태그가 있는데 두개 태그의 차이점은 "줄바꿈"이 적용되나 안되나이다.
<div>태그는 전체가 적용받는다. 해서 문단에 편집을 위해 쓰기보다는 grid속성을 편집할때 쓰는것이 더욱 실용적일것이다.
동시에 효과를 입힐때 우선순위 순서대로 효과가 나타난다.
<style>태그는 <body>태그 안에있는 다수의 출력정보를 다같이 편집하기 편하게 해주는 또다른 디자인 태그인거같다. -
완료
-
감사합니다
-
감사합니다. 사랑합니다
-
감사합니다
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
