강의
내용이 많고 복잡합니다. 시간을 충분히 확보하고 시작하세요.
댓글
-
아래와 같이 추가하면 방문한 사이트의 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값은 중복을 배제한다. -
많이배우고가요 감사합니다 ㅎ
-
javascript 코드에는 class 코드를 왜 안넣는 건가요? 보았을때마다 class 코드를 삽입해야하는건가요?지금 저렇게 코딩을 하면 javascript에는 적용이 안되는거아닌가해서요.
스스로 바뀌게하는 속성을 알려주신거라고 하셨는데 이해가 잘안가네요 이부분이 -
고맙습니다 -
감사합니다
-
상속과 관련되어 있습니다~
http://www.clearboth.org......de/ -
답변 감사합니다~!
이런 경우는 개별적으로 바꿔줘야 하는군요
조금 의문이 덜 풀린 부분이 있는데, h1 스타일이 적용되지 않은건 h1 다음에 a 가 쓰여서(더 가까이에 쓰여서), 즉 a로 인식되어서 인가요?
그리고 그렇다면 폰트 사이즈와 텍스트 얼라인은 적용이 되던데, 색깔과 데코레이션은 안되는게 또 의문스럽네요ㅠ -
h1 {
color:red; text-decoration: none; font-size: 45px; text-align:center;
}
이 코드는 정상적으로 입력하신게 맞습니다.
하지만
<h1><a href="index.html">와니 블로그</a></h1>
에서 와니 블로그가 변하지 않는 이유는
a 태그의 속성이 있기때문입니다.
별도의 <h1>테스트</h1> 를 생성해보시면 입력하신 코드가
정상적으로 동작하는 것을 확인 할 수 있습니다.
<h1><a href="index.html">와니 블로그</a></h1>
의 색을 변경하고 싶으시다면
<h1><a href="index.html" style="color:red;text-decoration:none">와니 블로그</a></h1>
으로 해보시는 것이 좋을 것같습니다. -
진짜진짜중요한이야기
-
연습하다 한 가지 안되는게 있어 질문드립니다~
스타일 아래 h1 선택자로 color, text-decoration도 넣어봤는데 이건 왜 작동을 안할까요?
검색해보니 딱히 제약이 있는건 아닌것 같은데,, 제가 놓치고 있는 부분이 있나요?
ㅡㅡ 코드 ㅡㅡ
<!doctype html>
<html>
<head>
<title> 여행</title>
<meta charset="utf-8">
<style>
h1 {
color:red; text-decoration: none; font-size: 45px; text-align:center;
}
.index {
color:green;
}
#now {
color:red; font-weight: bold; font-size: 120%
}
</style>
</head>
<body>
<h1><a href="index.html">와니 블로그</a></h1>
<ul>
<li><a href="photo.html" class="index">사진</a></li>
<li><a href="travel.html" class="index" id="now">여행</a></li>
<li><a href="football.html" class="index">축구</a></li>
</ul>
<h2>여행</h2>
<ol>
<li>뉴욕</li>
<li>칸쿤</li>
</ol>
</body>
</html> -
감사합니다~! 이고잉님! -
귀에 쏙쏙 들어옵니다. 감사합니다!!
-
공부하다보니 '변수와 변수의 값'과 비슷한 개념이란 것을 느꼈는데, 제가 느낀 것이 맞나요?
-
감사합니다.
-
으음.... 살짝씩 모르는 것이 쌓이는건 괜찮은데.. 많이 쌓이다보니 과포화 상태인 것 같네요 8ㅁ8 다음 수업부터는 내일 듣도록 해야겠습니다!! 차근차근 익숙해지도록 할게요! 어렵지만 지식욕을 채워주는 느낌이 좋아서 행복합니다~~
-
중요한 부분이군요.
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
