'ㅏ' 태그의 글 목록

ㅏ

12/06 수업 (24일차) _ Table 태그 속성 / Img 태그 / Input태그 / Form 태그 / 레이아웃 구성 태그 - div, span / CSS란? 2023.12.06 1

12/06 수업 (24일차) _ Table 태그 속성 / Img 태그 / Input태그 / Form 태그 / 레이아웃 구성 태그 - div, span / CSS란?

개미의 베짱이 2023. 12. 6. 17:48

2023. 12. 6. 17:48

Table 속성

- 열병합 (colspan) : column span 약자로, 셀(가로줄)을 합치는 개수를 지정

- 행병합 (rowspan) : 행합치기

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Table 연습</title>
</head>
<body>
    <!--열병합-->
    <table border="1" width="250" height="100">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

← 결과

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Table 연습</title>
</head>
<body>
	<!--행병합-->
    <table border="1" width="258" height="100">
        <tr>
            <td rowspan="3"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

← 결과

** 실습문제2 **

실행 후 결과가 위와 같이 나오도록.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Table 연습</title>
</head>
<body>
    <!--Table 실습문제2-->
    <table border="2">
        <tr>
            <th>1열</th>
            <th>2열</th>
            <th>3열</th>
        </tr>
        <tr>
            <td rowspan="2">1행 1열</td>
            <td>1행 2열</td>
            <td>1행 3열</td>
        </tr>
        <tr>
            <td>2행 2열</td>
            <td>2행 3열</td>
        </tr>
        <tr>
            <td colspan="3">3행 1열</td>
        </tr>
    </table>
</body>
</html>

** 이미지 출력 태그 img **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>img 태그연습</title>
</head>
<body>
    <p><img src="https://t1.kakaocdn.net/gamepub/daumgame/banner/content/gametop_content_1701251409983_36.jpg" alt="첫번째 이미지" /></p>
    <p><img src="https://t1.kakaocdn.net/gamepub/top/2018/code/game_c_371.jpg" alt="두번째 이미지" /></p>
    <p><img src="https://t1.kakaocdn.net/gamepub/top/2018/code/game_w_333.jpg" alt="세번째 이미지" /></p>
    <p><img src="./img/game.png" alt="네번째 이미지" /></p>
</body>
</html>

** 실습_개인 홈페이지 만들기1 **

아래 이미지와 같이 나오도록.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>개인 홈페이지 만들기1</title>
</head>
<body>
    <h2>My HomePage</h2>
    <p><img  src="./img/computer.jpg" width="250" height="150" alt="" />
        <strong>컴퓨터 프로그래머</strong>를 꿈꾸며 열심히 공부하고 있는 KYH입니다.</p>
    <h3>현재 학습하고 있는 과목</h3>
    <p>
        <ul>
            <li>C언어</li>
            <li>JAVA 언어</li>
            <li>웹프로그래밍 <a href="http://www.daum.net" target="_blank">W3C사이트</a></li>
        </ul>
    </p>
    <p><h3>이번 학기 시간표</h3></p>
    <p>
        <table border="1">
            <caption>시간표</caption>
            <tr>
                <th></th>
                <th>월요일</th>
                <th>화요일</th>
                <th>수요일</th>
            </tr>
            <tr>
                <th>1교시</th>
                <th>C언어</th>
                <th>JAVA언어</th>
                <th>JAVA언어</th>
            </tr>
            <tr>
                <th>2교시</th>
                <th>C언어</th>
                <th>JAVA언어</th>
                <th>JAVA언어</th>
            </tr>
        </table>
    </p>
</body>
</html>

input 태그

<input>태그는 사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어줌.

예) <input type="">

type	태그 모양을 다양하게 변경할 수 있음. text, radio, checkbox (0개 이상 선택가능) , password, button, hidden, submit, reset 등이 있음 cf) radio, checkbox 은 name이 같은것끼리 그룹으로 묶인다.(name은 되도록 중복되지 않게 사용한다.) <input type="checkbox" name="computer" value="cpu" />cpu 값은 value값이 넘어간다(프론트에서 서버에요청할때 맨뒤 변수 cpu에 해당하는 값) / 화면에 출력되는것은 맨 뒤의 cpu
name	해당 type의 이름을 지정
readonly	태그를 읽기전용으로 지정 예) <input readonly>
maxlength	해당 태그 최대 글자 수를 지정
required	해당 태그가 필수태그로 지정됨. 필수 태그를 입력하지 않고 submit버튼을 누르면 에러메시지가 브라우저에서 출력됨(HTML5추가)
autofocus	웹 페이지가 로딩되자마자 이 속성을 지정한 태그로 포커스가 이동됨 (HTML5추가)
placeholder	태그에 입력할 값에 대한 힌트를 줌 (HTML5추가)
pattern	정규표현식을 사용하여 특정범위 내의 유효한 값을 입력받을 때 사용함 (HTML5추가)

