CSS(2)

✅디스플레이

display 속성

• 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정
• display 속성의 기본값

1. 블록(block)
2. 인라인(inline)

 

display 속성값이 block인 대표적인 태그

<div>, <h1>, <p>, <ul>, <ol>, <form>

 

display 속성값이 inline인 대표적인 태그

<span>, <a>, <img>

 

display 속성의 기본 설정값의 변경가능

속성 값을 변경 한다고해도 해당 요소가 완전히 다른 타입의 요소로 바뀌는 것은 아니며, 본래의 속성도 가지고 있음

<style>
    li { display: inline; width: 100px; height: 100px; }
</style>

 

inline-block

• 인라인-블록 요소는 인라인 요소와 비슷하지만, 너비와 높이, margin을 설정할 수 있음
• 인라인-블록으로 설정된 요소는 해당 요소 자체는 인라인(inline) 요소처럼 동작, 하지만 해당 요소 내부에서는 블록(block) 요소처럼 동작

div { width: 100px; height: 50px; }
.first { background-color: aqua; }
.second { background-color: green; }
.third { background-color: yellow; }
.inline { display: inline; }
.inline-block { display: inline-block; }

 

visibility 속성

HTML 요소가 웹 페이지에 표현될지 아닐지만을 결정

 

visibility 속성에 사용할 수 있는 속성값

1. visible : 해당 HTML 요소를 웹 페이지에 나타냄
2. hidden : HTML 요소를 웹 페이지에 나타내지 않음. 하지만 여전히 웹 페이지의 레이아웃에는 존재함
3. collapse : 이 속성값은 동적인 테이블에서만 사용할 수 있으며, 테이블의 테두리를 한 줄만 보여줌

 

HTML 요소 숨기기

display 속성값을 none으로 설정하면 됨

visibility 속성값을 hidden으로 설정해도 HTML 요소를 숨길 수 있지만, 눈에 보이지 않을뿐 여전히 웹 페이지의 레이아웃에는 존재하게됨

→ 따라서 민감하거나 귀중한 데이터를 visibility 속성을 이용하여 감추는 것은 바람직하지 않음

 

 

✅포지션

position 속성

position 속성은 HTML 요소가 위치를 결정하는 방식을 설정

 

static position

정적 위치, 모든 HTML position 속성의 기본 설정값

div { position: static; }

 

relative position

상대 위치, 정적 위치 기준으로 설정됨

div.relative { position: relative; left: 30px; }

 

absolute position

절대 위치, 상위태그 기준으로 설정됨, 상위 태그가 없다면 body태그 기준으로 설정됨

div.absolute { position: absolute; top: 50px; right: 0; }

 

fixed

고정 위치, 브라우저 창 기준으로 고정

div.fixed { position: fixed; top: 0; right: 0; }

 

z-index 속성

• 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정
• 스택(stack)의 순서는 양수나 음수 모두 설정할 수 있으며, 크기가 클수록 앞쪽에 위치하고 작을수록 뒤쪽에 위치하게 됨

 

 

✅플로트

float 속성

float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줌

현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용됨

float 속성이 적용된 요소 이후에 나타나는 요소들에도 float 속성이 상속됨

img { float: left; margin-right: 20px; }

 

clear 속성

상속받은 float 속성을 해제 시킴

clear : left 또는 right → 한쪽만 해제

cleat : both → 양쪽 다 해제

