TIL 2020-10-29 (HTML)

26243 단어 htmlTILTIL

Week 1-2 : HTML & CSS 로 확인하기

TIL List

  • HTML, CSS, JavaScript의 각각의 역할에 대해서 쉽게 이해한다.

  • HTML의 기본 구조와 문법

  • 자주 사용하는 HTML 요소

1) HTML, CSS, JavaScript의 각각의 역할

나는 지금부터 우리집 강아지 '사랑이'의 집(Dog House) 을 만들 것 이다.

강아지 집을 만들기 위해 필요한 것이 무엇인지 차근차근 생각해보자.

1. HTML (구조)

강아지 집을 만들기 위해 우선 집의 구조를 설계 해야한다.

내가 생각하는 강아지 집을 종이에 다음과 같이 적었다.

  1. 강아지 문은 가운데로 한다.

  2. 왼쪽 벽에 조그만 창문을 만들어 줄 것이다.

  3. 바닥은 푹신한 매트 를 깔아 줄 것이다.

  4. 강아지가 무섭지 않게 밤이 되면 불이 켜지는 전구를 천장에 부착할 것이다.

이러한 과정을 웹 개발에서 HTML을 작성한다고 한다.

한 마디로 기본적인 구조 (틀) 을 구성하는 것이다.

2. CSS (스타일)

HTML 에서 강아지 집을 만들기 위한 기본 틀을 구성했다.

이제 이 기본 틀에 나는 집을 좀 더 꾸미기 위해 종이에 다음과 같이 적었다.

  1. 강아지 집의 지붕은 빨간색으로 한다.

  2. 그 외의 벽면은 모두 하얀색으로 한다.

  3. 전구의 조명은 노란색으로 한다.

이러한 과정을 웹 개발에서 CSS를 작성한다고 한다.

한 마디로 만들어진 기본 틀에 디자인적으로 꾸미는 작업을 하는 것이다.

3. JavaScript (상호작용)

나는 강아지 집을 만들기 위해 기본 틀을 구성했고 (HTML) 강아지 집을 예쁘게 꾸몄다. (CSS)

이제 마지막으로 나는 강아지 집 천장에 달려있는 전구가 내가 설정한 시간대에 켜질 수 있도록

하는 기능을 구현했다.

// 대략 이런식으로 구성할 것이다. 라고 하는 것이니 재미로 봐주길 바란다.
let date = new Date()
function turnLight () {
 let light = false;
   if (date === night) {
    light = true;
} else if  (date === morning) {
   light = false;
}
return light;
}

이러한 과정을 웹 개발에서 JavaScript를 작성한다고 한다.

한 마디로 내가 만든 기본 틀이 외부 데이터와 상호작용을 통해 실제로 작동할 수 있도록 하는 것이다.

2) HTML의 기본 구조와 문법

1. HTML 이란?

Hypertext Markup Language의 약자
웹 페이지의 틀을 만드는 마크업 언어

2. HTML 의 기본 구조

HTML 은 tag 들의 집합이라고 할 수 있다.

여기서 tag 란 부등호 (<>)로 묶인 HTML의 기본 구성 요소를 가리킨다.

아래 예제를 통해 tag 를 봐보자.

<!DOCTYPE html>
<html>
<head>
  <title>용호의 html</title>
</head>
<body>
  <h1>Hello Visitors</h1>
  <div>Contents Here
    <span>Here too!</span>
  </div>
</body>
</html>

위에서 사용된 <html>, <head>, <title> 등등 부등호로 묶인 친구들을 모두 tag 라고 부른다. (<html> 은 html 태그, <head> 는 head 태그.. 이런식으로 부르면 된다.)

tag 는 기본적으로 열고 닫는 구조이며 여는 순서와 닫는 순서가 철저하게 지켜져야 한다.

내가 <html> 이라는 tag 를 만들게 되면 꼭 </html> 과 같이 '/' 를 사용해 tag 를 닫아줘야 한다.

3. Tree Structure (트리 구조)

이러한 HTML 의 구조를 트리 구조 (Tree Structure) 이라고 표현한다.

트리 구조는 쉽게 설명하자면 부모와 자식간의 관계를 나타낸다.

<!DOCTYPE html>
<html>
<head>
   <title></title>
