꽃 구경 가자

분류 전체보기 (78)

Java (4)

Spring (0)

Front end (12)

VUE (0)

Html (3)

css (2)

JavaScript (2)

↳JavaScript예제 (3)

jQuery (2)

알고리즘 (1)

GIt (0)

DB (0)

Python (1)

Flutter (38)

Dart (18)

데이터분석 (1)

머신러닝 (3)

딥러닝 (0)

개발툴 (0)

JSP & Servlet (0)

Front end/Html

display속성을 이용하여-> ul, li, div를 표로 만들기 2021.01.14
블록 레벨 요소 vs 인라인 레벨 요소 / p태그 vs div태그 2021.01.10
HTML 문서의 기본 구조 2021.01.09

display속성을 이용하여-> ul, li, div를 표로 만들기

2021. 1. 14. 00:21

	/* 
	 * display:table -> 블록 레벨의 표로 만든다.
	 * display:table-row -> tr 태그를 사용한 것 처럼 표의 행으로 만든다.
	 * display:table-cell -> th 또는 td 태그를 사용한 것 처럼 하나의 테이블 셀로 만든다.
	 * 
	 * display:list-item -> 목록을 표시할 수 있도록 기본적인 블록 박스와 표시자 박스를 만든다.
	 **/

▼적용 코드 보기▼

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 폼</title>

<style type="text/css">
	.join_div{
		width: 800px;
		height: auto;
		margin: 0 auto;
	}

	fieldset {
		border: 2px solid lightgray;
		border-radius: 10px;
		width: 700px;
		height: 350px;
	}
	
	legend {
		font-size: 18px;
		font-weight: bold;	
	}
	
	.ul_table1{
		display: table;
		width: 620px;
	}
	
	.li_table_row{
		display: table-row;
	}
	.div_table_cell_th{
		display: table-cell;
		font-weight: bold;
		width: 140px;
		height: 45px;
		padding-left: 10px;
		vertical-align: middle;
		border: 2px solid lightgray;
		background-color: beige;
	}
	
	.div_table_cell_th:nth-child(n){
		border-bottom: none;	
	}
	.div_table_cell_th:last-child{
		border-bottom: 2px solid lightgray;
	}
	.div_table_cell_td{
		display: table-cell;
		border: 2px solid lightgray;
		
	}
	.div_table_cell_td:nth-child(n){
		border-left: none;
		border-bottom: none;
	}
	
	
	input.normal {
		margin-top: 7px;
		margin-left: 10px;
		width: 200px;
		height: 25px;
	}
	input[type=button]{
		background-color: DodgerBlue;
		color: white;
	}
	
	.phone{
		width: 80px;
		margin-top: 10px;
	}
	
	input[type=radio]{
		margin-top: 15px;
		margin-left: 10px;
	}
	
	.c_box{
		margin-left: 10px;
	}

</style>

