"HTML related"에 해당되는 글 - 13건

◀ 이전 1 2 다음 ▶

Post

HTML Redirection

[ HTML related ] 2023. 1. 21. 12:59

HTML Redirection

①구글 홈페이지로 2초 뒤에 자동 리다이렉트

HEAD

<meta http-equiv="refresh" content="2; url=http://www.google.co.kr">

 

 

②디렉토리내 html 폴더로 곧바로 자동 리다이렉트. 그 안에 위치한 index.html 문서가 기동됨

HEAD

<meta http-equiv="refresh" content="0; url=html" />

 

 

 

 

 

 

 

 

'HTML related' 카테고리의 다른 글

HTML Examples Favicon Setting  (0) 2023.01.21
HTML Dataset  (0) 2023.01.19
HTML Open Graph  (0) 2023.01.19
HTML Examples Dataset  (0) 2023.01.19
HTML Examples Form#Others  (0) 2023.01.19

Post

HTML Examples Favicon Setting

[ HTML related ] 2023. 1. 21. 07:36

파비콘 설정

HTML

    <link rel="shortcut icon" href="../images/icon.png" type="image/x-icon" />

head부의 title 바로 아래에 link favicon으로 파비콘을 설정

 

ON BROWSER

'HTML related' 카테고리의 다른 글

HTML Redirection  (0) 2023.01.21
HTML Dataset  (0) 2023.01.19
HTML Open Graph  (0) 2023.01.19
HTML Examples Dataset  (0) 2023.01.19
HTML Examples Form#Others  (0) 2023.01.19

Post

HTML Dataset

[ HTML related ] 2023. 1. 19. 13:24

HTML

    <div id="product" data-min="100" data-max="150" data-itemtype="electronics">
      컴퓨터
    </div>

 

 

JS

let item = document.querySelector("#product");
console.log(item.dataset.min);
console.log(item.dataset.max);
console.log(item.dataset.itemtype);
console.log(item.getAttribute("data-min")); // 데이터셋 미지원 브라우저에서는 getAttribute()로 접근해야 함
console.log(item.textContent);

 

 

ON BROWSER

'HTML related' 카테고리의 다른 글

HTML Redirection  (0) 2023.01.21
HTML Examples Favicon Setting  (0) 2023.01.21
HTML Open Graph  (0) 2023.01.19
HTML Examples Dataset  (0) 2023.01.19
HTML Examples Form#Others  (0) 2023.01.19

Post

HTML Open Graph

[ HTML related ] 2023. 1. 19. 13:05
    <!-- 필수 -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://example.com/page.html" />
    <meta property="og:title" content="Content Title" />
    <meta property="og:image" content="https://example.com/image.jpg" />
    <meta property="og:description" content="Description Here" />
    <meta property="og:site_name" content="Site Name" />
    <meta property="og:locale" content="en_US" />

    <!-- 선택  -->
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />

 

 

'HTML related' 카테고리의 다른 글

HTML Examples Favicon Setting  (0) 2023.01.21
HTML Dataset  (0) 2023.01.19
HTML Examples Dataset  (0) 2023.01.19
HTML Examples Form#Others  (0) 2023.01.19
HTML Examples Form#Select  (0) 2023.01.19

Post

HTML Examples Dataset

[ HTML related ] 2023. 1. 19. 06:08

HTML

      <ul>
        <li id="list01">vision</li>
        <li id="list02">leader ship</li>
        <li id="list03">partners</li>
        <li id="list04" data-reason="black">history</li>
        <li id="list05">certificates</li>
      </ul>

 

 

CSS

#list04[data-reason="black"] {
  display: none;
}

 

 

JS

const why = document.getElementById(`list04`);
console.log(why.dataset.reason);

 

 

ON BROWSER

'HTML related' 카테고리의 다른 글

HTML Dataset  (0) 2023.01.19
HTML Open Graph  (0) 2023.01.19
HTML Examples Form#Others  (0) 2023.01.19
HTML Examples Form#Select  (0) 2023.01.19
HTML Examples Form#Checkbox  (0) 2023.01.19

Post

HTML Examples Form#Others

[ HTML related ] 2023. 1. 19. 05:28

HTML

<div>
  <textarea name="contents" id="" cols="30" rows="10" placeholder="글을 입력하세요"></textarea>
  <input type="email" placeholder="이메일을 입력하세요." name="email"></div>
  <div><input type="date" placeholder="날짜를 입력하세요." name="date"></div>
  <button type="submit">확인</button>
  <button type="reset">취소</button>
</div>

일반 text는 한줄 밖에 못쓰지만, textarea는 여러 줄을 많이 쓸 수 있다.
type에 email을 입력하면 email의 규칙(@)에 맞춰서 입력하게 할 수 있다. 그 밖에도 여러 정규 표현식이 있다.
type에 date를 입력하면 날짜 입력창이 뜨는데 이걸 datepicker라고 한다.

 

 

ON BROWSER

