유행어 이해하기

인터넷

인터넷은 컴퓨터의 글로벌 네트워크 일뿐입니다.

각 컴퓨터/라우터에는 집의 실제 주소처럼 고유하게 식별할 수 있는 IP 주소가 있습니다.

이러한 IP 주소는 ISP에서 할당합니다.

컴퓨터는 TCP/IP 프로토콜을 사용하여 서로 통신합니다.

HTTP는 TCP를 통해 실행됩니다. 브라우저(클라이언트)와 서버 간의 웹 트래픽(요청/응답) 처리를 담당합니다.

DNS는 IP 주소를 도메인 이름에 매핑하는 데 사용됩니다.

HTML

HTML은 웹 페이지에 콘텐츠를 만드는 데 사용되는 마크업 언어입니다.

HTML에는 스타일이 없으므로 CSS가 필요합니다.

HTML은 모든 웹 페이지의 기반이기 때문에 웹 사이트를 만드는 데 매우 중요합니다.

CSS

CSS는 스타일 언어입니다.

CSS는 웹 페이지의 레이아웃 스타일을 지정하는 데 사용됩니다.

HTML과 CSS로 무엇을 만들 수 있습니까?

정적 웹 사이트

모든 웹 사이트의 시각적 부분

HTML에 대한 심층 분석

메타 태그

페이지 콘텐츠를 설명하는 스니펫입니다. 그들은 head 태그에 기록됩니다. 웹 페이지 본문 어디에도 나타나지 않습니다.

제목, 단락 및 타이포그래피

<h1>Heading 1</h1>

<h1>에서 <h6>까지 6개의 제목이 있습니다.

페이지당 하나의 h1만 사용하는 것이 좋습니다. 이는 페이지의 전체 콘텐츠를 설명하므로 SEO에 도움이 됩니다. 예를 들어 블로그 게시물인 경우 블로그 제목은 h1 태그에 포함되어야 합니다.

링크 및 이미지

<a href="https://google.com" target="_blank"> External link </a>

다른 웹사이트로 링크할 때 새 창에서 링크를 여는 것이 좋습니다.

아래 이미지 표시 스니펫:

<img src="./illustrator.png" alt="Illustration of a Fox" width="450">

기울기

두 종류의 목록이 있습니다.

정렬되지 않은 목록

<ul>
  <li></li>
</ul>

정렬된 목록

<ol>
  <li></li>
</ol>

중첩 목록

<ul>
  <li>Shoes
    <ul>
      <li>Nike Air Max</li>
    </ul>
  </li>
</ul>

테이블

<table>

  <thead>
    <th>Email accounts</th>
  </thead>

  <tbody>
    <tr>
      <td>[email protected]</td>
    </tr>
  </tbody>

</table>

양식 및 입력

양식은 각각 HTML과 CSS로 표시하고 스타일을 지정할 수 있습니다. 그러나 양식을 처리하려면 백엔드에서 작동하는 프로그래밍 언어(예: PHP, Javascript 등)로 해당 기능을 코딩해야 합니다.

   <form action="someScript.php">
       <div>
           <label for="name">Name </label> <br>
           <input type="text" name="name" id="name" placeholder="John Doe">
       </div>

       <div>
           <label for="email">Email</label> <br>
           <input type="email" name="email" id="email">
       </div>

       <div>
           <label for="message">Message</label> <br>
           <textarea name="message" id="message" cols="50" rows="5"></textarea>
       </div>

       <div>
       <label for="sex">Sex</label>
       <select name="sex" id="sex">
           <option value="male">Male</option>
           <option value="female">Female</option>
           <option value="female" selected >Other</option>
       </select>
       </div>

       <div>
           <label for="age">Age</label> <br>
           <input type="number" name="age" id="age">
       </div>

       <div>
           <label for="birthdate">Birthdate</label> <br>
           <input type="date" name="birthdate" id="birthdate">
       </div>

       <div>
           <label for="membership">Membership</label>
           <input type="radio" name="membership" value="starter" id="membership">Starter
           <input type="radio" name="membership" value="grow" id="membership">Grow
           <input type="radio" name="membership" value="scale" id="membership" checked>Scale
       </div>

       <div>
        <label for="hobbies">Hobbies</label>
        <input type="checkbox" name="hobbies" value="skating" id="hobbies">Skating
        <input type="checkbox" name="hobbies" value="playing-the-violin" id="hobbies">Playing the violin
        <input type="checkbox" name="hobbies" value="workouts" id="hobbies" checked>Workouts
    </div>
    <input type="submit" value="Submit">
    <button type="reset">Reset  </button>
   </form>

블록 및 인라인 레벨 요소

인라인 요소는 해당 페이지의 요소 전체를 차지합니다. 다음 요소가 사용되지 않는 사용 가능한 공간을 차지하도록 허용합니다. (eg. <a>, <span>)
블록 수준 요소는 페이지의 전체 너비에 걸쳐 있으며 다음 요소를 새 줄로 나눕니다. 그 전에 인라인 요소가 있었는데, 새 줄로 분리되고 사용되지 않은 사용 가능한 공간을 차지하지 않습니다. (eg. <p>, <div>)

사업부, 범위, 클래스 및 ID

Div는 코드에서 분할(또는 업무 분리)을 생성하는 데 사용됩니다.
범위는 코드의 특정 텍스트를 대상으로 하는 데 사용되는 인라인 요소입니다.

클래스 대 ID

클래스와 ID 간에는 기능적 차이가 없습니다. ID 명명 규칙을 단수로 지정하는 것이 좋습니다. 여러 요소에 동일한 스타일을 지정해야 합니까? 수업을 사용하십시오. 메인 헤더가 하나만 있습니까? ID를 사용합니다.

HTML 엔티티

비분리 여백 : 가로 여백을 줍니다  

보다 큼: >

미만: <

저작권: ©

유로: €

파운드: £

HTML 시맨틱 태그

태그의 이름이 매우 설명적이므로 코드를 구성하는 데 탁월합니다. 그러나 주요 목표는 접근성입니다. 시맨틱 HTML 코드를 작성하면 청각/시각 장애가 있는 사람들이 무엇이 어디로 가는지 이해하는 데 도움이 됩니다. 그것들은 사용하기에 매우 중요하며 의미론적 의미가 없는 <div> 대신에 사용되어야 합니다.

몇 가지 예:<header><footer><section><article><nav>