Notice
Recent Posts
Recent Comments
Link
«   2026/05   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Tags
more
Archives
Today
Total
관리 메뉴

無제

코린이를 위한 HTML <head> 코드 추천 본문

<tips>

코린이를 위한 HTML <head> 코드 추천

yo-u-loo 2026. 3. 26. 14:44

 

HTML <head> default code

https://codepen.io/lshjju/pen/xxXemMJ?editors=1100

 

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0">
  <meta name="keywords" content="jeon-jinuk">
  <meta name="description" content="jeon-jinuk">
  <meta name="author" content="jeon-jinuk">
  <title>jinuk-------</title>
  <link rel="stylesheet" href="style.css">
  <style type="text/css"></style>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="script.js"></script>
  <script type="text/javascript"></script>
</head>

<body>
  
  <article>
  
  <div>
    <p class="p-title">Primary title</p>
    <h1>Title step</h1>
    <h2>Title step</h2>
    <h3>Title step</h3>
    <h4>Title step</h4>
    <h5>Title step</h5>
    <h6>Title step</h6>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
      'Content here, content here', making it look like readable English.</p>
  </div>

  <div><button>Read more</button></div>
  

    
<div><a href="#" onclick="return false;">click</a></div>
    
<!--   <div><a id="noLink" href="/">click</a></div>
    <script>
document.getElementById("noLink").addEventListener("click", function(event){
  event.preventDefault()
});
</script> -->    
    
  <div><img src="https://images.unsplash.com/photo-1453372755486-254d0e724b38?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1952&q=80"></div>
    
  </article>

</body>

</html>

 

 

제미나이 추천

<head> 초기 세팅(Modern Reset) 코드

<head>
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>페이지 제목 (60자 이내 권장)</title>
  <meta name="description" content="페이지에 대한 간단한 요약 설명입니다. 검색 결과에 표시됩니다.">
  <meta name="author" content="작성자 이름 또는 회사명">
  
  <meta property="og:type" content="website">
  <meta property="og:title" content="공유될 제목">
  <meta property="og:description" content="공유될 설명문구">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:url" content="https://example.com">

  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="./css/style.css">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

 

💡 TIP 💡

테마 컬러 설정

모바일 브라우저(크롬, 사파리 등)의 상단 주소창 색상을 웹사이트 분위기에 맞게 바꿀 수 있는 코드.

<meta name="theme-color" content="#007bff">

 

'<tips>' 카테고리의 다른 글

모던 웹 폰트 베스트 10 레퍼런스  (0) 2026.03.27
네비게이션 메뉴는 <ul>와 <div>중 어떤 것을 사용해야 할까?  (0) 2026.03.27
미디어쿼리 세팅을 위해 statcounter.com 활용하기  (0) 2026.03.23
크롬 개발자 도구에서 미디어쿼리 확인하는 방법  (0) 2026.03.23
프론트엔드 개발자와 UI 디자이너 추천 사이트  (0) 2026.03.17
'<tips>' Related Articles more