Emmet

 Emmet은 조금 더 적은 손길을 거쳐 효율적으로 HTML 코드를 작성하게 해주는 플러그인이다. 따고 Extension에서 설치하지 않아도 요즘 vscode에는 기본적으로 내장되어 있다. 윈도우에서는 기본적으로 tab키를 사용한다.

 

 이러한 Emmet은 대량의, 그리고 반복적인 HTML 코드를 작성할 때 좀 더 빠르게 작성할 수 있도록 도와준다.

 


 

 HTML 파일을 만든 후 !만 친 다음에 tab키를 누르면 밑의 코드가 알아서 만들어진다.

<!-- ! -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

 

    <!-- div -->
    <div></div>

    <!-- .class -->
    <div class="class"></div>

    <!-- .id -->
    <div class="id"></div>

    <!-- div>ul>li -->
    <div>
        <ul>
            <li></li>
        </ul>
    </div>

    <!-- div>ul+ol -->
    <div>
        <ul></ul>
        <ol></ol>
    </div>

    <!-- div>ol>li*3 -->
    <div>
        <ol>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>

    <!-- div>ul>li^ol -->
    <div>
        <ul>
            <li></li>
        </ul>
        <ol></ol>
    </div>

    <!-- div>ul>li^^span -->
    <div>
        <ul>
            <li></li>
        </ul>
    </div>
    <span></span>

    <!-- div>(header>ul>(li>a)*2)+(footer>p) -->
    <div>
        <header>
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </header>
        <footer>
            <p></p>
        </footer>
    </div>

    <!-- p{hello} -->
    <p>hello</p>

    <!-- p.class${item$}*3 -->
    <p class="class1">item1</p>
    <p class="class2">item2</p>
    <p class="class3">item3</p>

    <!-- p>lorem -->
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita fugit tempore atque unde! Repudiandae perspiciatis magnam voluptas? Quisquam ipsum, quaerat distinctio est veritatis voluptatum quae omnis illo culpa illum expedita!</p>

    <!-- p>lorem3 -->
    <p>Lorem, ipsum dolor.</p>

 단순히 div, .class, #id와 같이 입력한 후 tab키를 눌러서 간단하게 태그를 만들 수 있다. 그리고 >와 +를 통해 부모자식형제 구조를 형성할 수 있고 *를 통해 반복되는 태그를 여러 개 형성할 수도 있다. ^를 통해서는 한 단계 위의 부모로 올라간다. ()을 통해 묶어서 태그를 형성할 수도 있다.

 

 {}로는 text로 어떤 것이 올지 적어줄 수 있고 $를 통해서 반복적인 숫자를 적어줄 수도 있다. 그리고 더미용 텍스트가 필요할 때는 lorem을 사용하면 되고 뒤에 숫자를 붙여서 더미용 텍스트의 단어를 조절할 수 있다.

'프로그래밍 > HTML' 카테고리의 다른 글

Data Attribute  (0) 2022.03.07
Semantic Markup, 시멘틱 구조  (0) 2021.11.07

배웠으면 적용을 해보는 것이 지식을 몸에 베게하는 가장 좋은 습관인 것 같다. Step 1의 마지막 내용으로 Google Clone이 있는데, Google 홈페이지가 Naver 처럼 복잡하지 않고 간단하다보니 비교적 배운 지식을 써먹기 좋을 것 같다.

 

일단 틀만 잡아보았다.

조금 어거지인 면도 있는 것 같은데 일단 시멘틱 구조를 최대한 적용해보고자 해당 사진처럼 구조를 잡았다. ㅎㅎㅎ

 

  • header - HTML
    <header>
      <div class="icon">
        <a href="#" class="icons gmail">Gmail</a>
        <a href="#" class="icons image">이미지</a>
        <a href="#" class="icons"
          ><img src="application.png" id="application"
        /></a>
        <button class="icons user">Jun</button>
      </div>
    </header>

 

