SAIW

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>

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

<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

박지은

이유진

호연지

The School of the Art Institute of Websitesite