* HTML 뼈대구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>사진 갤러리 앱</title>
</head>
<body></body>
</html>DOCTYPE - 해당문서의 HTML 버전을 알려주는 역할 (html 5 버전)
head - 해당 문서에 대한 정보인 메타데이터(metadata)를 알려주는 역할
meta 태그의 charset 속성 - 해당 문서의 문자 인코딩 방식을 지정하는 역할
meta 태그의 name 속성 - 해당 문서에서 사용자가 볼 수 있는 영역인 뷰포트(viewport)를 제어하는 역할
meta 태그의 content 속성 - 모든 장치에서 웹화면이 잘 보이도록 뷰포트(viewport)를 설정하는 역할
title - 브라우저 탭에 표시되며 웹 페이지의 제목을 설정하는 역할
body - 브라우저 화면에 보이는 모든 태그를 감싸주는 역할
* HTML 요소의 구성
<title>사진 갤러리 앱</title><title>사진 갤러리 앱</title> - 요소(element)
<title> - 시작태그(opening tag)
</title> - 종료태그(closing tag)
사진 갤러리 앱 - 컨텐츠(contents)
<img src="my_photo.jpg" alt="my_photo"/>img 태그는 시작태그는 있지만 종료태그는 없고, 컨텐츠도 없다.
src - 속성이름(attribute name)
"my_photo.jpg" - 속성값(attribute value)
* 태그(tag) 종류
문서의 헤드라인을 설정하는 경우
<h1>My photo gallery</h1>문서의 헤딩(heading)을 정의할때 사용한다. h1부터 h6까지 있으며, h1은 가장 중요한 헤딩을 정의하고, 폰트가 가장 크다. h6은 덜 중요한 헤딩을 정의하고, 폰트가 가장 작다.
리스트(목록)를 보여주는 경우
<ul></ul>순서가 없는 목록(list)를 보여줄때 사용한다. ul는 unordered list 의 약자이다. 내부에 삽입되는 li 태그는 앞에 점으로 표시된다.
<ol></ol>순서가 있는 목록(list)를 보여줄때 사용한다. ol은 ordered list 의 약자이다. 내부에 삽입되는 li 태그는 앞에 번호가 표시된다.
<li></li>리스트(list) 내부에 포함되는 각각의 아이템(item)을 보여줄때 사용한다. li는 list 의 약자이다.
<ul>
<li>딸기</li>
<li>바나나</li>
<li>수박</li>
</ul>
리스트 아이템 앞에 점으로 표시된다.
<ol>
<li>딸기</li>
<li>바나나</li>
<li>수박</li>
</ol>리스트 아이템 앞에 번호가 표시된다.
다른 웹 페이지로 이동할 경우
<a href="https://google.com" target="_blank">구글 홈화면</a>현재 웹화면에서 다른 웹사이트로 이동할때 사용한다. a는 anchor 의 약자이다. 배 안의 선원이 닻(anchor)을 특정 위치에 던지고 그쪽으로 이동하듯이 목표로 하는 웹사이트로 이동한다. href는 이동하고자 하는 타겟(target) 웹사이트의 URL 주소를 지정한다. target='_blank' 는 현재 웹화면은 그대로 두고 새창을 열어서 타겟 웹사이트를 보여준다.
문단을 보여주는 경우
<p>I love cats. So i raise cats thesedays. at first it was hard to feed. but now it is okay</p>문단(paragraph)을 보여줄때 사용한다. 브라우저는 p 태그로 정의된 문단 위쪽과 아래쪽에 약간의 여백 공간을 띄워줍니다. 로렘 입숨(Lorem Ipsum)이라는 샘플 텍스트 생성기로 의미없는 문단을 생성할 수 있다.
사용자로부터 데이터를 입력받을 경우
<label for="syleemomo">로그인</label>
<input type="text" id="syleemomo">label 태그는 말 그대로 라벨(이름)을 보여줄때 사용한다. for 속성을 지정하면 해당 라벨을 클릭했을때 id로 연결된 input 요소가 자동으로 선택되면서 텍스트 입력을 준비한다.
<label>로그인 <input type="text"></label>label 태그의 for 속성을 사용하는 대신에 label 태그 내부에 input 태그를 삽입해도 동일하게 동작한다.
<input type="text" placeholder="이미지를 검색하세요" />사용자로부터 데이터를 입력받아야 하는 경우에 사용한다. input 태그의 type 속성은 기본적으로 text 로 지정된다. placeholder 속성은 input 창 내부에 안내 메세지를 보여준다.
<input type="password">type 속성이 password 이면 로그인 화면의 비밀번호 입력처럼 사용자가 실제 입력하는 내용은 보여주지 않고 점으로 표시된다.
<input type="button" value="제출">type 속성이 button 이면 입력창이 아니라 버튼이 생성된다. 반드시 value 속성을 지정하여 버튼의 이름을 보여주도록 한다.
<input type="submit" value="Submit" />type 속성이 submit 이면 입력창이 아니라 버튼이 생성된다. 반드시 value 속성을 지정하여 버튼의 이름을 보여주도록 한다. type 속성이 button 인 것과의 차이점은 submit 으로 설정하면 form 태그 안에서 클릭시 브라우처 창이 새로고침된다.
<input type="checkbox" name="color" value="red" checked>체크박스를 생성한다. 클릭하면 선택되고, 다시 클릭하면 선택이 해제된다. 이러한 동작을 토글(Toggle)이라고 한다.
<input type="radio" name="fruit" value="strawberry" />라디오 버튼을 생성한다. 체크박스는 기본적으로 여러개의 아이템을 동시에 선택할 수 있지만, 라디오 버튼은 여러개의 아이템 중 어느 하나만 선택 가능하다.
- HTML: Hypertext Markup Language | MDN
file 유형의
요소에는 저장 장치의 파일을 하나 혹은 여러 개 선택할 수 있습니다. 그 후, 양식을 제출해 서버로 전송하거나, File API를 사용한 JavaScript 코드로 조작할 수 있습니다.
developer.mozilla.org
<input type="file" accept="image/*" />type 속성을 file 로 지정하면 웹 화면에서 로컬 디렉토리의 파일을 선택할 수 있다. accept 속성은 선택할 수 있는 파일의 종류를 지정한다. 현재는 jpg, png 등의 모든 image 파일을 선택할 수 있다. *는 모두 가능하다는 의미다. accept 속성은 파일 선택화면이 오픈되었을때 지정한 파일 확장자의 파일들만 추려서 보여준다. image/* 로 지정하면 파일 선택화면에 이미지 파일들만 나타난다.
<input type="color" />type 속성을 color 로 지정하면 컬러 선택기 (color picker) 가 웹 화면에 표시된다.
<input type="date" />type 속성을 date 로 지정하면 날짜 선택기 (date picker) 가 웹 화면에 표시된다.
<input type="submit" value="Submit" disabled />disabled 속성을 지정하면 input 요소가 비활성화되면서 클릭이 금지된다.
<input type="text" autofocus />autofocus 속성을 지정하면 input 창을 자동으로 선택하고 커서가 깜빡이면서 입력을 준비한다.
HTTP 요청 메서드 - HTTP | MDN
HTTP는 요청 메서드를 정의하여, 주어진 리소스에 수행하길 원하는 행동을 나타냅니다. 간혹 요청 메서드를 "HTTP 동사"라고 부르기도 합니다. 각각의 메서드는 서로 다른 의미를 구현하지만, 일부
developer.mozilla.org
<form method="GET" action="/">
</form>HTML 입력 폼(form)을 정의할때 사용한다. method 속성은 HTTP 요청 메서드를 의미한다. method 종류에는 GET, POST, PUT, DELETE 등이 있다. GET 방식은 데이터를 조회할때, POST 방식은 데이터를 생성할때, PUT 방식은 데이터를 변경할때, DELETE 방식은 데이터를 삭제할때 사용한다. action 속성은 데이터를 전송할 타겟 URL 주소를 의미한다.
<form method="GET" action="/">
<label><input type="checkbox" name="color" value="orange" checked/> Orange</label>
<label><input type="checkbox" name="color" value="red"/> Red</label>
<input type="submit" value="Submit" />
</form>name 과 value 는 서버로 전송할 데이터의 이름과 실제 값이다. 서버에서는 name 값에 접근하여 value 값을 추출한다. Submit 버튼을 클릭하고 URL 주소를 확인하면 사용자가 선택한 체크박스의 데이터가 표시된다. ?color=orange 와 같이 표시된다. color 는 name 의 속성값이고, orange 는 value 의 속성값이다.
두 개의 색상을 모두 선택하면 ?color=orange&color=red 와 같이 표시된다. 이것은 form 태그의 method 속성이 GET 방식이기 때문에 URL 주소에 데이터가 보여진다. POST 방식으로 바꾸면 전송하는 데이터가 보이지 않는다. checked 속성은 화면이 처음 로딩되었을때 이미 체크박스가 선택이 되어서 보여진다.
<form method="GET" action="/">
<label><input type="radio" name="fruit" value="strawberry" /> 딸기</label>
<label><input type="radio" name="fruit" value="banana" /> 바나나</label>
<input type="submit" value="Submit" />
</form>위의 form 예제와 동작은 거의 동일하다. 자세한 설명은 생략한다.
<form action="/">
<input type="text" placeholder="이미지를 검색하세요" required />
<input type="submit" value="검색" />
</form>required 속성은 데이터를 서버로 전송하기 전 input 입력창에 반드시 데이터를 입력하도록 요구한다. 입력창에 아무것도 입력하지 않고 submit 버튼을 클릭하면 "입력란을 작성하세요"라는 안내문구가 표시되며, 서버로 데이터 전송을 하지 않는다.
<textarea name="description" cols="30" rows="10"></textarea>사용자가 여러 줄의 텍스트를 입력할 수 있도록 한다. cols 속성은 영문자 기준 한 줄에 30자까지 작성 가능하다는 의미다. rows 속성은 작성가능한 텍스트의 라인수다. 여기는 총 10줄의 텍스트를 입력할 수 있다.
멀티미디어(사진, 영상, 음악)를 삽입할 경우
<img src="apple.png" alt="apple">사진을 보여준다. src 속성은 사진이 저장된 위치(경로)를 지정한다. 로컬 디렉토리 주소나 URL 주소값 또는 사진 데이터를 넣어주면 된다. 예를 들면, 구글 이미지 검색에서 삽입하려는 사진에서 마우스 우클릭을 하면 "이미지 주소 복사"가 있는데 실제로는 주소가 아니라 이미지 데이터이다. 즉, 구글 서버에 접근하지 않는다. 그래서 웹화면에 보여진다.
그러나 "링크 주소 복사"를 하면 실제 URL 값을 삽입하게 되는데 로컬에서 구글 서버에 리소스(사진)를 요청하면 CORS 오류가 발생하고, 화면에 사진은 보이지 않는다.
할일목록(TODO) 앱 2 - 기본적인 서버 설정 및 Mongo DB 연동
* 비주얼 스튜디오 에디터 열기 * 코드 테스트하기 console.log("hello world !") index.js 파일에 해당 코드를 작성하고 ctrl + F5 를 하면 코드가 실행된다. * express 서버 설치하기 server 폴더 내부에서 설..
syleemomo.tistory.com
alt 는 사진이 지정된 위치에 없거나 사진을 읽어오지 못하는 경우 화면에 보여줄 텍스트를 설정한다.
<video src="dance.mp4" autoplay controls></video>영상을 보여준다. src 속성은 영상이 저장된 위치(경로)를 지정한다. 로컬 디렉토리 주소나 URL 주소값을 넣어주면 된다. URL 주소값을 지정하는 경우 브라우저에서 직접 다른 도메인 서버에서 영상을 가져오면 CORS 오류가 발생한다. 개발자 도구에 오류 메세지가 출력된다. 즉, 로컬 주소(http://127.0.0.1)에서는 로컬 서버에 있는 영상만 가져올 수 있다. 로컬(http://127.0.0.1)에서 유튜브 영상(https://www.youtube.com)은 프로토콜과 도메인 주소가 다르기 때문에 가져오지 못한다.
autoplay 는 화면 로딩시 자동으로 영상을 재생한다는 의미다. controls 는 영상을 제어하는 판넬을 보여준다.
<audio src="hello.mp3" autoplay controls></audio>음악을 재생한다. src 속성은 음악이 저장된 위치(경로)를 지정한다. 로컬 디렉토리 주소나 URL 주소값을 넣어주면 된다. video 태그와 개념이 동일하므로 자세한 설명은 생략한다.
드롭다운 메뉴를 삽입하고자 하는 경우
요소는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다.
developer.mozilla.org
<select name="pets" id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>옵션 메뉴를 제공한다.
여러 개의 요소(elements)를 그룹(group)으로 묶고자 하는 경우
<div>
<h1>포토 갤러리</h1>
<input type="text" placeholder="사진을 검색하세요" />
</div>h1 요소와 input 요소를 그룹으로 묶었다. 이렇게 하는 이유는 div 태그에 id 속성이나 class 속성을 지정해서 h1과 input 요소에 공통적인 스타일을 적용하기 위함이다.
외부 리소스를 연결하려고 하는 경우
<link rel="stylesheet" href="style.css">스타일시트(css 파일)을 적용할때 가장 많이 사용한다. href 속성은 연결하려는 파일 위치(경로)를 지정한다.
<link rel="icon" href="">파비콘(favicon)을 보여줄때도 사용한다. 파비콘은 웹페이지 상단탭에 보여지는 아이콘이다. 구글 이미지 검색에서 favicon.ico 로 검색한 다음 원하는 아이콘에서 마우스 우클릭하고 "이미지 주소 복사"를 하고 href 속성에 붙여넣으면 아이콘이 상단탭에 표시된다.
'프론트엔드 > HTML' 카테고리의 다른 글
| 구글폰트 코드로 사용하기 (0) | 2023.06.23 |
|---|