</head>
<body>
<div class="join_div">
	<div>
		<h2>회원정보 상세 입력</h2>
		<p style="font-size: 12px; color: gray; margin-top: -15px; margin-bottom: 20px;">
			1. 회원가입은 만 14세 이상부터 대한민국의 누구라도 가입이 가능합니다.<br/>
			2. 2013년 법이 주민번호를 수집할 수 없도록 바뀌었습니다. 정보통신말 이용촉진 및 
			정보보호 등에 관한 법률<br/> 
			&nbsp;&nbsp;&nbsp;&nbsp;제23조의 2(주민등록번호 사용 제한)에 따라 회원가입 시 주민등록번호를 수집하지 않습니다.<br>
			3. 회원가입할때 어려운신 점이 있으시면 고객센터 게시판을 이용해 주시거나, 전화(02-111-2222)해 주시기 바랍니다.
		</p>
	</div>
	<div style="text-align: right; width: 700px; font-size: 14px;">
		<img src="images/bullet_checked.gif">&nbsp; 표시는 필수 입력 사항입니다.
	</div>
	<fieldset>
		<legend>&nbsp;&nbsp;필수 정보 입력&nbsp;&nbsp;</legend>
		<ul class="ul_table1">
			<li class="li_table_row">
				<div class="div_table_cell_th"><img src="images/bullet_checked.gif">이 름</div>
				<div class="div_table_cell_td"><input type="text" class="normal"></div>
			</li>
			<li class="li_table_row">
				<div class="div_table_cell_th"><img src="images/bullet_checked.gif">회원 ID</div>
				<div class="div_table_cell_td">
					<input type="text" class="normal">&nbsp;&nbsp;&nbsp;
					<input type="button" value="중복확인">
				</div>
			</li>
			<li class="li_table_row">
				<div class="div_table_cell_th"><img src="images/bullet_checked.gif">비밀번호</div>
				<div class="div_table_cell_td"><input type="text" class="normal"></div>
			</li>
			<li class="li_table_row">
				<div class="div_table_cell_th"><img src="images/bullet_checked.gif">비밀번호 확인</div>
				<div class="div_table_cell_td"><input type="text" class="normal"></div>
			</li>
			<li class="li_table_row">
				<div class="div_table_cell_th"><img src="images/bullet_checked.gif">연락처1</div>
				<div class="div_table_cell_td">
					<select class="" style="margin-left: 10px;">
						<option value="010">010</option>
						<option value="011">011</option>
						<option value="012">012</option>
					</select>
					-
					<input type="text" class="phone">&nbsp;-
					<input type="text" class="phone">&nbsp;&nbsp;&nbsp;
					<input type="button" value="인 증" >
				</div>
			</li>
			<li class="li_table_row">
				<div class="div_table_cell_th" style="border-bottom: 2px solid lightgray;"><img src="images/bullet_checked.gif">이메일</div>
				<div class="div_table_cell_td" style="border-bottom: 2px solid lightgray;">
					<input type="text" style="width: 100px; height: 25px; margin: 7px 0 0 10px;">&nbsp;@
					<input type="text" style="width: 130px; height: 25px; margin: 7px 0 0 1px;">&nbsp;&nbsp;
					<select style="height: 30px;">
						<option value="">선택해 주세요</option>
						<option value="1">naver.com</option>
						<option value="2">daum.net</option>
						<option value="3">google.com</option>
					</select>
				</div>
			</li>
		</ul>
		
		
	</fieldset>
	
	<fieldset style="margin-top: 30px;">
		<legend>&nbsp;&nbsp;선택 정보 입력&nbsp;&nbsp;</legend>
		<ul class="ul_table1">
			<li class="li_table_row">
				<div class="div_table_cell_th">연락처2</div>
				<div class="div_table_cell_td">
					<select class="" style="margin-left: 10px;">
						<option value="010">02</option>
						<option value="011">070</option>
						<option value="012">031</option>
					</select>
					-
					<input type="text" class="phone">&nbsp;-
					<input type="text" class="phone">&nbsp;&nbsp;&nbsp;
				</div>
			</li>
			<li class="li_table_row">
				<div class="div_table_cell_th">성 별</div>
				<div class="div_table_cell_td">
					<input type="radio" name="gender">남 성
					<input type="radio" name="gender">여 성
				</div>
			</li>
			<li class="li_table_row">
				<div class="div_table_cell_th">주 소</div>
				<div class="div_table_cell_td">
					<input type="text" style="margin: 3px 0 0 10px; width: 50px;">&nbsp;-
					<input type="text" style="margin-top: 3px; width: 50px;"">
					<input type="button" value="우편번호 검색"><br/>
					<input type="text" style="margin: 2px 0 2px 10px; width: 400px;">
				</div>
			</li>
			<li class="li_table_row">
				<div class="div_table_cell_th">신체 사이즈</div>
				<div class="div_table_cell_td">
					&nbsp;&nbsp;키: 
					<input type="text" class="normal" style="width: 60px; height: 24px; margin-left: 3px; margin-right: 2px;">cm
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;몸무게: 
					<input type="text" class="normal" style="width: 60px; height: 24px; margin-left: 3px; margin-right: 2px;">kg
				</div>
			</li>
			<li class="li_table_row">
				<div class="div_table_cell_th">생 일</div>
				<div class="div_table_cell_td">
					<input type="text" style="margin: 7px 2px 0 10px; width: 50px; height: 24px;">년도&nbsp;&nbsp;
					<input type="text" style="margin: 7px 2px 0 10px; width: 30px; height: 24px;">월&nbsp;&nbsp;
					<input type="text" style="margin: 7px 2px 0 10px; width: 30px; height: 24px;">일
				</div>
			</li>
			<li class="li_table_row">
				<div class="div_table_cell_th" style="border-bottom: 2px solid lightgray;">직 업</div>
				<div class="div_table_cell_td" style="border-bottom: 2px solid lightgray;">
					<input type="checkbox" class="c_box">학생&nbsp;&nbsp;&nbsp;
					<input type="checkbox" class="c_box">직장인&nbsp;&nbsp;&nbsp;
					<input type="checkbox" class="c_box">자영업&nbsp;&nbsp;&nbsp;
					<input type="checkbox" class="c_box">기타
					<input type="text" class="normal" style="width: 65px; height: 20px; margin-left: 2px;">
				</div>
			</li>
		</ul>
		
	</fieldset>
	<div style="text-align: center; margin-top: 10px;" >
		<input type="button" value="가 입">&nbsp;&nbsp;
		<input type="button" value="취 소" style="background-color: gray;">
	</div>
</div>



</body>
</html>

'Front end > Html' 카테고리의 다른 글

블록 레벨 요소 vs 인라인 레벨 요소 / p태그 vs div태그 (0)	2021.01.10
HTML 문서의 기본 구조 (0)	2021.01.09

블록 레벨 요소 vs 인라인 레벨 요소 / p태그 vs div태그

2021. 1. 10. 17:38

※블록 레벨 요소 (Block Level Element)

블록 레벨 요소들

혼자 독립적으로 한 줄을 차지하는 요소이다. (너비가 100%라는 뜻임 즉 다음 요소는 다음 줄로 내려감)
특징 : width, height, margin, padding 등의 특징을 갖는다.
모든 인라인 요소를 품을 수 있다. (ex. <div> <span></span> </div>)

▼블록 요소 예▼

