HTML - CSS/html 수업분

[html] day2_div, pre, button tag

congs 2023. 4. 24. 16:28
<!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>div tag</title>
</head>
<body>
    <div>
        - P 태그와 비슷
        - block 속성의 태그 (새 라인에서 시작하는 태그)
        - p태그는 기본 시작의 위/아래에 여백(마진)이 있고, div는 없음
        - 원하는 컨텐츠를 묶어서 사용할 때 쓰임
        - 시멘틱 태그의 형태로 여러가지 말로 바뀌여서 쓰이고 있음
    </div>
    <div>안녕</div>
    <div>반가워</div>
</body>
</html>

 

<!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>pre</title>
</head>
<body>
    <pre>
        <!-- 태그안에 입력한 코드가 그대로 보여지게 하는 태그
            (보여지는 공백도 그대로 포함) -->
        안녕하세요
        홍길동입니다. 홍  길  동
    </pre>

    <div>
        안녕하세요
        홍길동입니다. 홍  길  동
    </div>
</body>
</html>

 

<!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>button</title>
</head>
<body>
    <!-- input태그와 버튼태그는 모두 버튼을 생성하는 태그
        - input 은 text, password등 입력을 받을 때 주로 사용
        - button을 이용해 생성하는 경우가 많음
        - button을 사용하면 버튼의 속성을 더 세세히 만들수 있다는 장점이 있음
        - input은 단일 / button은 쌍태그
        - button태그 안쪽에 문자열을 이용하여 버튼의 이름을 지정
        - form태그 안에서 사용
        - form태그 안에서 타입을 설정하지 않는 경우) 기본 submit으로 설정됨
        - 타입은 button,submit,reset    
    -->
    <form action="">
        <input type="text" name="test" id="">
        <br>
        <button type="button">일반버튼</button>
        <button type="submit">전송버튼</button>
        <button type="reset">리셋버튼</button>
        <button type="menu">메뉴버튼</button>
        <!-- menu타입은 submit과 비슷한 역할 -->
    </form>
</body>
</html>

'HTML - CSS > html 수업분' 카테고리의 다른 글

[html] day2_select, textarea  (0) 2023.04.24
[html] day01_과제_로그인 폼  (0) 2023.04.24
[html] day1_a_싱커  (0) 2023.04.24
[html] day1_a_tag  (0) 2023.04.24
[html] day1_tag종류  (0) 2023.04.24