● 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>
![](https://blog.kakaocdn.net/dn/TKRud/btrzn9KefKl/kpANONIYM8ubKkoJOQKjM0/img.png)
실습(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>
![](https://blog.kakaocdn.net/dn/bycdKN/btrzoOlxY2L/pVKWkahksWU1p8GCh4Aqqk/img.png)
실습(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>
![](https://blog.kakaocdn.net/dn/d0OibT/btrzpsh0VXn/wlbwNfq6Zkwe25huYtBea0/img.png)
실습(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>
![](https://blog.kakaocdn.net/dn/cVESnu/btrzncAtF6z/cvWNIDt45cg0vyYZBdczF0/img.png)
실습(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>
![](https://blog.kakaocdn.net/dn/czWa7S/btrzo9CXsFb/lEXTX80KHJsw0Ewfp8OWNk/img.png)
'웹 개발 > 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 |