본문 바로가기
웹 개발/HTML

[Web_HTML] 05

유리rr 2022. 4. 17. 13:36

● HTML 요소의 종류

▶ display

1. 블록(block) 레벨 요소

- p, h, ul, ol, div, form, ... 등

- 웹 페이지 상에 블록을 만드는 요소

- 코드 상에 한 줄로 이어 써도 화면 상에서는 앞 뒤 요소 사이에 새로운 줄을 만들어서 나타난다.

- 영역이 정확히 구분되어 있기 때문에, width와 height 속성을 수정할 수 있다.

(ex) <p>apple</p><p>banana</p>

 

(1) margin-top , margin-bottom 속성도 잘 적용된다.(바깥 여백 상하)

 

(2) padding-top, padding-bottom 속성도 잘 적용된다.(안쪽 여백 상하)

 

(3) div 태그

- 다른 html 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록 요소이다.

- 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 div 태그를 사용한다.

 

 

2. 인라인(inline) 레벨 요소

- span, a, img, strong, em, ... 등

- 새로운 줄을 만들지 않고 작성한 단락 내에 나타난다.

- 안에 있는 내용 만큼만 영역을 차지한다.

- 영역이 불분명하기 때문에 width와 height를 임의로 부여할 수 없다.

(ex) <em>apple</em><span>banana</span>

 

(1) margin-top, margin-bottom 속성도 부여할 수 없다.(바깥 여백 상하)

 

(2) padding-top, padding-bottom 속성도 부여할 수 없다.(안쪽 여백 상하)

 

(3) span 태그

- 텍스트의 특정 부분을 묶는 데 자주 사용되는 요소이다.

- 주로 텍스트의 특정 부분에 따로 다른 스타일을 적용하기 위해 사용한다.

 

 

3. 인라인 블록(inline-block) 레벨 요소

- button, input, select, ...

- inline 요소와 동일한 영역(내용만큼)을 가지지만 width와 height를 설정할 수 있다.

 

(1) margin-top, margin-bottom 속성도 잘 적용된다.(바깥 여백 상하)

 

(2) padding-top, padding-bottom 속성도 잘 적용된다.(안쪽 여백 상하)

 

 

 

● <a> 태그

- <a> 태그의 href에 id 속성을 이용하면 간단히 책갈피를 만들 수 있다.

1. 우선 책갈피를 통해 가고 싶은 위치에 id 속성을 작성한다.

2. 작성한 id 속성값을 이용하여 다른 <a> 태그에 링크를 걸어준다.

 

 

 

실습(display)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display</title>
</head>
<body>
	<h1 style="background: yellow; width: 300px; height: 300px;">블록 요소</h1>
    
	<!--div 태그에 {display: inline}를 써주었기 때문에 "입니다."가 같은 줄에 작성된다.-->
	<div style="display: inline">div 태그</div> 입니다.
    
	<div style="text-align: center">
		<!-- 인라인 요소에는 width와 height를 부여할 수 없기 때문에 적용되지 않는다. -->
		<strong style="background: red; width: 300px; height: 300px;">인라인 요소</strong>
	</div>
    
	<!--span 태그는 width와 height를 부여할 수 없지만 {display: inline-block}을 써주었기 때문에 속성이 적용된다.-->    
	<span style="display: inline-block; background: yellow; width: 300px; height: 300px;">span 태그</span> 입니다.
	
	<!--button 태그는 inline-block이므로 줄은 바뀌지 않지만 width와 height 속성이 적용된다.-->
    <button style="width: 300px; height: 300px;">인라인-블록 요소</button>입니다.
</body>
</html>

 

결과

 

 

 

 

실습(div(1))

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div</title>
</head>
<body>
	<div style="width: 100%">
		<div style="display:inline-block; background: red; width: 50%; text-align: center;">DIV1</div>
		<div style="display:inline-block; background: green; width: 50%; text-align: center;">DIV2</div>
	</div>
	
	<!--
		블록 요소를 한 줄로 정렬하고 싶을 때에는 float 속성을 사용한다.
		left는 왼쪽으로 배치되고, right는 오른쪽으로 배치된다.
		각 블록 요소의 width를 조정하여 정렬하는 것을 권장한다.
	-->
	<div style="background: orange; width: 33%; text-align: center; float: left; margin-right: 0.5%;">DIV3</div>
	<div style="background: skyblue; width: 33%; text-align: center; float: left; margin-right: 0.5%;">DIV4</div>
	<div style="background: lightgreen; width: 33%; text-align: center; float: left">DIV5</div>
	
	<!--
		1. 위에 있는 float 효과를 제거하기 위해서는 clear 속성을 사용한다.
		2. float left를 제거하기 위해서는 clear left, float right는 clear right로 제거할 수 있다.
		3. 굳이 좌우를 따지지 않고 싶다면 clear both를 주면 된다.
	-->
	
	<!-- 
		display 속성에 flex 값을 작성하면, 자식 블록 요소들이 일렬로 정렬된다.
	-->
	<div style="display: flex; clear: both; justify-content: space-between;">
		<div style="background: lightgray; width: 20%;">DIV6</div>
		<div style="background: pink; width: 20%;">DIV7</div>
		<div style="background: lime; width: 20%;">DIV8</div>
		<div style="background: maroon; width: 20%;">DIV9</div>
	</div>
	
