4. 글자 속성
font-style : 글자 스타일
font-weight : 글자 두께
a {text-decoration:none;}링크 글자의 밑줄을 제거해줌
5. 위치 속성
position
- 요소의 위치 지정 형식 설정
- 절대 위치 좌표 : absolute(절대 좌표),fixed(화면을 기준으로 절대 좌표)
- 상대 위치 좌표 : relative(초기 위치에서 상하 좌우 이동),static(위쪽에서 아래쪽으로 순서대로 배치)
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>position을 absolute로 지정한 경우 세 개의 div가 겹쳐서 보인다.
<style>
.box{
width:100px; height:100px;
position:absolute;
}
.box:nth-child(1){background-color: yellow;}
.box:nth-child(2){background-color: lightgray;}
.box:nth-child(3){background-color: skyblue;}
</style>left와 top을 지정해주면 겹쳐있던 div가 모두 보인다.
<style>
.box{
width:100px; height:100px;
position:absolute;
}
.box:nth-child(1){
background-color: yellow;
left:10px; top:10ox;
}
.box:nth-child(2){
background-color: lightgray;
left:50px; top:50px;
}
.box:nth-child(3){
background-color: skyblue;
left:90px; top:90px;
}
</style>
z-index 를 이용하면 숫자가 클수록 앞에 위치한다.
<style>
.box{
width:100px; height:100px;
position:absolute;
}
.box:nth-child(1){
background-color: yellow;
left:10px; top:10px;
z-index:3 ;
}
.box:nth-child(2){
background-color: lightgray;
left:50px; top:50px;
z-index:2 ;
}
.box:nth-child(3){
background-color: skyblue;
left:90px; top:90px;
z-index:1 ;
}
</style>내용이 요소 크기를 벗어날 때 처리
overflow
- 내용이 요소 크기를 벗어나 모두 보여주기 힘들 때 어떻게 보여 줄지 지정
| 키워드 | 설명 |
|---|---|
| hideen | 영역을 벗어나는 부분 감춤 |
| scroll | 영역을 벗어나는 부분을 스크롤로 만듦 |
overflow:hidden;6. 유동 속성
float 속성
- 웹 페이지의 레이아웃을 잡을 떄 많이 사용
- 웹 브라우저의 크기에 상관없이 공지 등을 일정한 위치에 고정할 때 적합
| 키워드 | 설명 |
|---|---|
| left | 태그를 왼쪽에 붙임 |
| right | 태그를 오른쪽에 붙임 |
이미지와 글이 어우러진 형태로 출력됨
img{
float:left;
}7. 그림자와 그레이디언트 속성
글자에 그림자 주기
text-shadow: 5px 5px 5px black;
box-shadow : 5px 5px 5px black;
배운 걸 기록하는 곳입니다.