35일차_ 정처기필기 / HTML

@21.04.29

정처기필기-DB 

 

모델링 

   => DB를 설계하는 것.

 

표 제목 => 개체 = 릴레이션 = table 열이름

열 이름 => 속성 = 속성 = column

 

위는 개념, 논리, 물리적 설계에서 각각 부르는 말.

 

@개념적 설계 (= 개념적 모델링) 

  - 개체, 속성, 관계 추출 (여기서 관계는 FK를 말한다.)

  - 개념적 설계에 사용되는 도구로 "E-R 모델"을 사용한다.

     (E-R모델을 통해 만들어진 결과물이 "E-R 다이어그램".

  - E-R 모델은 도형의 형태로 표현함을 말한다. (개체와 속성은 각각 네모, 동그래미... 관계는 마름모 이렇게 약속한 것)

 

  - 비정규 릴레이션 -> 중복을 허용한다. -> 문제가 발생  ==> 이상현상

 

%이상현상 

중복으로 발생하는 문제를 말하며 이상현상에는 총 3가지가있다.

  - 삽입 이상 / 갱신 이상 / 삭제 이상

  - 이상현상을 해결하기 위한 작업을 정규화 라고 한다.

 

@논리적 설계 (=논리적 모델링)

  - DB 구조를 확정하는 단계

  - 관계형 / 네트워크 / 계층형 Data 모델 이렇게 3가지를 사용한다.

  - 위의 3가지 중 어떤 것을 쓰느냐에 따라 ~~ DB가 구축된다.

  - 단, 정처기 필기에서는 관계형 DB 구축을 많이 출제한다.

 

  - 관계형 DB는 Table이라는 형태를 Data를 저장하고 구축한다.

  - 논리적 설계는 효율적인 Table을 구성한다.

  - 효율적인 Table이라 함은, 한개의 Column에 PK를 줌을 말한다.

 

%정규화 

   => Table을 분해하는 방법.

   => 속성들( Relation )을 나눠서 분해한다.

   => 즉, 관련이 있는 속성들끼리 묶어서 관리를 하는 작업.

   => 총 6단계에 걸쳐 진행이 된다.

   => 정규화는 개념적, 논리적 설계 사이에 진행한다. ( 논리적 설계에 포함시키기도 한다. )

   => 정규화가 잘됐다라는 의미는 Table의 개수가 많아짐을 의미한다. ( = 무결성 보장 )

   => Table의 개수가 많아지면 Join이 많아질텐데, 이는 곧 성능의 저하를 의미한다.

 

- 성능 저하의 원인으로는 정렬 / Join / Group By / Distinct 등이 있다.

 

논리적 설계단에서 정규화가 진행된다. (정규화는 중복 무결성이 깨지지 않게하기 위함이다.)

@물리적 설계 (=물리적 모델링) 

  - 저장구조를 설계하는 단계 ( 단, DB의 성능을 고려해야한다.)

  - 정규화가 잘된다 -> 무결성 보장 -> Join이 많아져 성능이 내려간다

  - 물리적 설계 단에서는 성능이 내려감을 개선하기 위함이다.

  - 때문에, 성능을 올리기 위해 Table의 갯수를 줄이기 시작한다. 이를 역정규화라 한다.

 

보면, 무결성과 성능 모두를 잡기가 애매하다. 성능을 올리면 무결성이 보장되지 않고... 보장되면 성능이 내려가고..

때문에 현업에서는 무결성을 우선적으로 보장해 놓고 성능을 올리기 위해 고성능의 Server를 사용한다고 한다. (돈..)

 

@정규화 - 문제 

29일 3교시 수업

  => 칼럼이 보면 꼭 4개 이상.

  => 복합 PK가 꼭 있다. ( -> a,b,c,d가 있을 때. <a,b>가 PK. )

복합 Key 문제(a,b) c d 일케 주어질 때 (a,b가 PK)답은 (a,b) c  OR (a,b) d 혹은 //  a, d OR b,d 로 나온다 한다.

 

BCNF는 꼭 칼럼이 3개 나오고 -> (a,b) c답은 (a,b) c OR c b OR c a 일케 나온다고 한다.

3정규화는 PK가 하나만 나온다고 한다. a(PK) b 

으음... 너무 빨라서 필기를 못했는데 정규화 관련 문제는 거의 표준화되어있다고 한다.

ㅁㄴㅇ

ㅁㄴㅇ

 

================================================

 HTML / CSS 

@WEB 

  => 12일차에 진행했었으나 다시 진행...했는데 비슷한 얘기 무튼 12일차 참고

 

@Visual Studio Code 

   => 웹 프론트 엔드 개발에 많이 쓰이는 에디터??.. 무튼. (파이썬 자바 등 확장성이 뛰어남

설치쓰

@HTML ( Hyper Text Markup Language ) 

  => 웹 페이지에 정보를 담아 표시하기 위한 마크업 언어

@HTML 구성요소

Head => Head 영역은 기술단을 작성한다. ( 눈에 보이지 않는 부분 )

Body => Body 영역은 눈에 보이는 부분을 작성한다.

 

@VSC - HTML 시작하기

저렇게 간단하게 확장자 명을 html로 붙히는 것으로 간단히 만들 수 있다.

 

그리고 !만 입력하면 저렇게 기본적인 틀이 만들어진다.

@편한 실행 단축키 -> Alt + L, O 

위를 다운받으면 Alt + L , O 단축키로 실행할 수 있다.

@VSC - 색 입히기

위와 같은 명령어를 통해 각종 부분에 색을 입힐 수 있다.

 

 

좀 더 여러가지 색을 입히고 싶다면 아래의 사이트에서 찾으면 된다.

@VSC - H Tag 

그냥 제목 입력하는 태그...

@VSC - Auto 

요걸 다운받으면 하나의 태그를 고칠때 감싸주는 양쪽의 태그 모두 같이 지워준다.

 

@VSC - Span / P / Br Tag 

 

그냥 <p> Tag는 문단을 만들고, <span> Tag는 문장으로 표현할 때 사용한다. 즉,

  -  <p>  태그는 위아래로 공백이 생기고, 자동으로 줄바꿈이 일어난다.

  -  <span>  태그는 문장을 작성할 때 사용하며, 공백이 존재하지 않는다. 줄바꿈도 일어나지 않는다.

  - 내가 줄바꿈을 하고 싶을 때는  <br>  태그를 사용해야 한다.

 

 

@VSC - Hr Tag 

아래 사진은  <hr>  Tag의 속성을 나타낸다

<hr> Tag는 위처럼 하나의 선이 만들어진다.

 

실스으으으읍

 

@VSC - r / Strong Tag 

  -> 두 태그 모두 차이 없이 Bold체로 만들지만, 해당 태그를 음성 번역했을 때 컴퓨터가

       <Strong>  태그는 강조해 읽고  <B> 태그는 그냥 읽는다.  ( => 시각장애인들을 위함.)

 

@VSC - 리스트 Tag ( ul / ol / li ) 

 

위의 실습처럼  <ol>  이나  <ul>  을 사용할 때는  <li> 를 붙혀줘야 한다.

 

@VSC - img Tag 

아래는 실습이다

 

또 다른 방법으로 이미지 주소를 복사해서  src 에 대입하는 방법도 있다.

 

아래와 같이 이미지의 경로는 이처럼 정할 수 있다.

 

@VSC - img Tag 경로 설정 

보는것과 같이 " ../ "라고 써주면 현재 실행한 HTML 파일의 공간에서 한번 나와서 이동한다.

보면 room > bath 안에있는 파일이 2번 밖으로 나와 img 폴더안에 있는 img1 파일을 실행시킴을 볼 수 있다.