웹페이지 기초 (9)

Wishtree·2021년 5월 16일

웹페이지 만들기 기초

목록 보기

5/8

1. heading

숫자가 작을수록 중요도가 높아짐

<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>

제목 1

제목 2

제목 3

제목 4

2. ul tag

unordered list
순서가 필요없는 목록들을 모아둠

<ul>
    <li>소망나무</li>
    <li>우체통</li>
    <li>할머니</li>
</ul>

소망나무
우체통
할머니

ul태그의 자식에서는
li태그(목록안에 있는 항목들)이 필요

li태크는 ul태그로 감싸있어야함

+ ol 태그는 순서인식

3. a tag

하이퍼링크를 지정하는 요소

<a href="http://www.google.com">google</a>

google

+새 탭에서 새로 열기

<a href="http://www.google.com" target="_blank">google</a>

google

4. span

<style>
    span { color: turquoise;}
</style>
<body> 
  <span>소망<br>나무</span>
</body>

소망
나무

<br> 줄바꿈

5. input

인라인요소이면서 블록요소
글자 상자
사용자가 데이터를 입력하는 요소

1) text

수평으로 출력되지만 가로세로 요소나 여백도 지정가능.

<input type="text">

2) text - value

미리 입력될 값을 출력 가능

<input type="text" value="Wishtree">

3) text - placeholder

힌트값 출력(지우고 쓸 수 있음)

<input type="text" placeholder= "소망을 입력하세요!">

4) text - disabled

입력요소를 비활성화함

<input type="text" disabled>

5) checkbox

동시에 여러개 체크할 수 있음

<label>
    <input type="checkbox">개강 2월
</label>
<label>
    <input type="checkbox">종강 7월
</label>

개강 2월 종강 7월

6) radio

각 그룹에서만 입력받음

<label>
    <input type="radio" name ="차">캐모마일
</label>
<label>
    <input type="radio" name ="차">페퍼민트
</label>

캐모마일 페퍼민트

"차"라는 그룹 중에서 캐모마일과 페퍼민트 둘 중에 하나 선택가능

7) table

표
행과 열

<table>
    <tr>
        <td>가</td> <td>나</td>
        <td>다</td> <td>라</td>
    </tr>
</table>

가

나

다

라

--------------------------------------------------------------------------

<table>
    <tr>
        <td>가</td> <td>나</td>
    </tr>
    <tr>
        <td>다</td> <td>라</td>
    </tr>
</table>

가	나
다	라

행이 먼저오고 열이 옴

Wishtree

The interactive storytelling web service <Wishtree> is an open source project run by Team Noob. We share tips for effective non-face-to-face teamwork and service development process. Hope it helps a little to the world suffering from corona.