서론
6주차 - (4/22 - 4/28)
평가를 받을 수 있는 한 주였습니다. '훗날 개발자의 모습이 이런 느낌인가?'라는 생각이 들었습니다.
첫 프로젝트:
2일 간 단기 프로젝트를 통해 팀원들과 함께하는 과정에서 여러면에서 다양한 이슈가 발생했고 그 이슈를 해결해 나가는 점이 기억에 남습니다.
Rinux, MySQL, Java:
약 1달 간 배운 교육과정으로 4지 선다 지필평가를 치뤘습니다. 100점 만 점에 68점으로 커트라인을 겨우 넘긴 느낌이 큽니다.
PCCE 첫 시험 결과 :
공부에 있어 코딩테스트, 알고리즘 문제에 시간 가중치를 더 두도록 해야할 것 같네요.
1. 내용정리
[ERD]
엔터티 개념과 특징
업무의 관심 대상이 되는 정보를 갖고 있거나 그에 대한 정보를 알아야 하는 유, 무형의 사물(개체)
- 업무의 관심 대상이 되는 사물이어야 됨
- 두 개 이상의 인스턴스를 소유해야 함
- 데이터의 정체성이 분명해야 함
- 데이터 종속성에 의해서 하나의 주제만을 관리하는 정의가 명확한 모델
- 엔터티의 인스턴스를 식별할 수 있는 식별자(Identifier)가 존재해야 함
- 동일한 성격의 데이터는 유일해야 함
- 엔터티 명은 관리하고자 하는 데이터의 성격(주제)을 가장 잘 표현하는 이름으로 함
엔터티 종류
- 업무 분석, 분석 자료(업무 기술서, 인터뷰 자료, 장부, 전표 등)들로부터 엔터티를 도출.
- 실체 엔터티 : 보이는 물체의 본질적인 성격을 관리하는 엔터티 (고객, 제품 등)
- 기준 엔터티 : 실체나 행위 데이터의 기준이 되는 데이터를 관리하는 엔터티, 참조 엔터티라고 불림 (이자율, 영업일자 등)
- 행위 엔터티 : 행위나 활동에 의해 발생된 원천 데이터를 관리하는 엔터티 (계약, 주문 등)
- 가공 엔터티 : 원천 데이터가 아닌 원천 데이터를 추출, 집계한 데이터를 관리하는 엔터티 (집계, 임시, 요약 등)
관계
두 개 이상의 엔터티 간에 존재하는 연관성
- 카디널리티(Cardinality) : 관게의 개수 범위 (몇 개까지 연결될 수 있는가)
- 옵셔널리티(Optionality) : 관계의 필수 여부 (반드시 존재해야 하는가?)
- identity : 식별자이면서 자동 생성되는 속성, 각 레코드를 유일하게 식별하는데 사용
- Mandatory : 서로 연관되는 값이 반드시 존재해야 하는 속성
- Optional : 값이 반드시 존재하지 않아도 되는 속성
- ERD 닭발표기법 -> identity : ●○, Mandatory : ●, Optional : ○
- 재귀관계 : 한개의 엔터티가 연관된 관계 (selfjoin / ex) 사원번호, 관리자사번 (FK) )
- 베타적 관계 : 하나의 인스턴스가 한번에 하나의 부모 엔터티와 관계를 가지게 됨 / 서로 만날 수 없는 관계
정규화
- 1차 정규화 : 반복 속성제거 (원자값을 가짐)
- 2차 정규화 : 부분 함수적 종속 제거 (완전하게 함수적 종속)
- 3차 정규화 : 이행적 함수적 종속 제거 (키가 아닌 모든 속성이 기본키에 직접 종속)
- BCNF, 제4정규형, 제5정규형 : 결정자 제거, 다차종속 제거, 조인 종속성 이용
[HTML]
HTML
웹 페이지의 구조와 컨텐츠를 정의
- 속성 : 요소의 시작태그 / 여러 개의 속성할 사용할 수 있으면 속성의 구분은 공백
- !DOCTYPE html : 문서가 HTML5임을 선언
- html : 문서의 시작과 끝
- head : 문서의 메타데이터, 제목, 외부 스크립트 및 스타일 시트와 같은 정보를 포함
- body : 웹 페이지의 실제 컨텐츠를 포함
주의사항
- 시작 태그로 열었으면 닫기 태그를 작성하고 시작
- 파일 확장자는 반드시 html, 태그는 대소문자를 구분하지 않음(소문자 권장)
- 문자의 공백은 한 개만 인식을 하고, 공백을 추가하기 위해서는 특수기호( )를 이용
기본 태그
thead {background-color: aqua;}: 표 색
ul {list-style-type: square;}
ol : 순서가 있는 태그 : 목록 기호 타입
h1, br, strong, p, pre, em, i, mark, u, sub, sup, s : 다양한 글꼴 태그
표 관련 태그
table : 기본적인 표를 생성해주는 태그
tr : 표의 행을 나타내는 태그
th : 표의 제목 셀을 나타내는 태그
td : 표의 일반 셀을 나타내는 태그
div : 줄 바꿈이 적용되어 이미 존재하는 태그의 다음 줄에 영역이 설정됨(블럭요소)
span : 줄 바꿈이 적용되지 않아 옆으로 영역이 붙음(인라인요소)
영역 관련태그
<!-- div 블록요소 : 줄 바꿈이 적용되어 이미 존재하는 태그의 다음 줄에 영역이 설정 -->
<div style="border: 1px solid black;background: green; width: 100px; height: 100px">첫번째 영역 </div>
<!-- span 인라인요소 : 줄을 차지하지 않고 문장 흐름 안에 작게 들어가는 요소-->
<span style="border: 1px solid black;background: red; width: 100px; height: 100px">첫번째 영역</span>- 길이를 비율로 설정하면 창 크기만큼 늘어남 (다만, 정해진 길이만큼만)
이미지 관련태그
src : 경로 / alt 시각장애
./ : 경로 태그
$ 숫자 범위
- width, height의 크기를 조정하여 고정 크기 단위(px) / 가변 크기 단위(%)로 만들어줄 수 있음(창 크기에 따라)
- html = markdown과 비슷하게 작용 (벨로그, MD파일 등)
- figure는 사진, 그림, 코드 블록 등 독립적인 콘텐츠 묶음을 나타냄 (이미지 + 설명 함께 포함 가능)
미디어관련태그
외부 콘텐츠 삽입 도구
- 사이트, 유튜브, 지도, PDF 등 다양한 미디어를 목록처럼 embed 가능
- 보안/크기 (저작권) 제약을 항상 고려해야 함
하이퍼링크관련태그
- a태그 형식:
<li><a href="https://www.naver.com" target="_self">네이버</a></li>
한 페이지 내에서 점프하는 앵커 만들기
<h4 id="contentn1">본문내용1</h4>
<pre>
내용
</pre>
<a href="#menu">메뉴로 돌아가기</a>
<h4 id="content2">본문내용2</h4>
<pre>
내용
</pre폼관련태그(from tag)★
폼 태그로 감싸서 get 전송하는 방식
<form action="search" method="get">
<label>검색할 내용 : </label>
<input type="text" name="search">
<input type="text" name="search2">
<input type="submit" value="검색">
</form>- get 방식은 url주소에 form태그를 통해 넘어가는 데이터가 보임, post방식은 그 데이터가 보이지 않음
- placeholder="너의 아이디를 써주렴" autofocus : 미리보기 텍스트
폼관련 특수기능 3가지
- placehloder : 입력 전에 나오는 반투명 텍스트 상자 (autofocus : 페이지가 로드될 때 입력창에 자동으로 커서를 위치시키는 속성)
- readonly : 사용자가 편집할 수 없도록 미리 내용을 입력해 보여주는 용도 (value : 수정가능한 미리 내용)
- textarea : 텍스트 박스 / 여러 줄을 입력할 수 있고 세로로 input태그와 달리 크기조절이 가능하다.
[CSS]
html 페이지에 CSS를 적용하는 3가지 방법
<!-- 2. 스타일 태그 사용 -->
<style>
#foo { color: brown; text-decoration: underline; }
</style>
<!-- 3. 링크 참조 -->
<link rel="stylesheet" href="./css/01_hellocss.css">
<body>
<!-- 1. style속성을 직접 써서 스타일 적용 (우선순위 우위) -->
<li style="color:blue;">inline style속성</li>
<li id="foo">페이지내 style태그</li>
<li id="bar">외부 CSS파일 링크</li>
</body>- .css파일은 전체에 style이라는 태그가 씌워져 있다. (stylesheet)
선택자(selector)
- 태그 선택자 : HTML 문성 안의 모든 태그를 선택할 때 사용 (모든태그 선택자는 *)
- 아이디 선택자 : #id3 / #아이디명{color: orange;}와 같은 형태로 사용
- 클래스 선택자 : .class 아이디 선택자 id가 우선순위가 높음
- 기본 속성 선택자 :
- 후손, 자손 선택자 : 바로 아래 자손 선택자는 '>'로 경로 표시 / 선택자 후손선택자{설정내용}의 형식으로 사용
- 동위 선택자 : 선택자a + 선택자b{설정내용} / 선택자a ~ 선택자b{설정내용}으로 사용
- 반응 선택자 : 사용자의 움직임에 따라 달라지는 선택자 (예로는 active-test:active{}은 클릭 영향)
- 상태 선택자 : 입력 양식의 상태에 따라 선택되는 선택자 (input태그) / enabled, disabled로 활성, 비활성화 가능
- 부정 선택자 : p:not을 사용하여 선택할 수 있다.
- 문자 선택자 : 태그 내부의 특정 조건의 문자를 선택하는 서낵자
- 우선순위 : 태그선택자 < 클래스 선택자 < 아이디 선택자 < 인라인 선택자 < !important 순서로 우선순위를 가진다.
버튼 : let btn = document.get / let btn = document.querySelector
script -> button이라는 태그를 사용하는 구문?
글꼴 및 텍스트 스타일
- 채도(0~100%), 명도(0~100%) 색조는 0=red, 120=green, 240=blue
- text-decoration 속성 (none, underline, line-throught, overline)
- text-transfrom 속성 (none, capitalize, uppercase, lowercase)
- nomal : 공백 한칸 (개행X, 자동줄바꿈) / nowrap : 공백 한칸 (개행X, 줄바꿈x)
- pre : 공백 유지(엔터개행) / pre-line(공백 한칸 + 자동줄바꿈) / pre-wrap(공백 유지 + 자동줄바꿈)
- shadow 선택자 { text-shadow : none | 가로거리 세로거리 번짐정도 색상; }
문단 및 목록 스타일
- 정렬 종류 : ltr(좌측), rtl(우측), left(좌측), right(우측), center(가운데), justify(양쪽)
- 줄 간격 조절 : { line-height : } px(픽셀), em(가변단위), %(배율단위)
- 목록스타일 { list-style-image: none; } 형식으로 사용
- { list-style-image: url(경로) } 이미지 목록 스타일도 가능
#image-bullet{
list-style-image: url("./resources/images/circle.png");
}배경 및 테두리 스타일
<style>
#bg-img {
width: 70%;
height: 1600px;
border: 4px solid red;
background-image: url('./resources/images/flower1.PNG');
background-repeat: no-repeat;
background-size: cover;
background-size: contain;
background-attachment: fixed;
background-attachment: scroll;
}
</style>- body{background-color:색상명 | rgb | rgba | hsl | hsla | 16진수;}로 배경색을 지정
- div 영역을 설정하는 경우 배경색을 지정하기 위해서는 div에 배경 색을 별도록 지정해야 함
레이아웃 ★★
- 고정크기(px)와 가변크기
- width 와 height속성적용 x, 가로로 배치 (padding 크기는 적용)
- none을 사용하면 공간(영역)을 차지하지 않음
- margin이나 pading은 시계방향으로 적용됨
- div(절대위치)의 div position: relative; 안쪽 div들을 감싸는 바깥쪽 div에 적용할 속성으로 상대적 원점을 의미
- 레이아웃 display조절 flexbox으로 (최근에 float속성 보단 편하게 쓰인다.) / 그리드(2차원)
2. 문제 풀이
[문제풀이]
간단하지만 PCCE에서 구현하지 못한 '소수 판별'
1. 문제: 소수 개수 세기
정수 n이 주어집니다.
1 이상 n 이하의 정수 중에서 소수(prime number) 의 개수를 구하세요.
소수란, 1과 자기 자신만을 약수로 가지는 1보다 큰 수를 의미합니다.
1은 소수가 아닙니다.
아직 풀지 못했습니다.. 구글링을 통해 계속 이해하며 보려고 하는 중입니다.
소수 구하기 - 에라토스테네스의 체 : https://loosie.tistory.com/267
3. 마무리
> 잘한 점과 아쉬웠던 점
매일 아침, 저녁 예, 복습 시간을 가져서 정리된 지식이 쌓여가는 것을 느꼈습니다.
프로젝트 발표에 있어 준비가 덜 된 모습에 아쉬움이 남습니다.
> 개선할 점
선행학습, 복습은 지속적으로 해 나갈 예정입니다.
> 다음주 계획
프론트 엔드 교육 과정 (java script, 리액트) 예복습
코딩테스트 문제풀이에 집중
SQLD 자격증 준비
04/28 ~ : Java Script 교육과정
04/29 : 취업 트렌드 특강
05/31 : SQLD 자격증 시험
김지환