gmail, icon, application, user를 '같이' 오른쪽 상단에 나란히 배치하기 위해 class="icon"의 div 태그에 포함시켰다. application은 flaticon에서 따왔다.

  •  header - CSS
      .icon {
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;
        margin-right: 15px;
      }

      .icons {
        margin: 10px;
      }

      .gmail,
      .image {
        font-size: 13px;
        text-decoration: none;
        color: black;
      }

      .gmail:hover,
      .image:hover {
        text-decoration: underline;
      }

      #application {
        width: 20px;
      }

      .user {
        border: 1px solid white;
        border-radius: 100px;
        background-color: red;
        color: white;
        height: 35px;
        width: 35px;
        margin-top: 5px;
      }

 

 

class="icon"인 div 태그에 flex를 부여하고 justify-content: flex-end;를 통해 오른쪽 상단에 위치하도록 하였다. class="icons"인 div 태그들에게는 margin: 10px;를 줘서 서로 일정 간격 떨어지게 해주었다. gmail과 image는 링크 태그이지만 마우스를 갖다대지 않은 상태에선 밑줄이 안보기이게 text-decoration: none;으로 해주었다. 마우스를 갖다댔을 때는 밑줄이 생기기에 :hover를 이용하여 text-decoration: underline;을 부여해주었다.

 

개인적으로 user 모양(Jun의 글자가 들어간 빨간색 원 모양 icon)을 맞추는 것이 가장 어려웠다. 원의 특성상 지름이 어디서든 같기 때문에 height와 width를 똑같이 35px로 맞추고 border-radius: 100px;로 모서리를 없애 원을 만들었다.

 

  • section - HTML
        <section>
          <article>
            <div class="google-logo">
              <img
                src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
              />
            </div>
            <div class="searching-bar">
              <i id="magnifier"><img src="magnifier.png" /></i>
              <input type="search" />
              <i id="keyboard"><img src="keyboard.png" /></i>
              <i id="microphone"><img src="microphone.png" /></i>
            </div>
            <div class="rest">
              <button>Google 검색</button>
              <button>I'm Feeling Lucky</button>
            </div>
            <div class="covid">
              <a href="#" style="text-decoration: none"
                >가까운 코로나19 선별진료소를 확인하세요</a
              >
            </div>
            <div class="language">
              Google 제공 서비스 :
              <a href="#" style="text-decoration: none">English</a>
            </div>
          </article>
        </section>​
     

class="searching-bar"인 div 태그 안에 돋보기, input(search type), 키보드, 마이크를 넣었다.

 

  • section - CSS
      .google-logo {
        margin-top: 240px;
        text-align: center;
      }

      .searching-bar {
        margin-top: 20px;
        text-align: center;
      }

      .searching-bar img {
        width: 20px;
      }

      .searching-bar input {
        border-radius: 45px;
        width: 550px;
        height: 40px;
      }

      #magnifier {
        position: relative;
        top: 5px;
        left: 40px;
      }

      #keyboard,
      #microphone {
        position: relative;
        top: 5px;
        right: 65px;
      }

      #keyboard {
        right: 70px;
      }

      .rest,
      .covid,
      .language {
        margin-top: 25px;
        text-align: center;
        font-size: 13px;
      }

      .rest {
        display: flex;
        justify-content: center;
      }

      .rest button {
        border: none;
        border-radius: 5px;
        height: 40px;
        margin: 5px;
      }

google-logo는 header와 240px 만큼의 상단 마진이 남게 해주어 차이를 주었고 text-align을 통해 중앙에 배치하였다. searching-bar 또한 text-align을 통해 중앙에 배치시켰고, searching-bar img { width: 20px; }를 통해 class="searching-bar"인 div 태그 안의 img 태그들의 크기는 20px로 통일시켰다.(돋보기, 키보드, 마이크의 크기가 20px이 된 셈이다) 그리고 돋보기와 키보드, 마이크에 position: relative;를 부여해 searching-bar 안에 들어오도록 조정했다. 이 때 이 3개의 이미지는 부모 태그인 <div class="searching-bar">를 기준으로 위치가 정해진다.

 

  • footer - HTML
    <footer>
      <div class="country">대한민국</div>
      <div class="realfooters">
        <div class="realfooter">
          <button>Google 정보</button>
          <button>광고</button>
          <button>비즈니스</button>
          <button>검색의 원리</button>
        </div>
        <div class="realfooter2">
          <button>개인정보처리방침</button>
          <button>약관</button>
          <button>설정</button>
        </div>
      </div>
    </footer>

