TIL #220602 #DB #WEB

올해의 반이 지났습니다. 개발자가 되기 위해서 1월 말부터 달려왔는데 시간이 벌써 이렇게 되었네요!

스노우볼 굴리듯이 TIL이 쌓여서 큰 성장 하였으면 좋겠습니다. 모두들 좋은 소식만 있으시길!

 

오늘은 오전 DB 오후 WEB 시간으로 진행되었습니다. 이제 조금씩 배웠던 것들을 활용하기 시작하는 것 같아 재미가 있는 것 같습니다.

 

---

오전 DB

 

DB의 경우 join, subquery 를 배우고 연습문제를 풀면서 작성해보았습니다.

join의 경우 여러가지 방법이 있는데 아직까지 깊게 배우지는 않았습니다. 직접 조사를 해보았지만 이해가 조금 어려워서 쉬는날에 한번 고민해보도록 하겠습니다.

 

Join
: 두 개의 테이블을 엮어서 원하는 데이터를 추출 할 수 있습니다.

 

같은 테이블을 연결할 경우에는 테이블 alias를 통해서 구분하여 연결해줍니다.

 

예제1

employees 테이블로부터 모든 사원의 last_name, employee_id, 매니저 이름, manager_id를 함께 출력하시오

1. FROM employee employer JOIN employee manager
2. ON employer.manager_id = em2.employee_id;
3. SELECT employer.employee_id, employer.last_name, manager.employee_id, manager.last_name

의 순서로 작성합니다.

SELECT 부하.employee_id, 부하.last_name, 매니저.employee_id, 매니저.last_name
FROM employees 부하 JOIN employees 매니저
ON 부하.manager_id = 매니저.employee_id;

/*
EMPLOYEE_ID|LAST_NAME  |EMPLOYEE_ID|LAST_NAME|
-----------+-----------+-----------+---------+
        168|Ozer       |        148|Cambrault|
        169|Bloom      |        148|Cambrault|
        170|Fox        |        148|Cambrault|
        171|Smith      |        148|Cambrault|
        172|Bates      |        148|Cambrault|
        173|Kumar      |        148|Cambrault|
        103|Hunold     |        102|De Haan  |
        162|Vishney    |        147|Errazuriz|
        163|Greene     |        147|Errazuriz|
        164|Marvins    |        147|Errazuriz|
        165|Lee        |        147|Errazuriz|
        166|Ande       |        147|Errazuriz|
        167|Banda      |        147|Errazuriz|
...
*/

 

 

Subquery

: 하나의 SQL 문 안에 포함되어 있는 또 다른 SQL문을 말합니다.

사용하고자 하는 서브 쿼리문을 “( )” 에 형태에 넣어서 사용합니다.

 

서브쿼리의 경우에는 고유한 값(primary Key) 조건이 적용된 값에 사용되어야 Error 가 나오지 않습니다.

 

Ex)

‘Abel’ 의 급여보다 더 많은 급여를 받는 사원은?

SELECT employee_id, last_name, salary
FROM employees
WHERE salary > (SELECT salary FROM employees WHERE last_name = 'Abel')

 

 

연습문제1

employees 테이블로부터 평균 이상의 급여를 받는 모든 사원의

employee_id, last_name, salary를 출력하되 salary를 기준으로 오름 차순 정렬하여 출력하시오.

문장을 분리하여 작성해봅시다!

• employees 테이블로 부터 : FROM employees
• 조회할 내용 employee_id, last_name, salary SELECT employee_id, last_name, salary
• 평균 이상의 급여를 받는 모든 사원 WHERE salary ≥ (SELECT AVG(salary) FROM employees)
• Salary를 기준으로 오름차순 정렬 ORDER BY salary ASC;

SELECT salary, employee_id, last_name
FROM employees
WHERE salary >= (SELECT AVG(salary) FROM employees)
ORDER BY salary ASC;

/*
SALARY|EMPLOYEE_ID|LAST_NAME |
------+-----------+----------+
  6500|        203|Mavris    |
  6500|        123|Vollman   |
  6800|        165|Lee       |
  6900|        113|Popp      |
  7000|        155|Tuvault   |
  7000|        161|Sewall    |
  7000|        178|Grant     |
  7200|        164|Marvins   |
  7300|        172|Bates     |
  7400|        171|Smith     |
...
*/

 