</body>
</html>

 

결과

 

 

 

 

실습(div(2))

- 문제

<!--
	뉴스 기사를 한 개 더 넣기(좌우로 배치) 
	배경 넣고, 테두리 넣기
	사진과 글 사이의 간격 주기
	사진을 클릭하면 뉴스 원본으로 가게 하기
	기사 제목 달기
	사진은 2개 이상 넣기
-->

 

 

- 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display 실습</title>
<style>
	img{
		transition: all ease 1s;
	}
	
	img:hover { /*이미지에 마우스를 올렸을 때 회전*/
		transform: rotate(45deg);
	}
</style>
</head>
<body>
	<div style="display: flex; justify-content: space-evenly;">
		<div style="width:30%; padding: 30px; border: 5px double #79554880; background: #bbaaa31f;">
			<h3 style="width: 100%; text-align: center;">일론 머스크, 트위터 52조원에 인수제안…시간 외 18% 급등</h3>
			<div style="width: 100%;">
				<div style="float: left; padding: 4px;">
					<div style="float:left;">
						<a href="https://news.naver.com/main/read.naver?mode=LS2D&mid=shm&sid1=105&sid2=230&oid=215&aid=0001025778">
							<img width="100px" src="https://imgnews.pstatic.net/image/215/2022/04/14/A202204140306_1_20220414200701860.jpg?type=w647">
						</a>
					</div> 
					<div style="float:left;">
						<a>
							<img width="150px" src="https://imgnews.pstatic.net/image/215/2022/04/14/A202204140306_3_20220414203702643.jpg?type=w647">
						</a>
					</div>
				</div>
				테슬라의 최고경영자(CEO) 일론머스크가 소셜네트워크서비스 트위터를 430억 달러, 우리 돈으로 52조 원에 사들이겠다는 제안을 했다.
				일론 머스크의 이같은 제안에 트위터 주가는 미국 증시 개장 전 시간 외 거래에서 18% 급등 중이다.
				현지시간 14일 블룸버그통신에 따르면 일론 머스크는 미국 증권거래위원회 SEC에 제출한 서류를 통해 트위터를 주당 54.20달러에 현금으로 인수하겠다는 뜻을 밝혔다. 이는 전일 트위터 종가 대비 54%의 프리미엄을 부여한 금액이다.
				일론 머스크는 "트위터가 가진 엄청난 잠재력을 풀어내고 싶다"며 이번 인수 계획이 "최고이자 최선의 제안"이라고 밝혔다.
				올들어 가파른 주가하락을 보여온 트위터는 지난 4일 일론 머스크의 9.2% 지분 보유 계획이 공개된 직후 급등락을 반복해왔다.
				당초 일론 머스크는 지난 3월 14일 트위터 주식 9.2%를 매입했으나 해당 사실을 이달 초에 공개해 고의적으로 공시를 늦췄다는 비판을 받아왔다.
				미국 증권거래위원회 규정에 따르면 투자자는 상장기업 지분을 5% 이상 취득한 경우 10일 이내에 공개하도록 되어 있다.
				이에 따른 머스크의 지분 매입 공시는 지난달 24일까지였으나, 실제 공시일은 21일을 경과해 이뤄졌다.
				또 트위터는 지난 7일 이론 머스크가 이사회에 참여할 것이라고 밝혔으나 머스크는 10일 입장을 번복하고 이사회에 참여하지 않기로 결정하는 등 오락가락 행보를 보여왔다.
				이를 두고 월가 투자자들은 머스크가 의도적으로 이사회의 제약없이 지분을 확보하는 방식의 적대적인 인수합병에 나설 가능성을 꾸준히 제기해 왔다.
				김종학 기자 jhkim@wowtv.co.kr
			</div>
		</div>

		<div style="width:30%; padding: 30px; border: 5px double #79554880; background: #bbaaa31f;">
			<h3 style="width: 100%; text-align: center;">일론 머스크, 트위터 52조원에 인수제안…시간 외 18% 급등</h3>
			<div style="width: 100%;">
				<div style="float: left; padding: 4px;">
					<div style="float:left;">
						<a href="https://news.naver.com/main/read.naver?mode=LS2D&mid=shm&sid1=105&sid2=230&oid=215&aid=0001025778">
							<img width="100px" src="https://imgnews.pstatic.net/image/215/2022/04/14/A202204140306_1_20220414200701860.jpg?type=w647">
						</a>
					</div>
					<div style="float:left;">
						<a>
							<img width="150px" src="https://imgnews.pstatic.net/image/215/2022/04/14/A202204140306_3_20220414203702643.jpg?type=w647">
						</a>
					</div>
				</div>
				테슬라의 최고경영자(CEO) 일론머스크가 소셜네트워크서비스 트위터를 430억 달러, 우리 돈으로 52조 원에 사들이겠다는 제안을 했다.
				일론 머스크의 이같은 제안에 트위터 주가는 미국 증시 개장 전 시간 외 거래에서 18% 급등 중이다.
				현지시간 14일 블룸버그통신에 따르면 일론 머스크는 미국 증권거래위원회 SEC에 제출한 서류를 통해 트위터를 주당 54.20달러에 현금으로 인수하겠다는 뜻을 밝혔다. 이는 전일 트위터 종가 대비 54%의 프리미엄을 부여한 금액이다.
				일론 머스크는 "트위터가 가진 엄청난 잠재력을 풀어내고 싶다"며 이번 인수 계획이 "최고이자 최선의 제안"이라고 밝혔다.
				올들어 가파른 주가하락을 보여온 트위터는 지난 4일 일론 머스크의 9.2% 지분 보유 계획이 공개된 직후 급등락을 반복해왔다.
				당초 일론 머스크는 지난 3월 14일 트위터 주식 9.2%를 매입했으나 해당 사실을 이달 초에 공개해 고의적으로 공시를 늦췄다는 비판을 받아왔다.
				미국 증권거래위원회 규정에 따르면 투자자는 상장기업 지분을 5% 이상 취득한 경우 10일 이내에 공개하도록 되어 있다.
				이에 따른 머스크의 지분 매입 공시는 지난달 24일까지였으나, 실제 공시일은 21일을 경과해 이뤄졌다.
				또 트위터는 지난 7일 이론 머스크가 이사회에 참여할 것이라고 밝혔으나 머스크는 10일 입장을 번복하고 이사회에 참여하지 않기로 결정하는 등 오락가락 행보를 보여왔다.
				이를 두고 월가 투자자들은 머스크가 의도적으로 이사회의 제약없이 지분을 확보하는 방식의 적대적인 인수합병에 나설 가능성을 꾸준히 제기해 왔다.
				김종학 기자 jhkim@wowtv.co.kr
			</div>
		</div>
	</div>
