HTML practice_240312

Choi Suyeon·2024년 3월 12일

h tag html_practice url 링크 목록태그 상대경로 선긋기 설명목록 이미지 정규화

h tag

글 목록을 만들 때 사용
-tag를 사용하면 자동 줄 변경이 된다.

<h1> : 가장 큰 글자
~
<h6> : 가장 작은 글자

선긋기

tag를 사용하면 자동 줄 변경이 된다.

<hr color = "색" width = "넓이" size = "높이"/>
	  (단어, RGB) 
			(고정길이: 수치(pixel단위))
			(가변길이: 수치%)

목록태그

-<ol>, <ul>, <li>, <dl>, <dt>, <dd>
  
<ol> : 순서목록
  
  <ol type=""> <!--1, a, A, i, I-->
    <li>내용</li>
    <li>내용</li>
  </ol>
  
<ul> : 도형목록
  <ul type = ""> <!--(기본)disc, circle, square-->
    <li>내용</li>
    <li>내용</li>
  </ul>

설명목록

제목에 대한 설명을 만들 때 사용하는 목록태그

-설명<dd>은 들여쓰기로 보여진다.
  <dl>
    <dt>제목</dt>
    <dd>설명</dd>
    <dt>제목</dt>
    <dd>설명</dd>
  <dl>

이미지

이미지를 연결하여 보여줄 때 사용.

<img src="이미지경로" width="넓이" height="높이" title="풍선도움말"
     alt="엑박 떳을 때 보여줄 메시지" border="테두리선의 두께"/>

-절대경로 : 안됨
-상대경로 : HTML이 service되고 있는 주소창의 주소를 기준으로 설정된다.
-URL : http://_/이미지명

상대경로

파일이 서비스되는 위치에서 이미지를 참조하고 사용한다.
웹 브라우저의 주소창을 기준으로 설정하는 경로(이미지를 사용하는 HTML파일 기준)

장점 : 경로표현을 짧게 할 수 있다.
단점 : 파일의 위치가 이동하면 경로를 수정해야 할 수도 있다.

** 이미지와 HTML이 같은 위치에 있는 경우
이미지와 HTML이 같은 위치에 존재하는 경로를 기술하지 않는다.
<img src="img4.png"/>

** 이미지가 HTML이 있는 위치에 하위 폴더에 있는 경우
HTML이 존재하는 하위 폴더에 파일이 존재하면 하위 폴더명 부터 기술하면 된다.
<img src="images/daum_logo.png"/>

** 이미지가 HTML이 있는 위치에 상위 폴더에 있는 경우
HTML이 존재하는 폴더 상위 폴더에 파일이 존재하면 해당 폴더까지 올라가서(../) 경로를 기술한다. 
<img src="../common/images/img2.png"/>

URL

이미지의 요청 경로를 모두 작성하는 방식.

장점 : HTML파일의 위치에 상관없이 이미지를 보여줄 수 있다.
단점 : 경로가 길다.

<img src="http://localhost/폴더명//이미지.확장자"/>

----------- 연습문제 -------------------------------------------
*a.html을 요청하는 경로는 http://localhost/test.prj/test_sub/a.html이다.
-http://localhost/test.prj/test_sub/today/to_day.png가 존재하는 경우 상대경로로 해당 이미지를 접근하는 경로 작성.
<img src="today/to_day.png"/>

*a.html을 요청하는 경로는 http://localhost/test_prj/a/b/test_sub/a.html이다.
-http://localhost/test.prj/test_sub/images/today/to_day.png가 존재하는 경우 상대경로로 해당 이미지를 접근하는 경로 작성.
<img src="../../../test_sub/images/today/to_day.png"/>

링크

웹 상에 존재하는 다른 자원과 연결할 때 사용하는 태그

<a href="연결할 파일의 경로" target="frame의 이름속성"> 클릭할 메시지 </a>
* 상대경로 : 링크를 설정할 HTML을 기준으로 설정.
* URL : protocol에서부터 모든 경로를 작성.

-메일 전송
<a href="mailto:수신메일주소">메일보내기</a>

Front-End와 Back-End를 구분하는 기준이 해당 프로그램 어디에서 실행되는가?

Front-End

접속자 컴퓨터에서 해석되고 실행되는 언어들.
HTML, CSS, ECMAScript들(JavaScript, ActionScript)
접속자 컴퓨터의 CPU, Memory를 사용하여 간단한 일 처리를 주로 한다.

Back-End

서버에서 해석되고 실행되는 언어들
Java, Spring, Framework, JSP, Servlet
서버컴퓨터의 CPU와 Memory를 사용하여 업무로직을 구현하고 데이터를 처리하는 일을 주로 한다.

정규화(normalization)

DB에서 발생할 수 있는 이상현상을 최소화하기 위해서 relation을 적절하게 분리하는 작업.

-삽입 이상(insert) : 데이터를 insert할 때 의도한 값으로 insert가 되지 않는 현상.
-변경 이상(update) : 레코드(tuple)의 컬럼 값을 변경하는 데, 일부 레코드만 변경되어 데이터가 일치하지 않는 현상.
-삭제 이상(delete) : 하나의 레코드를 삭제할 때 다른 컬럼의 값까지 함께 삭제되는 현상.

정규화는 영국에 edgar f codd가 1970년 정규화(1NF)의 개념을 도입.

정규화 순서

-무정규 테이블(정규화가 진행되지 않은 테이블)
-1정규화(1NF) : 도메인의 원자성
-2정규화(2NF) : 부분 함수 종속제거
-3정규화(3NF) : 이행 함수 종속제거
-BCNF : 결정자가 후보키가 아닌 것을 제거( 보이스-코드 정규화 )
-4정규화(4NF) : 다치 종속제거
-5정규화(5NF) : 조인 종속제거

정규화는 진행될 수록 테이블이 나눠진다.
3정규화까지 진행되면, 정규화가 완료되었다라고 한다.
결정자 -> 종속자
의미있는 레코드를 검색하기 위해서 사용되는 값.