02월 26일자로 빅쿼리에 GROUP BY ALL 문법이 추가됐다. 기존에는 쿼리를 묶고 싶으면 GROUP BY에 컬럼을 지정해줘야 했는데, GROUP BY ALL 문법의 추가로 이제 빅쿼리가 SELECT 절에서 그룹화할 키를 알아서 묶게 할 수 있게 됐다.

묶는 조건은 단순한데, 집계 함수나 윈도우 함수 외 몇 가지 공식 문서에서 지정한 불가 형태 제외하고 나머지 컬럼은 다 그GROUP BY에 포함시키는 식이다. 이 때 상기 조건들을 제외하고 난 후, 남은 SELECT 항목 중 그룹화 불가한 유형이 있는 경우 오류가 발생한다. 

다음 예제에서 쿼리는 first_name과 last_name 기준으로 그룹화된다. total_points는 집계 함수 값이므로 제외됐다.

WITH PlayerStats AS (
  SELECT 'Adams' as LastName, 'Noam' as FirstName, 3 as PointsScored UNION ALL
  SELECT 'Buchanan', 'Jie', 0 UNION ALL
  SELECT 'Coolidge', 'Kiran', 1 UNION ALL
  SELECT 'Adams', 'Noam', 4 UNION ALL
  SELECT 'Buchanan', 'Jie', 13)
  
SELECT SUM(PointsScored) AS total_points
  		, FirstName AS first_name
  		, LastName AS last_name
FROM PlayerStats
GROUP BY ALL;

/*--------------+------------+-----------+
 | total_points | first_name | last_name |
 +--------------+------------+-----------+
 | 7            | Noam       | Adams     |
 | 13           | Jie        | Buchanan  |
 | 1            | Kiran      | Coolidge  |
 +--------------+------------+-----------*/

다음 예제 역시 쿼리는 first_name과 last_name 기준으로 그룹화된다. total_points는 윈도우 함수 값이므로 제외됐다.

WITH PlayerStats AS (
  SELECT 'Adams' as LastName, 'Noam' as FirstName, 3 as PointsScored UNION ALL
  SELECT 'Buchanan', 'Jie', 0 UNION ALL
  SELECT 'Coolidge', 'Kiran', 1 UNION ALL
  SELECT 'Adams', 'Noam', 4 UNION ALL
  SELECT 'Buchanan', 'Jie', 13)
  
SELECT COUNT(*) OVER () AS total_people
  		, FirstName AS first_name
  		, LastName AS last_name
FROM PlayerStats
GROUP BY ALL;

/*--------------+------------+-----------+
 | total_people | first_name | last_name |
 +--------------+------------+-----------+
 | 3            | Noam       | Adams     |
 | 3            | Jie        | Buchanan  |
 | 3            | Kiran      | Coolidge  |
 +--------------+------------+-----------*/

여러 SELECT 항목이 FROM 절의 동일한 부분을 참고한다면 경로를 가장 직접적으로 지정한 하나만 GROUP BY의 대상이 된다. 아래 예제에서 coordinates의 두 구성 요소인 Values.x와 Values.y가 이미 직접 경로로 지정돼 있는 상태이므로 coordinates 컬럼은 GROUP BY에서 제외됐다.

WITH Values AS (
  SELECT 1 AS x, 2 AS y
  UNION ALL SELECT 1 AS x, 4 AS y
  UNION ALL SELECT 2 AS x, 5 AS y
)

SELECT Values.x AS x_coordinate
  	, Values.y AS y_coordinate
  	, [Values.x, Values.y] AS coordinates
FROM Values
GROUP BY ALL

/*--------------+--------------+-------------+
 | x_coordinate | y_coordinate | coordinates |
 +--------------+--------------+-------------+
 | 1            | 4            | [1, 4]      |
 | 1            | 2            | [1, 2]      |
 | 2            | 5            | [2, 5]      |
 +--------------+--------------+-------------*/

HTML과 CSS는 이용자의 동작에 따른 변화를 일반적으로 화면에 반영할 수 없다. 그러나 어떤 요소 위에 커서를 올려 놓거나 뗐을 때처럼 자주 구현할 필요성이 있는 동작 일부는 가상 클래스나 요소의 형태로 제공하기도 한다. 이번 포스트에서는 가상 클래스와 요소에 대해 알아보고, 여러 선택자가 한 요소를 꾸며줄 때 우선순위를 표기하기 위해 사용되는 구체성의 정의에 대해 알아본다. <해당 포스트는 비전공자를 위한 HTML/CSS 강의 기반으로 작성됐다>

가상 클래스pseudo class

예를 들어, <p>가 있다고 가정하자. 이 <p>에 마우스 커서를 올렸을 때만 특정 스타일을 주려면 어떻게 해야 할까? 해당 동작을 위해 구현해야 할 부분은 다음과 같다. 

(1) 임의의 클래스 선택자를 선언해 특정 스타일 규칙을 만든다.

(2) <p> 요소에 커서가 올라가면 클래스를 집어넣는다.

(3) <p> 요소에서 커서가 빠지면 클래스를 삭제한다.

이런 형태의 기능은 HTML과 CSS에서는 만들어 내기 어렵다. 2, 3번은 동적으로 변화돼야 하는 부분인데, 두 언어는 정적인 언어이기 때문에 이런 부분을 구현할 수 없기 때문이다. 그래서 CSS에서는 흔하게 사용되는 여러 패턴에 대해 미리 정의해 놓고 이를 가상 클래스 형태로 제어할 수 있게 했다.

:pseudo-class {
    property: value;
}

가상 클래스의 기본형은 위와 같다. 가상 클래스를 이용하면, 다른 언어를 끌어오지 않고도 CSS 내에서 동적인 기능을 처리 가능하므로 훨씬 효율적이다. 아래부터는, 기본적인 가상 클래스의 유형에 대해 다룬다.

문서 구조와 관련된 가상 클래스

first-child : 첫 번째 자식 요소 선택.
last-child : 마지막 자식 요소 선택.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>

li:first-child { color: red; }
li:last-child { color: blue; }

해당 코드를 사용하면 처음 <li>와 마지막 <li>에 각각 색상이 적용된다. 즉, 가상 선택자로 위와 같이 구현한 코드는 아래 코드처럼 가상 선택자 없이 구현될 수도 있다.

<ul>
    <li class="first-child">HTML</li>
    <li>CSS</li>
    <li class="last-child">JS</li>
</ul>

앵커 요소와 관련된 가상 클래스

:link : 하이퍼 링크이면서 아직 방문하지 않은 앵커.
:visited : 이미 방문한 하이퍼링크를 의미.

a:link { color: blue; }
a:visited { color: gray; }

사용자 동작과 관련한 가상 클래스

이것들도 주로 <a>에 많이 쓰인다. 다만 앵커 관련 클래스와 달리 조건만 맞으면 다른 요소에도 사용 가능하다.

focus: 현재 입력 초점을 가진 요소에 적용
hover: 마우스 포인터가 있는 요소에 적용
active: 사용자 입력으로 활성화된 요소에 적용

a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }

가상 요소 pseudo element

::pseudo-element {
    property: value;
}

가상 클래스처럼 문서 내에 보이지 않지만 미리 정의한 위치에 삽입되도록 약속되어 있는 것으로, 가상 요소가 있다. 가상 요소를 사용하면 HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수 있다. 기본적으로 가상 클래스와 동일하게 콜론으로 선언했으나, CSS3부터는 가상 클래스와의 구분을 위해 ::(더블 콜론) 기호를 사용하게 개편됐다. 다만 하위 브라우저에서 :: 문법을 지원하지 않는 문제가 있을 수 있고 이 때는 ; 기호를 사용해야 한다.

before : 가장 앞에 요소를 삽입.
after : 가장 뒤에 요소를 삽입.
first-line : 요소의 첫 번째 줄에 있는 텍스트.
first-letter : 블록 레벨 요소의 첫 번째 문자.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

p::before { content: "###" }
p::after { content: "!!!" }
p::first-line { ... }
p::first-letter { ... }

before와 after 가상 요소는 애초에 내용이 없는 상태로 생성되기 때문에 내용을 넣기 위해서는 content 속성을 이용해야 한다. 눈에 보이지 않는 요소를 구체화해 보면 다음과 같다.

<p>
    <first-letter>L</first-letter>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
    <!-- 모니터 가로 해상도에 따라 요소가 포함하는 내용이 변동됩니다. -->
    <first-line>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiu ..(..어딘가쯤..) </first-line>... unt ut labore et dolore magna aliqua.
