HTML 문서 정식 태그 "전부" 공부하기 - 2편 (코드 작성 및 구현까지)
제목 : HTML 문서 태그 공부하기 - 2편
1편 글 주소
https://codecreature.tistory.com/217
이 글을 작성하는 이유
위의 1 편 글을 잠깐 살펴보면서 리스트를 보았다면 알겠지만,
모든 태그에 대한 의미와 사용처, 그리고 실제 구현까지 살펴보는 것은 보통 일이 아니었다.
내가 React 를 통해 처음 웹 개발에 입문하였을 때, 나는 단순히 블럭을 선언하기 위해 <div> 를 사용했다.
대표적인 태그 몇 개만 사용하며, 클래스로 구분하는 것은 그 때 당시엔 문제가 없었지만,
추후 협업이나, 중급에서 고급 수준의 웹 페이지를 제작하는 과정에서 한계가 있을 것이라 판단했다.
또한 각 태그가 가지고 있는 고유의 기능이나, Default 스타일링을 알고 싶었는데,
정말 효과적으로 배웠다고 생각한다.
옛날 개발자들이 협업과 가독성을 위해 만들어 놓았을 법한 태그들도 많이 존재했고,
특히, 생각보다 활용하기 좋아 보이는 <abbr>, <dfn> 같은 태그들도 발견했다. (약어 설명 태그)
전 편에서는 "기본 태그" 와, "형식 태그"(Formatter) 에 대해서 배웠다.
형식 태그는 inline 으로서, 텍스트를 정의하는 것만 있을 줄 알았는데,
의외로 게이지, 진행률, 및 비렌더링 DOM 을 지원하는 태그들도 존재했다.
나중에 이러한 태그들을 사용 할 때, 모호하게 넘어 갈 일이 없을 것 같아 좋다고 생각한다.
그러나, 아직 알아야 할 태그들은 많이 남았다.
완료 한 카테고리는 이렇다 :
- Basic Tags (완료)
- Formatter (완료)
남은 카테고리는 이렇다 :
- Forms and Input
- Frames
- Images
- Audio / Video
- Links
- Lists
- Tables
- Styles and Semantics
- Meta Info
- Programming
아직 배워야 할 카테고리 자체는 많이 남았지만, Formatter 가 압도적으로 많은 수를
차지했기 때문에, 1편에서 2 개의 카테고리밖에 다루지 못한 것도 있다.
그러나, 나머지 카테고리는 전부 Formatter (거의 50개) 보다는 적기 때문에,
1편에서 설명한 틀을 최대한 유지하며, 작성 할 것이다.
Category - Forms and Input (폼과 입력)
form
유저의 입력을 위한 HTML 폼을 정의한다.
처음부터 매우 중요하고, 속성이 매우 많으며,
내부에 작성될 수 있는 태그들이 많은 요소가 나왔는데,
한 번 예시를 통해 감을 잡아보자.
먼저, W3Schools 에서 만들어 놓은 웹 사이트 샌드박스 사이트가 존재하는데,
궁금하다면
https://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_form_submit
여기서 시도 해 보길 바란다.
실제 action 속성이 이루어지는 것을 사이트에서 보여주므로,
예제를 그대로 옮겨서 확인 해 보자.
예시 :
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" /><br /><br />
<label for="lname">Last name:</label><br /><br />
<input type="text" id="lname" name="lname" /><br /><br />
<input type="submit" value="Submit" />
</form>이 폼은 내부에 유저가 입력하는 데이터가 들어 있으며,
Event 인 "submit" 이 일어날 때, GET 메서드로 action_page.php 에 넘긴다.
결과적으로, action_page.php 는 이 form 의 내용을 파싱하여 원하는 데이터를 보여줄 수 있다.
그런데, 궁금 한 것이 생겼다.
form 이 전달 될 때 어떤 형태의 네트워크로 전달될까?
따라서, 나는 네트워크 도구 탭을 열고 이를 확인 해 보았다.
결과적으로, 내가 입력한 데이터는 쿼리 형식으로 날아갔다.
| Request URL | Method | Full URL |
|---|---|---|
| https://www.w3schools.com/action_page | 200 | ...../action_page?fname=Gong&lname=Damhyeong |
실제 표현 결과 :
위에 제작된 실제 표현 효과는, form 의 효과를 흉내내었을 뿐이다.
내가 실현하기 위해 구현한 실제 코드는 이렇다 :
<script>
const form1 = document.getElementById("test-form-1");
function test1() {
const first = document.getElementById("fname").value;
const last = document.getElementById("lname").value;
document.getElementById("result-form-1").innerHTML = `
<p> 당신이 입력한 성은 ${first} 이며, </p>
<p> 이름은 ${last} 입니다.</p>
`;
}
</script>
<form id="test-form-1">
<label for="fname">First name:</label>
<input
type="text"
id="fname"
name="fname"
style="background : #222222"
/><br /><br />
<label for="lname">Last name:</label>
<input
type="text"
id="lname"
name="lname"
style="background : #222222"
/><br /><br />
<input
type="button"
value="Submit"
onclick="test1()"
style="border : 1px solid white; border-radius : 5px;"
/>
</form>
<div id="result-form-1"></div>여기서 label 태그의 for 에 대해서 나오는데,
이는 label 태그가 어떤 유저의 입력 태그에 부착되었는가를 설명하는 속성이다.
여기서 input 의 id 가 label 의 for 과 일치한다.
따라서, 입력 칸이 아니라, "First name:" or "Last name:" 을 클릭하면,
입력 칸으로 Focus 가 된다는 것을 알 수 있다.
<form> 태그는 이러한 엘리먼트들을 포함할 수 있다 :
<input><textarea><button><select><option><optgroup><fieldset><label><output>
<form> 태그는 이러한 속성들을 가지고 있다 :
accept-charset: 폼 제출에 사용되기 위한 문자 인코딩 지정action: 폼 데이터를 제출할 때 어디에 보낼건지. (url 무조건)autocomplete: 자동완성 할 건지 ("on" or "off")enctype: post 상황에서 서버로 데이터 전송 될 때 어떻게 폼 데이터를 인코딩해야하는지.method: get, post, dialog(특수상황) 사용name: 폼의 이름을 지정한다.novalidate: 제출 시 폼을 검증하지 말아야 하는지.rel: 현재 문서와 리소스 간의 연결 관계를 지정target: 폼을 제출하고 받은 응답을 어디에 표시 할 것인지.
<form> 기본 CSS 설정 :
form {
display: block;
margin-top: 0em;
}input
사용자 입력을 정의한다.
다양한 형태의 사용자 입력 형태들을 속성 type 으로 정의할 수 있다.
이미 바로 위에서 <input> 을 사용 한 모습을 볼 수 있다.
이 <input> 에 대한 다양한 사용 예제를 보자.
예시 :
<form>
<label> text : <input type="text" /> </label><br /><br />
<label> checkbox : <input type="checkbox" /> </label><br /><br />
<label> radio : <input type="radio" /> </label><br /><br />
<label> file : <input type="file" /> </label><br /><br />
<label> password : <input type="password" /> </label><br /><br />
</form>실제 표현 결과 :
<input> 태그와 수많은 속성들 :
내가 바로 위에서 코드와 결과로 보여주었듯이,
하나의 태그로 다양한 형태의 입력을 표현할 수 있다.
그러나, 각각의 태그들은 활용도가 굉장히 높다.
텍스트의 최대 길이는 몇 자이며, 입력 칸의 크기와 텍스트 크기, 패턴 등등..
파일은 어떤 유형을 받을 것인지,
속성이 정말로 많다.
이에 대한 자세한 속성들은 Attributes 에서 확인하면 좋다.
<input> 기본 CSS 설정 :
없음
textarea
유저의 여러 줄 입력을 제어한다.
기존의 <input> 태그가 하나의 줄로서 입력을 정의하는 데 반하여,
<textarea> 는 여러 줄을 입력 할 수 있도록 만들어 준다.
<textarea> 또한 입력에 속하기 때문에, <label> 로 묶일 수 있으며,
이 영역이 클릭되면 자동으로 textarea 로 포커싱이 이동한다.
또한, rows, cols 속성으로 줄, 열 크기를 제어해 크기를 조정할 수 있다.
예시 :
<label>
<!-- textarea 사용 -->
<textarea
id="textarea-test-1"
name="textarea-test-1"
rows="4"
cols="20"
placeholder="이 텍스트는 안내 용도로 사용한다. (글씨 전부 지우면 볼 수 있음)"
style="background : #222"
>
이 텍스트는 이미 입력된 텍스트로 처리된다.
</textarea
><br />
</label>
<button onclick="findBlanks1()" style="border : 2px white solid">
빈 칸 개수 알아보기
</button>
<br />
<div id="textarea-result-1"></div>
<script>
const textarea1 = document.getElementById("textarea-test-1");
function findBlanks1() {
const str = textarea1.value;
let blanks = 0;
for (let i = 0; i < str.length; i++) {
blanks = str[i] == " " ? blanks + 1 : blanks;
}
document.getElementById("textarea-result-1").innerHTML = `
<p>현재 textarea 내부의 빈 칸 개수는, ${blanks} 개 입니다.</p>
`;
}
</script>실제 표현 결과 :
<textarea> 주요 속성들 :
autofocus: 페이지 로드 시 자동으로 포커싱 할 건지cols: 가로 영역 크기 선언(글자 크기 단위)rows: 세로 영역 크기 선언(이것도 글자 크기 단위)disabled: 텍스트 영역을 비활성화 할 것인지form: 자신이 속하는<form>id 선언maxlength: 최대 글자 수 선언name: 이 텍스트 영역의 이름 - 전송 시 Key 로 됨.placeholder: 회색으로 보여지는 안내 문구 색상.readonly: 수정할 수 없고, 읽기만 가능하게 만들기required: 내부에 데이터가 있어야만 한다는 선언
<textarea> 기본 CSS 설정 :
없음
button
클릭 가능한 버튼을 정의한다.
위에서 <button> 사용을 지속적으로 보여주었는데,
<button> 에는 inline 요소를 넣을 수 있다.
<i>: 이탈릭체<b>: bold 글씨<strong>: 강조 == bold<br>: 줄넘김<img>: 이미지- 등등...
예시 :
<button type="button">button 타입 버튼</button
<br/>
<button><img src="https://tistory1.daumcdn.net/tistory/6142901/attach/eaf30c1affbe45adb0179071560647bc">실제 표현 결과 :
<button> 내부 속성들 :
autofocus: 페이지 로딩 시 자동으로 포커싱disabled: 버튼 비활성화 (클릭 못함)form: 해당되는 폼 idname: 버튼의 이름type:button,reset,submit중 하나의 타입value: 버튼의 초기값을 지정
버튼은 어떻게 보면 단일 클릭 개체로서 스타일링을 많이 하게 되는 개체인 것 같다.
사용자의 편의를 위해 그림자를 넣을 수도 있으며, 마우스 올려졌을 때, 클릭 시, 완료 시 등등
여러 이벤트에 따라 스타일링을 다르게 하여 피드백을 줄 수도 있다.
<button> 기본 CSS 설정 :
없음
select
Drop-Down (드롭다운) 리스트를 정의한다.
드롭다운 리스트란, 내부에 여러 선택 요소를 가지고 있지만,
처음 보이기에는 하나의 요소만 표출되어 있고, "v" 라는 표식을 가지고 있다.
이 태그를 클릭하면, 내부에 가지고 있는 태그, 혹은 선택 정보들이 펼쳐진다.
이 태그 또한, <form> 과 정말 많은 연관관계가 있다.
먼저, 예시와 구현에 들어가기 전에 알아야 할 것이 있다고 생각한다.
<select>는<form>내부에서 사용되는 편이다.<select>는 내부에<option>태그들을 가지고 있다.- 이러한
<option>들로 드롭다운 엘리먼트들을 생성할 수 있다. - 실제 정보 Submit 실행 시,
select의name이 Key 로, 선택된options의value속성이 Value 로 넘어간다. - EX - GET :
...?<select.name>=<options.value>
POST :{select.name : options.value}
티스토리에서는 구현에 제약이 있다.
이 때문에, 실제 사용 예시와, 실제 표현 결과를 위한 코드로 나누어 보여줄 것이다.
문서 예시 :
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br /><br />
<input type="submit" value="Submit" />
</form>블로그 표현 예시 :
<form>
<label>
당신은 어떤 언어를 주로 사용하십니까? :
<select name="cars" id="test-select-1" style="background:#333">
<option value="c">C 언어</option>
<option value="c++">C++ 언어</option>
<option value="java">java 언어</option>
<option value="js">JavaScript</option>
<option value="c#">C#</option>
<option value="rust">Rust</option>
<option value="go">Golang</option>
<option value="asm">Assembly</option>
</select>
</label>
</form>
<button onclick="getOption()" value="Submit" />
<div id="select-result-1"></div>
<script>
const container = document.getElementById("select-result-1");
function getOption() {
const selectDOM = document.getElementById("test-select-1");
const currVal = selectDOM.value;
container.innerHTML = `
<p> 당신이 선택한 언어는 ${currVal} 입니다.</p>
`;
}
</script>실제 표현 결과 :
<select> 해당 속성들 :
autofocus: 페이지 로드 후 포커싱을 가져야 하는지disabled: 드롭 다운을 비활성화 할 지 지정form: 드롭 다운이 속한 form id 지정multiple: 한 번에 여러 선택지를 지정할 수 있게 만들어줌.name: 드롭다운 리스트의 이름을 지정required: 유저가 form 을 제출하기 전에, 반드시 선택되어야 함을 의미.size: 드롭다운 리스트에서 보여 질 수 있는 선택지의 개수를 정의
<select> 기본 CSS 설정 :
없음
optgroup
위에서 언급한 select 태그 내부에 들어가는 option 태그의 그룹을 정의
위에서는 예시로 어떤 언어롤 주로 사용하냐고 했지만,
어떤 프레임워크, 라이브러리를 사용하냐고 묻는다면, 이것은 언어 자체가 하나의 그룹명이 되어야 한다.
예시를 보면 이해가 된다.
예시 :
<form>
<label>
당신이 선호하거나, 현재 사용하는 프레임워크, 라이브러리를 선택 해 주세요. <br/><br/>
<select id="optgroup-test-1">
<optgroup label="Java">
<option value="tomcat">Tomcat</option>
<option value="spring">Spring</option>
</optgroup>
<optgroup label="ECMAScript">
<option value="express">Express</option>
<option value="react">React</option>
<option value="nestjs">NestJS</option>
</optgroup>
<optgroup label="Python">
<option value="django">DJango</option>
</optgroup>
</select>
</label> <br/> <br/>
<input type="button" onclick="optgroupFunc()" value="Submit"></input>
</form>
<div id="optgroup-result-1"></div>
<script>
const selectDOM = document.getElementById("optgroup-test-1");
const container = document.getElementById("optgroup-result-1");
function optgroupFunc() {
const framework = selectDOM.value;
container.innerHTML = `
<p> 서버에 당신의 선호 프레임워크가 전송되었습니다 : <strong>${framework}</strong> </p>
`
}
</script>실제 표현 결과 :
제출 버튼을 클릭 해 보면, 내가 모킹 해 놓은 결과를 볼 수 있다.
<optgroup> 기본 CSS 설정 :
없음
option
드롭다운 리스트에서의 선택지를 정의한다.
위에서 연관된 <select>, <optgroup> 을 사용 해 보면서, 이 태그를 사용했다.
그런데, 상위 태그로 <datalist> 라는 태그를 사용할 수도 있었다.
예시 :
<input list="browsers" />
<datalist id="browsers">
<option value="크롬" />
<option value="엣지" />
<option value="파이어폭스" />
<option value="오페라" />
</datalist>실제 표현 결과 :
보다시피, <option> 태그는 단순한 인풋 태그에도, 사용자의 입력을 도와주는 역할을 해 준다.
<option> 속성들 :
disabled: 비활성화 되어야 할 선택지라는 것을 지정label: 옵션 텍스트를 의미하는 더 짧은 레이블을 지정selected: 페이지가 로딩 될 때 미리 선택되어져야 할 선택지 지정value: 서버로 보내져야 할 값을 지정
<option> 기본 CSS 설정 :
없음
label
input 요소에 대한 레이블을 정의한다.
말 그대로, <input> 에도 포커싱을 줄 수 있는 태그이기도 하지만,
<select> 나, <textarea> 와 같은 인풋 요소의 태그에도 포커싱 혹은 유도를 수행하기도 한다.
레이블 안에 input 관련 태그들을 넣어서 포커싱, 유도를 수행 할 수 있기도 한데,
특정 인풋 태그에 id 요소가 있다면, <label for="담당하는 인풋 태그의 id">
로 지정 할 수도 있다.
예시 :
<form>
<label> 레이블 안에 Input 넣기 : <input /> </label>
<label for="test-input-1">레이블과 Input 나눠서 작성하기</label>
<input id="test-input-1" />
</form>실제 표현 결과 :
한 번 글씨를 클릭 해 보면, <input> dp 포커싱이 되는 것을 볼 수 있다.
<label> 속성들 :
for: 어떤 인풋 태그 id 에 대한 레이블인지.form: 자신이 현재 속한formid 를 지정.
<label> 기본 CSS 설정 :
label {
cursor: default;
}fieldset
form 내부에서 연관된 엘리먼트들을 그룹화한다.
실제로 진행하게 되는 프로젝트에서, form 태그는 내부에 많은 인풋 요소들을 가지게 된다.
이 때, 인풋 요소들이 연관성을 가져서, 다른 데이터셋을 받거나, 스타일링 될 수도 있다.
이 때, <fieldset> 과 관련된 태그가 <legend> 인데, 이 태그는 필드셋의 제목과 같은 역할을 수행하기도 한다.
예시 :
<form>
<fieldset>
<legend>이름 입력 칸</legend>
<label>
당신의 성 : <input id="fdset-input-fname" />
</label> <br/><br/>
<label>
* 당신의 이름 : <input id="fdset-input-lname" required/>
</label>
</fieldset> <br/>
<fieldset>
<legend>연락처 입력 칸</legend>
<label>
* 이메일 : <input id="fdset-input-email" placeholder="example@example.com" required/>
</label><br/><br/>
<label>
핸드폰 : <input id="fdset-input-phone" placeholder="010-1234-5678"/>
</label>
</fieldset> <br/>
<fieldset>
<legend>선호 프로그램 언어 선택</legend>
<label> * 당신이 선호하는 프로그래밍 언어를 선택 해 주세요. <br/><br/>
<select id="fdset-select-language" required>
<optgroup label="저 수준 언어">
<option value="C">C 언어</option>
<option value="C++">C++ 언어</option>
</optgroup>
<optgroup label="중간 수준 언어">
<option value="Java">Java 언어</option>
<option value="C#">C# 언어</option>
</optgroup>
<optgroup label="높은 수준 언어">
<option value="Python">Python 언어</option>
<option value="JavaScript">JavaScript 언어</option>
</optgroup>
</select>
</label>
</fieldset> <br/>
<input type="button" onclick="fdsetFunc()" value="서버에 제출"></input>
</form>
<div id="fdset-result-1"></div>
<!-- 블로그에서 form 제출 기능을 막아놔서 Mocking 하는 것 -->
<script>
const fnameDOM = document.getElementById("fdset-input-fname");
const lnameDOM = document.getElementById("fdset-input-lname");
const emailDOM = document.getElementById("fdset-input-email");
const phoneDOM = document.getElementById("fdset-input-phone");
const pLanDOM = document.getElementById("fdset-select-language");
function fdsetFunc() {
const container = document.getElementById("fdset-result-1");
const fname = fnameDOM.value;
const lname = lnameDOM.value;
const email = emailDOM.value;
const phone = phoneDOM.value;
const programmingLan = pLanDOM.value;
let textHTML;
if(!lname) {
textHTML = "<p>이름은 꼭 있어야 합니다.</p>"
lnameDOM.focus();
} else if(!email) {
textHTML = "<p>연락처 중 이메일이 필요합니다.</p>"
emailDOM.focus();
} else if(!programmingLan) {
textHTML = "<p>프로그래밍 언어를 선택 해 주세요.</p>"
pLanDOM.focus();
} else {
textHTML = `
<p>서버에 전송된 데이터 형태는 이렇다 : </p>
<table>
<thead>
${fname ? "<th>성</th>" : ""}
<th>이름</th>
<th>이메일</th>
${phone ? "<th>핸드폰 번호</th>" : ""}
<th>선호 프로그래밍 언어</th>
</thead>
<tbody>
<tr>
${fname ? `<td>${fname}</td>` : ""}
<td>${lname}</td>
<td>${email}</td>
${phone ? `<td>${phone}</td>` : ""}
<td>${programmingLan}</td>
</tr>
</tbody>
</table>
`
container.innerHTML = textHTML;
}
container.innerHTML = textHTML;
}
</script>실제 표현 결과 :
<fieldset> 기본 CSS 설정 :
fieldset {
display: block;
margin-left: 2px;
margin-right: 2px;
padding-top: 0.35em;
padding-bottom: 0.35em;
padding-left: 0.75em;
padding-right: 0.75em;
border: 2px groove (internal value);
}legend
fieldset 요소에 대한 "캡션" 을 정의한다.
위에서 <legend> 라는 태그로, 인풋 요소에 대한 그룹핑을 <fieldset> 으로 수행하고,
이에 대한 간략한 제목은 <legend> 로 정의했었다.
그 결과가, 바로 위에 표시되고 있을 것이다.
예시 :
위에 보시면 됩니다.
실제 표현 결과 :
위에 잘 정리 해 놓았어요
<legend> 기본 CSS 설정 :
legend {
displayu: block;
padding-left: 2px;
padding-right: 2px;
border: none;
}datalist
입력 칸에 미리 정의된 선택지 리스트를 정의해준다.
우리가 인터넷을 할 때 정말 많은 도움을 받는 기능이라고 생각하는데,
내가 딱히 <datalist> 로 지정 해 놓지 않아도,
브라우저가 각 인풋 태그들을 자동으로 인식하여 어떤 정보를 자동으로 넣어줄지 선택할 수 있는
일종의 캐싱 기능을 제공한다.
그것은 브라우저가 자동으로 유저에게 제공 해 주는 기능이고,
웹 개발자는 아마 검색 기능에 이를 유용하게 사용할 수 있지 않을까 생각한다.
예를 들면, 우리가 구글이나 네이버에 "서울" 을 입력한다면, "서울" 키워드를 포함한
"서울 맛집", "서울 관광지", "서울 ..." 등등을 입력칸 바로 아래에 표시할 수 있을 것이다.
이번 예시는 어떻게 구현 할 거냐면,
이 블로그 글 내에 내가 작성한 <h3> 에 해당하는 모든 DOM 을 가져와서,
힌트를 줄 수 있게 만들 것이다.
예시 :
<button onclick="loadAllH3()">이 페이지의 모든 태그 리스트 가져오기</button>
<br />
<label>
<input id="datalist-input" list="all-h3" />
</label>
<br />
<br />
<button onclick="datalistFunc()">이동하기</button>
<datalist id="all-h3"> </datalist>
<script>
const inputDOM = document.getElementById("datalist-input");
const dataDOM = document.getElementById("all-h3");
let optionList = [];
function loadAllH3() {
const h3List = document.querySelectorAll("h3 > code");
optionList = h3List.map((codeNode) => {
return `<option value="${codeNode.innerText}"/>`;
});
let optionListHTML = "";
for (let i = 0; i < optionList.length; i++) {
optionListHTML += optionList[i];
}
dataDOM.innerHTML = optionListHTML;
}
function datalistFunc() {
const result = inputDOM.value;
const resultDOM = optionList.find((node) => {
return node.innerText == result;
});
if (resultDOM) {
resultDOM.scrollIntoView({ behavior: "smooth", block: "start" });
}
}
</script>실제 표현 결과 :
<datalist> 기본 CSS 설정 :
datalist {
display: none;
}output
계산의 결과를 정의한다.
<form> 태그 내부에서 JS 없이 계산하기 위한 일종의 태그인데,
개인적으로 태그를 사용한 방법론보다는, 단편적으로 <script> 를 넣어 해결하는 것이
훨씬 더 가독성과 확장성이 좋다고 생각한다.
따라서, 이는 W3Schools 의 예제를 가져오겠다.
예시 :
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50" />
+<input type="number" id="b" value="25" /> =<output
name="x"
for="a b"
></output>
</form>실제 표현 결과 :
<output> 기본 CSS 설정 :
output {
display: inline;
}Category - Frames (프레임)
HTML도 버전이 업그레이드 되면서 다양한 태그의 역할이 합쳐지거나 없어졌는데,
이 카테고리의 "frame" 영역에서는, <iframe> 하나밖에 존재하지 않는다.
iframe
내부 프레임을 정의한다.
즉, 현재의 웹 사이트에, 또 다른 사이트를 넣는다.
이 때, <iframe> 에는 다시 html 태그가 들어갈 수 있으며,
아니면, <iframe> 전용의 src 속성으로 페이지를 정의 할 수 있다.
그런데, 요즘은 보안 정책으로 인해, 타사의 사이트를 맘대로 넣기가 굉장히 어렵다.
따라서, 나는 내 블로그 글 페이지 URL 을 기반으로 src 를 작성 할 것이다.
예시 :
<iframe
id="iframe-dom-1"
src="https://codecreature.tistory.com/175"
style="width : 70%; height : 10rem; border: 2px solid #444;"
></iframe>
<br />
<br />
<button value="iframe 화면 조작하기" onclick="iframeFunc()" /> <br /><br />
<button value="다시 블로그 프레임으로 보기" onclick="iframeReturnFunc()" />
<br />
<script>
const iframeDOM = document.getElementById("iframe-dom-1");
function iframeFunc() {
const newFrameHTML = `
<!DOCTYPE html>
<html>
<head>
<title>새로운 프레임 HTML</title>
</head>
<body>
<p>내부 JS 로 프레임의 내용이 바뀌었습니다.</p>
</body>
</html>
`;
iframeDOM.innerHTML = newFrameHTML;
}
</script>실제 표현 결과 :
iframe 태그에 접근하기 위한 2 가지 방법론이 존재하는데,
그 중 나는 iframe 의 속성인 srcdoc 을 수정하는 것으로 조작했다.
그리고, iframe 은 페이지 내부에 별도의 또 다른 페이지를 삽입하는 태그이기 때문에,
여러 보안 요소, 혹은 iframe 을 포함하는 페이지와의 통신을 위해서 여러 특별 속성이 존재한다.
해당 속성들은 여기서 확인 하길 바란다.
<iframe> 기본 CSS 설정 :
iframe:focus {
outline : none;
}
iframe[seamless] {
display : block;
}이 글을 작성하며 배운 것.
이번에는 이 글을 읽어주는 독자들이 잘 이해 할 수 있도록,
제한된 기능들을 Mocking 하여 구현했다.
특히, 실제 웹 <form> 전송 환경이 아니라,
내부의 엘리먼트들의 id 를 추출하여 직접 값을 이용하다 보니,
바닐라 자바스크립트로 어떻게 DOM 을 다뤄야 하는지 좀 더 잘 이해하게 되었다.
그리고, 블로그 글은 #article 이라는 id 를 가진 블록 내부에
나의 마크다운이 파싱되어 HTML 로 표현되는데,
블로그가 내 사이트의 보안과 관련된 안전을 위해 여러가지 기능들을 차단 해 놓았다는 것을 알게 되었다.
(이것이 내가 기능들을 직접 Mocking 한 이유.)
특히, 이번에 배운 태그 중에서는 <datalist> 가 나중에 유용하게 사용할 것 같다는 생각을 했다.
특히, 나중에 검색 엔진을 개발 할 때, postgres 데이터베이스의 NoSQL 기능으로
검색 보조를 구현하고 싶다는 생각을 했다.
참고 사이트
W3Schools HTML Element Reference