<!-- `>` : 자식 선택자 -->
<!-- div>section*2>nav[tab키 입력] -->
<!-- `+` : 인접 동생선택자 -->
<!-- div+section[tab키 입력] -->
<!-- 이 div는 a의 부모 엘리먼트 이다. -->
<div>
<!-- 이 a는 div의 자식 엘리먼트 이다. -->
<a href="#">네이버</a>
</div>
<section>
<a href="#">구글</a>
</section>
/* section 엘리먼트 안에 들어있는 a */
/* ` ` : 후손선택자 */
/* ` > ` : 자식선택자 */
/* 선택자가 길면 우선순위가 높다 */
section a /* section > a # 이 상황에서는 자식선택자를 써도 된다. */ {
color:red;
}
/* 이 CSS 는 무시된다. */
a {
color:pink;
}
/* 이 CSS 는 적용된다. */
a {
color:green;
}
<!--
div>a[href="http://www.naver.com"]{네이버}
nav>a[href="http://www.google.com"]{구글}
section>a[href="http://www.daum.net"]{다음}
-->
<div><a href="http://www.naver.com">네이버</a></div>
<nav><a href="http://www.google.com">구글</a></nav>
<section><a href="http://www.daum.net">다음</a></section>
div a {
font-size:3rem;
color:black;
}
nav a {
font-size:5rem;
color:red;
}
section a {
font-size:7rem;
color:blue;
}
<div>
안녕하세요.
</div>
<section>
잘가세요.
</section>
<nav>
또 봐요
</nav>
/* 몰라도 됩니다. */
div, section, nav {
border:3px dotted red;
margin:10px;
padding:10px;
}
/* 몰라도 됩니다. */
div {
/* 절대로 자신을 정렬하는게 아니라. */
text-align:left;
}
section {
/* 자신이 가지고 있는 텍!스!트!를 정렬한다. */
text-align:center;
}
nav {
/* 글자가 아닌 엘리먼트도 정렬할 수 있을까? */
/* 힌트 : display:inline-block 하면 엘리먼트가 `텍스트 화` 된다. */
text-align:right;
}
<div>
<a href="http://www.bnx.co.kr/16fw/main/main.asp" target="_blank">bnx 사이트</a>
</div>
<nav>
<a href="http://www.naver.com/" target="_blank">네이버</a>
</nav>
<section>
<a href="http://www.google.com/" target="_blank">구글</a>
</section>
div {
text-align:right;
}
div a {
font-size:3rem;
color:black;
}
nav {
text-align:center;
}
nav a {
font-size:5rem;
color:red;
}
section a {
font-size:7rem;
color:blue;
}
console.clear();
let age = 2;
console.log("당신의 나이는 " + age + "살 입니다.");
if ( age >= 20 ) {
console.log("당신은 성년입니다.");
}
if ( age < 20 ) {
console.log("당신은 미성년입니다.");
}
console.clear();
let age = 2;
console.log("당신의 나이는 " + age + "살 입니다.");
// v1, 불합리한 버전
/*
if ( age >= 20 ) {
console.log("당신은 성년입니다.");
}
if ( age < 20 ) {
console.log("당신은 미성년입니다.");
}
*/
// v2, 조금 불합리한 버전
/*
if ( age >= 20 ) {
console.log("당신은 성년입니다.");
}
else
if ( age < 20 ) {
console.log("당신은 미성년입니다.");
}
*/
// v3, 합리한 버전
if ( age >= 20 ) {
console.log("당신은 성년입니다.");
}
else {
console.log("당신은 미성년입니다.");
}
'인터넷강의 > 웹 개발 입문' 카테고리의 다른 글
BMX 사이트의 상단바 따라만들기 (0) | 2023.01.04 |
---|---|
hover, transition, text-decoration, nbsp (1) | 2023.01.04 |
a, br 태그 (0) | 2023.01.03 |
엘리먼트의 부모/자식/형제 관계와 텍스트 (0) | 2023.01.02 |
DISPLAY 속성 (0) | 2023.01.02 |