</p>

선언의 구체성

h1 { color: red; }
body h1 { color: green; }

요소를 선택하는 데는 여러 방법이 있다. 따라서 서로 다른 선택자를 이용해 같은 요소를 선택할 수도 있다. 위 코드에서, 두 규칙은 모두 <h1>을 지정하지만 두 규칙이 지정하는 스타일은 서로 다르다. 이럴 때 <h1>은 어떻게 표현될까.

선택자에는 어떤 규칙이 우선으로 적용돼야 하는지에 대해 정해진 규칙이 있다. 이 규칙을 '구체성'이라고 한다. 구체성은 선택자를 얼마나 명시적으로 선언했느냐를 수치화한 것으로, 구체성의 값이 클 수록 우선으로 적용된다.

0, 0, 0, 0

구체성은 위와 같이 네 개의 숫자 값으로 이뤄져 있다. 값을 비교할 때는 좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클 수록 높은 구체성을 갖는다. 구체성은 아래의 규칙대로 계산된다. 

 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소

 0, 0, 0, 0 : 전체 선택자

h1 { ... }  /* 0,0,0,1 */
body h1 { ... }  /* 0,0,0,2 */
.grape { ... }  /* 0,0,1,0 */
*.bright { ... }  /* 0,0,1,0 */
p.bright em.dark { ... }  /* 0,0,2,2 */
#page { ... }  /* 0,1,0,0 */
div#page { ... }  /* 0,1,0,1 */

인라인 스타일

p#page { color: red; }

<p id="page" style="color:blue">Lorem impusm dolor sit.</p>

위 두 스타일 선언문을 보자. 전자는 0, 1, 0, 1의 구체성을 가지는 선택자로 스타일을 선언한 것이고 두 번째는 요소에 직접 인라인 스타일 방식으로 선언한 것이다. 둘 중 무엇이 우선순위로 적용될까? 정답은 후자다. 인라인 스타일의 구체성 값은 1, 0, 0, 0이며 규칙들 중 가장 큰 구체성을 갖는다. 
 

규칙에 우선권 적용하기, important

p#page { color: red !important; }

<p id="page" style="color:blue">Lorem impusm dolor sit.</p>

important 키워드는 별도의 구체성 값은 없지만 모든 구체성을 무시하고 우선권을 갖는다. 속성값 뒤에 한 칸 공백을 주고 느낌표 기호와 함께 쓰면 important를 적용할 수 있다. 위의 <p>에는 important로 인해 color: red가 적용된다.
 

속성의 상속

h1 { color: gray; }

<h1>Hello, <em>CSS</em></h1>

위 코드에서 <em>은 부모인 <h1>의 color: grey를 상속받는다. 다만, 모든 부모의 속성이 자식에게 상속되는 건 아니다. 상식적으로 구분될 만한 속성 외, margin/ padding/ background/ border 등은 상속되지 않는다.

상속 속성의 구체성

* { color: red; }
h1#page { color: gray; }

<h1 id="page">Hello, <em>CSS</em></h1>

위 코드에서, <em>에는 color: red가 적용된다. 상속된 속성은 구체성을 가지지 못 하는 점을 기억하자.

선택자는 CSS에서 스타일을 입힐 HTML 등 마크업 언어의 요소를 선택하는 문자를 뜻한다. 대부분의 CSS 코드는 A { (B): (C); } 형태로 이뤄져 있는데, 스타일을 나열한 중괄호 앞 부분에 오는 A 부분이 바로 선택자다. 이번 포스트는 선택자의 유형과 조합에 대해 알아보고, 선택자와 문서의 관계 기준으로 문서 구조를 이해해 본다. <해당 포스트는 비전공자를 위한 HTML/CSS 강의 기반으로 작성됐다>

요소 선택자

h1 { color: yellow; }
h2 { color: yellow; }
h3 { color: yellow; }
h4 { color: yellow; }
h5 { color: yellow; }
h6 { color: yellow; }

선택자 중 가장 기본이 되는 선택자로, 선택자 부분에 태그 이름이 들어가는 점을 따서 태그 선택자라고도 한다. 요소 선택자를 사용하면 문서 내 선택자에 해당하는 모든 요소에 스타일 규칙이 적용된다.

그룹화

h1, h2, h3, h4, h5, h6 { color: yellow; }
* { color: yellow; }

선택자는 기본적으로 쉼표를 이용해서 그룹화할 수 있고, asterisk 기호(*)로 문서 내의 모든 요소를 선택할 수도 있다. 

h1 { color: yellow; font-size: 2em; background-color: gray; }
h1, h2, h3, h4, h5, h6 { color: yellow; font-size: 2em; background-color: gray; }

 선택자 뿐 아니라 선언도 그룹화 가능하다. 물론 선택자와 선언을 동시에 그룹화할 수도 있다.

요소 선택자의 한계

아래와 같은 코드가 있다고 가정하자.

<dl>
    <dt>HTML</dt>
    <dd><span>HTML</span>은 문서의 구조를 나타냅니다.</dd>
    <dt>CSS</dt>
    <dd><span>CSS</span>는 문서의 표현을 나타냅니다.</dd>
</dl>

당신은 해당 HTML 문서의 "HTML" 부분에는 보라색 글자를 지정하고, "CSS" 부분에는 밑줄을 선언하고 싶다. 하지만 요소 선택자로는 동일한 이름으로 묶여 있는 요소를 각각 선택해서 규칙을 적용하기는 불가능하다. <dt>에 보라색을 지정하면 "CSS"도 보라색으로 변할 것이고, 반대로 <dt>에 밑줄을 그으면 "HTML"에도 동일하게 밑줄이 그어질 것이다. 당신이 원하는 방식대로 문맥마다 스타일을 각각 적용할 방법은 없을까? 

class 선택자

.foo { font-size: 30px; }

<p class="foo"> ... </p>

요소에 구애받지 않고 스타일 규칙을 적용시키는 가장 일반적인 방법은 class 선택자를 활용하는 것이다. HTML에서 동일한 스타일을 적용받을 class명을 적어 놓고 CSS에서 적용할 규칙을 써 놓으면 동일한 class명을 가진 모든 요소에 동일한 스타일 규칙이 적용된다. 그럼 class 선택자를 이용해 요소 선택자로 구현해내지 못 했던 부분을 구현해 보자.

.html { color: purple; }
.css { text-decoration: underline; }

<dl>
    <dt class="html">HTML</dt>
    <dd><span class="html">HTML</span>은 문서의 구조를 나타냅니다.</dd>
    <dt class="css">CSS</dt>
    <dd><span class="css">CSS</span>는 문서의 표현을 나타냅니다.</dd>
</dl>

이때, 한 요소는 class 속성을 동시에 여러 개 가질 수 있다. 공백으로 구분해 여러 개의 class 값을 넣어 주면 된다. 

.foo { font-size: 30px; }
.bar { color: blue; }

<p class="foo bar"> ... </p>

위 HTML문의 <p> 안에는 "foo"와 "bar"라는 두 개의 class가 선언돼 있다. CSS문에는 또 foo class가 30px의 폰트 크기를 갖게, bar class는 글자를 파란색으로 적용하도록 설정돼 있다. 위 코드를 실행하면, <p>에 foo, bar 둘 모두의 규칙이 적용되고 있다는 것을 알 수 있다.

id 선택자

#bar { background-color: yellow; }

<p id="bar"> ... </p>

id 선택자는 class 선택자와 거의 유사하다. 다만 .(마침표) 대신 #(해시) 기호를 쓴다는 점과, 요소에 class 속성 대신 id 속성을 사용한다는 점이 다르다. 또, 여러 요소에 중복 선언될 수 있는 class와 다르게 id는 문서 내에서 단 한 번만 쓰일 수 있다. 
 

선택자의 조합

/* 요소와 class의 조합 */
p.bar { ... }

/* 다중 class */
.foo.bar { ... }

/* id와 class의 조합 */
#foo.bar { ... }

위 예제와 같이, 여러 선택자를 조합해 사용할 수도 있다.

속성 선택자

p[class] { color: silver; }
p[class][id] { text-decoration: underline; }

<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>

속성 선택자는 타 선택자와 달리 대괄호를 이용해 묶고 대괄호 안에 속성 이름이 들어가는 선택자다. 요소에 해당 이름의 속성이 있다면 적용된다.

정확한 속성값으로 선택

<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>

