티스토리 뷰

HTML

HTML 개념 Review

carrot62 2020. 7. 24. 01:25

Padding vs Margin

Padding Margin
border와  contents 사이의 여백 border를 기준으로 다른 element 사이의 간격
(Margin 크기를 늘리면 바깥에서 밀어내게 된다)

padding
margin

  • 각각의 element 사이의 간격을 지정하고 싶을 때는 padding 또는 margin을 사용하는 것이 좋다

HTML Forms practice example

예를 들어서 다음과 같은 HTML form을 만들고자 할때 

reference: https://docs.oracle.com/en/cloud/saas/marketing/eloqua-user/Help/Forms/FormsExamples.htm

<head>
<style>
	div{
    	padding: 10px;    
    }
</style>
</head>

</body>
<div>
<label for="fname"><span>*</span>Country: </label>
<input type="text" id="cname" name="cname" required>
</div>

<div>
<label for="lname"><span>*</span>First Name:</label>
<input type="text" id="fname" name="fname" required>
</div>

<div>
<label for="lname"><span>*</span>Last Name: </label>
<input type="text" id="lname" name="lname" required>
</div>

<div>
<label for="emaile"><span>*</span>Email Address:</label>
<input type="email" id="emaile" name="emaile" required>
</div>
</body>

label과 각각의 입력창 사이의 간격을 일정하게 하기 위해:

방법 1. <div>로 각 블록별로 내용을 묶은뒤, <div>태그를 <style> 부분에서 padding/margin을 이용해서 간격을 조절할 수 있고

또는

방법 2. <label>을 <style>에서 display: inline-block; 을 한 뒤에 width 설정을 해줄 수 있다. 대신 이때는 각 블록 단위별 element 사이에 <br>를 여러게 넣어줘야 한다는 단점이 있다.

label은 원래 inline element이기 때문에 width, margin, padding 설정을 따로 넣을 수 없지만, display 옵션을 통해 block element와 같은 성질을 갖게 해서 width 와 다른 속성들을 설정해주는 것이 가능하다.

<head>
<style>
label{
        width : 250px;
        display : inline-block;
}
</style>
</head>
  • inline element 안에 다르게 취급하고 싶은 element가 있다면 <span>을 활용하는 것 또한 좋은 방법이다.
    위의 예시에서는 빨간 별을 span으로 취급하는 경우가 해당된다.

<div>의 쓰임

블록 단위로 element들을 구분할 때 많이 쓰이고, 이외에도 특정 몇개의 element를 묶는 역할도 해준다.

class vs id

style을 입힐 때 묶어서 같은 효과를 주기 위해 흔히 사용된다.

class id
같은 성격이 있는 여러개의 element를 설정하고 싶을 때 사용한다 javascript를 이용해서 어떤 특정 하나의 element에 접근하고 싶을 때 사용한다.
CSS를 적용할 때도 단 하나의 element에 스타일을 적용할 때 쓰인다.
예) HTML Forms에서 받아온 값을 처리할때 미리 설정된 id를 변수처럼 사용한다 
."class 이름" #"id 이름"

Block element vs Inline element

  • Block element: 자동으로 새로운 줄에서 시작하고 width를 100% 차지하는 element
  • Inline element: 새로운 줄에서 시작하지 않는다 (즉 여러개의 inline element를 나열하면 다닥다닥 붙어서 바로 옆에서 나타난다)
    • inline element 를 block element처럼 사용하기 위해 속성을 바꾸려면: display: inline-block; 

HTML Forms 복습

꼭 기억해야 하는 것:

  • reset: form 안에 채운 내용을 싹 비우는 역할
  • submit: 입력창에 입력된 모든 값을 전송하는 역할
  • 정보가 잘 전송되는지 확인 할 것!
    • <form action="전송될 페이지"> : 이 부분을 꼭 정의해줘야 한다. Form은 보이는 형식도 중요하지만 결국 사용자로부터 입력값을 받아와서 그 값을 처리하는 것이 제일 중요하기 때문에 action을 이용해서 입력값을 어디로 보낼지 꼭 정의하도록 하자

      추가로 method="" 에 대한 정의도 있으면 좋다
  • <input type="radio"> 의 경우는 동일한 name으로 반드시 grouping을 해줘야 한다.
    • value는 간단하게 1,2,3,4...도 자주 사용한다고 한다.
<head>
<style>
	label{
		width : 250px;
		display : inline-block;
	} 
    input[type="radio"]{
       	margin-bottom:5px;
        width:20px;
        margin-left:255px;
	}	
</style>
</head>
<!--radio에서 다른 질문에서도 name을 동일하게 해버리는 경우-->
<label for="color">Choose a color: </label>
<input type="radio" name="color" value="red" style="margin-left: auto;">red<br>
<input type="radio" name="color" value="blue">blue<br>
<input type="radio" name="color" value="green">green<br>

<label for="color">Choose a day: </label>
<input type="radio" name="color" value="monday" style="margin-left:auto;">monday<br>
<input type="radio" name="color" value="tuesday">tuesday<br>
<input type="radio" name="color" value="wednesday">wednesday<br>

(실수) 위 아래 항목에서 name이 같은 경우 다른 답을 해야하더라도 하나의 답만 인식된다

 

<!--위의 코드를 수정해서 다른 항목(color, day)별로 name을 다르게 설정하는 경우-->
<label for="color">Choose a color: </label>
<input type="radio" name="color" value="red" style="margin-left: auto;">red<br>
<input type="radio" name="color" value="blue">blue<br>
<input type="radio" name="color" value="green">green<br>

<label for="color">Choose a day: </label>
<input type="radio" name="day" value="monday" style="margin-left:auto;">monday<br>
<input type="radio" name="day" value="tuesday">tuesday<br>
<input type="radio" name="day" value="wednesday">wednesday<br>

정상적으로 각각의 항목에 답을 하나씩 선택할 수 있다

  • checkbox: value를 다르게 꼭 넣어주어야 한다
  • <input> 태그는 end tag가 없기 때문에 문법상 <input ...   /> 이렇게 적어주는 것이 더 정확하다

'HTML' 카테고리의 다른 글

HTML 기본 형식 3  (0) 2020.07.23
HTML id, iframes, javascript 맛보기, File Paths  (0) 2020.07.23
HTML Block and Inline Elements & class  (0) 2020.07.23
HTML Lists  (0) 2020.07.23
HTML Tables  (0) 2020.07.23