<style>
    .left { background-color: #FF8C00; width: 150px; height: 50px; float: left; }
    .right { background-color: #9932CC; width: 150px; height: 50px; float: right; }
		p { clear: left; }
    p { clear: both; }
</style>

 

overflow 속성

float 속성이 적용된 HTML 요소가 자신을 감싸고있는 컨테이너 요소보다 클 때 사용

div { border: 3px solid #73AD21; padding: 5px;}
img { float: left; }
.good { overflow: auto; }

 

 

✅디스플레이

display 속성

• 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정
• display 속성의 기본값

1. 블록(block)
2. 인라인(inline)

 

display 속성값이 block인 대표적인 태그

<div>, <h1>, <p>, <ul>, <ol>, <form>

 

display 속성값이 inline인 대표적인 태그

<span>, <a>, <img>

 

display 속성의 기본 설정값의 변경가능

속성 값을 변경 한다고해도 해당 요소가 완전히 다른 타입의 요소로 바뀌는 것은 아니며, 본래의 속성도 가지고 있음

<style>
    li { display: inline; width: 100px; height: 100px; }
</style>

 

inline-block

• 인라인-블록 요소는 인라인 요소와 비슷하지만, 너비와 높이, margin을 설정할 수 있음
• 인라인-블록으로 설정된 요소는 해당 요소 자체는 인라인(inline) 요소처럼 동작, 하지만 해당 요소 내부에서는 블록(block) 요소처럼 동작

div { width: 100px; height: 50px; }
.first { background-color: aqua; }
.second { background-color: green; }
.third { background-color: yellow; }
.inline { display: inline; }
.inline-block { display: inline-block; }

 

visibility 속성

HTML 요소가 웹 페이지에 표현될지 아닐지만을 결정

 

visibility 속성에 사용할 수 있는 속성값

1. visible : 해당 HTML 요소를 웹 페이지에 나타냄
2. hidden : HTML 요소를 웹 페이지에 나타내지 않음. 하지만 여전히 웹 페이지의 레이아웃에는 존재함
3. collapse : 이 속성값은 동적인 테이블에서만 사용할 수 있으며, 테이블의 테두리를 한 줄만 보여줌

 

HTML 요소 숨기기

display 속성값을 none으로 설정하면 됨

visibility 속성값을 hidden으로 설정해도 HTML 요소를 숨길 수 있지만, 눈에 보이지 않을뿐 여전히 웹 페이지의 레이아웃에는 존재하게됨

→ 따라서 민감하거나 귀중한 데이터를 visibility 속성을 이용하여 감추는 것은 바람직하지 않음

 

 

✅포지션

position 속성

position 속성은 HTML 요소가 위치를 결정하는 방식을 설정

 

static position

정적 위치, 모든 HTML position 속성의 기본 설정값

div { position: static; }

 

relative position

상대 위치, 정적 위치 기준으로 설정됨

div.relative { position: relative; left: 30px; }

 

absolute position

절대 위치, 상위태그 기준으로 설정됨, 상위 태그가 없다면 body태그 기준으로 설정됨

div.absolute { position: absolute; top: 50px; right: 0; }

 

fixed

고정 위치, 브라우저 창 기준으로 고정

div.fixed { position: fixed; top: 0; right: 0; }

 

z-index 속성

• 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정
• 스택(stack)의 순서는 양수나 음수 모두 설정할 수 있으며, 크기가 클수록 앞쪽에 위치하고 작을수록 뒤쪽에 위치하게 됨

 

 

✅플로트

float 속성

float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줌

현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용됨

float 속성이 적용된 요소 이후에 나타나는 요소들에도 float 속성이 상속됨

img { float: left; margin-right: 20px; }

 

clear 속성

상속받은 float 속성을 해제 시킴

clear : left 또는 right → 한쪽만 해제

cleat : both → 양쪽 다 해제

<style>
    .left { background-color: #FF8C00; width: 150px; height: 50px; float: left; }
    .right { background-color: #9932CC; width: 150px; height: 50px; float: right; }
		p { clear: left; }
    p { clear: both; }
</style>

 

overflow 속성

float 속성이 적용된 HTML 요소가 자신을 감싸고있는 컨테이너 요소보다 클 때 사용

div { border: 3px solid #73AD21; padding: 5px;}
img { float: left; }
.good { overflow: auto; }

 

 

✅정렬

margin 속성을 이용한 가운데 정렬

• margin 속성값을 auto로 설정하면, 해당 요소를 감싸고 있는 컨테이너 요소를 기준으로 수평 방향 가운데 정렬
• margin 속성을 이용하여 정렬 하려면 해당 요소는 특정한 너비를 가져야함

  div { width: 300px; margin: auto; }
  

• →따라서 이 방법을 사용하기 위해서는 해당요소의 width 속성값을 먼저 설정해야함

 

position 속성을 이용한 좌우 정렬

• 절대 위치 지정 방식의 요소를 좌우 정렬할 때 사용
• <body> 에 margin과 padding 속성값을 설정하는 것이 좋음
• →웹 브라우저마다 레이아웃이 다르게 보이는 것을 방지할 수 있음

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Align</title>
	<style>
		body {
			padding: 0;
			margin: 0;
		}
		div {
			border: 3px solid #4B0082;
			width: 300px;
			padding: 10px;
			margin: 0;
			position: absolute;
			right: 0;
		}
	</style>
</head>

<body>

	<h1>position 속성을 이용한 좌우 정렬</h1>
	<div>absolute position을 사용하면,<br>
	수평으로 좌우 정렬을 할 수 있어요!
	</div>

</body>

</html>

 

float 속성을 이용한 좌우 정렬

<body> 에 margin과 padding 속성값을 설정하는 것이 좋음

→웹 브라우저마다 레이아웃이 다르게 보이는 것을 방지할 수 있음

<head><!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Align</title>
	<style>
		body {
			padding: 0;
			margin: 0;
		}
		div {
			border: 3px solid #4B0082;
			width: 350px;
			padding: 10px;
			margin: 0;
		}
		div.left { float: left }
		div.right { float: right }
	</style>
</head>

<body>

	<h1>float 속성을 이용한 좌우 정렬</h1>
	<div class="left">float 속성값으로 left 또는 right를 사용하면,<br>
	수평으로 좌우 정렬을 할 수 있어요!
	</div>
	<div class="right">float 속성값으로 left 또는 right를 사용하면,<br>
	수평으로 좌우 정렬을 할 수 있어요!
	</div>

</body>

</html>