LearningJavaScript

13. HTML & CSS

jyshimmy 2020. 8. 10. 11:06

HTML (HyperText Markup Language)

 

Definition

Eventhough it's not exactly a computer language, but a standardized system used to create webpages. "HyperText" refers to the hyperlinks that an HTML page may contain. "Markup language" refers to the way tags are used to define the page layout and elements within the page.

 

 

Most Commonly Used Tags in HTML

 

<div> vs. <span>

  • <div>...</div>: Division "div 태그는 한 줄을 차지합니다"

  • <span>...</span>: Span "span 태그는 "컨텐츠 크기만큼" 공간을 차지합니다.

While both <div> and <span> tags are used to define parts of a webpage, the difference between them is that <div>, Division tag is a block-level element, when <span> tag is an inline element. Thus, the div should be used to wrap blocks or sections of a document, and use spans to wrap smaller portions of text, images, etc. Moreover, the <div> element is used while creating CSS based layouts in html, whereas <span> element is used to stylize texts.

head태그의 title은 브라우저 탭의 이름이 됩니다

Other 컨텐츠 관련 Tags

**form related tags are in purple

  • <img...>: Image, inserts an image; 다른 태그와 달리, 닫는 태그가 없음(이런 태그는 self-closing tag라고 부름)

  • <a...>: Link (A=Anchor), links the current HTML file to another file 링크 삽입

    • <a hred="url">

  • <ul> & <li>: Unordered List & List Item

  • <ol>...</ol>: Ordered List

  • <textarea></textarea: Multi-line Text Input; input과는 다르게 줄바꿈이 됩니다. 긴 글 쓰는 입력 폼

  • <form>

  • <button></button>:  Button

  • <select>, <option>
  • <iframe>
  • <br>
  • <table>
    • <thead>
    • <tbody>
    • <tr>
    • <th>
    • <td>
  • <code>, <pre>

 

HTML Input Types

  • <input>: Input (Text, Radio, Checkbox)

    • <input type="text"> defines a singlie-line text input field

    • <input type="password"> defines a password field; once you type in this field, the characters will be masked, or shown as asterisks(*) or circles(●)

    • <input type="radio"> a single-selection user choice (when the options are under the same group) 객관식 문제

    • <input type="checkbox"> a multi-selection user choice

    • <input type="submit">

 

Other 구조관련  HTML Tags

<html>

<head>

<body>

<style>

<meta>

 

<button>submit</button> button 태그를 이용해 버튼을 만든것과 input태그에서 input type<input type="submit">으로 만든 submit 은 어떤 차이가 있나요?

They both display as buttons and cause the form data to be submitted to the server. But the difference is that <button> can have content, whereas <input> cannot (it's a null element), which means it's not possible to add markup to the text or insert a picture. Thus, <button> has a wider array of disply options.

 

왜 <b>, <font>, <center>등의 태그는 권장하지 않나요?

아마도.. css에서 한 번에 하는게 통일성을 유지하는데 더 편리?

 

How to Embed JavaScript in HTML

1. within the HTML

By using <script>...</script tag

2. outside the HTML

By using <script> tag's src property; --> <script> src="main.js"></script>

 

 

 

 

 

 

 

CSS (Cascading Style Sheets) & Selector

 

CSS란?

CSS는 HTML에 있는 웹페이지 구성요소들의 스타일을 정의하는 언어로, HTML로 잘 짜놓은 구조에 디자인을 부여하는 도구입니다. 예를 들어, HTML에 로고, 검색창, 버튼 등의 구성요소가 있다면, 검색창의 너비, 버튼의 크기, 각 구성요소들의 위치를 지정해줌으로써, 웹페이지를 보기좋게 꾸미는것과도 같습니다.

 

CSS 사용법

CSS를 HTML에 적용하는데 세 가지 방법이 있습니다.

 

1. INLINE

HTML의 특정 태그에 직접 style이라는 속성을 부여해서 적용; 

 

<h1 style="color: red; font-style: italic">Hellow world<h1>

 

색상은 빨간색, 글자 스타일은 기울임꼴로 명시하였음

 

2. HTML stylesheet

HTML 내부에 stylesheet을 작성하는 방법으로 보통 <head>태그안에 삽입하여 태그를 선택하는 규칙(selector)에 따라 일괄 적용

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
    <style>
      h1 {
        color: red;
        font-style: italic;
      }
      /* 모든 h1 태그에 빨간색, 기울임꼴을 적용 */
    </style>
  </head>
  <body>
    <h1>Hello world</h1>
    <div>Contents here
      <span>Here too!</span>
    </div>
  </body>
</html>

 

<body> tag에 <h1>태그를 갖고있는 "Hello world"가  빨간색 과  기울임꼴  적용을 받는다.

 

3. HTML stylesheet

<link>태그를 이용해 css 확장자로 저장된 stylesheet 파일을 href 속성을 이용해 삽입할 수도 있습니다.

 

 

CSS Selector

HTML에 id와 class를 적절히 부여해, CSS에서 요소(element)를 선택하는 규칙을 이용해 웹페이지에 표현하고자 하는 바를 보여줄 수 있습니다. class가 부여돼있다면 CSS Selector를 통해 한 번에 통일된 디자인으로 변경할 수 있습니다.

** 태그라는 용어는 시작 및 종료 태그와 같이 마크업(Markup)을 의미하고, 요소는 의미를 갖는 하나의 구조를 뜻합니다.

this is unclear..

 

Class vs. ID

CLASS ID
자유롭게 이름 붙임 가능 자유롭게 이름 붙임
동일한 (class)값을 갖는 element가 많음 문서 내에서 오직 하나의 element만 이 값을 가짐
element가 여러 값을 가질 수 있음 element는 단 하나의 값을 가짐
스타일의 분류(classification)에 사용 특정 element를 이름 붙이는데 사용

 

여러개의 class 값을 갖는 element: 공백을 이용해, 한 element에 여러 class를 지정할 수 있음

<h1>class="impact red">Hello world</h1>
.impact { font-size: 2em; fonr-weight: bold; }
.red { color: red; }

 

Learn by yourself: CSS

  • 레이아웃 & box model
    • margin, padding, border
    • width, height, top, left, bottom, right
    • position, box-sizing
  • 레이아웃 고급
    • z-index
    • float, flex
  • 기본 스타일링
    • font-*, background-*

 

CSS로 Layout 만들기

브라우저에서 사용하는 좌표계

기본적으로 요소는 위에서 아래로, 왼쪽에서 오른쪽으로 확장합니다. 따라서 왼쪽 상단의 좌표가 (0,0)이 됩니다.

좌표는 픽셀(px)단위나 퍼센트(%)단위 등을 쓸 수 있습니다.

 

좌표계를 바탕으로 절대/상대적인 위치에 positioning할 수 있습니다.

 

 

 

 

다양한 Display 요소

<div>태그처럼 한 줄을 다 차지하는 요소가 있고, <span>처럼 그렇지 않은 요소도 있습니다.

각 요소는 고유한 크기를 가질 수 있습니다. 단, inline요소는 컨텐츠가 차지하는 크기로 고정됩니다.

 

Box Model

Box 크기에 관련된 몇 가지 속성들이 있습니다.