Google 정보, 광고, 비즈니스, 검색의 원리 이 4개와 개인정보처리방침, 약관, 설정은 이 3개는 각각 오른쪽, 왼쪽에 배치되기 때문에 나누어서 div 태그에 담아주었다.(realfooter : 4개, realfooter2 : 3개)

 

  • footer - CSS
      footer {
        background-color: rgb(241, 238, 238);
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
      }

      .country {
        border-bottom: 1px solid rgb(214, 211, 211);
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 15px;
      }

      .realfooters {
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 10px;
        display: flex;
      }

      .realfooters button {
        border: none;
      }

      .realfooters button:hover {
        text-decoration: underline;
      }

      .realfooter2 {
        position: absolute;
        right: 15px;
      }

footer가 화면에서 맨 밑에 나오도록 position: fixed;를 부여하고 bottom: 0;와 left: 0;을 부여했다. 3개의 항목으로 이루어진 realfooter2는 display: flex;가 부여되어 있기 때문에 realfooter와 나란히 배치되고 position: absolute와 right: 15px 를 통해 오른쪽에 배치된다.

 

완성본!

생각보다 비슷하게 만든 것 같다!

 

하지만 해결하지 못한 문제점도 있다.

보다시피 크기가 줄어들면 searching-bar 안의 이미지들이 엇나가기 시작한다... CSS를 좀 더 이용해보고 언젠가 다시 해보아야겠다.

 

그래도 Google 홈페이지를 Clone하면서 flex, margin, position에 대해 더 자세히 검색하면서 익숙해질 수 있었다.

 

참고 출처 : https://velog.io/@shanells/Google-clone-coding

'프로그래밍 > 바닐라코딩_Prep Guide' 카테고리의 다른 글

Step 2. JavaScript(2)  (0) 2021.11.25
Step 2. JavaScript(1)  (0) 2021.11.24
Step 1. CSS  (0) 2021.11.02
Step 1. HTML  (0) 2021.10.29
준비를 위한 준비  (0) 2021.10.28

 Semantic 구조란?

semantic : 의미의, 의미론의, 의미론적인

시멘틱 구조란, HTML 문서에서 의미 있는 구조에 의미가 맞는 태그를 사용하는 것을 말한다.

HTML5 시멘틱 구조

시멘틱 구조에서는 위와 같이 웹 페이지에서 가장 윗부분에 올만한 내용들, 이를테면 웹사이트 로고나 로그인 폼 등을 배치할 때 header 태그를 사용하고 header 답게 맨 위에 배치하게 된다. 문서에서 메뉴를 나타낼 때는 nav 태그를 사용할 것이고 여기에 목차나 리스트, 링크 등이 배치된다.

 

이렇듯 의미 있는 구조에 맞는 의미 있는 태그들을 사용하여 HTML 문서를 구성하는 것을 시멘틱 구조라 한다.

Naver 메인 화면을 보면 대략적으로 우리는 어디가 header이고 어디가 nav인지 감으로 알 수 있다. 하지만 컴퓨터라는 기계는 인간이 아니기 때문에 대략적으로 파악이 불가능하다. 구성 요소들이 그저 div 태그로 이루어져 있다면 효율적으로 데이터를 추출하기 어렵다는 것이다. 하지만 시멘틱 구조로 이루어져 있다면 각 정보들이 분류되어 데이터 추출이 용이해진다.

 

Tag Description
header 맨 윗부분으로 사이트 로고, 로그인, 언어 선택 등이 위치한다.
nav 문서에서 방향을 지시하는 곳으로 메뉴, 리스트 등이 위치한다.
aside 본문과 관련 없는 배너 광고 등이 위치한다.
section 여러 중심 내용을 감싸는 공간 ex) 네이버 뉴스에서 연예 섹션 혹은 스포츠 섹션 등등
article 직접적인 내용이 들어가는 곳으로 뉴스 기사 본문 내용 등이 위치한다.
footer 가장 밑 부분으로 주소, 연락처, 저작권 등의 내용이 위치한다.