cf) HTML 에서는 = 앞뒤로 뜨어쓰기 하지 않는 것이 좋다.

* type

- input type="button" / input type="sublmit" / input type="reset"

<p><h1>button, submit, reset</h1></p>

- input type="image"

이미지:<input type="image" src="folwer.png">

- input type="file"

상대경로 : ./ 내폴더 밑에 | ../ 내 위에폴더 밑에

** 실습 (input type 종류) **

** select option **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>input type 종류</title>
</head>
<body>
    <p><h1>imput type 종류</h1></p>
    이름 : <input type="text" name="my_name" size="20" /><br>
    비밀번호 : <input type="password" name="my_pwd" size="20"><br />
    <input type="text" name="my_name2" size="20" value="수정불가" readonly />

    <p><h1>type radio</h1></p>
    아침메뉴 : <input type="radio" name="food" value="치킨" checked>치킨
              <input type="radio" name="food" value="피자">피자
              <input type="radio" name="food" value="짜장면">짜장면
              <input type="radio" name="food" value="짬뽕">짬뽕
    <br /><br />
    점심메뉴 : <input type="radio" name="food2" value="치킨" checked>치킨
              <input type="radio" name="food2" value="피자">피자
              <input type="radio" name="food2" value="짜장면">짜장면
              <input type="radio" name="food2" value="짬뽕">짬뽕
    <br /><br />
    저녁메뉴 : <input type="radio" name="food3" value="치킨" checked>치킨
              <input type="radio" name="food3" value="피자">피자
              <input type="radio" name="food3" value="짜장면">짜장면
              <input type="radio" name="food3" value="짬뽕">짬뽕

    <p><h1>type checkbox</h1></p>
    <input type="checkbox" name="computer" value="cpu" checked>cpu
    <input type="checkbox" name="computer" value="memory" />memory
    <input type="checkbox" name="computer" value="hdd" />하드디스크
    <input type="checkbox" name="computer" value="cdrom" />cdrom
    <input type="checkbox" name="computer" value="grapic" />그래픽카드

    <p><h1>select option</h1></p>
    <table>
        <tr>
            <td><h2>가장 재미있는 것을 선택해 주세요.</h2></td>
        </tr>
        <tr>
            <td>
                <select name="item1">
                    <option value="html1">HTML</option>
                    <option value="javaScript">자바스크립트</option>
                    <option value="CSS">CSS</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <select name="item2" size="3">
                    <option value="html">HTML</option>
                    <option value="javaScript">자바스크립트</option>
                    <option value="CSS">CSS</option>
                </select>
            </td>
        </tr>
    </table>
</body>
</html>

Form 관련 태그

<form> : 폼만들기 폼 태그의 속성에서 사용자가 입력한 자료를 서버로 어떤 방식으로 넘길 지와 어떤 프로그램을 이용해 처리할지 지정한다.

method : 사용자가 입력한 내용을 서버로 어떻게 넘겨줄 것인지 지정

get - 주소 표시줄에 입력 값이 그대로 드러남

post - 표준 입력으로 데이터를 전송, 입력 길이에 제한이 없으며, 입력한 내용이 드러나지 않음 (http프로토콘 내 에 담아서감)

name : 한 문서 안에 여러 개의 form이 있을 경우를 위해 이름 지정

action : form태그 안의 내용을 처리해 줄 서버 프로그램 지정.

target : action태그에서 지정한 스크립트 파일을 다른 창에서 열기.

accept-charset : 폼 전송에 사용할 문자 인코딩을 지정.(utf-8)

<form action="search.jsp" name="search_info" mathod="post"
	<input type="text" title="검색">
        <input type="submit" value="검색">
</form>

** GET방식 / POST방식 **

서버에 특정 서비스를 요청을하기 위해 클라이언트에서 작성한 값을 넘기는 방식

GET방식 : 클라이언트 데이터를 URL뒤에 붙여서 보낸는방식(?key=value&key=value...)

보안에 취약, 길이제한이 있음.(256byte), 전송속돈는 POST보다 빠름

POST방식 : URL에 노출하지 않고 데이터를 body에 포함시킴(URL에 노출되지 않아 기본 보안.)