class, id값 존재 자체로 두루뭉술 묶을 수도 있지만 이처럼 명확한 속성을 지정해 줄 수도 있다. 이처럼 속성 선택자에 속성값까지 지정해 주면 동일한 속성에 동일한 속성값을 가진 부분에만 스타일이 적용된다.

 

부분 속성값으로 선택

<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>

p[class~="color"] { font-style: italic; }
p[class^="color"] { font-style: italic; }
p[class$="color"] { font-style: italic; }
p[class*="color"] { font-style: italic; }

[class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택.
[class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택.
[class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택.
[class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택.

p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */

문서 구조의 이해

<html>
<body>
    <div>
        <h1><span>HTML</span>: Hyper Text Markup Language</h1>
    </div>
    <p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다.</p>
</body>
</html>

선택자와 문서의 관계를 이해하기 위해 먼저 어떻게 문서가 구조화되는지 살펴보자. 이들의 관계는 부모와 자식, 조상과 자손, 그리고 형제 관계로 분류될 수 있다.

부모와 자식 관계

부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 한 요소의 부모 요소는 하나뿐이다. 자식 요소는 부모 요소의 반대라고 생각하면 된다. 다만 한 요소의 부모 요소는 한 개만 존재할 수 있는 반면 한 부모 아래의 자식 요소는 여러 개 존재할 수 있다.

<body>의 부모 요소 : <html> ↔ <html>의 자식 요소 : <body>
<div>의 부모 요소 : <body> ↔ <body>의 자식 요소 : <div>, <p>
<h1>의 부모 요소 : <div> ↔ <div>의 자식 요소 : <h1>
<span>의 부모 요소 : <h1> ↔ <h1>의 자식 요소 : <span> 
<p>의 부모 요소 : <body> ↔ <body>의 자식 요소 : <div>, <p>
 

조상과 자손 관계

조상과 자손의 관계 여러 부모 자식 관계를 포함해 확장한 관계라고 보면 된다. 조상 요소는 한 요소를 포함하는 (부모 요소를 포함한) 모든 요소고, 자손 요소는 반대로 그 요소가 포함하고 있는 모든 요소다.

<body>의 조상 요소 : <html> ↔ <html>의 자손 요소 : <body>, <div>, <h1>, <span>, <p>
<div>의 조상 요소 : <html>, <body> ↔ <body>의 자손 요소 : <div>, <h1>, <span>, <p>
<h1>의 조상 요소 : <html>, <body>, <div> ↔ <div>의 자손 요소 : <h1>, <span>
<span>의 조상 요소 : <html>, <body>, <div>, <h1> ↔ <h1>의 자손 요소 : <span>
<p>의 조상 요소 : <html>, <body> ↔ <body>의 자손 요소 : <div>, <h1>, <span>, <p>

형제 관계

서로 같은 부모를 가지고 있는 요소 사이의 관계를 형제 관계라고 한다. 위 코드 중 <div>, <p>가 형제 관계다. 형제 관계 중 바로 뒤에 있는 요소를 지칭할 경우는 인접한 관계를 가진다, 혹은 인접한다고 부른다. 위 코드에서는 <p>가 <div>에 인접한 형제 요소가 된다.  

문서 구조 관련 선택자

문서 구조를 이용한 선택자로 자손 선택자, 자식 선택자, 인접 선택자가 있다.

 

자손 선택자

div span { color: red; }

자손 선택자는 선택자 사이에 아무 기호 없이 공백으로 구분한다. 이 선택자는 <div>의 자손 요소인 <span>을 선택하는 선택자다.
 

자식 선택자

div > h1 { color: red; }

자식 선택자는 선택자 사이에 닫는 꺽쇠 기호(>)를 넣는다. 이 선택자는 <div>의 자식 요소인 <h1>을 선택하는 선택자다. 

인접 형제 선택자

div + p { color: red; }

인접 형제 선택자는 선택자 사이에 +를 넣어 표현한다. 

CSS는 마크업 언어, 즉 HTML을 꾸며 주는 표현용 언어다. HTML이 문저의 정보, 구조를 설계한다면 CSS는 문서를 보기 좋게 디자인한다. CSS는 HTML과는 독립된 다른 언어이지만 표현을 하기 위한 언어이기 때문에 마크업 문서 자체가 존재하지 않다면 무용지물이 된다. 때문에, 보통 CSS는 HTML과 묶어 얘기한다.

전 세계의 많은 웹 사이트들은 전부 HTML 태그를 이용해 만들어진다. 하지만 웹 사이트를 구축하는 데 자주 사용하는 HTML의 개수는 십여 개밖에 되지 않는다. 이 모든 사이트를 각각 다양하고 독창적인 디자인으로 표현될 수 있게 해 주는 게 CSS다. 이번 포스트에서는 기본적인 CSS 문법에 대해 알아본다. <해당 포스트는 비전공자를 위한 HTML/CSS 강의 기반으로 작성됐다>

CSS 구문

h1 { color: yellow; font-size:2em; }

선택자selector : "h1"

속성property : "color"

값value : "yellow"

선언declaration : "color: yellow", "font-size: 2em"

선언부declaration block : "{ color: yellow; font-size:2em; }"

규칙rule set : "h1 { color: yellow; font-size:2em; }"

CSS 파일은 여러 개의 규칙으로 이루어져 있다. 구문을 작성할 때는 개행에 주의해야 하는데, 선택자와 선언부 사이나 선언과 선언 사이는 개행 해도 상관 없으나 속성이름과 속성값 사이에는 개행해선 안 된다.
 

/* 올바른 예 */

h1
{ color: yellow; font-size:2em; }

h1 {
    color: yellow;
    font-size:2em;
}

/* 잘못된 예 */

h1 {
    color:
    yellow;
}

 

CSS와 마크업 문서 연결 방법

(1) 인라인Inline 방식

<div style="color:red;"> 내용 </div>

인라인 방식은 해당 요소에 직접 스타일 속성을 사용해서 규칙들을 선언하는 방법을 뜻한다. 해당 요소에 직접 입력하기 때문에 선택자는 필요 없고, 선언부에 내용만 스타일 속성의 값으로 넣어 주면 된다. 인라인 방식은 코드의 재활용이 되지 않기 때문에 자주 사용하지는 않는다.

(2) 인터널Internal 방식

<style> div {color: red;} </style>

인터널 방식은 <head>에 <style> 태그를 활용해 문서마다 스타일을 선언해 주는 방법이다. 이 방식을 활용하면 문서 내의 모든 <div>에 같은 스타일을 줄 수 있다. 다만, 많은 페이지가 있을 경우 까다로운 건 매한가지다.
 

(3) 익스터널External 방식

div {color: red;}

익스터널 방식은 외부 스타일 시트 파일을 이용하는 방법이다. 한 개 문서를 만들어 거기에 전체 문서가 공용으로 사용할 스타일 규칙을 만들어 넣고, .css 확장자로 저장한 후 페이지마다 링크로 CSS 파일을 연결해 주면 된다.

<link rel="stylesheet" href="css/style.css">

이렇게 <head> 내부에 <link>를 선언한 후 href 속성을 이용해 경로를 적어주면 되는데, 이 때 rel 속성은 연결되는 파일이 문서와 어떤 관계인지를 명시하는 속성으로, CSS 파일은 'stylesheet'라고 적어야 한다. 이 방식으로 스타일을 선언하면 많은 페이지가 있더라도 이 한 줄로 모든 페이지에 같은 스타일을 적용할 수 있으며, 수정할 때도 한 번에 모든 페이지에 반영할 수 있다. 이러한 익스터널 방식은 파일 관리가 편하면서도 용량이 작기 때문에 주로 사용된다.
 

HTML은 Hyper Text Markup Language의 약자다. 이 때의 Hyper Text는 문서 너머와 연결을 해 주는 텍스트, 즉 링크를 의미하고 Markup Language는 정보를 구조적/ 계층적으로 표현하는 언어란 뜻이다. 이번 포스트에서는 HTML에서 쓰이는 문법, 태그를 정리한다. <해당 포스트는 비전공자를 위한 HTML/CSS 강의 기반으로 작성됐다>

제목Heading 태그

<h1>역사</h1>
<h2>개발</h2>
1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안했다.
... 이하 생략
<h2>최초 규격</h2>
HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작됐다.
... 이하 생략

문서 내 제목을 표현할 때 사용하는 태그다. 제목의 레벨에 따라서 <h1> ~ <h6>로 구분된다. <h1>은 보통 페이지를 대표하는 큰 제목으로 사용되며, 숫자가 올라갈 수록 낮은 수준의 소제목을 나타내는 데 사용한다. 제목 태그를 사용하면 일반 텍스트보다 크기와 굵기가 더 강조돼 보이는데, 이는 브라우저가 기본적으로 제목 태그에 제공하는 스타일이다.

단락Paragraph 태그

<h1>역사</h1>
<h2>개발</h2>
<p>
    1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안했다.
    ... 이하 생략
</p>
<h2>최초 규격</h2>
<p>
    HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작됐다.
    ... 이하 생략
</p>

단락 태그를 사용해 제목 외 본문 내용의 계층을 구분해 줄 수 있다. 위 예제는 제목 태그 예제와 동일한 형태로 노출되지만, 이전 예제보다 의미에 맞게 짜인 마크업 구조라고 볼 수 있겠다.
 

 

개행Linebreak 태그

1980년, <br>
유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 <br>
HTML의 원형인 인콰이어를 제안했다. <br>

HTML은 두 칸 이상의 공백 및 개행을 무시하기 때문에 여러 칸을 스페이스 바로 개행하더라도 화면에 나타나지는 않는다. 이럴 때 쓰이는 태그가 <br>이다. 개행하고자 하는 데서 <br>을 선언하면 개행된다. <br>은 개행 역할 외 내용이 존재하지 않는 빈 태그이며 별도로 닫기 태그를 사용해주지 않아도 된다.

텍스트 표현 태그

<b> : bold. 글자를 굵게 표현하는 태그.

<i> : italic. 글자를 기울여 표현하는 태그.

<u> : underline. 글자의 밑줄을 표현하는 태그.

<s> : strike. 글자의 중간선을 표현하는 태그.

상기 태그들은 텍스트를 변형해 보여주기 위한 태그고, 글씨의 강조 역할에는 기여하지 못 한다. 단, HTML5 버전에서는 <i> 태그만 기술적인 용어/ 외국어 문구/ 소설 속 인물의 생각 등의 표현을 할 때 사용된다는 의미가 추가됐다. 다른 표현형 태그에 의미를 부여하고 싶다면 아래 시멘틱 마크업 태그를 참고하자.

시멘틱 마크업Semantic Markup

<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>

앵커anchor 태그

<a href="http://www.naver.com/" target="_blank">네이버</a>

앵커 태그는 링크를 만드는 태그다. 앵커 태그의 기본형은 위와 같다. 링크로 이동할 목적지인 hrefhypertext reference URL 값을 선언해 줘야 작동하며, target 속성을 사용하면 링크된 리소스를 어디에 표시할지도 지정할 수 있다. target 속성에 _self를 사용하면 현재 창에, _blank를 사용하면 새로운 창에 각각 링크 페이지를 표시할 수 있으며, 별도로 지정해주지 않으면 자동으로 _self값으로, 현재 화면에 출력한다. 

이때 <a>에 들어가는 href 값을 꼭 외부 페이지로 설정할 필요는 없다. 페이지 내부의 특정 요소로 초점을 두고 이동할 수도 있으며 이를 내부 링크라고 한다. 이 때는 href 속성값에 #을 쓰고 그 뒤에 페이지 내에서 이동하고자 하는 요소의 id 속성값을 적으면 된다.

<a href="#some-element-id">회사 소개로 이동하기</a>
<h1 id="some-element-id">회사 소개</h1>

보통 페이지에 내용이 많아 스크롤이 길어질 경우에, 빠르게 화면 최상단으로 이동시키기 위해 내부 링크를 사용한다. 웹페이지 화면 하단에 있는 'top', '맨 위로 이동하기' 버튼이 이에 해당한다.

컨테이너Container 태그

<div>
    <span>Lorem</span> ipsum dolor sit.
</div>

컨테이너 태그는 요소들을 묶기 위해 사용하는 태그다. 스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도로 이런 컨테이너 태그들이 많이 사용된다. 대표적인 컨테이너 태그는 <div>, <span>이다. 이 때 <div>는 블록 레벨(부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소)이고 <span>은 인라인 레벨(하나의 라인 안에서 자신의 내용만큼만 박스를 만드는 요소)이다.

리스트List 태그

리스트는 일련된 항목들이 나열된 것들을 의미한다. 콘텐츠가 많은 포털이나 검색 엔진같은 사이트에는 분야나 항목으로 구분할 것이 많으므로 리스트가 자주 사용된다. 리스트 태그는 순서가 없는 리스트를 표현할 때 사용되는 <ul> 태그, 순서가 있는 리스트를 표현할 때 사용되는 <ol> 태그, 용어와 정의를 표현할 때 사용되는 <dl> 태그로 구분한다.

<ul> 
    <li> 콩나물</li> 
    <li> 파</li> 
    <li> 국  간장</li> 
    ... 
</ul>

<ol>
    <li>냄비에 국물용 멸치를 넣고 한소끔 끓여 멸치 육수를 7컵(1,400ml) 만든다.</li>
    <li>콩나물을 넣고 뚜껑을 덮어 콩나물이 익을 때까지 끓인다.</li>
    <li>뚜껑을 열고 대파, 마늘, 고춧가루를 넣고 끓인다.</li>
    ...
</ol>

<dl>
    <dt>리플리 증후군</dt>
    <dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어</dd>
    <dt>피그말리온 효과</dt>
    <dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
    <dt>언더독 효과</dt>
    <dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
</dl>

이미지image 태그

<img src="./images/pizza.png" alt="피자">

<img>는 문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그다. 이미지 태그 역시 두 가지의 필수 속성값을 가지는데, 이미지의 경로를 나타내 주는 속성인 src와 이미지의 대체 텍스트를 나타내는 속성인 alt다.

별개로 width/ height로 크기값을 지정해줄 수 있으며 (값의 단위는 지정해주지 않아도 자동으로 픽셀 단위로 계산된다.) 이미지의 크기가 고정적이라면 미리 크기를 선언해 두는 것이 성능적인 측면에서 좋다. 두 개 모두 선언하지 않으면 원본 크기대로 노출되며 둘 중 하나만 선언하면 나머지 한 값의 비율대로 자동 변경돼 나온다. 반대로 둘 다 선언하면 원본 크기의 비율과 상관 없이 원하는 비율로 이미지를 끼워 넣을 수 있다.

src에 들어가는 이미지의 경로는 상대경로와 절대경로로 각각 지정해 줄 수 있다. 이 때 상대경로는 현재 웹 페이지를 기준으로(./) 상대적인 이미지의 위치를 나타내는 경로고 절대경로는 실제 그 이미지가 위치한 곳의 전체 경로다.

<!-- 상대경로 -->
<img src="./images/pizza.png" alt="피자">

<!-- 절대경로 -->
<img src="C:/users/document/images/pizza.png" alt="피자">
<img src="http://www.naver.com/pizza.png" alt="피자">

표table 태그

표는 셀(내용이 들어가는 하나의 칸)로 이루어져 있으며, 가로 방향을 행row, 세로 방향을 열column이라 부른다. 하나의 테이블은 하나 이상의 <tr>로 이루어져 있으며, <tr>은 셀을 나타내는 <th>, <td>를 자식으로 가지게 된다. 표를 구성할 때는 위에서 밑으로, 좌측에서 우측으로 작성하면 된다.

<table> : 표를 나타내는 태그.
<tr> : 행을 나타내는 태그.
<th> : 제목 셀을 나타내는 태그.
<td> : 셀을 나타내는 태그.
 

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
    </tr>
</table>

위는 1부터 16까지를 4행 4열로 표현한 표를 나타내는 코드다. 브라우저 기준으로 코드를 작성해 확인하면 테두리가 없어 표가 어색해 보일 수 있는데, 이는 브라우저에서 제공하는 테이블의 기본 스타일에 테두리가 없기 때문이다. 확인을 위해 아래 CSS 코드를 <head> 안에 입력하면 테두리가 나타나는 걸 확인할 수 있다.

<style>
    th, td { border: 1px solid; }
</style>

표가 복잡해지면 표를 해석해서 음성으로 전달해야 하는 스크린 리더기와 같은 보조 기기를 통해서는 표의 내용을 이해하는 것이 어려워질 것이다. 따라서, 표를 구조적으로 파악하기 위해 도움이 되는 태그를 사용해야 한다.

<caption> : 표의 제목을 나타내는 태그.
<thead> : 제목 행을 그룹화하는 태그.
<tfoot> : 바닥 행을 그룹화하는 태그.
<tbody> : 본문 행을 그룹화하는 태그.

<table>

    <caption>Monthly Savings</caption>
    <thead>
        <tr>
            <th>Month</th>
            
<th>Savings</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            
<td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            
<td>February</td>
            <td>$80</td>
        </tr>

    </tbody>
    <tfoot>
        <tr>
            
<td>Sum</td>
            <td>$180</td>
        </tr>
    </tfoot>

</table>

폼form 태그

폼 요소는 서버에 데이터를 전달하기 위한 요소고, <input>은 대표적인 폼 요소다. <input> 자체는 내용 없는 빈 요소이나 후술할 type 속성을 통해 여러 종류의 입력 양식으로 나타나게 된다.

<input type="text" placeholder="ㅇㅇㅇ">

아이디, 이름, 주소, 전화번호 등 단순한 텍스트를 입력할 때 사용하는 텍스트 타입. 텍스트 타입에는 placeholder 속성이 존재하는데, 이 속성을 이용하면 사용자가 입력하기 전에 미리 화면에 값을 노출해, 사용자가 입력해야 할 값의 양식을 표현해줄 수 있다.

<input type="password">

암호와 같이 공개할 수 없는 내용을 입력할 때 사용하는 패스워드 타입. 이 타입을 사용하면 화면엔 텍스트 타입과 같게 나타나지만 사용자가 실제로 입력할 땐 값을 노출하지 않는다.
 

<input type="radio" name="gender"> 남자
<input type="radio" name="gender"> 여자

라디오 버튼을 만들 때 사용하는 라디오 타입. 라디오 버튼은 중복 선택이 불가능하며 하나의 항목만을 선택해야 한다.

<input type="checkbox" name="hobby"> 등산
<input type="checkbox" name="hobby"> 독서
<input type="checkbox" name="hobby"> 운동

 
체크박스 버튼을 만들 때 사용되는 체크박스 타입. 체크박스는 중복 선택이 가능하다.

<input type="file">

파일을 서버에 올릴 때 사용하는 파일 타입. 브라우저에 따라 표현되는 형태는 조금씩 다르지만, 모두 같은 역할을 한다.

<form action="./test.html">
    메시지: <input type="text" name="message"><br>
    <input type="submit">
    <input type="reset">
    <input type="image" src="http://placehold.it/50x50?text=click" alt="click" width="50" height="50">
    <input type="button" value="버튼">
</form>

클릭 가능한 버튼을 만드는 submit, reset, image, button 타입.
 
submit : form의 값을 전송하는 버튼.
reset : form의 값을 초기화하는 버튼.
image : 이미지를 삽입할 수 있는 버튼. (submit과 동작이 동일함.)
button : 아무 기능이 없는 버튼.
 

<select>
    <option>서울</option>
    <option>경기</option>
    <option>강원</option>
    ...
</select>

<select>는 선택 목록 상자 또는 콤보박스라고도 한다. 몇 개의 선택지를 리스트 형태로 노출하고 그 중 하나를 선택할 수 있게 하는 태그다. 기본적으로 하나를 선택하는 형태로 만들어지지만 multiple 속성을 사용하면 다중 선택도 가능하다. <select> 내부의 <option>으로 각 항목을 표현해줄 수 있으며 <option> 내부에 selected 속성을 표현해주면 시작부터 선택된 항목을 구현할 수 있다.

<textarea rows="5" cols="30">
    ...
</textarea>

<textarea>는 한 줄만 입력할 수 있는 input의 텍스트 타입과 달리 여러 줄의 텍스트를 입력할 때 사용한다. cols와 rows 속성을 각각 줄 수 있으며 이때 cols는 가로 크기를, rows는 세로 크기를 조절하는 속성이다.

<button type="submit|reset|button">ㅇㅇㅇ</button>

<button>은 버튼을 만들 때 사용할 수 있으며 submit, reset, button 세 가지의 타입을 가진다. 세 버튼의 용도는 위에서 표기한 input의 동일 이름 타입과 같은 기능을 가진다. 다만, 빈 태그가 아니며 내용을 안에 직접 넣을 수 있어 input 대비 조금 더 자유로운 스타일을 표현할 수 있다는 장점이 있다.
 

<label for="name">이름</label>: <input type="text" id="name"><br>
<label for="nickname">이름</label>: <input type="text" id="nickname"><br>
<label for="address">이름</label>: <input type="text" id="address"><br>

<label>은 form 내부의 이름과 요소를 명시적으로 연결시키기 위해 사용한다. 사용을 위해서는 form 요소의 id 속성값과 <label>의 for 속성값을 같게 적어줘야 하며, <label>을 사용하면 클릭했을 경우 해당 <form> 요소를 클릭한 것처럼 동작한다. 사용성, 접근성 측면으로 중요한 역할을 하므로 반드시 써 주는 것이 좋다.

<fieldset>
    <legend>기본 정보</legend>
    ... 폼 요소들 ...
</fieldset>
<fieldset>
    <legend>부가 정보</legend>
    ... 폼 요소들 ...
</fieldset>

<fieldset>, <legend>는 form 요소를 구조화하기 위해 필요한 태그다. 여러 태그를 함께 쓸 때, <fieldset>의 바로 밑에는 반드시 자식 열인 <legend>가 위치해야 한다.

<fieldset> : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용.
<legend> : 폼 요소의 제목으로 <fieldset> 내부에 작성.

<form action="" method="">
    <fieldset>
        <legend>기본 정보</legend>
        ... 폼 요소들 ...
    </fieldset>
    <fieldset>
        <legend>부가 정보</legend>
        ... 폼 요소들 ...
    </fieldset>
</form>

<form>은 form 요소들을 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해 주는 역할을 한다. <fieldset>으로 구조화돼 있다면 <fieldset>도 함께 감싸 줘야 한다. <form>에는 2가지 속성이 있는데, 데이터를 처리하는 서버의 주소를 표기하는  action 속성과 데이터를 전송하는 방식을 지정하는 method 속성이다. 이때 method 속성값에는 get/ post 두 가지 방식이 존재하며, get 방식은 데이터가 전송될 때 주소창에 파라미터 형태로 붙어 데이터가 노출되는 형식이며 post는 데이터가 전송될 때 노출되지 않는 형식이다.

서브 쿼리Subquery란 메인 쿼리Main query를 실행하는 데 필요한 데이터를 추가로 조회하기 위해 사용되는 부가적인 SELECT문을 말한다. 어떤 메인 쿼리에 포함되어 있다는 의미에서 내부 쿼리Inner query라고 부르기도 한다. 이때, 메인 쿼리는 외부 쿼리Outer query로 지칭될 수 있다. 

서브 쿼리의 형태 / 실행 조건

SELECT 열
FROM 테이블
WHERE 조건식 ( SELECT 열
                             FROM 테이블
                             WHERE 조건식 )

(1) 반드시 괄호에 감싸진 형태로 쓰인다.

(2) SELECT문의 형태로만 작성이 가능하다.

(3) 쿼리의 끝에서 ;세미 콜론을 사용할 수 없다.

(4) ORDER BY절을 삽입할 수 없다.

서브 쿼리의 특징

(1) 비교 혹은 조회의 대상이 될 때 조회 대상의 오른쪽에 놓인다.

(2) 메인 쿼리와의 비교를 위해 존재하는 쿼리이기 때문에 서브 쿼리의 SELECT 절은 메인 쿼리의 비교 대상과 같은 자료형과 같은 개수로 지정돼야 한다.

(3) 결과값 역시 메인 쿼리의 연산자 종류와 동일해야 한다.

(4) 메인 쿼리와의 관계는 단방향이다. 이는 Java 객체지향의 상속과도 유사한 형태인데, 상속당한 자식 객체는 부모 객체의 인스턴스를 사용할 수 있지만 부모는 자식 객체의 인스턴스를 사용할 수 없는 특징이 있다.

(5) 구조화를 통해 쿼리의 각 부분을 가독성 있고 명확하게 볼 수 있게 해 준다.

(6) 위의 특징 때문에, 복잡한 JOIN과 UNION을 명료하게 정리할 수 있는 대체재로 기능할 수 있다. 

서브 쿼리의 사용처

(1) SELECT 절에서 사용 / 스칼라 서브 쿼리Scalar Subquery

(2) FROM 절에서 사용 / 인라인 뷰Inline View

(3) WHERE 절에서 사용 / 중첩 서브 쿼리Nested Subquery

(4) HAVING 절에서 사용

(5) ORDER BY 절에서 사용

(6) INSERT문의 VALUES 값 대체재로써 사용

(7) UPDATE문의 SET 값 대체재로써 사용

서브쿼리의 사용

이번 포스트에서는 서브 쿼리의 사용처 중 SELECT, FROM, WHERE절에서 쓰이는 경우, 즉 스칼라 서브 쿼리, 인라인 뷰, 중첩 서브 쿼리에 대해 알아본다.

SELECT절, 스칼라 서브 쿼리Scalar Subquery

ㅡ스칼라 서브쿼리(Scalar Subquery)
  정대리 급여와 테이블 전체 평균 급여를 구하시오.

SELECT name
	, salary
   	, (SELECT ROUND(AVG(salary), -1) FROM employee) AS 평균급여
FROM employee
WHERE name = '정대리';

스칼라 서브 쿼리는 SELECT절에서 나타나는 서브 쿼리다. 다른 테이블에서 어떠한 값을 불러올 때 주로 쓰이며, '스칼라'라는 이름에서 보여지듯 단일 값만을 가져올 수 있다. 해당 서브 쿼리는 일치하는 값이 없다면 NULL을 리턴한다(해당 부분은 그룹 함수의 특징이기도 하다.).

FROM절, 인라인 뷰Inline View

ㅡ인라인 뷰(Inline View)
  직급이 사원인 사람들의 이름과 급여를 구하시오.

SELECT ex1.name
	, ex1.salary
FROM (SELECT * FROM employee li
WHERE li.office_worker= '사원') ex1;

인라인 뷰는 FROM 절에서 나타나는 서브 쿼리다. 특정 테이블에서 전체 데이터가 아니라 일부 데이터만 추출해 연결하고자 할 때 쓴다. 타 서브 쿼리와 달리 꼭 별칭alias을 지정해 줘야지만 사용이 가능하다. 참고로, WITH 문을 사용해도 결과물은 동일하기 때문에 손에 맞는 것을 취사선택해 쓰면 된다.

WITH
[별칭1] AS (SELECT문 1),
[별칭2] AS (SELECT문 2),
...,
[별칭N] AS (SELECT문 N)
SELECT 
FROM 별칭1, 별칭2, ..., 별칭N

WHERE절, 중첩 서브 쿼리Nested Subquery

ㅡNested Subquery - 단일 행 
  정대리라는 사람의 직급을 구하시오.

SELECT office_worker
FROM employee
WHERE office_worker = (SELECT office_worker FROM employee WHERE name = '정대리')

ㅡNested Subquery - 복수(다중) 행 
  정대리보다 급여가 높은 사람들을 구하시오.

SELECT *
FROM employee
WHERE salary > (SELECT salary FROM employee WHERE name = '정대리')

  직급이 사원인 사람들을 구하시오.

SELECT *
FROM employee
WHERE office_worker IN (SELECT office_worker FROM employee WHERE office_worker = '사원')

WHERE절에서 나타나는 서브 쿼리는 중첩 서브 쿼리라 부른다. 실행 결과의 행 수, 열 수에 따라 단일 행 서브 쿼리, 다중 행 서브 쿼리, 다중 열 서브 쿼리로 나누며 이번 포스트에서는 실무에서 주로 사용되는 단일 행/ 다중 행 서브 쿼리만 다룬다. 

단일 행 서브 쿼리는 >, >=, =, <=, <, <>, ^=, != 등의 연산자와 함께 쓰이며, 다중 행 서브 쿼리는 IN, ANY, SOME, ALL, EXISTS 등의 연산자와 함께 쓰인다. 출력하는 행 수와 연결지어서, 전자를 단일 행 연산자, 후자를 다중 행 연산자라 부르기도 한다. 

IN : 하나라도 일치한 데이터가 있다면 TRUE
ANY, SOME : 만족하는 결과가 하나 이상이면 TRUE
ALL : 결과가 모두 만족하면 TRUE
EXISTS : 결과가 존재하면 TRUE (행이 1개 이상이면 TRUE)

 <IN> 부서별 최고 급여와 동일한 급여를 받는 사원 정보

SELECT *
FROM emp
WHERE sal IN (SELECT MAX(sal) FROM emp GROUP BY deptno);

 <SOME> 등가 비교 연산자(=)와 ANY, SOME을 함께 사용하면 IN 연산자와 같은 기능 수행

SELECT *
FROM emp
WHERE sal = SOME (SELECT MAX(sal) FROM emp GROUP BY deptno);

 <ANY> 등가 비교 연산자가 아닌 대소 비교 연산자와 ANY를 함께 사용하면?
 < ANY : 부서 30 중 최대값보다 적은 급여를 가진 사원을 찾게 됨
 > ANY : 부서 30 중 최소값보다 높은 급여를 가진 사원을 찾게 됨

SELECT *
FROM emp
WHERE sal < ANY (SELECT sal FROM emp WHERE deptno = 30);

 <ALL> 부서 30 중 최대 급여보다 더 많은 급여를 받는 사원 출력

SELECT *
FROM emp
WHERE sal > ALL (SELECT sal FROM emp WHERE deptno = 30);

 <EXISTS> 부서50이 있으면 EMP 전체 출력

SELECT *
FROM emp
WHERE EXISTS (SELECT dname FROM dept WHERE deptno = 50);

출처

양디로그 블로그

Inpa Dev 블로그

java의 개발일기 블로그

<데이터 체크>

<

문제 출처: 프로그래머스, 이름에 el이 들어가는 동물 찾기

테이블명: animal_ins동물 보호소에 들어온 동물의 정보를 담은 테이블

컬럼명: animal_id동물 아이디, animal_type동물 종, datetime보호시작일, intake_condition보호 시작 시 상태, name이름, sex_upon_intake성별 및 중성화 여부

데이터베이스 구성: 1개 테이블, 6개 컬럼, 100개 로우

>

<시나리오>

보호소에 돌아가신 할머니가 기르던 개를 찾는 사람이 찾아왔다. 이 사람이 말하길 할머니가 기르던 개는 이름에 'el'이 들어간다고. 동물 보호소에 들어온 동물 중 이름이 'el'이 들어가는 개의 리스트를 뽑으려면 어떻게 쿼리를 작성해야 할까.

<풀이> 

문제는, 개의 이름을 특정할 수 없으니 대소문자 역시 확답할 수 없다는 거다. 모든 경우의 수를 WHERE절에 넣어 주는 방향도 있겠지만, 문자열을 전부 대문자나 소문자로 바꿔 버리는 UPPER나 LOWER를 사용해도 동일한 결과물을 구현할 수 있다.

WHERE name LIKE LOWER('%EL%')

나머지는 쉽다. 조건을 채워서 쿼리를 마저 짜면 아래와 같을 것이다.

SELECT animal_id
        , name
FROM animal_ins
WHERE name LIKE LOWER('%EL%')
    AND animal_type = 'Dog'
ORDER BY name

<데이터 체크>

<

문제 출처: 프로그래머스, 자동차 평균 대여 기간 구하기

테이블명: car_rental_company_rental_history어느 자동차 대여점의 대여 기록 테이블 견본 

컬럼명: history_id대여 기록 아이디, car_id자동차 아이디, start_date대여시작일, end_date대여종료일

데이터베이스 구성: 1개 테이블, 4개 컬럼, 160개 로우

>

>

<시나리오>

여기 어떤 자동차 대여점이 있다. 이 자동차 대여점에서는 기존 고객들을 확실히 잡아두기 위해 주 고객층에 최대한의 가격 메리트를 부여하는 방향으로 가격 정책을 개편하려고 한다. 이번 EDA탐색적 데이터 분석는 이를 위한 고객 세분화 과정이다. 평균 대여 기간이 7일 이상인 자동차들의 평균 대여 기간(컬럼명: average_duration) 리스트를 출력하는 SQL문을 작성하려면 어떻게 해야 할까?

<풀이>

먼저 문제를 해소하기 위해서는 전체 리스트의 평균 대여 기간을 리스트화해야 한다. 파편화되어 있는 데이터를 그룹으로 묶어 주고,

GROUP BY car_id

이 데이터의 기준으로 평균 대여 기간을 뽑는다. 대여 기간은 대여종료일과 대여시작일의 차로 계산될 수 있는데, 이 때 대여시작일 역시 하루로 계산되기 때문에 꼭 1을 더해 줘야 한다. 이 값에 평균을 적용해 주고 가독성을 위해 소수점 첫째 자리까지 반올림하는 쿼리를 다음과 같이 짤 수 있다.

SELECT car_id
	, ROUND(AVG(DATEDIFF(end_date, start_date) + 1), 1) average_duration

이 중에서 평균 대여 기간이 7일 이상인 값을 뽑으려면 HAVING에 조건을 추가해주면 된다. WHERE가 아닌 HAVING에 넣는 이유는 그룹의 집계값(AVG) 기준으로 연산해야 하기 때문이다.

HAVING average_duration >= 7

마무리하면, 완성된 식은 아래와 같을 것이다.

SELECT car_id
        , ROUND(AVG(DATEDIFF(end_date, start_date) + 1), 1) average_duration
FROM car_rental_company_rental_history
GROUP BY car_id
HAVING average_duration >= 7
ORDER BY average_duration DESC, car_id DESC

태블로에서 각 계산과 필터는 내부 지정된 쿼리 파이프라인에 따라 순차적으로 작동한다. 계산과 필터가 맞물린 형태로 진행되며 세부적인 순서는 아래와 같다.

01) 데이터 추출 필터> 02) 데이터 원본 필터> 03) 컨텍스트 필터> 04) FIXED > 05) 차원 필터> 06) INCLUDE/ EXCLUDE/ 블렌딩> 07) 측정값 필터> 08) 테이블 계산/ Clusters/ Totals/ Forecasts> 09) 테이블 계산 필터> 10) 추세선/ 참조선