---

오후 WEB

 

원래 프론트엔드가 되고자 공부를 시작하게 되었는데 구분 없이 다 재미있어서 이것 저것 다 배우고 있는 것 같습니다. 확실히 시각적으로 보이는 효과들이 많아서 점점 더 재밌는 것 같습니다. 배울지는 모르겠지만 JS도 빨리 배우고 싶네요!

 

 

개인적으로 HTML 레이아웃 명칭들이 조금 헷갈려서 정리를 해보았습니다.

 

HTML 레이아웃 구성 태그

<div>
: 블럭요소입니다. 개행이 없지만 하나씩 블록 쌓듯이 개행이 되어 적용됩니다. 크기를 지정할수 있으며 수직으로 쌓입니다. margin, padding의 모든 방향으로 설정이 가능한 레이아웃입니다.
가독성이 낮은 table구조를 빼고 div태그를 많이 활용하고 있다고 합니다.

 

<span>
: 라인 요소, 한줄로 표시되는 태그입니다. 크기를 지정할수 없으며 수평으로 쌓입니다. margin, padding의 좌우 방향으로만 설정이 가능한 text 입니다.

 

• 시멘틱 태그

: div 태그를 header, nav, section, footer 태그를 활용한 태그입니다. 개발자가 빨리 해석할 수 있도록 하는 태그입니다.

• <header>: 문서의 헤더를 설정합니다. 로고, 제목, 검색 등을 포함합니다.
• <nav> : 네비게이션 메뉴, 목차, 색인 등을 설정해줍니다.
• <section> : 문서의 일반적인 영역을 설정합니다.
• <article> : 독립적으로 구분되거나 재사용 가능한 영역을 설정합니다. 기사 등을 포함합니다.
• <aside> : 문서의 사이드바를 설정합니다 광고나 기타 링크 등을 포함합니다.
• <footer> : 문서의 푸터를 설정 작성자, 저작권, 관련 문서 등을 포함합니다.
• <address> : footer 등에서 연락처 정보를 제공하기 위해 포함하여 사용합니다.

 

border

: 테두리를 만드는 속성입니다.

• border-width 테두리 선의 두께를 정합니다.
• boder-style : 테두리의 스타일을 지정합니다.
• border-color : 테두리 색을 정합니다.

a {
	border: 1px dashed #f00;
// width style color
}

 

 

border-radius

: 요소 테두리의 꼭짓점을 둥글게 설정할 수있게 해줍니다.

.a:hover {
	border-radius: 40%;
	transition: 0.5s;
}

hover의 transition과 함께 사용하면 값을 좀더 유동적으로 볼 수 있습니다.

 

 

padding

: 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정합니다.

(웹브라우저에서 ctrl + shift + i 의 개발자 도구 창에서 computed 창을 열면 해당 페이지의 영역을 볼 수 있습니다. )

패딩의 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받습니다.

• padding-top : 패딩의 윗 영역의 값을 설정합니다.
• padding-right : 패딩의 오른쪽 영역의 값을 설정합니다.
• padding-bottom : 패딩의 아랫 영역의 값을 설정합니다.
• padding-left : 패딩이 왼쪽 영역의 값을 설정합니다.

 

패딩의 축약표현(padding shorthand)

(시계방향) 1~4개송성값으로

• 4개의 속성값 : top, right, bottom, left
• 3개의 속성값 : top, right-left, bottom
• 2개의 속성값 : top-bottom, right-left
• 1개의 속성값 : ALL

 

box-shadow

: box shodow 속성은 element(요소) (선택된 태그?)를 감싼 그림자 효과를 추가합니다.

“box-shadow: 수펑수직거리(오프셋) 흐릿함 확산정도 색상”

의 형태로 이루어 집니다.

• offset : 그림자의 위치를 설정합니다. offset-x(수평) 음수의 값은 그림자를 왼쪽으로 표시합니다., offeset-y(수직) 음수의 값은 그림자를 위쪽에 표시합니다.
• blur-radius : 흐릿함을 설정합니다.(양수만 사용가능합니다.) 값이 클수록 그림자 테두리가 흐려집니다.
• spread-radius 양수일 경우 그림자가 더 커지고 확산합니다. 음수일경우는 반대로 적용됩니다.
• color : 색상을 설정합니다.