시멘틱 태그는 모두 div 태그와 같은 기능을 수행한다. 하지만 검색 엔진이 웹 페이지를 파악하거나, 기계적인 동작이 더해질 때 시멘틱 구조로 이루어져 있다면 더욱 쉽게 이해하고 용이하게 이루어진다.

 

시멘틱 이전의 HTML 구조

    <div id="wrap">
      <div id="header">
        <h1>HTML</h1>
      </div>
      <div class="section">
        <div id="article">
          <h2>컨텐츠 1의 제목</h2>
          <p>컨텐츠 1의 내용</p>
        </div>
        <div id="article2">
          <h2>컨텐츠 2의 제목</h2>
          <p>컨텐츠 2의 내용</p>
        </div>
      </div>
      <div id="footer">
        <span>저작권, 연락처, 주소</span>
      </div>
    </div>

 

시멘틱 구조의 HTML

    <div id="wrap">
      <header>
        <h1>나는 제목</h1>
      </header>
      <nav>
        <ol>
          <li><a href="#">Menu 1</a></li>
          <li><a href="#">Menu 2</a></li>
          <li><a href="#">Menu 3</a></li>
        </ol>
      </nav>
      <section>
        <article>
          <h2>컨텐츠 1의 제목</h2>
          <p>컨텐츠 1의 내용</p>
        </article>
        <article>
          <h2>컨텐츠 2의 제목</h2>
          <p>컨텐츠 2의 내용</p>
        </article>
      </section>
      <footer><address>경기도 평택시</address></footer>
    </div>

위에서 표현한 것처럼, <div id="header">라고 표현하는 것보다 <header>로 헤더를 장식하는 것이 직관적이고 효율적이며 의미론적이다.

 

시멘틱 구조를 사용하는 것은 검색 엔진이 파악하는 데에 도움을 줄 뿐만 아니라 개발자들이 코드의 구조를 파악할 때 보다 용이하게 파악할 수 있다.

 

 

 

참고 출처 : https://snusang.tistory.com/4

참고 출처 : https://m.blog.naver.com/won_1020/221718728799

 

'프로그래밍 > HTML' 카테고리의 다른 글

Data Attribute  (0) 2022.03.07
Emmet  (0) 2022.03.06
  • HTML이란

Hypertext Markup Language의 줄임말로, 프로그래밍 언어가 아니며 '웹사이트'를 만드는 가장 기초가 되는 'Mark Up'언어이다. 특별한 기호나 표기를 사용해 글의 서식과 스타일을 정해주는 언어를 뜻한다.

 

마크업 언어가 무엇인지 사실 감이 잘 잡히지 않았었다. 몇 번 반복하다보니 감이 오는데, 함축적인 단어 표현을 통해 글의 구조, 내용, 스타일 등을 꾸밀 수 있게 해주는 언어를 말하는 것 같다.

 

바닐라코딩 사이트의 HTML 코드

생활코딩에서 HTML, CSS, Javascript도 들어보고 SW사관학교 정글 자료를 보면서 공부도 했었지만, 잘 만들어진 페이지의 코드를 보면 여전히 모르는 것이 많다.

 

  • 태그, Tag

태그란 '<'와 '>' 사이에 어떤 단어(태그)를 적는 것이다.

<br> br 태그는 줄바꿈을 실행시킨다.
<p> p 태그는 paragraph의 약자이다. 말 그대로 단락을 표현할 때 사용되는 태그이며 자동으로 줄바꿈이 실행된다.</p>

HTML Tag의 특징으로는 여는 태그와 닫는 태그가 있다는 것이다. 한 예시로, 제목을 나타낼 때 자주 쓰는 h1 태그가 있다.

<h1>바닐라코딩</h1>
개발자 도전기
<br>
hello world

