TIL 01 | HTML Basics

meow·2020년 7월 12일

TIL html web

HTML/CSS

목록 보기

1/12

Udemy의 The Web developer Bootcamp 과정에서 배운 내용을 다시 한번 정리해본다. HTML과 CSS에서 놓치기 쉬운 포인트들을 복습하자!

HTML과 CSS

HTML은 우리가 흔히 생각하는 '명사', CSS는 이를 꾸며주는 '형용사', 이후에 배울 JavaScript는 정적인 화면이 변화하게끔 하는 '동사'라고 생각하면 된다.

HTML의 문법

HTML로 웹화면의 구조를 짜고 콘텐츠를 입력할 수 있다. HTML의 기본적인 문법은 아래와 같다.

<TagName> Some Content </tagName>

알아두면 쓸모있는 단축키

1. html + tab

html을 작성하기에 앞서 기본이 되는 골조를 자동완성 할 수 있다.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>

2. command + / (on/off)

타이핑한 코드를 주석으로 변경할 수 있다.

<!-- This is a comment. -->

3. command + shift + D

커서가 위치한 줄의 코드를 바로 아래에 복사할 수 있다.

4. lorem + tab

Lorem ipsum의 문단을 자동완성 해준다.

HTML element 레퍼런스

<h1>~<h6> 콘텐츠의 중요도 차이를 줄 수 있다. (폰트 크기)
<p> paragraph
<b> bold *
<u> underline
<strong> 강조(bold) *
<i> italic *
<em> 강조(italic) *
<ol> ordered list
<ul> unordered list
<li> list
<div> generic container : new line (block level)
<span> generic container : same lind (inline container)

*** <b>는 시각적으로만 강조되는 반면 <strong>은 실제로 페이지 내 중요한 부분으로 브라우저에게 알려주는 역할을 하게 되며 이는 웹 접근성에 큰 기여를 한다. 이는 <i>와 <em> 태그에서도 동일하게 적용된다.

HTML Attributes

Images

<img src=“untitled.png”> or <img src=“http://url”>

Links

<a href=“http://url”>Link Text</a>
<a href=“page.html”>Link Text</a>

Tables

<table border="1">

    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Breed</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Rusty</td>
            <td>2</td>
            <td>Mutt</td>
        </tr>
        <tr>
            <td>Wyatt</td>
            <td>13</td>
            <td>Golden</td>
        </tr>
    </tbody>

</table>

meow

🌙｀、、｀ヽ｀ヽ｀、、ヽヽ、｀、ヽ｀ヽ｀ヽヽ｀ヽ｀、｀ヽ｀、ヽ｀｀、ヽ｀ヽ｀、ヽヽ｀ヽ、ヽ｀ヽ、ヽヽ｀ヽ｀、｀｀ヽ｀ヽ、ヽ、ヽ｀ヽ｀ヽ、ヽ｀ヽ｀ヽ、ヽ、ヽ｀ヽ｀ヽ、ヽ、ヽ、ヽ｀｀、ヽ｀、ヽヽ 🚶‍♀ ヽ｀｀ヽ｀｀、ヽ｀、

다음 포스트

TIL 02 | HTML, form과 input

2개의 댓글

Yeonsue Park

2020년 7월 12일

오홋!! html, css, JS를 문법에 비유한게 찰떡이네요! 단축키도 여럿 배워갑니다!

1개의 답글