'HTML related' 카테고리의 다른 글

HTML Open Graph  (0) 2023.01.19
HTML Examples Dataset  (0) 2023.01.19
HTML Examples Form#Select  (0) 2023.01.19
HTML Examples Form#Checkbox  (0) 2023.01.19
HTML Examples Form#ID | Password Input  (0) 2023.01.19

Post

HTML Examples Form#Select

[ HTML related ] 2023. 1. 19. 05:26

HTML

<div>
  <select name="birth" id="">
    <option value="1980">1980</option>
    <option value="1981">1981</option>
    <option value="1982">1982</option>
    <option value="1983">1983</option>
    <option value="1984">1984</option>
    <option value="1985">1985</option>
  </select>
</div>

select태그 안에는 반드시 option태그만이 안에 들어갈 수 있다.

 

 

ON BROWSER

'HTML related' 카테고리의 다른 글

HTML Examples Dataset  (0) 2023.01.19
HTML Examples Form#Others  (0) 2023.01.19
HTML Examples Form#Checkbox  (0) 2023.01.19
HTML Examples Form#ID | Password Input  (0) 2023.01.19
HTML Examples Table#Style  (0) 2023.01.19

Post

HTML Examples Form#Checkbox

[ HTML related ] 2023. 1. 19. 05:23

HTML

<div>
  <label>영화<input type="checkbox" name="interest" value="영화" /></label>
  <label>독서<input type="checkbox" name="interest" value="독서" /></label>
  <label>바둑<input type="checkbox" name="interest" value="바둑" /></label>
</div>
<div>
  <p>성별을 입력하세요</p>
  <label>남자<input type="radio" name="gender" value="male" checked /></label>
  <label>여자<input type="radio" name="gender" value="female" /></label>
</div>

하나만 선택해야 할 때는 radio를 쓰고, 다중 선택 가능할 때는 checkbox를 쓴다.
항목이 여러개로 많을 때는 label로 묶으면 편하다. 단 for를 지워야 한다.
checked를 쓰면 radio나 checkbox의 기본 값으로 선택하게 할 수 있다.

 

 

ON BROWSER

 

'HTML related' 카테고리의 다른 글

HTML Examples Form#Others  (0) 2023.01.19
HTML Examples Form#Select  (0) 2023.01.19
HTML Examples Form#ID | Password Input  (0) 2023.01.19
HTML Examples Table#Style  (0) 2023.01.19
HTML Form Related Tag List  (0) 2023.01.18

Post

HTML Examples Form#ID | Password Input

[ HTML related ] 2023. 1. 19. 05:19

HTML

<form action="">
  <div>
    <label for="userID">아이디</label>
    <input type="text" name="id" id="userID" placeholder="이름을 쓰세요." />
  </div>
  <div>
    <label for="userPWD">비밀번호</label>
    <input
      type="password"
      name="pwd"
      id="userPWD"
      placeholder="패스워드를 입력하세요."
      required                        
    />                                  <!-- required를 넣어주면 비어 있으면 벗어날 수 없다.-->
  </div>
  <button type="submit">확인</button>
  <button type="reset">취소</button>    <!-- 취소 버튼의 경우 type에 리셋 설정을 해준다. -->
  <input type="button" value="확인" />  <!-- 인풋 타입 버튼도 버튼을 만들 수 있지만 텍스트를 value안에 적어야만 한다. -->
</form>
 

 input type에서 기본값을 설정해 주기 위해 value도 쓰일 수 있으나, value값은 서버에 전송되는 반면 placeholder값은 서버에 전송되지 않는다.

 

 

ON BROWSER

 

 

'HTML related' 카테고리의 다른 글

HTML Examples Form#Select  (0) 2023.01.19
HTML Examples Form#Checkbox  (0) 2023.01.19
HTML Examples Table#Style  (0) 2023.01.19
HTML Form Related Tag List  (0) 2023.01.18
HTML Semantic Tag List  (0) 2023.01.18

Post

HTML Examples Table#Style

[ HTML related ] 2023. 1. 19. 05:08

HTML

<table border="1" width="1200px">
  <colgroup>
    <col style="width: 10%" />
    <col style="width: 22.5%" />
    <col style="width: 22.5%" />
    <col style="width: 22.5%" />
    <col style="width: 22.5%" />
  </colgroup>
  <tbody>
    <tr>
      <th rowspan="2">학력사항</th>
      <th>재학기간</th>
      <th>학교명</th>
      <th>전공 및 성적</th>
      <th>소재지</th>
    </tr>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </tbody>
</table>

 

 

ON BROWSER

'HTML related' 카테고리의 다른 글

HTML Examples Form#Checkbox  (0) 2023.01.19
HTML Examples Form#ID | Password Input  (0) 2023.01.19
HTML Form Related Tag List  (0) 2023.01.18
HTML Semantic Tag List  (0) 2023.01.18
HTML Basic Tag List  (0) 2023.01.18
▲ top
▲ top

티스토리툴바