YJ의 새벽
CSS ( display ) 본문
- Display
***display 속성 : 화면에 어떻게 보일지.
none : 보이지않음
--요소를 렌더링 하지않도록 설정,
visibility 속성을 hidden 으로 설정한과 달리, 영역도 차지하지않음.
block : 블록박스 (한줄형식)
-- div , p , h , li 등이 해당.
-- 기본적으로 가로영역을 모두 채움.
-- width , height 속성을 지정할수있음 .
inline : 인라인박스
inline-block : block과 inline의 중간 형태
***프레임이란 ? 현재 화면을 가르키는 용어
_blank : 새로운 탭에서 오픈함.
_self : 현재 프레임으로 오픈함
_parent : 현재 프레임의 부모 프레임에서 오픈함
_top : 현재 윈도우 전체에서 오픈함
프레임이름 : 명시된 프레임에서 오픈함
EX ))) display_none , visibility 예제 --div
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>visibility예제</title>
<style>
.display_none{display:none;}
.invisible{visibility: hidden;}
</style>
</head>
<body>
<div class="display_none"> 예제1 </div> -- 자리조차없음 display : none
<div> 예제2 </div>
<div class="invisible"> 예제3 </div> -- 자리는 있음 visibility : hidden
<div> 예제4 </div>
</body>
</html>
EX))) block 예제 - div
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>block예제</title>
<style>
.block1{width: 300px; border: 10px solid rosybrown;}
.block2{width: 200px; border: 10px solid blue;}
.block3{border: 15px solid green;}
</style>
</head>
<body>
<div class="block1"> 예제1 </div>
<div class="block2"> 예제2예제2예제2예제2예제2예제2예제2예제2</div>
<div class="block3"> 예제3 </div>
</body>
</html>
EX ))) block예제 2 , 수직방향메뉴
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>수직방향메뉴 만들기</title>
<style>
a {display:block;}
</style>
</head>
<body>
<p>수직방향메뉴 :</p>
<a href="http://naver.com" target="_blank">네이버</a> -- _blank : 새로운창을 열겠느냐!
<a href="http://daum.net" target="_blank">다음</a>
<a href="http://google.com" target="_blank">구글</a>
</body>
</html>
수직방향메뉴 :
네이버 다음 구글
EX ))) inline 예제
--block과 달리 줄바꿈이 되지않고, width , height 를 지정할수 없다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>inline 예제</title>
<style>
*{margin: 0;padding: 0;}
ul { list-style-type: none;}
#inline{ --부모
width: 500px;
padding: 10px;
margin: 20px 0px 0px 40px;
background-color:antiquewhite;
border: solid 1px chocolate;
text-align: center;
}
#inline li{display: inline;} --자식 --inline 박스안 가로로 출력
</style>
</head>
<body>
<ul id ="inline">
<li>회사소개 |</li>
<li>제품소개 |</li>
<li>공지사항 |</li>
<li>업무제휴 |</li>
<li>고객센터 |</li>
</ul>
</body>
</html>
EX ))) inline , <span> </span> 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>inline 예제</title>
<style>
.inline1{background: gray;}
.inline2{border:10px solid green}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, <span class="inline1">consectetur adipiscing elit</span>,
sed do <span class="inline2">eiusmod tempor</span> incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</body>
</html>
EX ))) inline-block 예제 -div
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스예제</title>
<style>
.greenbox{
display: inline-block;
width: 150px; height: 75px; margin: 10px;
border: solid 3px yellow ;
}
</style>
</head>
<body>
<h2> 인라인+블록 특성</h2>
<div class="greenbox"> 박스1 </div>
<div class="greenbox"> 박스2 </div>
<div class="greenbox"> 박스3 </div>
<div class="greenbox"> 박스4 </div>
<div class="greenbox"> 박스5 </div>
<div class="greenbox"> 박스6 </div>
</body>
</html>인라인+블록 특성
CSS3 module: Border
Name: border-top-left-fit-length , border-top-right-fit-length, border-bottom-right-fit-length, border-bottoml-eft-fit-length, border-top-left-fit-width , border-top-right-fit-width, border-bottom-right-fit-width, border-bottom-left-fit-width
www.w3.org
참조하겠습니다.
'WebFront_ > HTML,CSS' 카테고리의 다른 글
| CSS ( 폼 (input,로그인,회원가입)) (0) | 2023.02.06 |
|---|---|
| CSS ( 테이블 ) (0) | 2023.02.03 |
| CSS (<div>) (0) | 2023.02.03 |
| CSS (박스모델) (0) | 2023.02.02 |
| CSS (선택자,스타일(link)) (0) | 2023.02.02 |
