def softmax(x):
if x.ndim == 2:
x = x.T
x = x - np.max(x, axis=0)
y = np.exp(x) / np.sum(np.exp(x), axis=0)
return y.T
x = x - np.max(x)
return np.exp(x) / np.sum(np.exp(x))
- 밑바닥부터 시작하는 딥러닝(WegraLee-deep-learning-from-scratch)의 common functions 중 softmax에 대한 코드이다.
x.ndim == 2: 들어온 x의 차원이 2차원인 경우, 보통 입력 데이터는 (배치 크기, 특징 수)로 들어온다.
<b> Bold text </b><br>
<strong> Strong text </strong><br>
<i> Italic text </i><br>
<em> Emphasized text </em><br>
<mark> Marked text </mark><br>
<small> Smaller text </small><br>
<del> Deleted text </del><br>
<ins> Inserted text </ins><br>
text <sub> Subscript text </sub><br>
text <sup> Superscript text </sup><br>
- style attributes로도 텍스트의 스타일들을 바꿀 수 있지만, text formatting 요소들로도 텍스트의 스타일을 바꿀 수 있다.
1. <b>: 텍스트가 굵게 표시되지만 특별한 의미는 X
2. <strong>: 의미적으로 중요한 텍스트임을 표시. 검색엔진이 중요한 텍스트로 인식할 수 있음
3. <i>: 기울임. 주로 기술 용어(Technical term), 외국어 표현, 생각이나 내면의 소리, 선박/항공기 등의 이름 등을 표시할 때 사용
4. <em> 강조. 의미적으로 중요한 텍스트를 기울임. <i>와 다르게 의미적으로도 강조되어 화면낭독기에서도 강조됨
5. <sub>/<sup> 아래 첨자와 위 첨자
2. 인용 및 인용 출처 태그
1) 인용문
<h3> Block Quote 긴 인용문 </h3>
<p>As Albert Einstein once said:</p>
<blockquote cite="https://www.example.com/einstein-quotes">
"Life is like riding a bicycle. To keep your balance, you must keep moving."
</blockquote>
<h3> Inline Quote 짧은 인용문 </h3>
<p>Steve Jobs once said: <q>Stay hungry, stay foolish.</q></p>
- Block Quote의 경우 기본적으로 들여쓰기가 적용되며 Inline Quote의 경우 브라우저가 자동으로 인용부호("")를 추가한다.
- cite 속성을 사용해서 출처를 명시할 수 있는데, 사용자가 직접 속성값을 보지는못하지만, SEO 및 접근성 향상에 도움을 준다.
2) 출처
<h3> Citation 출처 </h3>
<p>The book <cite>The Great Gatsby</cite> was written by F. Scott Fitzgerald.</p>
- 책, 논문, 영화, 노래, 웹사이트 등의 출처를 표시할 때 사용되며 주로 이탤릭체로 표시한다.
- 사람의 이름에는 사용하지 않는다.
3) 약어
<h3> Abbereviation 약어 </h3>
<p><abbr title="World Health Organization">WHO</abbr> is an international health agency.</p>
- title 속성을 통해 마우스 커서를 올려놓았을 때 어떤 단어의 약어인지 표시할 수 있다.
- 브라우저나 서치엔진, 번역 시스템에 약어에 대한 정보를 제공할 수 있다.
- title 속성 없이 <abbr>이라는 태그 만으로 이 단어가 약어임을 의미적으로 표시할 수도 있기는 하지만 사용자가 실제 의미를 알 수 없기 때문에 title 속성을 추가하는 것이 좋음
4) 주소
<h3> Address 주소 </h3>
<address>
Written by Dried min.<br>
Visit us at: https://driedmin.tistory.com <br>
Korea
</address>
- 연락처 정보를 표시할 때 사용된다.
- 기본적으로 이탤릭체로 표시되며 address 요소를 표시하기 전 브라우저는 기본적으로 줄바꿈을 한다.
5) 텍스트 방향
<h3> Bidirectional Override 텍스트 방향 </h3>
<p>Normal text: Hello</p>
<p>Reversed text: <bdo dir="rtl">Hello</bdo></p>
- 텍스트의 기본 방향을 강제로 변경할 수 있다. rtl은 right to left
- 아랍어, 히브리어처럼 기본적으로 RTL인 언어를 표시할 때 / RTL 언어에서 LTR 텍스트를 올바르게 표시할 때 사용할 수 있다.
- <bdi> 태그를 통 텍스트 방향을 자동으로 감지하여 적용할 수 있다. (브라우저가 결정해줌)
3. HTML 주석
<!-- 주석처리 -->
- 브라우저는 주석을 렌더링하지 않아 브라우저에 출력되지 않는다. 오직 코드 작성자만 확인할 수 있다.
- 코드의 가독성을 높이고, 협업할 때 유용하다.
- 특정 코드를 일시적으로 비활성화할 때 사용할 수도 있다. (주석 안에서 태그를 사용해도 브라우저가 무시한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Tutorial 2</title>
</head>
<body>
<h3> Text Formatting </h3>
<p>
<b> Bold text </b><br>
<strong> Strong text </strong><br>
<i> Italic text </i><br>
<em> Emphasized text </em><br>
<mark> Marked text </mark><br>
<small> Smaller text </small><br>
<del> Deleted text </del><br>
<ins> Inserted text </ins><br>
text <sub> Subscript text </sub><br>
text <sup> Superscript text </sup><br>
</p>
<h3> Block Quote 긴 인용문 </h3>
<p>As Albert Einstein once said:</p>
<blockquote cite="https://www.example.com/einstein-quotes">
"Life is like riding a bicycle. To keep your balance, you must keep moving."
</blockquote>
<h3> Inline Quote 짧은 인용문 </h3>
<p>Steve Jobs once said: <q>Stay hungry, stay foolish.</q></p>
<h3> Citation 출처 </h3>
<p>The book <cite>The Great Gatsby</cite> was written by F. Scott Fitzgerald.</p>
<h3> Abbereviation 약어 </h3>
<p><abbr title="World Health Organization">WHO</abbr> is an international health agency.</p>
<h3> Address 주소 </h3>
<address>
Written by Dried min.<br>
Visit us at: https://driedmin.tistory.com <br>
Korea
</address>
<h3> Bidirectional Override 텍스트 방향 </h3>
<p>Normal text: Hello</p>
<p>Reversed text: <bdo dir="rtl">Hello</bdo></p>
<!-- 주석처리 -->
</body>
</html>
- 따라서 HTML 코드는 내용을 구조화하는 데 주로 사용되고, 실제 디스플레이나 스타일을 설정하려면 CSS로 스타일을 조정하는 것이 필요하다.
- <hr> 태그: <hr> 태그는 html 페이지에서 주제 구분(thematic break)를 위해 사용되며 내용과 끝태그가 없는 태그(empty tag)이다. 일반적으로 수평선으로 화면에 표시되며 페이지 내에서 콘텐츠를 구분하거나 변경을 정의하는데 사용된다.
- <br> 태그: <br> 역시 빈 태그이며 줄바꿈에 사용된다. <br>을 사용해 새로운 <p>를 정의하지 않고도 줄을 바꿀 수 있다.
- pre 요소: 미리 포맷된 텍스트(preformatted text)를 정의하는데 사용된다. <pre> 안의 텍스트들은 고정 폭 글꼴(fixed-width font)로 표시되며 (I와 M이 같은 폭을 가짐) 텍스트의 공백과 줄 바꿈이 그대로 유지된다. (Courier와 비슷한 글꼴로 표시됨)
<pre>
paragraph 7
paragraph 8
paragraph 9
</pre>
- 주로 소스 코드나 명령어를 표시할 때 사용된다. 코드 내 들여쓰기나 공백을 그대로 표시할 수 있다. (프로그래밍 코드 or json 데이터를 웹 페이지에서 보여줄 때)
- 정렬된 데이터나 표 형식을 유지해야 하는 텍스트에도 pre를 사용할 수 있다.
3. Links
<a href = "https://driedmin.tistory.com/"> link 1 </a><br>
<a href = "https://driedmin.tistory.com/" target = "_blank"> link with target blank</a><br>
<a href = "https://driedmin.tistory.com/" title = "link to tistory"> link with title</a><br>
<a href = "../imgs/a.jpg" download> download </a><br>
<a href = "mailto:dried021@gmail.com?subject=제목&body=내용"> mail </a><br>
<a href = "#section1"> id = section1으로 스크롤 이동</a><br>
<a href = "https://driedmin.tistory.com/" >
<img src = "../imgs/b.jpg" alt = "img b" width = "100">
</a><br>
<a href = "tel: +821012345678">전화 걸기</a><br>
<button onclick = "window.location.href = 'https://driedmin.tistory.com/'"> button to website</button>
<button onclick = "document.location = '../imgs/b.jpg'"> button to image</button>
- <a> 태그(anchor, 앵커)를 통해 링크(하이퍼링크)를 만들 수 있다.
- 링크를 통해 웹페이지 간 이동이 가능하고, 특정 파일이나 이메일을 열 수 있다.
- href(Hypertext REFerence) 속성에서 이동할 URL을 지정하며 a 태그 안의 텍스트를 사용자가 클릭하면 지정한 URL로 이동하게 된다.
- 편의상 코드 뒤에 <br>을 넣어 줄바꿈을 한다.
- 상대적인 url로 작성하는게 좋다. 예를 들어 위의 코드에서 img source를 현재 html 파일이 속해있는 파일의 상위 주소의 imgs 폴더의 이미지 파일로 지정했다. 만약 절대적인 주소(예를 들어 C:\Workspace\JSPEx\src\main\webapp\imgs\a.jpg)로 지정했을 경우 html 파일의 경로가 바뀌는 경우 a.jpg를 불러오는 모든 코드를 수정해야 한다. 이처럼 상대적인 url(relative url)을 사용해서 도메인이나 경로가 변경되더라도 링크가 작동할 수 있도록 하는 것이 좋다. 웹사이트를 다른 도메인으로 옮기거나 여러 서버에서 호스팅할 때, 상대 url을 사용하면 도메인이나 호스팅 서버를 변경해도 링크가 유지될 수 있으며 상대 url을 사용하면 긴 도메인 주소를 반복하지 않아도되어 코드가 깔끔하고 관리하기 쉬워진다.
1. target: taget 속성에서 링크를 여는 방식을 지정할 수 있다. 기본값은 _self이며 현재 창에서 href의 url이 열어진다. 값이_blank일 경우 새 창(새 탭)에서 열어지며 _parent의 경우 부모프레임에서 열어지고 _top의 경우 최상위 프레임에서 열어진다. _parent와 _top의 경우 여러 프레임으로 나누어진 페이지에서 동작할 수 있다.
2. title로 링크에 마우스를 올렸을 때 툴팁이 표시되게 할 수 있다. 아래 이미지처럼 표시된다.
3. 상위 폴더에 폴더 imgs가 위치해있고 그 안에 a.jpg라는 파일을 넣어두었다. 클릭하면 이미지가 있는 창으로 이동한다.
4. 메일이 어떻게 뜰까 궁금했는데 이렇게 뜬다.
5. id가 section1인 위치로 이동한다. 링크를 사용해 같은 페이지 안에서도 특정 위치로 이동할 수 있다. (이와 같은 북마크의 경우에는 unique한 값인 id를 활용한다.)
6. 이미지를 클릭해서 링크로 이동할 수도 있다. 이때 alt(alternative text) 속성은 이미지가 표시되지 않을 때 대신 보여줄 텍스트를 의미한다. img 태그에서 반드시 추가하는 것이 좋다!!
- html 기본 링크는 파란색이고 밑줄이 그어져 있으며 클릭했다면 보라색으로 변하며 active link의 경우 빨간색으로 변하지, css를 사용하여 스타일을 변경할 수 있다 .
7. Button:
b.jpg가 딸기 그림이다
- Links의 스타일 변경하기 : 앞서 언급했듯이 CSS를 사용하여 link의 상태 색을 바꿀 수 있다.
- 이미지는 웹 페이지에 직접 삽입되는 것이 아니라 사실 웹 페이지에 연결된 형태로 표시됨. 이미지가 웹 페이지의 파일 자체에 포함되는 것이 아니라, 웹 페이지가 이미지를 표시하도록 연결된다. 이미지 파일 자체는 웹 서버나 다른 위치에 별도로 저장되어 있으며 HTML 문서 안에서 src 속성을 사용하여 그 이미지 파일의 경로를 참조한다.
- 웹 페이지가 로드되면 그 순간 웹 서버로부터 이미지를 가져와 페이지에 삽입하는 것은 브라우저이다. 따라서 이미지가 실제로 웹페이지와 관련하여 같은 위치에 있는지 확인해야 하며, 그렇지 않으면 깨진 링크 아이콘과 대체 텍스트가 표시되게 된다.
- 대체 텍스트는 screen reader를 통해 읽힌다.
- width와 height만 설정한 경우 가로 세로 비율 유지가 자동으로 되고, 각각 값을 지정한다면 비율을 유지하지 않는다.
- img 태그에 width와 height 속성을 직접 추가해 이미지 크기를 지정할 수 있다. 직관적이지만 반응형웹 디자인에 불편할 수 있고, 스타일 시트에서 크기를 변경할 때 우선순위 문제가 발생할 수 있다.
- CSS를 통해 style 속성으로 이미지 크기를 조정하면 html 코드가 더 깔끔해지고 반응형 디자인을 구현할 수 있다.
- HTML은 Hyper Text Markup Language(하이퍼텍스트 마크업 언어)의 약자로 웹 페이지를 만들기 위한 표준 마크업언어
- 웹 페이지의 구조를 정의, 브라우저가 콘텐츠를 표시하는 방식을 결정하는 역할
- 문서의 구조에는 텍스트, 이미지, 링크, 동영상 등의 여러 요소가 포함
- HyperText: 문장 중의 어구나 그것에 붙은 표제, 표제를 모은 목차 등이 서로 연결된 문자 데이터 파일
HTML의 기본 구성 요소
<태그> 내용 </태그>
- HTML 문서는 여러 개의 HTML 요소로 이루어져 있음
- 시작태그, 내용, 닫는 태그로 이루어짐
- 요소는 브라우저에 콘텐츠를 표시하는 방법을 알려주며, 콘텐츠 레이블(제목, 단락, 링크 등)을 지정
- <br> break. 문장을 끊고 다음 줄로 이동하는 줄 바꿈의 역할을 하는 태그의 경우 닫는 태그(</br>)이 필요가 없는 빈 요소(self-closing tag(빈 요소를 스스로 닫는 문법))임 empty elements(내용이 없는 HTML 요소)라고도 부름.
A Simple HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<!DOCTYPE html>: 이 문서가 HTML5 문서임을 정의 브라우저가 이 문서를 HTML5 표준에 맞게 해석하도록 함 <html>: HTML 페이지의 루트 요소. (웹페이지의 최상위요소) 모든 HTML 코드는 <html> 태그 안에 작 <head>: 문서 정보를 포함. 웹페이지의 설정, 메타데이터, CSS 스타일, JavaScript 파일 등을 포함할 수 있음 <title>Page Title</title>: 웹 브라우저의 탭에 표시되는 제목을 정의 (검색 결과의 제목으로도 표시)
(옆의 아이콘은 Tomcat 아이콘)
</head> <body>: 화면에 표시되는 부분. 실제 웹페이지에서 사용자가 볼 수 있는 내용(텍스트, 이미지, 링크 등)을 포함
<h1>My First Heading</h1>: Heading, h1 태그는 가장 큰 가장 큰 제목. h1~h6까지 제목 태그가 있음 굵은 글씨+큰 크기 <p>My first paragraph.</p>: Paragraph, 단락태그 <p>태그를 사용하면 문장들이 자동으로 줄바꿈 위 아래의 여백이 추가
</body> </html>
Web Browsers
- web browser(Chrome, Edge, Firefox, Safari)는 HTML 문서를 읽고 올바르게 display 해야 함
- 브라우저는 HTML 태그들까지 표시하지는 않지만 태그들로 어떻게 문서를 표시할 지 결정
HTML 페이지 구조
<body> section 안의 내용들이 브라우저에 표시됨
<title> 안의 요소들은 브라우저의 페이지 탭의 타이틀 바에서 보여짐
HTML과 CSS, JavaScripy
- HTML: 웹 페이지의 구조를 담당 기본 골격을 정의
- CSS: HTML 요소의 디자인(색상, 크기, 배경 등)을 담당. 스타일링
- JavaScript: HTML 요소의 동적인 기능(애니메이션, 사용자 입력 처리 등)을 담당
(HTML을 사용하면 텍스트, 이미지, 링크 등을 배치할 수 있지만, 클릭하면 색상이 바뀌거나, 버튼을 눌렀을 때 이벤트가 발생하는 등의 동적인 기능은 할 수 없음.
-> HTML은 단독으로 사용되기보다는 CSS, JavaScript와 함께 사용되며, 이를 통해 완전한 웹 페이지로 만들어짐
HTML은 프로그래밍 언어인가?
- X. HTML은 마크업 언어. 프로그래밍 언어는 논리적인 연산, 조건문, 함수, 변수 선언 등을 포함하여 데이터를 처리하고 조작할 수 있어야 하지만, HTML은 이러한 기능이 없음