이와 같이 <h1> 다음 </h1>을 적어 '바닐라코딩'부분만이 제목으로 사용되게 할 수 있다. 닫는 태그에는 '/'가 추가된다. 태그의 종류는 무수히 많다. 이걸 하나하나 공부해가며 외울 필요는 없고, 필요할 때 검색을 통하여 알아내면 된다. 혹은 https://developer.mozilla.org/ko/docs/Web/HTML/Element 모질라 사이트에서 검색하면 빠르게 찾아낼 수 있다.

 

  • 문서의 구조
<!DOCTYPE html>
<html lang="ko">
<head>
   <meta charset="UTF-8">
</head>
<body>
   <h1 id="profile">프로필</h1>
   안녕하세요
   <br>
   바닐라코딩을 준비하고 있는 사람입니다.
   <p>
   현재는 설비엔지니어로 일하고 있고, 개발자가 되기를 희망하고 있습니다.
   </p>
</body>
</html>

HTML의 구조는 대부분 위와 같이 html 태그 안에서 head와 body로 이루어진다.

 

   - html : 웹 브라우저에게 HTML 코드가 해당 태그 내부에 존재한다고 알려준다.

   - head : 외부 소스를 참조할 때 사용한다. 예로 jQuery나 Bootstrap, 구글 폰트를 따오는 코드가 head 태그 안으로 들어가게 된다. style 태그로 CSS가 들어가기도 하고 script 태그로 JavaScripr가 들어가기도 한다.

   - body : 웹 브라우저는 이 태그에 포함되어 있는 내용들을 화면에 보여준다. 페이지의 내용을 구성하는 부분이라고 보면 된다.

 

  • HTML에서 이미지 추가하기
<img src="https://techbullion.com/wp-content/uploads/2021/06/Hire-Web-Developer.jpg" alt="developer">

HTML에서 이미지는 말그대로 img 태그를 통해 구현할 수 있다. 이 때 src는 source의 약자이고 여기에 이미지의 주소나 파일 이름을 기입하면 된다. 여기서 src는 속성, attribute이다. 포함하고자 하는 이미지로의 경로를 지정할 때 사용된다. 그러므로 img 태그를 사용할 때 src는 필수이다.

 

alt는 alternative의 약자로, 이미지의 간단한 설명을 나타낼 때 사용된다. alt는 필수는 아니지만 네트워크 오류 혹은 콘텐츠 차단, 죽은 링크로 인해 이미지를 표현할 수 없을 때 alt 속성 값이 대신 나타나며 사용자에게 차단된 이미지가 어떤 것이었는지 암시해줄 수 있다.

 

  • HTML 링크
    <a href="https://www.vanillacoding.co"
      ><img
        src="https://techbullion.com/wp-content/uploads/2021/06/Hire-Web-Developer.jpg"
        alt="developer"
      />바닐라코딩 홈페이지</a
    >
    <br />

    <a href="mailto:tmdwns0570@naver.com">이메일 보내는 링크</a>
    <br />

    <a href="tel:114">전화를 거는 링크</a>
    <br />

    <a href="#profile">프로필로 가기</a>

링크는 우리가 원하는 공간(페이지)로 이동할 수 있게 해준다. a 태그를 이용하고 href 속성값에 따라 어떤 페이지로 갈지가 정해진다. a 태그는 '바닐라코딩 홈페이지'라는 글씨 뿐만 아니라 img 태그도 감쌀 수 있어, 사진에도 링크를 걸 수 있다.

 

또한, mailto: 혹은 tel:을 href에 기입해 클릭 시 이메일을 보내거나 전화를 걸 수 있다.

 

그리고 id 값을 기입하면 HTML 문서 내의 같은 id 값을 가진 곳으로 이동한다. 보통 id는 HTML 문서에서 1개만 지정되기 때문에 이동하는 곳이 중복되지 않는다. 예로, 내가 h1 태그에 id 값으로 profile을 부여했으면, 다른 태그에는 id 값으로 profile을 부여하지 않는 것이 원칙이다.

 

    <style>
      a[href^="https"]::before {
        content: "🔗 ";
      }

      a[href^="mailto"]::before {
        content: "📧 ";
      }

      a[href^="tel"]::before {
        content: "📞 ";
      }

      li {
        margin-bottom: 0.5rem;
      }
    </style>