기존의 text-shadow와 동일한 형태입니다.

 

출처:

box-shadow - CSS: Cascading Style Sheets | MDN

box-shadow - CSS: Cascading Style Sheets | MDN

 

 

margin

: 테두리와 이웃하는 요소 사이의 간격을 설정합니다.

background-color속성으로 설정하는 배경색의 영향을 받지 않습니다.

• margin-top : 마진의 윗 영역을 설정해줍니다.
• margin-right : 마진의 오른쪽 영역을 설정합니다.
• margin-bottom : 마진의 아래쪽 영역을 설정합니다.
• margin-left : 마진의 왼쪽 영역을 설정합니다.

음수로 설정하여 다른 요소와 겹치게 설정할 수도 있습니다.

 

 

마진의 축약표현.

• 4개의 속성 값 : top, right, bottom, left
• 3개의 속성 값 : top, right-left, bottom
• 2개의 속성 값 : top-bottom, right-left
• 1개의 속성 값: ALL

 

margin: auto;

마진의 속성값을 auto로 설정할 경우 수평 방향의 마진 값을 자동으로 설정합니다. 해당요소의 부모 요소의 정중앙에 위치하게 됩니다.

 

참고:

코딩교육 티씨피스쿨

코딩교육 티씨피스쿨

 

 

“#아이디>속성명:nth-of-type()” 의 형태

: 같은 유형(같은 tag)의 n번째 형제를 선택합니다.

 

 

Ex)

<ul id="mg-dr">
	 	<li>margin-top: ;</li>
	 	<li>margin-right: ;</li>
	 	<li>margin-bottom: ;</li>
	 	<li>margin-left: ;</li>
</ul>

 

 

list의 첫번째 “margin-top”에 50px의 margin-top을 주고 싶을 경우

#mg-dr>li:nth-of-type(1) {
	margin-top: 50px;
}

 

 

Background

• background-color : 해당 html 요소의 배경색을 설정합니다.
• background-image : 이미지를 배경으로 사용하게 하는 속성입니다.
  “background-image: url(” ”);의 형태입니다.
  설정된 이미지는 기본설정으로 html요소 전체에 걸쳐 반복되어 나타납니다.
• background-repeat 속성 : 배경이미지의 기본 설정으로 수평과 수직 방향으로 모두 반복됩니다.
  background-image 설정후에 background-repeat: no-repeat 을 이용하면 한번 만 나타나게 할 수 있습니다.
• background-size 속성 : 배경이미지의 크기를 지정할 수 있습니다.
  
  cover : “background: cover;” 의 형태로 이미지를 화면을 커버합니다.
  이미지가 반복되지 않음으로 이미지가 잘릴 수도 있습니다.
  
  contain: ”background: contain;” 의 형태로 이미지 형태를 유지한테 화면을 채웁니다.
  빈 공간이 생길 경우에는 이미지가 반복될 수도 있습니다.
  키워드 사용 이외로 퍼센트나 픽셀로 직접 명시할 수 있습니다.

body {
background-image: url("img/abend.jpg");
background-repeat: no-repeat;
}

• background-position 속성 : 반복되지 않는 배경 이미지의 상대 위치를 설정합니다. relative position 사용할수 있는 키워드 조합 또는 퍼센트나 픽셀을 사용하여 직접 명시할 수도 있습니다.
  명시할때의 기준은 left top입니다.
• background-attachment 속성 : 위치가 설정된 배경이미지를 해당 위치에 고정시킬 수 있습니다.
  background-position으로 위치가 설정된 이미지의 위치를 고정해줍니다.
• “background-attatchment: fixed;”의 형태입니다.

background 속성 all in one

body {
	background: gray url("img/abend.jpg") no-repeat left bottom fixed;
}

 

HTML 레이아웃, Padding, Margin과 background를 알아 보았습니다. 조금 디테일한 내용도 있어서 내용이 꽤나 많은 것 같은데 많이 연습하고 적어보면서 연습하면 좋을 것 같습니다.
티끌모아 태산이라고 이것 저것 누적시켜서 덩치를 키워봅시다.