'분류 전체보기' 카테고리의 글 목록 (4 Page)

[ HTML Tag - A그룹 ] <a> - Anchor 태그 사용 설명서

HTML5 2023. 7. 20. 17:06

앵커 태그는 다른 문서로 이동하거나, 같은 문서의 특정 위치로 이동하거나 혹은 다른 문서의 특정 위치로 이동하는데 사용됩니다.

[ 문법 ]

1. 다른 문서로 이동하려는 경우, href 속성에 이동하려는 문서의 경로 혹은 URL을 넣고 “링크 텍스트”를 클릭하면 해당 문서로 이동하게 됩니다.

01 	<a href="url">링크 텍스트</a>
02 	<!-- 예 -->
03 	<a href="https://google.com">구글로 이동</a>
04 	<a href="../test.html">test 문서 열기</a>

2. 같은 문서의 특정 위치로 이동하려는 경우(내부 링크), href에 #를 이용해서 id값을 지정하고 이동하고자 하는 태그에 같은 id값을 써주면 된다.
여기서 “Section 1로 이동”을 클릭하면 화면이 스크롤 하면서 해당 위치로 이동하게 됩니다.

01 	<a href="#section1">Section 1로 이동</a>
02 	...
03 	...
04 	...
05 	<h1 id="section1">Section 1</h1>

3. 다른 문서의 특정 위치로 이동하려는 경우 위의 1, 2번에서 설명한 것을 모두 사용하면 됩니다.
즉 href의 url끝에 id를 추가해주면 url의 문서로 이동한 후 id값이 있는 곳을 스크롤 됩니다.

01 	<!-- test1. html -->
02 	<a href="https://test.com/test2.html#Section1">test2.html로 이동</a>

01 	<!-- test2. html -->
02 	...
03 	...
04 	...
05 	<h2 id=”Section1” >test.html에서 이동해 오는 곳</h2>

앵커 태그는 인터넷이 지금처럼 발전할 수 있도록 하는데 기반을 만들어 준 태그입니다.
초창기 인터넷은 문서의 특정 단어나 문장을 클릭하면 링크된 문서로 이동하는 기능을 이용해서 학자들 간 논문이나 문서를 효과적으로 사용하기 위해 개발되었습니다.
그것이 발전을 거듭해 지금의 거대한 인터넷이 된 것이지요. 만일 앵커 태그가 없었다면 불가능한 일이었을 겁니다.

저작자표시 비영리 변경금지

'HTML5' 카테고리의 다른 글

[ HTML Tag - A 그룹 ] <!DOCTYPE> 태그는 무엇인가? (0)	2023.07.20
[ HTML Tag - A 그룹 ] <!-- 주석 --> 사용법 (0)	2023.07.18
[HTML5] 미디어의 크기에 따라 다른 이미지를 보여주는 <picture> 태그 (0)	2019.11.16
[HTML5] <dl> tag - definition list (정의 목록) (0)	2019.11.13
[HTML5] block과 inline level 요소들 (0)	2019.11.01
[HTML5] meta tag 총정리 (0)	2019.10.31
[HTML5] <article>과 <section> 및 <div> 의 적절한 사용에 관한 고찰 (0)	2019.10.23

DeveloperN

개발자 n의 개발 이야기(draft)

,

[ Java ] 윈도우에 JRE설치하는 방법

雜同散異 2023. 7. 20. 15:06

JRE(Java Runtime Environment)는 Java로 개발된 프로그램을 실행하기위해 필요한 환경을 제공해줍니다.