어떤 순서로 계산과 필터가 실행되는지에 따라 때때로 결과값마저 바뀌기도 하므로 작동 순서는 꼭 숙지해 둘 필요가 있다.

예를 들어 보자. 당신은 Furniture 카테고리 내에서 매출 상위 3개의 서브 카테고리를 보고 싶다. 문제는 여기서 발생한다. 상위 필터가 차원 필터보다 먼저 실행되기 때문에, 전체 중에서 매출 상위 3개의 서브 카테고리가 먼저 걸러지고 잔여물 중에서 Furniture 카테고리인 것이 조회된다. 이건 당신이 원하던 답이 아닐 것이다. 어떻게 해야 당신이 원하는 답을 태블로로 걸러낼 수 있을까?

이에 대한 훌륭한 솔루션이 컨텍스트 필터다. 컨텍스트 필터는 워크시트에서 생성되는 다른 어떤 필터보다 앞서서 실행된다.

위 경우로 보면, 카테고리 필터를 눌러서 컨텍스트 필터로 전환('컨텍스트에 추가' 클릭)해 주면 순위 집계보다 카테고리 데이터가 먼저 읽히게 된다. 이렇게 되면 태블로가 서브 카테고리의 순위 집계하는 타이밍에 카테고리 데이터를 보유하게 되니 Furniture 카테고리 중에서 상위 3개 서브 카테고리를 뽑는 것도 가능해진다. 