위는 CSS인데, HTML 문서를 꾸며줄 때 사용되는 언어이다. a 태그의 href 속성값에 https, mailto, tel이 들어가면 각각에 해당되는 아이콘을 앞에 붙여줄 수 있다.

 

  • 절대경로와 상대경로

   - 절대경로 : 전체 인터넷을 기준으로 해당 자료의 위치 표현

   - 상대경로 : 같은 파일 시스템 구조 상의 위치 표현

 

사실 처음 듣는 개념이고 Prep Guide만으로는 이해가 안되어 검색을 해봤다.

 

절대경로란, 최초의 시작점으로 경유한 경로를 전부 기입하는 방식이다. 내가 만약 윈도우 OS의 바탕화면에 index.html 파일을 두었다고 가정하면, C:\Users\Administrator\Desktop\index.html이 절대경로가 되는 것이다. (이 때 Administrator는 UserID로, 각 사용자의 이름에 따라 달라질 것이다)

 

어떠한 OS든 이렇게 최상위의 경로, 즉 모든 경로를 기입한 절대경로로만 파일을 찾을 수 있다. 그렇다면 상대경로는 왜 생겼을 까.

 

상대경로는 이름처럼 상대적인 개념이 적용되는데, 항상 그 기준이 필요하다. C:\Users\Administrator\Desktop\index.html처럼 절대경로가 아니라, 만약 Desktop\index.html 혹은 index.html이라고 표현되어 있다면 해당 경로는 어디를 나타내는 것인가? 이는 기준 경로에 따라 결정된다. 만약 기준(비교 대상)이 C:\SSJ라면 두 경로는 C:\SSJ\Desktop\index.htmlC:\SSJ\index.html이 된다.

 

상대경로가 필요한 이유는, index.html의 경로가 항상 일정한 것이 아니고 바뀔 수도 있기 때문에, 절대경로만 존재한다면 매번 경로를 일일히 바꿔주어야 할 것이다. 크게 와닿진 않는다. 하지만 좀 더 학습하다가 절대경로와 상대경로를 쓰게 되는 시점이 오면 더 이해할 수 있을 것이다.

 

결론적으로 절대경로란 최상위 경로(디렉토리)가 반드시 포함된 경로이고, 상대경로는 현재 기준(현재 디렉토리, 비교대상)으로 작성된 경로를 의미한다.

 

 

절대경고와 상대경로 참고 출처 : https://mommoo.tistory.com/82

HTML 링크 관련 참고할만한 자료 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/a

'프로그래밍 > 바닐라코딩_Prep Guide' 카테고리의 다른 글

Step 2. JavaScript(1)  (0) 2021.11.24
Step 1. Google Clone  (0) 2021.11.14
Step 1. CSS  (0) 2021.11.02
준비를 위한 준비  (0) 2021.10.28
또다른 입구  (0) 2021.10.27
  • 실습환경 준비

코딩 에디터가 필요하다. 생활코딩 HTML 강의는 Atom을 쓰는데, 나는 이미 Visual Studio Code가 있고 거의 써보진 않았지만 이미 생활코딩 강의를 어느 정도 들어봤는데 VSC를 써도 별 문제가 없을 것 같다.

 

근데 생활코딩은 왜 Atom을 쓸까? 대부분이 VSC를 쓰지 않나?

Visual Studio Code vs Atom : https://ko.myservername.com/visual-studio-code-vs-atom

먼가 번역체로 쓰여져 있고 대부분 처음 듣는 말이 많아 솔직히 잘 모르겠다. 그냥 VSC가 더 빠르긴 하단다.

그리고 학부시절 C언어 강의를 들은 적이 있는데 이 때 Visual Studio를 사용했다. 조금 비슷해 보여서 VSC를 쓰겠다. 그나마 더 익숙하기도 하고 인터페이스가 나한테는 더 편하다!

 

 

  • 파일 열기