1. Java 사이트( https://www.java.com/ )에서 다운로드합니다.

2. 다운로드가 완료되면 받은 파일을 실행시켜 줍니다.

실행하면 다음과 같은 창이 나타납니다. 이 때 "예" 버튼을 클릭해 줍니다.

3. 설치창에서 설치 버튼을 클릭해 줍니다.

4. 설치가 끝나면 “win”키를 누르거나 시작 버튼을 클릭하고, 설치된 것 중에서 “Java 구성”을 클릭합니다.

5. “Java제어판” 창이 나오면 “Java” 탭을 선택하고, “보기” 버튼을 클릭합니다.
새 창이 나타나면 버전, 설치위치 등을 확인할 수 있습니다.

* 이 전에는 설치할 때 JDK를 설치할지를 선택하도록 되어 있었으나 위와 같이 설치하면 간단하게 JRE만 설치할 수 있습니다.

저작자표시 비영리 변경금지

'雜同散異' 카테고리의 다른 글

[ YouTube ] 유튜브 쇼츠(Shorts) 파워포인트 탬플릿 만드는 방법 (0)	2024.01.11
[ tistory ] 티스토리에 D2Coding 설정하는 방법 (2)	2023.12.28
[ Office 365 ] 오디날 오류로 오피스 프로그램이 갑자기 실행되지 않을 때 해결 방법 (0)	2023.11.22
[ 카카오톡 ] PC 버전 광고 차단 방법 알아보자 (0)	2023.10.13
[ Internet ] URI와 URL 그리고 URN의 차이점은 무엇인가? (0)	2023.07.20
[ FreeCommander ] 테마를 다크모드로 바꾸기 (0)	2023.01.19
[ FreeCommander ] UI를 한글로 변경하기 (0)	2023.01.19
[ 카카오톡 ] 새로 앱을 설치할 때 대화내용 복원법.(feat. 톡서랍) (0)	2020.09.26

DeveloperN

개발자 n의 개발 이야기(draft)

,

[ Internet ] URI와 URL 그리고 URN의 차이점은 무엇인가?

雜同散異 2023. 7. 20. 14:49

URL(Uniform Resource Locator)은 자원이 존재하는 위치만을 가리킵니다.
예와 같이 자원이 있는 곳의 경로 까지만 지정해 주는 것입니다.
예) https://developern.com/test

URN(Uniform Resource Name)은 프로토콜이나 포트 같은 정보를 제외한 리소스의 이름을 가리킵니다.
예와 같이 식별자를 포함한 순수한 이름만을 지정해 줍니다.
예) developern.com/test?id=123

URI(Uniform Resource Identifier)는 URL이 가지고 있는 자원의 위치 만이 아니라 자원에 대한 고유 식별자를 포함합니다.
예와 같이 경로 뿐만 아니라 123이라는 id값을 포함하게 됩니다.
예) https://developern.com/test?id=123

저작자표시 비영리 변경금지

'雜同散異' 카테고리의 다른 글

[ tistory ] 티스토리에 D2Coding 설정하는 방법 (2)	2023.12.28
[ Office 365 ] 오디날 오류로 오피스 프로그램이 갑자기 실행되지 않을 때 해결 방법 (0)	2023.11.22
[ 카카오톡 ] PC 버전 광고 차단 방법 알아보자 (0)	2023.10.13
[ Java ] 윈도우에 JRE설치하는 방법 (0)	2023.07.20
[ FreeCommander ] 테마를 다크모드로 바꾸기 (0)	2023.01.19
[ FreeCommander ] UI를 한글로 변경하기 (0)	2023.01.19
[ 카카오톡 ] 새로 앱을 설치할 때 대화내용 복원법.(feat. 톡서랍) (0)	2020.09.26
[ 곰플레이어 ] 책갈피 사용법 (0)	2020.04.27

DeveloperN

개발자 n의 개발 이야기(draft)

,

[ HTML Tag - A 그룹 ] <!DOCTYPE> 태그는 무엇인가?

HTML5 2023. 7. 20. 14:40

<!DOCTYPE> 태그는 HTML문서임을 선언하는 것으로 HTML문서의 제일 위에 작성합니다.

