젠코딩과 자식/후손 선택자 그리고 text-align

<!-- `>` : 자식 선택자 -->
<!-- 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("당신은 미성년입니다.");
}

실행 화면