Chrome(Web Browser)에서 Crtl + O를 통해 현재 내 컴퓨터에 있는 파일을 불러올 수 있다.

 

 

  • 기본 문법 Tag
<strong>글자를 진하게 강조할 수 있다.</strong>
<u>글자에 밑줄을 그을 수 있다.</u>
<h1>h1~h6으로, 글자의 크기를 조절할 수 있다. h1이 가장 크다. 제목, 소제목과 같다고 보면 되고, 줄바꿈이 실행된다</h1>
<br>을 통해서 줄바꿈을 실행할 수 있다.
<p>이 태그는 문단을 나타내는 paragraph의 약자로, 말 그대로 문단을 나타내고 '<h1~6>'태그처럼 줄바꿈이 실행된다.</p>
<img src="#">#에 img의 주소를 넣으면 사진을 불러올 수 있다. 혹은 같은 디렉토리(폴더)안에 있다면 파일 이름을 적어도 사진을 불러올 수 있다.
<title>head 태그 안의 title 태그 안에 해당 페이지가 가졌으면 하는 원하는 제목을 넣어, 페이지의 이름을 정할 수 있다.</title>

Tag는 무언가를 지정할 때 쓰인다.

 

 

  • 부모-자식 구조
<div class="parent">
	<div class="child">
	부모(parent)의 속성이 바뀌면 자식(child)의 속성 또한 바뀌게 된다.
	HTML에서 div(parent) 안에 들어간 div(child)는 parent에 속해 있다고 보기 때문이다.
	</div>
</div>

 

 

  • 목록
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

ul 태그 안에 list를 배열하면 점으로 list들을 나열하게 된다.(이 또한 부모-자식 구조이다)

<ol>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ol>

반면 ol 태그 안에 list를 배열하면 숫자가 매겨지며 list들이 나열된다.

ol은 ordered, ul은 unordered의 약자라는 것을 알고 있으면 기억하기 수월하다.

 

 

  • 링크
<a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 specification">링크</a>

a 태그는 하이퍼링크를 걸어줄 때 사용된다. 여기서 href는 이동할 링크 주소이고, target="_blank"를 통해 새로운 창에서 링크가 뜨도록 할 수 있다. title="html5 specification"은 사용자가 마우스를 링크에 가져다 놓았을 때 Tool Tip이 뜨게 한다.

Tool Tip, 마우스가 안 보이는데 실제론 마우스를 갖다댔다.

 

 

  • Server & Client

출처 : 생활코딩 HTML WEB1-17 강의

Web Browser, 즉 Client(나라고 생각하자)가 Server에 index.html을 Request(요청)하면, Server가 저장해두고 있던 index.html을 Response(반응)한다.

 

그냥 내가 서버에 index html 보여줘!라고 하면 서버가 index.html을 보여주는 단순한 것이다.

 

생활코딩에서는 웹호스팅(아직 잘 모르는 단어이다)으로 github를 썼다. 같은 개념인지는 모르겠지만, SW 사관학교 정글을 준비한 적이 있는데 이 때는 AWS Instance와 Gabia를 사용했었다. 일단 생각나는 것을 그냥 적어봤는데, 나중에 더 배우고 나서 저 2개가 다른 것임을 알게 된다면 조금 쪽팔릴 것 같다 ㅎㅎㅎ!

 

또한 Apache와 Bitnami를 이용해 localhost로 서버를 운영해 내가 만든 페이지를 열 수 있다. 앞의 Ctrl + O로 HTML 파일을 열었을 때와 다른 점은, 서버가 이용됐다는 점이다. 비록 지금은 서버를 내 컴퓨터에 두는 기반으로 내가 만든 HTML 파일에 들어갔지만, 훗날 좀 더 배우면 거대한 서버 대여 서비스를 이용해 내가 만든 웹, 앱, 혹은 프로그램을 배포할 수 있을 거란 생각이 든다.

 

 

 

 

출처 : 생활코딩

'프로그래밍 > 생활코딩_WEBn 시리즈' 카테고리의 다른 글

CSS  (0) 2021.11.05

+ Recent posts