</head>
<body>
   <h1></h1>
   <div>
      <span></span>
   </div>
</body>
</html>

위에서 가장 상단에 있는 <html> 의 자식으로는 <head> 와 <body> 가 있다.

그렇다면 우리는 <head> 의 자식은 <title> 이고

<body> 의 자식은 <h1> 과 <div> 이며

<body> 의 자식인 <div> 의 자식은 <span> 이라는 것을 알 수 있다.

4. 위에서 사용 된 HTML의 요소 설명

  <!DOCTYPE html> // 이 문서가 HTML 문서임을 선언하는 것이다.
  <html> // html 시작 태그로, 문서 전체의 틀을 구성한다.
  <head> // head 태그는 문서의 메타데이터를 선언할 때 사용한다.
      <title></title> // title 태그는 문서의 제목을 설정할 때 사용한다. 탭에 보여진다.
  </head> </태그이름> 은 해당 태그의 범위가 여기까지라는 것을 명시하는 것이다.
  <body> // body 태그는 문서의 내용을 담는 곳이다.
      <h1></h1> // heading 을 의미하며, 글자의 크기는 h1 부터 h6 순으로 작아진다.
      <div> // content division 을 의미하며, 줄바꿈이 가능하다.
         <span></span> // div와 다른점은 줄바꿈이 불가능하다는 점이다.
      </div> // div 태그 끝
 </body> // body 태그 끝
 </html> // html 태그 끝

❗ 닫는 태그가 없는 HTML 요소도 있다.

예를 들어 이미지를 삽입하는 태그 <img src = "codestates-logo.png">로고</img> 를 사용하는데 만약, 내용을 삽입하고 싶지 않다면 <img src = "codestates-logo.png" /> 와 같이 표현할 수 있다.

즉, 태그 내부에 내용을 넣고 싶지 않다면 위와 같이 <tag /> 로 표현할 수 있다.

3) 자주 사용하는 HTML 요소

HTML 의 모든 요소는 다음 링크에서 확인할 수 있다.

HTML 요소 참고서

위 사이트를 보면서 스크롤을 내리다 보면 아래와 같은 의문이 들 수 있다.

"저 모든 태그들을 외워야 하는 건가..? 너무 힘든데...."

이에 대한 답변으로는 "그럴 필요가 전혀 없다" 라는 것이다.

우리는 중요한 태그 몇 가지만 기본적으로 외워두고 부수적인 태그들은 저 링크를 보며 참조하면 된다.

자주 사용하는 tag 들

아래 태그들은 자주 사용하므로, 이름과 그 기능에 대해 외워야한다.

  • <div> : Division
  • <span> : Span
  • <img> : Image
  • <a> : Link
  • <ul> & <li> : Unordered List & List item
  • <input> : Input(Text,Radio,Checkbox)
  • <textarea> : Multi-line Text Input
  • <button> : Button

1. div vs span (div와 span의 차이점)

div 와 span은 컨텐츠를 담는다는 공통점을 가지고 있지만 가장 큰 차이점은 공간을 차지하는 범위가 다르다는 것이다.

시각적으로 비교하기 위해 html 을 아래와 같이 작성했다.

<div>div 태그는 한 줄을 차지한다.</div>
<div>한 줄을 차지하는 모습</div>
<span>span 태그는 컨텐츠의 크기만큼 공간을 차지한다.</span>
<span>컨텐츠 크기만큼 차지한다.</span>
<span>컨텐츠 크기만큼 차지한다.</span>
<div>한 줄을 차지하는 모습</div>

이에 대한 결과는 아래와 같다.

div 태그는 한 줄을 차지한다.
한 줄을 차지하는 모습
span 태그는 컨텐츠의 크기만큼 공간을 차지한다. 컨텐츠 크기만큼 차지한다. 컨텐츠 크기만큼 차지한다.
한 줄을 차지하는 모습

2. img (이미지 삽입)

이미지를 삽입하는 방법은 다음과 같다.

<img src="이미지 주소">

"어라? </img> 를 통해 닫아줘야 하는데 닫아주지 않았네?" 라는 의문은 전의 내용을 잘 배웠다는 뜻이다.

이에 대한 답변으로는 "img 태그는 닫을 필요가 없다"는 것이다.\

