강의
내용이 많고 복잡합니다. 시간을 충분히 확보하고 시작하세요.
댓글
-
감사합니다:) -
임의로 사용한것입니다.
saw라고 한 이유는 한번 보고 지나간 페이지라는 의미에서 하신거 같고
active는 지금 보고있는 페이지 이기때문이라고 설명해주시는거 같네요. -
강의에서 class값으로 사용한 saw 와 id값 active는 그냥 임의로 사용하신건가요, 아니면 특정 명령을 위한 값인가요?
-
완료
-
완료
-
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<style>
a {
color: black;
}
#active {
color: red
}
.saw {
color: gray;
}
h1 {
font-size: 21px;
text-align: center;
/*아마 a라는 지시자와 중복이 되면서 안먹히는 듯 함*/
color: red;
}
</style>
</head>
이렇게 하는 경우 h1은 red로 했는데 왜 a 선택자를 우선으로 해서 색이 검정색으로 나올까요? -
완료
-
완료
-
완료!감사합니다!
-
class="saw"이런식으로 만들면 실제로 본 페이지를 인식해서 자동으로 색을 바꿔주는게 아니라 저희가 직접 본 페이지를 지정해주는거 아닌가요? -
아으 어렵다. ㅋㅋ -
완료
-
감사합니다
-
감사합니다.
-
조금 어려웠어요. 하지만 다음것을 하다보면 이해가 되겠지요? 이번편도 감사합니다.
-
아래와 같이 추가하면 방문한 사이트의 a 태그 안 텍스트 색을 바꿀 수 있습니다.
<style>
a:visited {
color: pink;
}
#active:visited {
color: darkblue;
}
</style> -
이번 강의는 조금 이해하기 어려웠네요
그런데, 이 코드는 진짜로 들어간 링크의 색을 바꾸는 게 아니고 선택한 코드의 색을 바꾸는 거잖아요
실제로 클릭했을 때의 링크의 색을 바꾸는 건 css에서 나오지 않나요? -
이번 편은 조금 어려웠습니다. ㅎㅎ 그래도 감사합니다! -
감사합니다...ㅎㅎ
-
우선순위가... id, class, tag 순이고
같은 class 라도 나중에 나오는 녀석이 우선순위가 높다. -
매 강의마다 Summary 올려주셔서 감사합니다ㅎㅎ -
매 강의마다 친절하게 설명을 차근차근 해주셔서 감사합니다ㅎㅎ
-
html부터 차근차근히 듣는 중인데요.
이번 수업에서 처음으로 막막함을 느꼈습니다.
이제 진짜 제대로 공부할때라고 생각해요
일단 여기서 멈추고 이번강의를 무한 재생해야겠어요 ㅎㅎ -
2018.05.03 감사합니다~
-
class
- 의도: 하나로 묶는다. Grouping.
- class property에는 여러개의 value가 들어올 수 있고 띄어쓰기로 구분한다
- 여러 class selector로 하나의 tag를 공동으로 제어할 수 있다 BUT
- 순서에 따라 priority is changed. The latest one is valid. Therefore, we use id
id
- value가 단 하나만 등장해야한다. 중복되어서는 안된다. Only one value, can not be repeated.
-
<selector's priority>
id>class>tag -
class 선택자들 끼리는 우선순위는 같은데
순서때매 .saw에서 핑크로 바꼈다가 .active에서 red로 바뀌게 되는거죠 -
이번 강의도 감사드립니다!
-
.saw {
color:pink;
}
.active {
color: red;
}
이 부분 설명해주실 때 우선순위가 높은 명령을 먼저 듣는다고 하셨는데
위에 있는 게 우선순위 1순위가 아니라 밑에 있을 수록 우선순위가 되는건가요? -
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.html</title>
<style>
#grid {border: 5px solid pink;
display:grid;
grid-template-columns: 300px 1fr;
}
a {
color:blue;
}
saw {
color:pink;
}
div{border: 5px solid gray;
}
</style>
</head>
<body>
<h1><a href="http://naver.com" class="saw">WEB</a></h1>
<div id="grid">
<div>
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw">CSS</a></li>
<li><a href="3.html" class="saw">JavaScript</a></li>
</ol>
</div>
<div>
<h2>HTML saw</h2>
<P><a href="https://www.naver.com" target="_black" title="html5 naver" class="saw">html naver homepage</a></P> is the stadard naver home saw
</div>
</div>
</body>
</html>
이렇게 했는데 saw글자가 색이 변하지 않습니다ㅜ
그리고 .saw로 해서도 봤는데, 다 본페이지라고 떠서(핑크) 안 본페이지와 구분해서 볼 방법을 알고싶어요~ -
선택자간의 우선순위... 구체적인것이 포괄적인것에 우선한다. 굉장히 언어학적이고 논리적이네요!! 수많은 선택자들을 통해서 내가 원하는 것을 세밀하게 타겟팅해서 조정할 수 있고, 수많은 일들을 단순화하고 분류해서 효율성을 기할 수 있다!! 엄청난데요??
-
감사합니다!
-
id 선택자를 여러가지 요소에 적용하고 style을 해당 id에 적용하면 실제로 id가 같은 요소들은 모두 해당 style이 적용이 됩니다. 하지만 id는 한가지 요소를, class는 여러가지 요소의 style를 지정할 때 사용하라고 권고하는 것 입니다
-
class 속성과 id 속성이 여러값을 같이 지정할 수 있느냐/아니냐는 차이를 가진다는 점은 알았습니다.
그런데 id 속성은 주로 어떨 때 사용하길래 한가지 객체에만 사용되게끔 하나요? -
잘 봤습니다.
-
지금 소개된 선택자들은 가장 기본적인 선택자만 언급이 되어 있습니다.
나중가면 더 어려운 선택자들이 많습니다.
그룹 선택자, 형제 선택자, 자식 선택자, 타겟 선택자, 가상 선택자 등등등...
선택자도 상당히 다양한 형태가 있습니다. -
강의 잘 들었습니다 :)
-
멘붕이네
-
헷갈리기 시작하네요,..ㅜㅜ
-
tag selector
class selector .saw<element class ="saw">
id selector #active<element id ="active"> -
그보다 오늘 수업은 엄청 어렵네요 ㅠ ㅠ 머리야 다 받아들여라..
-
#active 설명하실때 a 를 밑으로 내려와도 #active 명령이 우선이라고 설명하실때 a가 무슨 기능을하고 있고 원래는 최근 명령이니ㅏ이렇게 되어야하는데 #active 때문에 저렇게 되어서 작동하지 않는다 하는 식으로 설명해주시면 간단히 복습차원에서도 좋을거같고 이해가 더 잘될거 같아요..
-
180209 감사합니다! -
ID(#) > class(.) > tag -
어머 그랬네여ㅠㅠ 안경을 쓰고했는데도 발견을 못하고!!
감사합니다!! 덕분에 잘 적용이 되었습니다~ -
클래스를 적으신 부분에 오타가 있습니다!
classs -> class 로 수정하시면 될것같아요! -
180122- id선택자까지는 속성이 적용된는데 saw 클래스 속성이 적용이 안되서
이미 보았던 페이지 컬러가 변하지 않아여ㅠㅠ 왜 그런 걸까여?
<!doctype html>
<html>
<head>
<title>Steven Universe_welcome</title>
<meta charset="utf-8">
<style>
a {
color: gray;
text-decoration: none;
}
#active{
color: red;
}
.saw {
color: blue;
}
h1{
font-size: 45px;
text-align: center;
}
</style>
</head>
<body>
<h1><a href="index.html">Steven Universe</a></h1>
<ul>
<li><a href="s01.html">season01</a></li>
<li><a href="s02.html">season02</a></li>
<li><a href="s03.html">season03</a></li>
<li><a href="s04.html"classs="saw">season04</a></li>
<li><a href="s05.html"classs="saw" id="active">season05</a></li>
</ul> -
180119 감사합니다!
※ id 값은 단 한번만 등장해야한다. -
-
흠..봤던 걸 saw클래스로 묶어서 회색으로 표현한다는 것을 알겠는데, 저렇게 코드를 작성하면 1.자바스크립트를 보고 왔경우 2. html을 보지 않은 사람에게서 1번의 경우 자바스크립트는 회색으로 표시가 되지 않고 2번의 경우는 html은 보지 않았는데도 회색으로 표시되지 않을까요?
정말 알고 싶은 것은 네이버처럼 뉴스기사나 블로그 방문한 후 뒤로가기를 눌러도 정말로 본 페이지들만 색깔이 다르게 표현되는 것을 알고 싶네요 ㅎ
아 물론 웹페이지가 기본적으로 그런 기능이 있는 것 같은데, 저렇게 css으로 앵커를 블랙으로 설정한 경우요 또르륵 -
18-01-14 1일차 - 5번째 강의
수강완료!
-----------------------------------------------------
@ Selector 우선순위
id > class > tag
<------ ------>
구체적 포괄적
id값은 중복을 배제한다.
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