전송길이에 제한이 없음.(사용예 - 회원가입시 사용자 입력값)

** 예제1206_4 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p><h1>button, submit, reset</h1></p>
    <input type="button" value="로그인" />
    <input type="submit" value="회원가입" />
    <input type="reset" value="다시입력" />
    <br /><br />

    <p><h1>input type=image</h1></p>
    이미지 : <input type="image" src="./img/flower.jpg" width="100" height="100"/>

    <p><h1>imput type=file</h1></p>
    파일명 : <input type="file" name="fileName" />
</body>
</html>

** 예제1206_5 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form name="form1" action="1206_4.html" method="get">   <!--"post"-->
        <input type="text" name="id" title="검색" />
        <input type="submit" value="검색" />&nbsp;
        <input type="reset" value="다시입력" />
    </form>
</body>
</html>

** 예제 1206_6 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>form 연습</title>
</head>
<body>
    <form name="form1" action="1206_5.html" method="post">  <!--"get"-->
    <p><h1>imput type 종류</h1></p>
    이름 : <input type="text" name="my_name" size="20" /><br>
    비밀번호 : <input type="password" name="my_pwd" size="20"><br />
    <input type="text" name="my_name2" size="20" value="수정불가" readonly />

    <p><h1>type radio</h1></p>
    아침메뉴 : <input type="radio" name="food" value="치킨" checked>치킨
              <input type="radio" name="food" value="피자">피자
              <input type="radio" name="food" value="짜장면">짜장면
              <input type="radio" name="food" value="짬뽕">짬뽕
    <br /><br />
    점심메뉴 : <input type="radio" name="food2" value="치킨" checked>치킨
              <input type="radio" name="food2" value="피자">피자
              <input type="radio" name="food2" value="짜장면">짜장면
              <input type="radio" name="food2" value="짬뽕">짬뽕
    <br /><br />
    저녁메뉴 : <input type="radio" name="food3" value="치킨" checked>치킨
              <input type="radio" name="food3" value="피자">피자
              <input type="radio" name="food3" value="짜장면">짜장면
              <input type="radio" name="food3" value="짬뽕">짬뽕

    <p><h1>type checkbox</h1></p>
    <input type="checkbox" name="computer" value="cpu" checked>cpu
    <input type="checkbox" name="computer" value="memory" />memory
    <input type="checkbox" name="computer" value="hdd" />하드디스크
    <input type="checkbox" name="computer" value="cdrom" />cdrom
    <input type="checkbox" name="computer" value="grapic" />그래픽카드

    <p><h1>select option</h1></p>
    <table>
        <tr>
            <td><h2>가장 재미있는 것을 선택해 주세요.</h2></td>
        </tr>
        <tr>
            <td>
                <select name="item1">
                    <option value="html1">HTML</option>
                    <option value="javaScript">자바스크립트</option>
                    <option value="CSS">CSS</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <select name="item2" size="3">
                    <option value="html">HTML</option>
                    <option value="javaScript">자바스크립트</option>
                    <option value="CSS">CSS</option>
                </select>
            </td>
        </tr>
    </table>
    <br /><br />

    <input type="submit" value="회원가입" />
    <input type="reset" value="다시입력" />
    </form>
</body>
</html>

** 예제 1206_7 **

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Document</title>
</head>
<body>
    <form name="form1" action="1206_6.html" method="get">
        <table>
            <tr>
                <td>이름 : </td>
                <td><input type="text" name="name1" repuired></td>
            </tr>
            <tr>
                <td>비빌번호 : </td>
                <td><input type="password" name="name2"></td>
            </tr>
            <tr>
                <td>연락처 : </td>
                <td><input type="text" name="name3" size=5>-<input type="text" name="name4" size="5">-<input type="text" name="name5" size="5"></td>
            </tr>
            <tr>
                <td>사진 : </td>
                <td><input type="file" name="name6" /></td>
            </tr>
            <tr>
                <td>성별 : </td>
                <td><input type="radio" name=name7 value="남">남&nbsp;&nbsp;
                    <input type="radio" name=name7 value="여">여</td>
            </tr>
            <tr>
                <td>사용언어 : </td>
                <td>
                    <input type="checkbox" name="name8" value="한글" />한글&nbsp;
                    <input type="checkbox" name="name8" value="영어" />영어&nbsp;
                    <input type="checkbox" name="name8" value="일어" />일어&nbsp;
                    <input type="checkbox" name="name8" value="중국어" />중국어&nbsp;
                </td>
            </tr>
            <tr>
                <td>자기소개 : </td>
                <td><textarea rows="5" cols="30" name="info">간단하게 입력하세요.</textarea></td>
            </tr>
            <tr>
                <td>국적 : </td>
                <td><select name="name9">
                    <option value="한국">한국</option>
                    <option value="미국">미국</option>
                    <option value="중국">중국</option>
                </select></td>
            </tr>
            <tr>
                <td>좋아하는 음식 : </td>
                <td><select name="name10" size="4">
                    <option value="김치">김치</option>
                    <option value="불고기">불고기</option>
                    <option value="파전">파전</option>
                    <option value="비빔밥">비빔밥</option>
                </select></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="제출" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

