font: bold 20pt serif,sans-serif;
굵기, 크기, 글꼴(첫번쨰 글꼴이 없으면 그 다음 글꼴 사용) 순
text-shadow: 3px 3px 5px #777777;
글씨 그림자 효과
1. x쪽으로 이동 2. y쪽으로 이동 3. 번짐(blur, 숫자가 클수록 더 번짐) 4. 그림자 색
box-shadow: 10px 10px 3px #0000FF;
박스 그림자 효과
위와 동일
border: 3px dotted blue;
경계선두께 경계선디자인 경계선색
경계선디자인은 dotted(점선) dashed(조금긴 점선) double(얇은선 두개) groove(굵은선) inset ridge outset(태극기처럼 대각선으로 나뉨) solid(그냥 선) 등이 있음
table과 table안에 있는 td border 사이 간격 생기게 하기: border-collapse: separate;
간격 없애기: border-collapse: collapse;
text-indent: 30pt
30 만큼 띄우기
text-transform: capitalize
capitalize(첫글자만 대문자로), uppercase, lowercase
text-align: right
글자 정렬
word-spacing: 50px;
단어 사이 간격 조정
letter-spacing: 25px;
글자 사이 간격 조정
text-decoration: overline underline;
텍스트 위아래 줄긋기
display: inline;
inline - 좌우배치 margin,padding 좌우간격 설정 가능, width,height 설정 불가
inline-block은 inline처럼 배치, 그러면서 width,height,margin,padding다 가능
block - 상하배치
※inline 요소는 필요한 만큼만 크기를 차지해서 width,height가 정해져있음, 반면 block 요소는 무조건 width 100%로 시작됨, 그래서 inline은 width,height 설정 불가, 필요시 inline-block으로 바꿔줘야됨
position
- absolute: 기준점(0,0) 화면 좌상단
- relative: 상대적인(바로앞 도형 등)
- static: default 기본배치방법, 좌->우, 상->하
- fixed: 고정위치(스크롤을 해도 항상 일정위치에 고정됨)
overflow: hidden;
hidden - 글자가 칸을 넘어가면 보이지 않음
scroll - 글자가 칸을 넘어가면 스크롤 생김 (글자가 넘어가지 않아도 일단 스크롤생김)
visible - 글자가 칸을 넘어가면 칸을 넘어버림
auto - 자동으로 맞춰줌(스크롤 생성)
배경화면 설정 방법:
background-size: cover;
background-image: url("경로명");
background-position: center;
min-height: 100%;
border: 0;
padding: 0;
그림과 텍스트 박스 사이즈 맞출 때 참고사항:
<style>
div{
width: 270px;
padding: 12px;
border: 7px solid steelblue;
margin: 0;
/* 그림가로길이 308 = 가로270 + 패딩12*2 + 테두리 7*2 */
}
</style>
</head>
<body>
<h1>박스가로 길이와 그림 가로길이를 계산으로 맞추어 보자</h1>
<div>Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! </div>
<img src="img/aa.jpg" width="308" alt="그림" />
</body>그림은 가로길이(width)만 생각해도 되지만 글자칸은 width,padding,border등 을 생각해서 총 길이를 짜야됨
'[front-end] > CSS' 카테고리의 다른 글
| Semantic (0) | 2021.01.11 |
|---|---|
| CSS (0) | 2021.01.05 |