🧾 텍스트 스타일
RGB 색상표
-
10진수 표현
Red 0 ~ 255
Green 0 ~ 255
Blue 0 ~ 255
color:rgb(0,0,0); -
16진수 표현
(0~15)
a(10) b(11) c(12) d(13) e(14) f(15)
Red 0~ff, Green 0~ff, Blue 0~ff
f(15)16 + f(15)1 → 255
color:000000;
투명도 설정(alpha 불투명도)
color: rgba(255,0,0,50%);
텍스트 정렬 text-align
가운데 정렬 : text-alig : center;
왼쪽 정렬 : text-align : left;
오른쪽 정렬 : text-align : right;
양쪽 정렬 : text-align : justify;
줄 간격 조절 line-height
line-height: px, n(배수), %
- 텍스트 위아래 가운데 정렬 :
안쪽 여백 조절 or 줄간격 조절
height 값 = line-height 값
같게 설정하면 위아래 가운데 정렬됨.
예제)
<style type="text/css">
h1{
text-align: center;
background-color: skyblue;
height : 100px;
line-height : 100px;
}
</style>
</head>
<body>
<h1>레드향</h1>
텍스트 줄 표시 text-decoration
text-decoration : underline; 밑줄
text-decoration : overline; 윗줄
text-decoration : line-through; 중간줄
text-decoration : none; 밑줄 없애기
ㄴ 하이퍼링크 밑줄 없앨 수 있다.
텍스트 그림자효과
text-shadow: 가로(왼오른쪽) 세로(위아래) 번짐정도 색상
예시) text-shadow : 3px 3px 7px black;
텍스트 대소문자 변환
text-trasform : uppercase; 전부 대문자
text-trasform : lowercase; 전부 소문자
text-trasform : capitalize; 첫번째 대문자
자간 조절 px, em, %
letter-spacing : 여백; 문자 간격
word-spacing : 여백; 단어 사이 간격
🧾 목록 스타일
-
불릿 모양, 번호 스타일 지정
list-style-type 속성
disc, circle, square, decimal(10진수), none(없애기) 등등..
ul, ol 구분없이 사용 가능 -
불릿 대신 이미지 사용
list-style-image: url("주소"); -
목록 들여 쓰기
list-style-position: inside;
outside는 기본값
불릿스타일타입 none으로 지정하고 들여쓰기 하니까..
outside랑 차이가 없다.. 이유가 뭐지..?
예제)
<head>
<style type="text/css">
.book1 {
list-style-type: none;
}
li{
line-height: 2;
}
span {
font-weight: bold;
color: #ad3000;
font-size: 15pt;
}
</style>
</head>
<body>
<h1><b>최신 웹 디자인 트렌드</b></h1>
<ul class="book1">
<li><span>반응형 웹 디자인</span> - 다양한 화면 크기에 최적화하다</li>
<li><span>플랫 디자인</span> - 입체에서 평면으로</li>
<li><span>풀스크린 배경</span> - 콘텐츠에 집중</li>
<li><span>원 페이지 사이트</span> - 한 페이지에 모든 내용을 담다</li>
<li><span>패럴랙스 스크롤링</span> - 동적인 효과로 강한 인상을!</li>
<li><span>웹 폰트</span> - 웹 타이포그래피를 받쳐주는 기술</li>
</ul>
</body>- 목록 사용하여 세로 메뉴 만들기
<head>
<style type="text/css">
ul {
list-style-type: none;
}
li {
border: 1px solid;
margin : 5px;
padding: 20px 40px;
}
#nav {
width : 300px;
/* 밖여백 위아래 왼오른 */
margin: 50px 30px;
}
a {
color: #222;
text-decoration: none;
} <!-- 하이퍼링크 밑줄없애기 -->
a:hover {
text-decoration: underline;
color:orange;
} <!-- 마우스포인터 대면 밑줄 생기고 색깔 바뀌게 하는 기능 -->
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="ex9.html">회사 소개</a></li>
<li>도서</li>
<li>자료실</li>
<li>동영상 강의</li>
</ul>
</div>
</body>
* margin : px px; (위아래 왼오른 밖여백)
표 스타일
-
표, 셀(칸 테두리 합치기) [table 태그에 적용]
border-collapse : collapse;
border-collapse : separate; : 기본
-
표 바깥줄만 생기기 [table 태그에 적용]
border : px solid black; -
표 칸칸 줄 생기기 [th,tr 태그에 적용]
border : px solid black; -
표제목 위치 지정 [table 태그에 적용]
caption-side : top, bottom, left, right; -
셀(칸) 사이 여백 [table 태그에 적용/ separate 되어있을때]
border-spacing : px;
