The School of the Art Institute of Websitesite

Terms

Text editor
컴퓨터 언어를 작성하는 곳

Server
html, css 파일을 업로드하는 곳

Browser
Text editor로 작성한 파일을 열어주는 장치

HTML
Hyper Text Markup Language

CSS
Cascading Style Sheet


Set up

Download
Sublime Text (Text editor)
Boilerplate (Text file)

Create account
Neocities (server)

Buy domain (optional)
Google domain

Image size reducer
Tiny png


Shortcuts

On browser
Command + Shift + i : 개발자 모드

On text editor
Command + d : 특정 텍스트 전체 선택
Command + / : 특정 텍스트 묵음 처리

Markup

<p> 이렇게 사이에 글자를 넣는거에여 </p>


HTML

<a> anchor
: 링크 걸기
: <a href="https://websitesite.xyz/">Websitesite</a>
: Websitesite

<p> paragraph
: 글쓰기
: <p>웹사이트사이트에 오신 것을 환영합니다!</p>
: 웹사이트사이트에 오신 것을 환영합니다!

<br> line break
: 다음 줄로 가기
:<p>웹사이트사이트에 오신 것을<br>환영합니다!</p>
:웹사이트사이트에 오신 것을
 환영합니다!

<ol> ordered list
: 순서가 있는 목록 만들기
: <ol> 목록 제목
        <li>텍스트</li>
        <li>텍스트</li>
        <li>텍스트</li>
  </ol>

    딸꾹질을 멈추는 방법
  1. 숨을 크게 들이쉰다.
  2. 숨을 참을 수 있을 때까지 참는다.
  3. 딸꾹질이 멈췄는지 확인한다.

<ul> unordered list
: 순서가 없는 목록 만들기
: <ul> 목록 제목
        <li>텍스트</li>
        <li>텍스트</li>
        <li>텍스트</li>
  </ul>

<marquee> marquee
: 텍스트 흐르게 하기
: <marquee>왼쪽으로 가시오</marquee> 왼쪽으로 가시오.

<img> image
: 이미지 넣기
: <img src="폴더명/파일명.확장자">
: <img src="img/filename.jpg">

<iframe> iframe
: 웹사이트/영상 넣기
: <iframe src="https://www.youtube.com/embed/exwStqF6hqg"></iframe>

More tags...
https://www.w3schools.com/tags/default.asp


CSS

{ ;}

a, p

  • font-family: serif/sans-serif;
  • font-size: 12pt/4vw;
  • color: blue;
  • background-color: yellow;
  • text-alignment: right/left/center;
  • line-height: 15pt;
  • img

  • width, height: 200px/50vw;
  • margin: 10px/5vw;
  • border: 5px solid blue;
  • More properties...
    https://www.w3schools.com/cssref/index.php

    More colors...
    https://www.w3schools.com/tags/ref_colornames.asp

    Keywords

  • 목록
  • 블로그
  • 사진첩
  • Alumni

    Class of 2023

  • 박지은
  • 이유진
  • 호연지