HTML4.01까지만 해도 다음과 같이 길어서 외워서 사용하기에는 어려움이 있었습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
이후 HTML5가 발표되면서 <!DOCTYPE>만 사용해도 웹 브라우저에서 HTML문서임을 인식합니다.
최근에는 에디터 혹은 통합 개발 환경(IDE)이 많이 발전하여, 단축키 등으로 자동 입력해 주기 때문에 외울 필요가 없어 졌습니다.

01 <!DOCTYPE>

[ 예제 ]

이 태그는 다음 예제와 같이 문서 제일 위에 추가해 줍니다.

01 	<!DOCTYPE html>
02 	<html>
03 	<head>
04 	  <title>HTML 문서 선언</title>
05 	</head>
06 	<body>
07 	  <div>
08 	    이 곳에 내용을 
09 	  </div>
10 	</body>
11 	</html>

저작자표시 비영리 변경금지

'HTML5' 카테고리의 다른 글

[ HTML Tag - A그룹 ] <a> - Anchor 태그 사용 설명서 (0)	2023.07.20
[ HTML Tag - A 그룹 ] <!-- 주석 --> 사용법 (0)	2023.07.18
[HTML5] 미디어의 크기에 따라 다른 이미지를 보여주는 <picture> 태그 (0)	2019.11.16
[HTML5] <dl> tag - definition list (정의 목록) (0)	2019.11.13
[HTML5] block과 inline level 요소들 (0)	2019.11.01
[HTML5] meta tag 총정리 (0)	2019.10.31
[HTML5] <article>과 <section> 및 <div> 의 적절한 사용에 관한 고찰 (0)	2019.10.23

DeveloperN

개발자 n의 개발 이야기(draft)

,

[ HTML Tag - A 그룹 ]  사용법

HTML5 2023. 7. 18. 18:18

주석 혹은 코멘트(comment)라고 부르며, 소스 코드의 내용을 설명하기 위한 메모를 추가하는데 사용합니다.
주석은 코드를 이해하기 쉽게 설명하거나, 특정 부분을 임시로 비활성화하는 용도로 사용하는 것이 일반적입니다.
이 태그로 감싸고 있는 내용은 웹 브라우저에 표시되지 않으며, 소스에서만 내용의 확인이 가능합니다.

[ 문법 ]

HTML 주석은 다음과 같은 형식으로 작성합니다. 한 줄 또는 여러 줄의 주석을 감쌀 수 있습니다.

<!-- 한 줄 주석 -->
<!--
여러 줄 주석 1
여러 줄 주석 2
여러 줄 주석 3
-->

[ 예제 ]

01 	<!DOCTYPE html>
02 	<html>
03 	<head>
04 	  <title>주석 예제</title>
05 	</head>
06 	<body>
07 	  <h1>웹 페이지 제목</h1>
08 	  <p>이것은 웹 페이지의 본문입니다.</p>
09 	  
10 	  <!-- 한 줄 주석입니다.  -->
11 	  
12 	  
13 	  <!-- 
14 	    여러 줄에 걸친 주석을 작성할 수도 있습니다.
15 	    또한 다음과 같이 주석으로 처리된 태그는 비활성화 되어 동작하지 않습니다.
16 	    <div>
17 	      <p>이 부분은 표시되지 않습니다.</p>
18 	    </div>
19 	  -->
20 	</body>
21 	</html>

저작자표시 비영리 변경금지

'HTML5' 카테고리의 다른 글

[ HTML Tag - A그룹 ] <a> - Anchor 태그 사용 설명서 (0)	2023.07.20
[ HTML Tag - A 그룹 ] <!DOCTYPE> 태그는 무엇인가? (0)	2023.07.20
[HTML5] 미디어의 크기에 따라 다른 이미지를 보여주는 <picture> 태그 (0)	2019.11.16
[HTML5] <dl> tag - definition list (정의 목록) (0)	2019.11.13
[HTML5] block과 inline level 요소들 (0)	2019.11.01
[HTML5] meta tag 총정리 (0)	2019.10.31
[HTML5] <article>과 <section> 및 <div> 의 적절한 사용에 관한 고찰 (0)	2019.10.23