바꿔준 건 컨텍스트 필터 지정밖에 없는데도 잘 뽑히는 것 볼 수 있다. 머릿속의 결과물과 실제 결과물의 간극은 대부분 작동 순서를 다르게 파악하는 데서 발생한단다. 여튼 앞서 간 선배들의 눈물에 젖은 시행착오를 밟고 우리는, 두 결과물의 간극을 최대한 좁힐 거인의 어깨 위에 탄 셈이다. 잘 배워 활용해 보자.

태블로에서 계산은 크게 세 가지 유형으로 이뤄진다. 첫째, 데이터 원본에 대해 계산을 진행하는 기본 계산. 둘째, 현재 비주얼리제이션에 표시된 항목 바탕으로 값을 변환해 셈하는 테이블 계산. 셋째, 연산할 세부 수준을 지정해 셈하는 LOD 계산. 이번 포스트에서는 이 세 개의 계산 중에서 LOD 계산의 정의와 예제에 대해 간략하게 다룬다.

<'디테일'에도 '레벨'이 있다>

테이블 계산을 할 때를 생각해 보자. 월매출 값을 카테고리로 쪼개면 레저, 가구, 식품의 월매출 값을 각각 볼 수 있다. 하지만 이렇게 뭉텅이로 쪼개 버린다면 서브 카테고리, 즉 낚시대와 캠핑 텐트, 의자와 책상, 밀키트와 냉동 식품의 월매출 값을 볼 수 없을 것이다. 반대로 서브 카테고리로 월매출을 쪼갠다면 '그냥 카테고리'의 월매출 값을 각각 보기는 힘들다.

