본문 바로가기
프로그래밍/HTML + CSS

[HTML/기본] TAG3

JK공부방 2023. 10. 24. 15:14
728x90
반응형
SMALL

HTML TAG

  • HTML TAG 두번째 포스팅에 이어서 그 외의 다른 많이 사용되는 태그들을 정리하고자 한다
  • 첫번째 포스팅 https://jk25.tistory.com/154
 

[HTML/기본] TAG

HTML 이란? Hypertext Markup Language은 웹페이지와 그 내용을 구조화하기 위해 사용되는 코드 => https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/HTML_basics (웹 상 에서 보여지는 정보들 혹은 페이

jk25.tistory.com

 

[HTML/기본] TAG2

HTML TAG HTML TAG 첫번쨰 포스팅에 이어서 그 외의 다른 많이 사용되는 태그들을 정리하고자 한다 첫번째 포스팅 https://jk25.tistory.com/154 [HTML/기본] TAG HTML 이란? Hypertext Markup Language은 웹페이지와 그

jk25.tistory.com

BLOCK-INLINE

  • 모든 HTML 의 요소(elements)들은 display 스타일 값을 가지고 있다.
  • display : block => block 속성의 요소들은 항상 새로운 라인에서 시작하고 가용하는 좌우 폭을 다 차지한다.
    • CSS에서 height, width 속성으로 편집이 가능하긴 하다.
    • <div>, <h1> ~ <h6>, <p>, <table>, <ol>, <ul> 등
  • display : inline => inline속성의 요소들은 새 라인에서 시작하지 않고 필요한 만큼의 좌우 폭만 차지한다.
    • CSS에서 width, height, padding-left, padding-right 속성이 적용되지 않는다. (padding-top, padding-bottom은 가능)
    • <span>, <a>, <img>, <label>, <button>, <textarea> 등
  • background-color 나 border 속성 등에 효과를 주면 해당 요소가 차지하고있는 영역이 보이게 된다.
  • 크롬의 개발자 도구로 확인 가능하기도 하다.
  • display : none => 해당 요소를 감추는데 사용이 된다.  (보이지 않게 해놨다가 사용자가 어떤 동작을 했을때 보여지게 할 수 있다)
  • display : inline-block => 요소들끼리 inline에 배치가 되고 요소 자체는 block처럼 동작함. 
  • 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Block & Inline</title>
</head>
<body>

<div style="background-color: lime; padding: 5px;">
    div 요소입니다
    <div style="background-color: yellow;">div안의 div 입니다</div>
    <div style="background-color: pink;">div안의 div 입니다</div>
    <div style="background-color: violet;">div안의 div 입니다</div>
</div>


<br>
<!-- display:block 요소 에는 width, height 가 적용됨 -->
<div style="background-color: lime; padding: 5px; width: 300px; height: 250px;">
    div 요소입니다
    <div style="background-color: yellow; width:200px; height:80px;">div안의 div 입니다</div>
    <div style="background-color: pink;">div안의 div 입니다</div>
    <div style="background-color: violet;">div안의 div 입니다</div>
</div>

<br>

<span style="background-color: lime; padding: 5px;">
    span 요소입니다
    <span style="background-color: yellow; width: 100px; height: 100px; ">span안의 span</span>
</span>

<br><br>
<hr>

<div style="background-color: cyan; display:inline;">
    lnline 적용된 div 입니다
</div>

<br><br>

<span style="background-color: cyan; display: block">
    block 적용된 span 입니다
</span>

<br><hr>
<h2>inline-block</h2>
<style>
    /* inline-block 예제 */ 
    .nav { /* nav 라는 class 를 가진 element 에 적용 */
       list-style-type: none;
       padding: 0;
       background-color: yellow;
       margin: 0;
       text-align: center;
    }
    
    .nav li {
       font-size: 20px;
       padding: 20px;
       outline: 2px solid green;
       display: inline-block;
    }
</style>
<ul class="nav">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#clients">Our Clients</a></li>  
    <li><a href="#contact">Contact Us</a></li>
</ul>
</body>
</html>

 

 

예시 해당 화면
inline-block => inline 으로 변경했을 때 확인

FORM

  • <form> 태그 안에 있는 요소들의 내용만 서버로 전달된다.
  • 전달 받는 서버의 특정 페이지가 되고 이렇게 전달 되는 것을 submit 이라고 함
  • action : submit 하는 대상 페이지 url
  • method :  form 데이터를 전송하는 방식
    • get : url에 모든 데이터를 명시하고 눈에 보임 (?, &를 통해 어떤 것이 데이터인지를 확인 할 수 있음), 용량에 제한이 있음
    • post : url에 안보이지만 용량에 제한이 없고, request body영역에 담겨서 서버에 전송할 수 있음
  • onsubmit : submit 발생 직전에 수행하는 JS코드로 form데이터 검증을 위해 쓰이게 됨
  • target : <a> 태그에서 설명했던 target과 같음 => _blank, _self 등등
  • name : 한 페이지에 form이 여러개인 경우 구분을 위해 사용됨. submit하기전에 데이터를 검증하기 위해 필요함
  • form 의 종류에는 <input>, <select>, <textarea>, <button>등이 있다.
  • 예시

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form1</title>
</head>
<body>

<!-- GET 방식 -->
<!-- GET 방식에선 submit 되는 값들이 url 의 querystring 으로 전달된다. -->
<form action="https://www.w3schools.com/action_page.php" method="GET">
    First name: <br>
    <input type="text" name="firstname" value="미키"><br>
    Last name: <br>
    <input type="text" name="lastname" value="마우스"><br>
    <br>
    <input type="submit">
</form>
<hr>

<!-- POST 방식 -->
<!-- POST 방식에선 submit 되는 값들은 request body 에 담겨 간다.-->
<form action="https://www.w3schools.com/action_page.php" method="POST">
    First name: <br>
    <input type="text" name="firstname" value="미키"><br>
    Last name: <br>
    <input type="text" name="lastname" value="마우스"><br>
    <br>
    <input type="submit" value="보내기">
</form>

</body>
</html>

해당 화면 예시

1. GET방식으로 form 제출 할때

URL 에 담기는 모습

2. POST 방식으로 form 제출할때,

URL에 담겨있지 않은 모습

 

 

728x90
반응형
LIST
저작자표시

'프로그래밍 > HTML + CSS' 카테고리의 다른 글

[HTML/기본] FORM  (1) 2023.10.28
[HTML/기본] TABLE  (1) 2023.10.23
[HTML/기본] TAG2  (0) 2023.10.22
[HTML/기본] TAG  (0) 2023.10.20

'프로그래밍/HTML + CSS' Related Articles

티스토리툴바