레이아웃 구성 태그 - div, span

Div : 블록요소를 가지고 있음, 줄바꿈이 발생.

span : 줄바꿈이 발생하지 않음.

** 예제1206_8 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--div, span-->
    <p>block</p>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>

    <div>111111</div><div>222222</div><div>333333</div><div>444444</div><div>555555</div>

    <span>item1</span>
    <span>item2</span>
    <span>item3</span>
    <span>item4</span>
    <span>item5</span>
</body>
</html>

CSS란?

HTML이 정보를 표현한다면 CSS는 HTML을 시각적으로 꾸며주는 역할(정보와 디자인을 분리)

특정 태그를 선택하여, 해당 태그의 속성을 변경하는 목적으로 사용됨.

* CSS적용방식(3가지)

- .inline방식 : 엘리먼트에 스타일을 직접 기술하는 방식 / 셀렉트가 필요없음 / CSS 선언이 분명해서 style tag방식에 비해 엘리먼트에 영향을 주고 있는 CSS를 추적하기 쉬움./ 코드가 많아지고, 정보와 디자인의 분리라는 CSS취지와 벗어남.

- style tag방식 : style 태그에 기술하는 방식 / inline방식 대비 경제적으로 코딩할 수 있음 / 정보와 디자인의 분리라는 CSS의 취지에 부합 (현재 페이지에 공통으로 들어가는 것들에 사용)

- .외부 파일 방식 : CSS를 별도의 파일로 분리해서 링크하는 방식 / 문법적으로는 style tag와 동일 / 파일의 교체로 디자인을 변경할 수 있다는 점에서 유지 보수가 편리 (전체 페이지에 공통으로 들어가는 것들에 사용)

.HTML요소 지원되는 속성

속성	설명
class	요소의 클래스 이름 .
id	요소의 아이디 #
style	요소에 대한 인라인
title	요소에 대한 추가정보, 툴 팁으로 표시됨.

- 외부 link를 이용해서 css파일을 가져오는 방법이다.

- rel : 현재 문서와 외부 리소스 사이의 관계를 알려줘야한다.

- href 에 # 주는건 다른 링크를 준다는 의미

출처: https://heidong.tistory.com/85 [풀스택 개발자:티스토리]

button - 그냥 버튼

submit = submit을 감싸는 form태그속 정보를 보낸다.

reset - reset을 감싸는 form태그 속 정보를 리셋

'수업끄적끄적_7MONTH > HTML' 카테고리의 다른 글

12/08 수업 (26일차) _ 평행이동 / 애니메이션 (1)	2023.12.08
12/07 수업 (25일차) _ 선택자 / (2)	2023.12.07
12/04 수업 (23일차) _ HTML설치 / Web이란? / HTML태그 / CSS적용 List 태그 / Table태그 (2)	2023.12.04

PREV 이전 1 NEXT 다음

sist

ㅏ

12/06 수업 (24일차) _ Table 태그 속성 / Img 태그 / Input태그 / Form 태그 / 레이아웃 구성 태그 - div, span / CSS란?

Table 속성

input 태그

Form 관련 태그

레이아웃 구성 태그 - div, span

CSS란?

.HTML요소 지원되는 속성

'수업끄적끄적_7MONTH > HTML' 카테고리의 다른 글

+ Recent posts

티스토리툴바

sist

ㅏ

12/06 수업 (24일차) _ Table 태그 속성 / Img 태그 / Input태그 / Form 태그 / 레이아웃 구성 태그 - div, span / CSS란?

** Table 속성 **

** input 태그 **

** Form 관련 태그 **

** 레이아웃 구성 태그 - div, span **

** CSS란? **

** .HTML요소 지원되는 속성 **

'수업끄적끄적_7MONTH > HTML' 카테고리의 다른 글

+ Recent posts

티스토리툴바

Table 속성

input 태그

Form 관련 태그

레이아웃 구성 태그 - div, span

CSS란?

.HTML요소 지원되는 속성