다시 말하면 "차원과 측정값을 테이블 내에 넣으면 그 시점에서 '디테일 레벨'은 고정된다." 디테일 레벨이 높을 수록 각 데이터는 통합되어 있다. 반대로 디테일 레벨이 낮을 수록 데이터는 세분화되어 쪼개져 있다. 카테고리는 서브 카테고리보다 디테일 레벨이 높은 셈이다.

어쩌면 당연해 보이는 말이지만, 이 단순한 조건으로 인해 제한되는 계산들이 많다. 예를 들어 고객별 구매 일자를 최초 구매일로부터 며칠이 지났는지 보고 싶다고 해 보자. 이를 위해서 구매일Order Date의 MIN 값과(MIN[Order Date]) 최초 구매일로부터의 날짜 차이DATEDIFF를 뽑으면 아래와 같이 나오게 된다.

'고객별 최초 구매일' 출력을 예상하고 입력한 값이지만, 실제로는 화면(테이블) 상 디테일 레벨이 (SQL 식으로 말하자면 그룹이) 일 단위로 나눠져 있기 때문에 각 구매일이 모두 최초 구매일 값으로 잡히게 되고 이 식을 통해 DATEDIFF를 계산해 봤자 유의미한 연산이 될 수 없다.

이렇게, 두 값들의 레벨 차이 때문에 테이블 내에서 계산될 수 없는 것들을 실질적으로 연산 가능하게 해 주는 게 LOD 계산Level of Detail Calculation이다. LOD 계산 함수 중 FIXED를 사용하면 현재 뷰 내에(VLOD: View Level of Detail) 나와 있지 않는 다른 차원 기준으로 값을 계산할 수 있다. 아래와 같이 FIXED로 사용자 이름Customer Name을 추가로 그루핑해 주면 고객 별로 최초 구매 일자가 고정돼서 두 날짜 사이의 차이를 계산할 수 있다.