이러한 태그를 Self-Closing Tag 라고 한다.

물론 자신이 원한다면 </img> 를 통해 닫아줄 수도 있겠지만 굳이 사용 안해도 되는걸 사용하는건 권하지 않는다.

3. a (링크 삽입)

링크를 삽입하는 방법은 다음과 같다.

<a href="해당 페이지 주소">링크 제목</a>

위 방법을 통해 HTML 요소를 참고할 수 있는 MDN 페이지 링크를 걸어보겠다.

HTML 요소 참고서

위 링크는 아래의 태그를 통해 만든 것이다.

<a href ="https://developer.mozilla.org/ko/docs/Web/HTML/Element#%EC%BD%98%ED%85%90%EC%B8%A0_%EA%B5%AC%ED%9A%8D">HTML 요소 참고서</a>

만약, 링크를 클릭했을 때 새로운 페이지를 통해 이동하고 싶으면

<a href ="https://developer.mozilla.org/ko/docs/Web/HTML/Element#%EC%BD%98%ED%85%90%EC%B8%A0_%EA%B5%AC%ED%9A%8D" target="_Blank">HTML 요소 참고서</a>

과 같이 주소 뒤에 target="_Blank" 를 넣어주면 새로운 창을 만들어 해당 링크 주소로 이동한다.

새 창을 통한 HTML 요소 참고서

4. ul & li, ol & li (리스트)

<ul>
    <li>List1</li>
    <li>List2</li>
    <li>List3
     <ul>
         <li>List3-1</li>
     </ul>
    </li>
</ul>

ul 과 li 를 위와 같이 입력했을 때 출력되는 화면은 다음과 같다.

  • List1
  • List2
  • List3
    • List3-1
<ol>
    <li>List1</li>
    <li>List2</li>
    <li>List3
     <ol>
         <li>List3-1</li>
     </ol>
    </li>
</ol>

이번엔 ol과 li 를 입력해봤다. 출력되는 화면은 다음과 같다.

1. List1
2. List2
3. List3
   1. List3-1

ul과 다르게 ol 을 사용하면 리스트를 숫자로 표기하는 차이를 보인다.

5. input, textarea (다양한 입력 폼)

1. text 타입을 입력할 수 있는 칸

<input type="text" placeholder="ID를 입력하세요">

type은 "text" 를 입력하면 되고 placeholder 는 input에 아무 값이 없을때 입력을 돕기 위한 간단한 힌트(단어 또는 짧은 문장)를 나타낸다. placeholder 를 해줘도 되고 안해줘도 된다.

결과는 아래와 같다.

2. password 를 입력할 수 있는 칸

<input type="password" placeholder="비밀번호를 입력하세요">

type은 "password" 를 입력하면 되고 placeholder 는 위 설명과 같이 사용하면 된다.

결과는 아래와 같다.

자동으로 텍스트가 숨겨지는 모습이다.

3. checkbox 를 사용하는 법

<input type="checkbox"> 확실하게 입력하셨습니까?

결과는 아래와 같다.

확실하게 입력하셨습니까?

4. 둘 중 한 가지만 선택하는 법

<input type="radio" name="same">아빠 <input type="radio" name="same">엄마

결과는 아래와 같다.

아빠 엄마

(왜인지는 모르겠는데 velog 미리보기에서는 정상적으로 작동하지만 출간하면 제대로 작동안하는 모습이다.)

name을 통해 같은 속성이라는 것을 설정해주지 않으면 어떻게 될까?

<input type="radio">아빠 <input type="radio">엄마

아빠 엄마

같은 속성이라는 것을 명시하지 않았으므로 둘 다 체크되는 모습이다.

그러니 꼭! name 을 통해 같은 값을 입력해주자.

5. 줄 바꿈이 가능한 text 칸

<textarea></textarea>

결과는 아래와 같다.

(마찬가지로 미리보기에서는 보이지만 여기서는 안보인다.)

만약 placeholder 를 통해 설명을 넣어주고 싶다면 다음과 같이 해줘도 된다.

<textarea placeholder = "줄 바꿈이 가능합니다."></textarea>

(마찬가지로 미리보기에서는 보이지만 여기서는 안보인다.)

떡 만들기 - PYTHON
5. React Router & Routing

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage