개발자 끄적끄적
position, 좌표 본문
.main>div{
[border:4px solid #00f;
width:400px;
height:200px;
margin:20px;]
}
-----
<div class='main'>
<div class='c1'>C!</div>
<div class='c2'>C2</div>
<div class='c3'>C3</div>
<div class='c4'>C4</div>
<div class='c5'>C5</div>
</div>
- main이라는 class 안에 있는 자식 div에 [...]가 적용된다->class=c1,c2,c3,c4,c5가 작용
- .abs>div : class가 abs안에 있는 자식 div가 적용된다(단, 손자는 아님 다시 지정해줘야한다)
------------------------------------------------------------------------
box-shadow:20px 40px 0 #77f;
- x축 그림자의 길이->20px
- y축 그림자의 길이->40px
- 퍼진 정도->0
- 그림자의 색깔->#77f
box-shadow:-20px 40px 0 #77f;
- ('-'값도 사용가능)왼쪽 상단에 그림자가 생긴다
text-shadow:5px 7px 5px #777;
- '-'값도 사용가능
- x축의 그림자 길이->5px
- y축의 그림자 길이->7px
- 퍼진 정도->5px
- 그림자 색깔->#777
------------
background-color:#000;
font-size:80pt;
width:400px;
height:150px;
/*text-shadow를 사용한 형광효과*/
text-shadow:0 0 2.5px #ff0;(노란색)
- 바탕색이 검은색이고 text-shadow효과를 줌으로써 노란색 형광효과가 나타난다
--------------------------------------------------------------------------------
position
a. static(기본값 or 정적) : position을 지정하지 않으면 static
b. fixed(고정)
ex)div.c1{
width:100px;
border:1px solid #aaa;
background-color:#eee8;
padding:20px;
position:fixed;
top:200px;
right:0;
}
- fixed형으로 고정된 div(또는 class)영역은 스크롤바를 내리거나 이동했을 때도 고정된다
- 좌표 설정이 가능하다
- right:0;->오른쪽 넓이가 0->박스 내 결과창이 오른쪽으로 이동
c. absolute(절대좌표)
- 부모(조상) 요소를 기준으로 배치
- 기본값으로 기준위치는 브라우저 좌측상단(0,0)
- 부모요소의 position이 relative인 경우는 부모요소의 좌측상단이(0,0)이다
- 위치 설정은 left, top, right, bottom을 사용한다
d. relative(상대좌표)
- 기준위치는 자신이 원래 표시될 위치가 기준
- 위치 설정은 left, top, right, bottom을 사용한다('-'도 가능)
*class를 지정 할 때 '.abs, .rel'도 가능하다
Java, CSS, Javascript에서 ','는 나열 형 기호
*'.abs>div, rel>div'도 가능하다
class=abs인 자식 div가 적용, class=rel인 자식 div가 적용
*.abs>.c1 : class=abs안에 있는 자식 div중 class=c1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.abs,.rel{
border:1px solid #aaa;
width:250px;
height:250px;
position:relative;
}
.abs>div, .rel>div{
width:100px;
height:100px;
border:1px solid #00f;
}
.abs>.c1{
position:absolute;
}
.abs>.c2{
position:absolute;
left:100px;
}
.abs>.c3{
position:absolute;
top:100px;
}
.abs>.c4{
position:absolute;
top:100px;
left:100px;
}
/*relative ---*/
.rel>.c2{
position:relative;
left:100px;
top:-100px;
}
.rel>.c3{
position:relative;
top:-100px;
}
.rel>.c4{
position:relative;
top:-200px;
left:100px;
}
</style>
<title>css_exam/position_2</title>
</head>
<body>
<h1>absolute / relative</h1>
<div class='abs'>
<div class='c1'>A</div>
<div class='c2'>B</div>
<div class='c3'>C</div>
<div class='c4'>D</div>
</div>
<div class='rel'>
<div class='c1'>A</div>
<div class='c2'>B</div>
<div class='c3'>C</div>
<div class='c4'>D</div>
</div>
</body>
</html>
(결과창)
- A B
C D
------------------------------------------------------------------
주메뉴(상단) : html, css, javascript, db, java, jsp, servlet, mybatis
[미션2]
1. div태그 안에서 ul태그를 사용하여 메뉴 제작
2. 메뉴에 마우스가 올라가면 상태값이 바뀌도록 설정(hover)-option
3. 메뉴가 들어 있는 부모의 position은 relative
4. 메뉴가 들어 있는 div는 absolte로 지정
-----------------------------------------------------------------
[미션2 css/index2.css]
@charset "UTF-8";
*{ /*모든 태그에 외각선 표시해 보기*/
border:0px solid #aaa;
padding:10px
}
.main{
width : 1100px;
margin:10px auto;
border:4px solid #66f;
}
.header{
height:300px;
background-color:#77ff77;
position:relative;
}
.header li:hover{
background-color:#00f;
color:#ff0;
cursor:pointer;
}
.center{
border:1px solid rgb(255, 0, 128);
/*background-color:#ff88;*/
}
.memu{
height:300px;
width:200px;
background-color:#ff99ff;
display:inline-block;
}
.content{
width:600px;
height:300px;
background-color:#00ff88;
display:inline-block;
vertical-align:top;
}
.aside{
width:200px;
height:300px;
background-color:#00ff00;
display:inline-block;
vertical-align:top;
}
.footer{
height:120px;
background-color:#ccc;
}
/* 상단 메인 메뉴*/
.header li{
display:inline-block;
list-style:none;
width:90px;
text-align:center;
padding:6px 10px;
border-radius:20px;
}
.header>div{
position:absolute;
right:10px;
bottom:0;
background-color:#999a;
padding:1px;
border-radius:14px;
}
.header ul{
margin:0;
padding:0;
}
- .header>ul>li{...}->'>' : 자식(class=header인 자식이 ul인 자식 li)
- .header li{...}->'blank' : 후손(class=header인 후손 li)
- display:inline-block; 만을 써도 점이 없어지긴하지만
list-style:none;(<ul><li>...</li></ul>, 점을 없애는 속성)을 써주는게 정석
------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css_exam/visible</title>
<style>
.c1,.c2,.c3{
border:2px solid #00f;
padding:20px;
}
.c1{
display:block; /* or none*/
}
.c2{
visibility:visible; /* or hidden*/
}
.c3{
height:26px;
white-space:nowrap; /*줄바꿈 금지*/
overflow:hidden;
text-overflow:ellipsis;
}
</style>
</head>
<body>
<h1>display / visibility</h1>
<div>
<div class='c1'>
display 속성을 사용한 보여주기/감추기
</div>
<div class='c2'>
visibility 속성을 사용한 보여주기/감추기
</div>
<div class='c3'>
청춘에서만 하였으며, 찾아 그림자는 하는 영원히 황금시대다. 더운지라 생의 못할 얼음이 안고, 옷을 그리하였는가? 두손을 넣는 보는 없으면, 있으랴? 가진 주며, 있는 피가 불어 우리 보이는 우리는 위하여서, 봄바람이다.
</div>
</div>
</body>
</html>
overflow : 특정 영역에 내용이 넘쳤을 때 넘친 내용을 어떻게 처리할 것인가
- hidden : 넘친 내용이 보이지 않는다
- scroll : div이지만 입력상자가 생성되며, 입력상자 안에 overflow된 내용이 스크롤이 가능하게 나온다
- visible : overflow된 내용을 그대로 보여준다(기본값)
display : 내용을 숨길 것인가 보여줄 것인가(내용, 공간 모두 사라진다)
- none : 내용이 사라짐
- block : 내용이 보임
visibility : 내용을 숨길 것인가 보여줄 것인가(내용이 숨겨져도 공간을 차지한다)
- hidden : 내용은 사라지지만 공간은 유지
- visible : 내용이 보임
글이 넘쳤을 때 '...'으로 처리하는 방법(3가지 옵션이 병행해야한다 ex)뉴스 헤드라인 ...처리)
white-space : nowrap; -> 줄바꿈을 하지 않는다
overflow : hidden; -> 넘친 부분을 보여주지 않는다
text-overflow : ellipsis; -> 넘쳐진 부분들은...으로 처리
text-overflow : clip; ->잘려진다
-------------------------------------------------------------------------------------
'HTML, CSS' 카테고리의 다른 글
| 동적삽입 (0) | 2023.03.04 |
|---|---|
| Inline block mode, 배경화면 이미지 속성 (0) | 2023.03.04 |
| 글꼴, 바탕색, 자손 (1) | 2023.03.04 |