(FIXED [Customer Name]: MIN([Order Date]))

이처럼 LOD 계산을 사용하면 우리 테이블(VLOD)이 가지고 있는 디테일 레벨 외에서도 연산이 가능하다. 

<LOD 표현식의 형태와 종류>

LOD 표현식은 아래와 같은 형태를 가진다. 조건으로 활용할 차원과 집계식을 기재하고 중괄호로 묶어 주는 형태다. 차원 선언은 생략할 수 있는데, 생략하면 전체 테이블 단위로 표현되게 된다. 반대로 여러 가지 차원도 조건으로 설정할 수 있다. 쉼표로 뒤를 이어주면 된다. 또 유념해야 할 점이 하나 있는데, 뒤에 오는 식은 반드시 집계식(집계함수를 표현한 값의 형태)으로 표현해야 한다는 것이다.

지속적으로 설명되고 있는 FIXED는 완전히 독립적인 표현을 설명하는 LOD 표현식이다. 외에도 두 가지 표현식이 더 있는데, 현재 뷰에서 특정 차원을 추가하기 위해 사용(더 세분화)하는 INCLUDE와 반대로 현재 테이블에서 특정 차원을 제외하기 위해 사용(덜 세분화)하는 EXCLUDE다. 다만 FIXED를 제외한 나머지는 잘 사용되지 않기 때문에 이 포스트에서는 FIXED 위주로 다뤘다.

<마치면서>

이번 포스트에서는 LOD의 개념과 형태에 대해 간략하게 알아봤다. LOD는 본격적인 태블로 활용을 위해 꼭 알아둬야 할 개념이다. 마지막으로 태블로에서 제공하는 LOD 표현식의 활용에 대한 공식 가이드를 태그하면서 글을 마친다. 수익 KPI 측정, 코호트 분석 등 LOD 표현식의 활용처에 대해 자세하게 나와 있으니 꼭 한 번 읽어보길 권한다.

<참고>

패스트캠퍼스 전서연님 강의

태블로 공식 블로그

Cheon님 브런치

김소정님 velog

<서론>

