개발자의 여정에 열정을 더하다.

Class/Frontend

[프론트엔드 day02]

열정코딩 2022. 4. 16.

목차

1. Input 문법 

 

- 코드 입력- 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">   
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>인풋</title>
</head>
    <input type="text"/>   -1
    <input type="password"/>  -2
    <input type="radio"/>  - 3
    <input type="button"/> - 4
    <input type="submit"/>  - 5
     
    <input type="checkbox"/> - 6
    <input type="file"/>  - 7
    <input type="date"/> - 8

    <input type="email"/> - 9
    <input type="url"/> - 10 
    <input type="tel"/> - 11

</body>
</html>

-  출력 결과 - 

[프론트엔드 day02]

 

 

2.   Textarea 텍스트 입력 박스 창 

 

- 코드입력 - 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>textarea</title>
</head>
<body>
    <textarea></textarea>
    <textarea cols="30" rows="10"></textarea>
    
</body>
</html>
te

- 출력 결과 - 

[프론트엔드 day02]

 

 

 

3. ul  순서가 없는 목록 태그 

- ul 안에 <li> 리스트 항목을 넣어준다 

 

- 코드 입력 - 

<body>
    <!--순서가 없는 목록 태그-->
    <ul>
        <li>content1</li>
        <li>content2</li>

    </ul>

 

- 출력 결과 -

[프론트엔드 day02]

 

 

 

4. ol 순서가 있는 목록 태그

- 순서대로 리스트를 보여준다 

 

- 코드 입력- 

<ol>
        <li>content1 </li> 
        <li>content2</li>
    </ol>

 

- 출력 결과 - 

[프론트엔드 day02]

 

< 순서를  알파벳 순 으로 표현 하고 싶을때> 

- ol type= "A" start="3"  > 알바벳 3번째 자리부터 시작 

 

 

- 코드 입력 -

<ol type="A" start="3">
        <li>content1 </li>
        <li>content2</li>
    </ol>

 

- 출력 결과 - 

[프론트엔드 day02]

 

5 . Table  - 표 

[프론트엔드 day02]

<border = "테두리(숫자)" , width="가로길이(%, px)" , align="정렬() >  
<tr> table row  =  테이블의 축
<td> = 표의 데이터 

ex) <td width ="길이" , height="높이" > 

<roespan> = 세로병합

<colspan> =가로병합
<th> = 제목 

 

 

6.   Iframe

- iframe src="삽입할 페이지 주소 또는 문서 위치

/ src - 경로 가져오기 /

 

- 코드 입력- 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe</title>
</head>
<body>  <!--src 경로 가지고 오는것 -->
    <iframe src="http://www.koreaitacademy.com/" frameborder="0" width="500" height="800"></iframe>
    </body>
</html>

 

- 출력 결과 - 

 

- 웹페이지 안에 보여줄 웹사이트가 보여지는것을 볼수 있다. 

[프론트엔드 day02]

 

# 하나의 웹사이트 안에서 또 다른 웹페이지를 열고 싶다

ex> 유뷰브 - 공유하기 -  퍼가기 - 안에있는 iframe  복사 - 붙여넣기

 

- 코드 입력 - 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe</title>
</head>
<body>  <!--src 경로 가지고 오는것 -->
    <iframe src="http://www.koreaitacademy.com/" frameborder="0" width="500" height="800"></iframe>
    <!-- 다른 사이트 가져오기-->
    <iframe width="560" height="315" src="https://www.youtube.com/embed/-JhoMGoAfFc"
    title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; 
    clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</body>
</html>

 

 

- 출력 결과 - 

- 한개의 웹 사이트 안에 서로 다른 두개의 웹이 보여진다. 

 

[프론트엔드 day02]

 

 

 

 

 

 

 

 

'Class > Frontend' 카테고리의 다른 글

[프론트 엔드 DAY03- 2]  (0) 2022.04.25
[프론트 엔드 DAY03-1 ]  (0) 2022.04.19
[프론트 엔드 DAY03]  (0) 2022.04.17
[프론트엔드 day01-1 ]  (0) 2022.04.16
[프론트엔드 day01]  (0) 2022.04.10

댓글

티스토리툴바