</body>
</html>

 

결과

 

 

 

 

실습(a 태그(1))

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a태그 스타일 - 상태</title>
<style>
	/* 처음 방문 */
	a:link {
		color: green;
		text-decoration: none;  /* 밑줄 없애기 */
	}
	
	/* 이미 방문 */
	a:visited {
		color: maroon;
		text-decoration: none;
	}
	
	/* 마우스를 올렸을 때 */
	a:hover {
		color: yellow;
		text-decoration: none;
	}
	
	/* 클릭했을 때 */
	a:active {
		color: red;
		text-decoration: none;
	} 
	
</style>
</head>
<body>
	<h1>링크의 상태 알아보기</h1>
	<h2>
		<a href="https://www.naver.com">네이버로 이동하기</a>
	</h2>
</body>
</html>

 

결과

 

 

 

 

실습(a 태그(2))

<!DOCTYPE html>
<html> 
<head>
<meta charset="UTF-8">
<title>a태그 책갈피(anchor)</title>
</head>
<body>
	<h1 id="menu">페이지 책갈피</h1>
	<p><a href="#book1">북마크1로 이동</a></p>
	<p><a href="#book2">북마크2로 이동</a></p>

	<h2>제목1</h2>
	<p>1번째 단락</p>
	<h2>제목2</h2>
	<p>2번째 단락</p>
	<h2>제목3</h2>
	<p>3번째 단락</p>
	<h2>제목4</h2>
	<p>4번째 단락</p>
	<h2>제목5</h2>
	<p><a id='book1'>5번째 단락</a></p>
	<h2>제목6</h2>
	<p>6번째 단락</p>
	<h2>제목7</h2>
	<p>7번째 단락</p>
	<h2>제목8</h2>
	<p>8번째 단락</p>
	<h2>제목9</h2>
	<p>9번째 단락</p>
	<h2>제목10</h2>
	<p>10번째 단락</p>
	<h2>제목11</h2>
	<p>11번째 단락</p>
	<h2>제목12</h2>	
	<p id="book2">12번째 단락</p>
	<h2>제목13</h2>
	<p>13번째 단락</p>
	<h2>제목14</h2>
	<p>14번째 단락</p>
	<h2>제목15</h2>
	<p>15번째 단락</p>
	
	<p><a id="up" href="#menu">[맨 위로]</a></p>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$("a#up").click(function(e){
		e.preventDefault();
		$("html, body").animate({scrollTop:0}, 1500);
	})
</script>
</html>

 

결과

 

 

 

 

저작자표시 비영리 변경금지

'웹 개발 > HTML' 카테고리의 다른 글

[Web_HTML] 06  (0) 2022.04.18
[Web_HTML] 04  (0) 2022.04.16
[Web_HTML] 03  (0) 2022.04.15
[Web_HTML] 02  (0) 2022.04.14
[Web_HTML] 01  (0) 2022.04.13

'웹 개발/HTML' Related Articles

티스토리툴바