실무에서는 종종 두 개 이상의 테이블의 모든 데이터ㅡ기준키가 공백인 데이터를 포함한, 다시 말해 합집합ㅡ를 불러와야 할 경우가 생긴다. 타 데이터베이스에서는 이를 FULL OUTER JOIN이라는 이름으로 지원하지만, mysql에서는 아쉽게도 이를 공식적으로 지원하고 있지 않다. 그러면 mysql에서는 합집합을 구현할 수 없냐고? 그건 아니다. LEFT JOIN과 RIGHT JOIN을 결합하는 것으로 mysql에서도 이를 간접적으로 구현할 수 있다. 외국 블로그에 해당 내용에 대해 예제와 함께 표시한 포스트가 있어 번역해 가져와 본다.

<본문>

sales와 orders라는 두 테이블이 있다고 가정해 보자. sales와 orders에는 동일하게 id주문 아이디와 order_date(형식이 살짝 다른)주문 일자, amount주문 금액 데이터가 들어 있다.

SELECT *
FROM sales;

 +------+---------------------+--------+
 | id   | order_date          | amount |
 +------+---------------------+--------+
 |    1 | 2021-02-02 08:15:00 |    250 |
 |    2 | 2021-02-02 08:30:00 |    200 |
 |    3 | 2021-02-02 08:55:00 |    150 |
 |    4 | 2021-02-02 09:15:00 |    125 |
 |    5 | 2021-02-02 09:30:00 |    250 |
 |    6 | 2021-02-02 09:45:00 |    200 |
 |    7 | 2021-02-02 10:15:00 |    180 |
 |    8 | 2021-02-02 10:30:00 |    125 |
 |    9 | 2021-02-02 10:45:00 |    200 |
 |   10 | 2021-02-02 11:15:00 |    250 |
 |   11 | 2021-02-02 11:30:00 |    150 |
 |   12 | 2021-02-02 11:45:00 |    200 |
 +------+---------------------+--------+


SELECT *
FROM orders;

 +------+------------+--------+
 | id   | order_date | amount |
 +------+------------+--------+
 |    5 | 2021-01-28 |    250 |
 |    6 | 2021-01-29 |    250 |
 |    7 | 2021-01-30 |    250 |
 |    8 | 2021-01-31 |    250 |
 |    9 | 2021-02-01 |    250 |
 +------+------------+--------+

만약 당신이 전체 기간 동안의 매출 합계를 계산한다거나 하는 이유로 두 테이블을 합쳐야 할 필요성이 있다면 아래와 같이 LEFT JOIN과 RIGHT JOIN을 UNION ALL로 결합해 사용할 수 있다. 아래와 같은 식으로.

mysql> SELECT * FROM sales
       LEFT JOIN orders ON sales.id = orders.id
       UNION ALL
       SELECT * FROM sales
       RIGHT JOIN orders ON sales.id = orders.id
       WHERE sales.id IS NULL ;
       
 +------+---------------------+--------+------+------------+--------+
 | id   | order_date          | amount | id   | order_date | amount |
 +------+---------------------+--------+------+------------+--------+
 |    5 | 2021-02-02 09:30:00 |    250 |    5 | 2021-01-28 |    250 |
 |    6 | 2021-02-02 09:45:00 |    200 |    6 | 2021-01-29 |    250 |
 |    7 | 2021-02-02 10:15:00 |    180 |    7 | 2021-01-30 |    250 |
 |    8 | 2021-02-02 10:30:00 |    125 |    8 | 2021-01-31 |    250 |
 |    9 | 2021-02-02 10:45:00 |    200 |    9 | 2021-02-01 |    250 |
 |    1 | 2021-02-02 08:15:00 |    250 | NULL | NULL       |   NULL |
 |    2 | 2021-02-02 08:30:00 |    200 | NULL | NULL       |   NULL |
 |    3 | 2021-02-02 08:55:00 |    150 | NULL | NULL       |   NULL |
 |    4 | 2021-02-02 09:15:00 |    125 | NULL | NULL       |   NULL |
 |   10 | 2021-02-02 11:15:00 |    250 | NULL | NULL       |   NULL |
 |   11 | 2021-02-02 11:30:00 |    150 | NULL | NULL       |   NULL |
 |   12 | 2021-02-02 11:45:00 |    200 | NULL | NULL       |   NULL |
 +------+---------------------+--------+------+------------+--------+

다만 UNION ALL의 경우 합집합이기 때문에 중복 행이 섞여 나올 수 있다. 이럴 경우에는 UNION을 사용해 주면 되는데, UNION의 경우에는 t1과 t2 사이의 중복 값을 걸러서 출력하는 것이어서 유니크 값을 거르는 인덱스가 하나 더 추가된다고 한다. 그래서 ㅡ중복을 거르지 않는 UNION ALL과 대비해서ㅡ 데이터의 크기에 따라 1.5배에서 4배까지 성능 차이가 날 수도 있다고.

그러니까, 웬만하면 FULL OUTER JOIN을 사용할 때는 UNION ALL을 쓰는 게 효율적이겠다. (+ 최소한으로 SELECT해서.)물론 애초에 모델링 차원에서 결합할 일을 배제하도록 설계하는 게 가장 좋겠지만.

<정리>

마지막으로 문법을 정리해 두고 글을 마친다. 순서대로 UNION ALL중복 미제거, UNION중복 제거으로 FULL OUTER JOIN을 적용하는 쿼리다.

SELECT * FROM t1 
LEFT JOIN t2 ON t1.id = t2.id 
UNION ALL 
SELECT * FROM t1 
RIGHT JOIN t2 ON t1.id = t2.id 
WHERE t1.id IS NULL

SELECT * FROM t1 
LEFT JOIN t2 ON t1.id = t2.id 
UNION 
SELECT * FROM t1 
RIGHT JOIN t2 ON t1.id = t2.id

<참고>

ubiq 블로그

sewonzzang님 블로그

<데이터 체크>

<

문제 출처: 프로그래머스, 식품분류별 가장 비싼 식품의 정보 조회하기

테이블명: food_product어느 대형마트의 식품 정보 테이블 견본 

컬럼명: product_id제품식별코드, product_name제품명, product_cd식품코드, category카테고리명, price가격

데이터베이스 구성: 1개 테이블, 5개 컬럼, 40개 로우

>

<시나리오>

당신은 A식품 영업팀 담당자다. 데이터를 통해 정량적으로 제품별 판매 성과를 확인하고자 마트 전산 기재된 자사 상품 기반으로 EDA탐색적 데이터 분석를 진행해보려고 한다. food_product 테이블에서 식품분류별로 가격이 가장 비싸거나 싼 '과자', '국', '김치', '식용유'의 category, price, product_name을 조회하고 싶다면 어떻게 쿼리를 짜야 할까?

<풀이>

'식품분류별' 이라 했으니 상품을 그룹으로 묶어야 한다. 또, GROUP BY와 윈도우 함수 중에는 윈도우 함수를 사용해야 한다. 왜냐면 연산된 결과값이 아니라 연산에 맞는 값을 가진 로우의 리스트를 출력해야 하니까. 이 부분에 대해 좀 더 깊이 알고 싶다면 윈도우 함수Window Function VS GROUP BY 포스트를 읽으면 된다.

WHERE절이 길어지겠다. 1) '과자', '국', '김치', '식용유' category의 상품 중에 2) 식품분류별로 가격이 가장 비싸거나/ 싼 상품만 골라 출력해야 하니까. 이를 반영해 WHERE절을 쓰면 아래와 같다. 이를 보면 서브쿼리를 IN 뒤에 조건절로 넣어 줬는데, 이에 대해 궁금하다면 다중행 서브쿼리 관련해 찾아보면 된다.

WHERE category IN('과자', '국', '김치', '식용유')
        AND price IN (SELECT MAX(price) OVER (PARTITION BY category) FROM food_product)
        -- 가장 비싼 상품의 리스트를 출력하거나

WHERE category IN('과자', '국', '김치', '식용유')
        AND price IN (SELECT MIN(price) OVER (PARTITION BY category) FROM food_product)
        -- 가장 싼 상품의 리스트를 출력하거나

또한 전문은 아래와 같이 쓸 수 있을 것이다. 

SELECT category
        , price
        , product_name
FROM food_product
WHERE category IN('과자', '국', '김치', '식용유')
        AND price IN (SELECT MAX(price) OVER (PARTITION BY category) FROM food_product)
        -- 가장 비싼 상품들만 출력
ORDER BY price DESC

SELECT category
        , price
        , product_name
FROM food_product
WHERE category IN('과자', '국', '김치', '식용유')
        AND price IN (SELECT MIN(price) OVER (PARTITION BY category) FROM food_product)
        -- 가장 싼 상품들만 출력
ORDER BY price DESC