<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	a{
		background:red;
		display:inline-block;/*위치 속성은 인라인이라서, 공존이 가능하지만 블럭의 너비와 높이를 갖음
									고전적인 디자인에서는 float을 주로 이용해서 레이아웃을 배치했지만, 
									요즘은 잘 안쓰임...........inline-block 많이 씀*/
		width:250px;
		height:50px;
	}
</style>
</head>
<body>
	<a href="#">난 인라인1</a>
	<a href="#">난 인라인2</a>
	<a href="#">난 인라인3</a>
</body>
</html>

'프로그래밍 > html_css' 카테고리의 다른 글

css - transform  (0) 2020.08.29
css - transition  (0) 2020.08.29
css - position 속성  (0) 2020.08.29
css - box의 이해  (0) 2020.08.29
css - clear 이해  (0) 2020.08.29
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>위치 속성</title>
<style>
/*
컨텐츠의 위치를 원하는 곳으로 지정하려며 CSS의 position 속성을 이용해야한다.
만일, 개발자가 아무런 속성을 지정하지 않을 경우 
모든 태그요소들은 기본적으로 position 이 relative이다.
절대위치는 다른 태그요소와 공존할 수 있다. 즉, 다른 태그에 의해 밀려나지 않는다.
*/
#b1{
	position:absolute; /*절대위치: 자신의 부모 태그를 기준으로 한 절대위치..
	ex) body로부터 절대위치*/
	left:250px;
	top:30px;
	border:2px solid red;
}
#b2{
	position:absolute; /*절대위치: 자신의 부모 태그를 기준으로 한 절대위치..
	ex) body로부터 절대위치*/
	left:300px;
}
</style>
</head>
<body>
	<img src="../images/bomberman.png" id="b1" width="100px"></img>
	<img src="../images/bomberman.png" id="b2" width="100px"></img>
</body>
</html>

'프로그래밍 > html_css' 카테고리의 다른 글

css - transition  (0) 2020.08.29
css - inline-block  (0) 2020.08.29
css - box의 이해  (0) 2020.08.29
css - clear 이해  (0) 2020.08.29
css - layout 연습  (0) 2020.08.29
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	#box1{
		width:60px;
		height:40px;
		background:red;
		/*아래쪽 물체와의 마진을 둬보자*/
		margin-bottom:100px;
		margin-left:100px;
		/*이 박스가 보유한 내용물을, 박스 벽과 간격을 둬보자 
			padding에 의해서 늘어난 만큼 width, height를 줄여야 된다. */
		padding-left:40px;
		padding-top:40px;
	}
	#box2{
		width:100px;
		height:100px;
		background:blue;
	}
</style>
</head>
<body>

<pre>
	<h3>	HTML의 모든 Tag는 Box로 간주되는데, 
	이때 Box와 Box간의 간격을 margin이라 하고,
	하나의 박스 안에 있는 내용물과 박스와의 간격을 padding이라 한다.</h3>
</pre>

	<div id="box1">내용물</div>
	<div id="box2">내용물</div>

</body>
</html>

'프로그래밍 > html_css' 카테고리의 다른 글

css - inline-block  (0) 2020.08.29
css - position 속성  (0) 2020.08.29
css - clear 이해  (0) 2020.08.29
css - layout 연습  (0) 2020.08.29
css - block의 이해  (0) 2020.08.29

+ Recent posts