개발자 끄적끄적
절대 및 상대경로, 기본태그 본문
build path->project facets
1.8버전이면 3.0으로 선택
*Null Point Except-Java에서 가장 많이 차지하는 오류(70%~80%)
정의 : NullPointerException is a runtime exception in Java that occurs
when a variable is accessed which is not pointing to any object and refers to nothing or null.
*Runtime Exception
->실행 중 발생, 시스템 환경적이나 인풋 값이 잘못된 경우, 프로그래머가 잡아내가 위한 조건등에 부합할 때 발생
html 기본골격을 지키지 않고 "이해선"이라고 쓰면 브라우저에 표시는 되지면 글자가 깨짐(비정상->웹 표준X)
<!DOCTYPE html>->html5버전에 의한 문서라고 컴퓨터가 인식
<html lang='ko'>->html문서를 만든 언어는 'korea'로 이루어져있다(language)/e-book으로 만들지 않는 이상 반드시 써야하는건X,좋은 점이 많음(책에 없는 내용)->e-book에서 설정을 안하면 글자가 깨짐
<head>->사전준비영역
<meta charset='utf-8'>->utf-8을 인코딩으로 작성
<title>앵커 태그 연습</title>->웹페이지의 제목
</head>
<body>
<a href ='http://www.naver.com' target='_blank'>네이버</a>->[URL+경로]를 나타냄+<target="_blank">무조건 새로운 창(새 탭)을 열어줌
<a href ='http://www.jobtc.kr' target='cafe'>네이버카페</a>->창의 제목이(name)='cafe'라고 하는 이름이 없으면 새롭게 생성한다(cafe=창의 이름), 무조건 새로운 창을 열어주지는 않는다/target작은 따옴표,큰따옴표 상관X
</body>->UI영역
</html>
*<a> : a태그는 anchor의 약자이고 '정박지', '닻'을 뜻하며 단독으로 쓰이지 않는다
웹 사이트에서 링크를 통해 다른 메뉴나 다른 웹사이트로 이동시켜주는 태그이다
따라서 a태그는 href속성이 필수도 들어가야한다
*<title> : a태그에 title속성을 넣고 마우스를 올려놓으면 툴 팁 형식으로 title안의 내용이 뜬다
ex) <a href="http://www.naver.com" title="네이버 홈으로 이동">
출력->"네이버" 링크가 생성되며 마우스를 올리면 "네이버 홈으로 이동"이라는 내용이 뜬다
*UI(User Interface),UX(User Experience)차이
UI는 사용자가 제품/서비스를 사용할 때, 마주하게 되는 면
즉, 사용자가 제품/서비스와 상호작용할 수 있도록 만들어진 매개체
따라서 UI 디자인은 폰트, 칼라, 레이아웃과 같이 사용자가 마주하게될 시각적인 디자인
UX는 사용자 경험의 약자로, 사용자가 어떠한 서비스/ 제품을 직간접적으로 이용하면서 느끼는 종합적인 만족
*URI(Uniform Resource Locator), URL(Uniform Resource Identifier)차이
URI는 URL의 의미를 품고있다
URL은 자원이 실제로 존재하는 위치를 가리키며, URI는 자원의 위치뿐만 아니라
자원에 대한 고유 식별자로서 URL을 의미를 포함한다.
<img/>폴더 만들기
순서 : webapp안에 image파일 만들기->이미지 저장하기(파일경로 webapp->image)->이미지가 안보이면 새로고침(F5)
저장할 파일명은 영문 소문자,숫자 그리고 '_'(언더바)만을 사용하는 것을 추천(파일명의 시작은 영문자로)
표시 할 이미지의 경로
a. 절대 경로 : 기준(드라이버명 또는 프로젝트명)->드라이버명은 주로 탐색기에서 사용
- 프로젝트명을 사용하면 'webapp'가 기준
'/web-project'를 쓰면 'src->main->webapp'가 포함된다. 따라서 '/web-project/anchor.html'이 된다.
* '/web_project/[src/main/webpp/~'] ->컴퓨터가 두번 인식하기 때문에 이렇게 쓰지 않는다.
'images'파일 안 이미지를 가져오려면 '/web-project/imges/cat.png' URL보다는 <img>를 사용하는게 편하다.('/'=~안에 라는 의미)
- <img src='/web_project/images/cat.png'/>->소스를 나타내는 'src'
*<img src="이미지 경로" alt="이미지"/>
b. 상대 경로 : 기준(실행(편집)하고자 하는 파일의 위치)
상대 경로 사용 시 사용되는 기호
1)./ : 현재위치를 나타낸다.(생략 가능)
- 'anchor.html' 파일의 위치가 기준이 되는게 'webapp(기준)'
ex)src='images/cat.png'라고 썼다면 <==> src='./images/cat.png' (./는 현재위치(경로)를 나타낸다 따라서 프로젝트명을 쓸 필요가 없다)
2)../ : 현재 위치의 한 단계 상위 디렉토리를 나타낸다.
- 폴더 'member'에서 한 단계 이동한 'webapp'에 있는 'photo'
ex) ./photo/pic.png->member 폴더 안에 있는 photo 폴더(가 pic.png라는 이미지를 찾으려 함)
../photo/pic.png->member ->현재 디렉토리에 상위를 가리킴->webapp->따라서,webapp에 있는 photo라는 폴더에 pic.png라는 이미지를 찾는다-> ../photo/pic.png
*<img src="../../photo/logo.jpg">도 가능 즉, 상위 폴더로 갈 때마다 '../'를 추가한다
*상대경로에서 최상위 폴더로 바로 이동하는 주소 : <img src="/img/logo.jpg">
*상대경로
기준 : 현재 웹 페이지읜 소속 폴더가 기준점
a. '.' : 현재 웹페이지가 소속된 폴더
b. '..' : 현재 웹페이지의 상위(부모)폴더
*절대경로
기준 : 누구나 다 알고 있는 동일한 위치를 기준으로 상대를 찾는 폴더
- '/WebClientTest' == 'WebContent'
*<img src="image.jpg"> : 같은폴더 안의 image사용
<img src="file/image.jpg"> : 하위폴더 file안의 image사용
<img src="../file/image.jpg"> : 상위폴더 file안의 image사용
*WebContent폴더
- 외부에서(클라이언트)브라우저로 접근할 수 있는 가장 상위 폴더 ->웹 루트 폴더
*일반적으로 절대경로보다는 상대경로로 이용해서 이미지를 삽입하는게 좋다
왜냐하면, 절대경로를 이용하면 웹페이지의 이미지가 사라지거나 내 컴퓨에서 만든 파일을 다른 웹서버로 올릴 때에는
다시 고쳐줘야 하는 불편함이 있기 때문이다
사진의 길이, 크기 조절
- <img src='/aaa/images/cat.png' width='40px' height='40px'/>
이미지가 줄어들었다고해서 파일의 용량이 줄어드는건 아니다.(역도 마찬가지)
* /photo/pic.png->웹서버는 photo라는 프로젝트명이라고 판단
./photo/pic.png->웹서버는 현재 위치에 있는 photo라고 하는 폴더로 인식
*<img src=''/>, <img src=''>
html5 규정에 맞춰진 문서이기 때문에 "/"는 시작과 끝 태그가 하나로 표현된다.(정석)
* webapp가 가지고있는 member라는 폴더와 test.html은 같은 sibling이다.
./member->현재 경로에 있는 member->webapp를 의미
./member/view.html->즉, webapp안에 있는 view.html이 열린다
<h1>이해선</h1>->head line은 책갈피 역할을 한다
<h2>이해선</h2>
<h3>이해선</h3>
<h4>이해선</h4>
<h5>이해선</h5>
<h6>이해선</h6>
->h1은 가장 큰 사이즈, h6은 가장 작은 사이즈, 글자 사이에 약간의 여백이 존재
<style></style> : 이 영역은 CSS(Cascading Style Sheets)영역
영역을 만드는 태그
a. <p>...</p> : p태그는 paragraph의 단어의 약자이며 단락,문단을 나눌 때(구분) 사용
- <style>
p{
background-color : #ccf;
}
</style>
- p=선택자
#ccf(=cc cc ff); 는 16진수/ '#'이 붙어있으면 뒤에있는건 16진수라고 표현된다
첫 번째c-red, 두 번째c-green, 세 번째f-blue/<p></p>는 사이에 여백이 생긴다
-문단 사이에 한 줄의 여백이 발생
b. <div>...</div> : div태그는 division의 약자이며, 레이아웃을 나누는 등의 그룹핑을 위한 용도
- 레이아웃(Layout)을 만들때 가장 많이 사용하며, 여러 요소들의 스타일을 한 번에 적용한다
문단 사이에 한줄의 여백이 발생하지 않는다
즉, 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block mode) 요소
*블록 모드(block mode)
lnline과 달리 한 줄에 나열되지 않고 그 자체로 한 줄을 완전히 차지하며, lnline요소와 다르게 margin, width, height 속성이 정의가 가능
대표:<div>
* 레이아웃(Layout)
책이나 신문, 잡지 따위에서 글이나 그림 따위를 효과적으로 정리하고 배치하는 일
*모양새를 쉽게 제어할 수 있는 속성 때문에 대부분 블록 속성을 가진 태그를 화면 구성이나 레이아웃에 사용
c. <span>...</span> : span태그는 줄 바꿈이나 레이아웃을 나누는 용도가 아닌 텍스트 등을 꾸미기 위한 용도이고
해당 텍스트가 차지하고 있는 범위만 차지한다
- 한 줄에 또 다른 태그들이 컨텐츠의 크기 만큼 오도록 한다.
즉, 요소의 너비가 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지한다=>인라인 모드(inline mode)
주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용하며 짧은 내용을 표시 할 때 사용한다
*<span>, <a>->줄을 넘기지 않고 나란히 붙는 결과, <img>요소는 display 속성값이 인라인(inline)인 대표적인 요소
d. <output>...</output>
- html5에 추가된 태그이며 출력전용이다. 출력내용은 <span>과 비슷
-인라인 모드(lnline mode)
e. <fieldset>...</fieldset>
- 영역을 시각적으로 구분해준다
- ex) <fieldset>
bbb
</fieldset>
결과->네모난 창이 생기며, 내용은 bbb이하
- ex)<fieldset>
<legand>aaa</legend>
bbb
</fieldset>
결과->aaa라는 제목에 네모한 창이 생기며, 내용은 bbb이하
(*d, e번은 책에 없다)
글자 모양을 나타내는 태그
a. <font size='' color='' face=''>문자열</font>
- face : 윈도우에 설치할 수 있는 모든 폰트는 사용가능
- 모든 클라이언트가 갖고 있는 또는 폰트를 다운로드해서 연결해주지 않으면 각 클라이언트는 원하는 웹 페이지를 사용 할 수 없다->기본 폰트로 출력됨
b. <u/>, <b/>, <i/>, <mark/>, <sup/>, <sub/>
(* <mark/> 빼고 나머지는 책에서는 다루지 않는다)
- <u>밑줄 문자</u> : Underline의 약자
- <b>굵은 문자</b> or <strong>굵은 문자</strong> : Bold의 약자
- <i>기울임 문자</i> or <em>기울임 문자</em> : Italic의 약자
- <mark>형광 문자</mark> : marked의 약자
*- <s>취소선 문자</s> or <strike>취소선 문자</strike>
- <sub> : 아래 첨자
- <sup> : 위 첨자
- X<sup>2</sup>+Y<sup>2</sup>=1 -> X^2+Y^2=1
- H<sub>2</sub>o -> H20
* 중첩해서 사용가능
'HTML, CSS' 카테고리의 다른 글
| input type, 테이블 병합 (0) | 2023.03.04 |
|---|---|
| 폼태그, 목록태그 (1) | 2023.03.04 |
| 환경변수 설정 (0) | 2023.03.04 |