대표 블록 요소: div, p 태그

cf. 블록 레벨 요소를 css를 통해 인라인 레벨로 변경가능▼

<div style= "display:inline;"> </div>

※ 인라인 레벨 요소 (Inline Level Element)

인라인 레벨 요소들

독립적인 라인을 차지 하지 않고 자신의 컨텐츠가 끝나는 지점 까지의 넓이를 가진다.
인라인 요소 다음에는 줄바꿈이 일어나지 않고 바로 옆으로 이어져서 나타난다.
블록요소안에 포함되어 있고 인라인 요소 안에 또다른 인라인 요소 또한 포함 할 수 있다.
width, height 못가짐!
하지만!! line-height로 줄의 높낮이 가능, text-align으로 left,right, center로 정렬이 가능하다.

▼인라인 요소 예▼

인라인 요소 vs 블록 요소

※ 인라인-블록 속성 (inline-block) display: inline-block

css -> display: inline-block; 으로 지정하기
인라인 요소의 특징 + 블록 요소의 특징을 갖는다.
인라인 요소처럼 줄 바꿈 없이 width, height, margin, padding 을 갖는다.

▼inline-block 요소 예▼

<!DOCTYPE html>
<html>
<head>
<style>
span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;  
  background-color: yellow; 
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow; 
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow; 
}

div{
	border: 1px solid black;
}
</style>
</head>
<body>

<h1>The display Property</h1>

<h2>display: inline</h2>
<div>div태그 <span class="a"> 인라인 span 태그 </span> <span class="a">인라인 span 태그</span> div 태그 </div>
<br/>
<hr>

<h2>display: inline-block</h2>
<div>div 태그<span class="b">인라인-블록 span 태그</span> <span class="b">인라인-블록 span 태그</span> div 태그</div>

<h2>display: block</h2>
<div>div 태그 <span class="c">블록 적용 span태그</span> <span class="c">블록 적용 span태그</span> div 태그 </div>

</body>
</html>

'Front end > Html' 카테고리의 다른 글

display속성을 이용하여-> ul, li, div를 표로 만들기 (0)	2021.01.14
HTML 문서의 기본 구조 (0)	2021.01.09

HTML 문서의 기본 구조

2021. 1. 9. 11:58

※ 기본 구조

기본 구조 설명

태그 (Tag)
- <>시작 태그와, </> 종료태그 있음
- 종료태그가 없는 태그도 존재함 -> img, hr, br 등 (ex: <img src="" /> 시작과 종료를 한번에 씀)

요소 (Elements)
- <>시작 태그와 </>종료 태그로 이루어진 태그의 조합을 의미.
- cf. 태그와의 차이점 -> 요소는 <p>문단태그</p> 전체를 의미함 vs 태그는 <p>,</p> 각각을 의미함.

속성 (Attributes)
- <>시작 태그 아나에서 사용 되는 것으로 요소의 특징과 추가적인 정보를 정의 함

<!-- ↱ 속성 이름 -->
<p style="text-align: right;">
<!--        ↳ 속성 값 -->


<!--   ↱ 속성 이름 -->
 <td colspan="2">
<!--           ↳ 속성 값 -->

속성 값 (Value) 또는 인수 (Arguments)
-속성에 지정한 값을 속성 값 or 인수 라고 한다. " " or ' ' 로 감싸서 지정하면 된다.

cf. <meta> 태그 : HTML 문서에 대한 여러 가지 정보를 제공하기 위해 사용.
브라우저 화면에는 표시 되지 않지만 컴퓨터에 의해 해석되는 정보들로 구성되며
일반적으로 HTML문서의 설명, 키워드, 문서의 작성자 등 HTML 문서의 데이터를 지정하고 정의하는데 사용.
(블로그 참고하기☞webclub.tistory.com/354)

<!-- 아래의 태그들은 필요할 때 사용할 수 있으며 모두 생략할 수 있다. --> 
<title>HTML 문서의 구조</title>

<!-- 웹 페이지를 제작할 때 어떤 툴을 사용했는지 정의 -->
<meta name="Generator" content="eclipse" >

<!-- 웹 페이지를 제작자를 정의 -->
<meta name="Author" content="Jini">

<!-- 검색엔진에서 검색할 웹 페이지의 키워드를 정의 -->
<meta name="Keywords" content="HTML&CSS">

<!-- 웹 페이지의 주제를 정의 -->
<meta name="Desciption" content="HTML&CSS를 이용한 웹 페이지 만들기"> 

<!-- 웹 페이지를 작성할 때 사용한 인코딩 문자 셋을 정의 -->
<meta charset="UTF-8">

<!-- 설정한 시간이 지나면 자동으로 지정한 url로 이동 한다. -->
<meta http-equiv="refresh" content="3; url=meta01.html">

'Front end > Html' 카테고리의 다른 글

display속성을 이용하여-> ul, li, div를 표로 만들기 (0)	2021.01.14
블록 레벨 요소 vs 인라인 레벨 요소 / p태그 vs div태그 (0)	2021.01.10

PREV 1 NEXT

+ Recent posts

Powered by Tistory, Designed by wallel

티스토리툴바