DeveloperN

개발자 n의 개발 이야기(draft)

,

[ 윈도우즈 10 ] 필요없는 파일 삭제해서 디스크 공간 늘리는 방법

Windows 10 2023. 7. 17. 14:31

1. '시작' 버튼을 우클릭하면 컨텍스트 메뉴가 나타납니다.
2. 메뉴 중에서 '설정'을 클릭합니다.

3. window 설정 창에서 '시스템'을 클릭합니다.

4. 시스템 설정 화면에서 '저장소'를 클릭합니다.

5. '임시 파일'을 클릭합니다.
만일 계속 공간 확보를 하려는 경우 위쪽의 토글 버튼을 클릭하여 '켬'으로 바꿔 줍니다.

6. 임시 파일 창이 나타나면 '파일 제거' 버튼을 클릭합니다.
체크 박스 설명을 잘 읽어 보고 삭제해도 상관 없다고 생각되면 해당 항목을 체크하고 '파일제거' 버튼을 클릭해 주세요.

저작자표시 비영리 변경금지

'Windows 10' 카테고리의 다른 글

[ 윈도우즈 10 ] win10, win11에 Samsung Notes 설치하기 (0)	2023.08.08
[ 윈도우즈 10 ] windows 정품인증 확인하는 방법 (0)	2023.07.17
[ windows 10 ] rundll32.exe - 응용 프로그램 오류 (1)	2022.09.19
[ windows 10 ] AnySign4PC.exe 프로그램 초기화 오류 해결 (0)	2022.09.04
[ windows 10 ] 관리자 권한으로 윈도우 터미널 실행하는 방법 (0)	2022.01.28
[ Windows 10 ] WSL2에 docker 설치 후 Virtual Box 와 충돌이 일어나는 경우 해결방법 (0)	2020.10.04
[ Windows 10 ] WSL2에 docker 설치하기 (0)	2020.10.03
[ Windows 10 ] 윈도우10에 WSL2 설치하기 (0)	2020.10.02

DeveloperN

개발자 n의 개발 이야기(draft)

,

[ 윈도우즈 10 ] windows 정품인증 확인하는 방법

Windows 10 2023. 7. 17. 14:17

CMD창에서 명령을 입력해서 윈도우즈의 정품인증 확인하는 방법 두가지를 소개합니다.
윈도우 검색창에서 cmd를 입력해서 cmd를 실행합니다.

1. cmd창에 다음 명령을 입력하고 실행합니다.

> slmgr/xpr

2. cmd참에 다음 명령을 입력하고 실행하면 더 자세한 정보를 얻을 수 있습니다.

> slmgr/dlv

마일 인증이 되지 않은 경우라면 slmgr/xpr 명령의 결과가 다음과 같이 나타납니다.

저작자표시 비영리 변경금지

'Windows 10' 카테고리의 다른 글

[ 윈도우즈 10 ] win10, win11에 Samsung Notes 설치하기 (0)	2023.08.08
[ 윈도우즈 10 ] 필요없는 파일 삭제해서 디스크 공간 늘리는 방법 (0)	2023.07.17
[ windows 10 ] rundll32.exe - 응용 프로그램 오류 (1)	2022.09.19
[ windows 10 ] AnySign4PC.exe 프로그램 초기화 오류 해결 (0)	2022.09.04
[ windows 10 ] 관리자 권한으로 윈도우 터미널 실행하는 방법 (0)	2022.01.28
[ Windows 10 ] WSL2에 docker 설치 후 Virtual Box 와 충돌이 일어나는 경우 해결방법 (0)	2020.10.04
[ Windows 10 ] WSL2에 docker 설치하기 (0)	2020.10.03
[ Windows 10 ] 윈도우10에 WSL2 설치하기 (0)	2020.10.02