font-size
<style>
.one{
font-size: 1em;
}
.two{
/* 대문자 M 크기의 2배 */
font-size: 2em;
}
.three{
font-size: 3em;
}
.onepx{
font-size: 1px;
}
.sixteenpx{
font-size: 16px;
}
.apx{
/* full hd 1980*1080의 세로크기로 표시 */
font-size: 1060px;
}
</style>
</head>
<body>
<p>브라우저의 크기를 가진 단락</p>
<p class="one">1em 크기를 가진 단락</p>
<p class="two">2em 크기를 가진 단락</p>
<p class="three">3em 크기를 가진 단락</p>
<p class="onepx">1px 크기를 가진 단락</p>
<p class="sixteenpx">16px 크기를 가진 단락</p>
<p class="apx">1080px 크기를 가진 단락</p>
</body>font-vary
<title>Document</title>
<style>
.accent{
/* 폰트 굵기를 더 가늘게 */
font-weight: lighter;
}
.accent2{
/* 작은 대문자 */
font-variant: small-caps;
}
.accent3{
/* 굵게 */
font-weight: bold;
}
.accent4{
/* 더 굵게 */
font-weight: bolder;
}
</style>
</head>
<body>
<p>세계<span class="accent">3대</span>미항</p>
<p><span class="accent2">시드니(Sydney)</span>,호주</p>
<p><span class="accent3">리우데자네이루(Rio de Janeiro)</span>,브라질</p>
<p><span class="accent4">나폴리(Naples)</span>,이탈리아</p>
</body>font-style
<style>
p{font-style: italic;} /* 이탤릭체로 */
/* 똑같은 스타일일때 뒤에 나온것이 적용됨 */
/* p{font-style: normal;} */
p#txt{font-style: normal;} /* p 요소 중 id=txt인 부분은 보통체로 */
</style>
</head>
<body>
<h1>세계3대미항</h1>
<p>시드니(Sydney),호주</p>
<p>리우데자네이루(Rio de Janeiro),브라질</p>
<p id="txt">나폴리(Naples),이탈리아</p>
</bodyf>font
<style>
.txt{
/* 글꼴스타일, 크기, 줄간격, 글꼴 : 한꺼번에 적어야 적용 */
font: italic 12px/24px 돋움;
}
</style>
</head>
<body>
<p class="txt">
여러 요소가 함께 사용된 웹 문서 안에서 텍스트가 눈에 뜨게
하려면 내용에 맞는 글꼴과 글자크기, 그리고 글자색을
선택하는 것이 중요합니다.
</p>
<p>
여러 요소가 함께 사용된 웹 문서 안에서 텍스트가 눈에 뜨게
하려면 내용에 맞는 글꼴과 글자크기, 그리고 글자색을
선택하는 것이 중요합니다.
</p>
</body>color
<style>
h1{
/* green 계열을 200으로 지정 */
color: rgb(0, 200, 0);
}
h2{
color: blue;
}
.accent{
/* red 계열을 ff로 지정 */
/* color: #ff0000; */
/* 중복된 값은 생략 */
color: #f00;
}
img{
/* 오른쪽에 배치 */
float: right;
/* 양파 그림의 오른쪽에 여백이 생김 */
margin-right: 10px;
}
</style>
</head>
<body>
<h1>세계 10대 슈퍼푸드</h1>
<img src="images/galic.jpg">
<h2>마늘(Galic)</h2>
<p>
일해백리는 마늘의 별명이다. 한가지 해가 있으면,
<span class="accent">백가지</span> 이로움이 있다는 뜻이다.
</p>
<p>
일해백리는 마늘의 별명이다. 한가지 해가 있으면,
백가지 이로움이 있다는 뜻이다.
</p>
<p>
일해백리는 마늘의 별명이다. 한가지 해가 있으면,
백가지 이로움이 있다는 뜻이다.
</p>
</body>text-decoration
<style>
p{
line-height: 1.8;
}
.edited{
/* text-decoration 속성값이 overline 은 윗줄 */
/* text-decoration: overline; */
/* text-decoration: line-through 은 취소선 */
text-decoration: line-through;
}
a{
/* text-decoration 속성값이 none은 줄이 있는 경우 없앰 */
/* text-decoration: none; */
/* text-decoration 속성값이 underline은 밑줄 */
text-decoration: underline;
}
</style>
</head>
<body>
<h2>HTML5</h2>
<P>
다양한 기기로 인터넷에 접수 있는 요즘<br>
<span class="edited">HTML4</span>HTML5 를 공부해야 할 때 입니다.
</P>
<P>
<a href="https//www.spec.whatwg.org/" target="_blank">
<b>HTML5 표준 규약 살펴보기</b>
</a>
</P>
</body>text-transform
<title>Document</title>
<style>
.trans1{
/* text-transform 속성값이 uppercase 는 대문자로 변환 */
text-transform: uppercase;
}
.trans2{
/* text-transform 속성값이 capitalize 는 첫글자만 대문자로 변환 */
text-transform: capitalize;
}
.trans4{
/* text-transform 속성값이 lowercase 는 소문자로 변환 */
text-transform: lowercase;
}
.trans5{
/* text-transform 속성값이 none 는 변환 없음*/
text-transform: none;
}
</style>
</head>
<body>
<h1>Have to study</h1>
<ul>
<li class="trans1">html</li>
<li class="trans2">css</li>
<li class="trans3">javascript</li>
<li class="trans4">JQUERY</li>
<li class="trans5">AJAX</li>
</ul>
</body>text-shadow
text-shadow1
<style>
h1{
font-size: 100px;
font-family: "Arial Rounded MT";
}
.shadow1{
color: orange;
/* text-shadow: 1px 1px; */
/* 가로 10px 세로 10px 그림자 */
/* 번짐 정도, 그림자색은 기본값 : 번짐정도는 기본값이 0, 그림자색은 글자색 */
text-shadow: 10px 10px;
}
.shadow2{
/* 첫번째 5px은 오른쪽
두번째 5px은 아래쪽
범짐정도: 3px
그림자색 #f00 */
/* 첫번째 -5은 왼쪽 */
text-shadow: -5px 5px 3px #f00;
}
.shadow3{
color: #ffff;
/* 두번째 7px은 아래쪽 */
/* text-shadow: 7px 7px 5px #000; */
/* 두번째 -7px은 윗쪽 */
/* text-shadow: 7px -7px 5px #000; */
/* 번짐을 15px */
text-shadow: 7px -7px 15px #000;
}
</style>
</head>
<body>
<h1 class="shadow1">HTML5</h1>
<h1 class="shadow2">HTML5</h1>
<h1 class="shadow3">HTML5</h1>
</body>text-shadow2
<style>
body{
background: #222;
}
.shadow1{
/* text-shadow: 0 0 0px #ccc; */
/* text-shadow: 0 0 0px #ccc, 0 -5px 4px #ff3; */
/* text-shadow: 0 0 0px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3; */
/* text-shadow: 0 0 0px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80; */
text-shadow: 0 0 0px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -19px 18px #f20;
}
h1{
font-size: 80px;
/* letter-spacing : 자간 */
letter-spacing: 4px;
}
</style>
</head>
<body>
<h1 class="shadow1">HTML5</h1>
</body>letter-spacing
<style>
h1{font-size: 40px;}
.letter1{
/* normal은 기본값 */
/* letter-spacing: normal; */
letter-spacing: 0.2em;
}
.letter2{
letter-spacing: 0.5em;
}
.letter3{
letter-spacing: 1em;
}
</style>
</head>
<body>
<h1>HTML5</h1>
<h1 class="letter1">HTML5</h1>
<h1 class="letter2">HTML5</h1>
<h1 class="letter3">HTML5</h1>
</body>text-align
<style>
p{
border: 1px solid #ccc;
/* 테두리와 글자 사이의 여백이 10px */
padding: 10px;
/* 테두리 밖의 여백이 10px */
margin: 10px;
}
.align-left{
/* left는 기본정렬 */
text-align: left;
}
.align-right{
/* right는 오른쪽 정렬 */
text-align: right;
}
.align-center{
/* center는 중앙 정렬 */
text-align: center;
}
.align-justify{
/* justify는 양쪽 정렬 */
text-align: justify;
}
</style>
</head>
<body>
<h1>텍스트 정렬</h1>
<p class="align-left">
<!-- lorem 를 사용후 : 의미없는 글자들 사용 -->
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Eveniet voluptatibus ipsa soluta atque asperiores architecto sed ad inventore pariatur dignissimos, dolor sint.
Consequuntur laboriosam, amet eum vitae veritatis consectetur totam!
</p>
<p class="align-right">
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Eveniet voluptatibus ipsa soluta atque asperiores architecto sed ad inventore pariatur dignissimos, dolor sint.
Consequuntur laboriosam, amet eum vitae veritatis consectetur totam!
</p>
<p class="align-center">
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Eveniet voluptatibus ipsa soluta atque asperiores architecto sed ad inventore pariatur dignissimos, dolor sint.
Consequuntur laboriosam, amet eum vitae veritatis consectetur totam!
</p>
<p class="align-justify">
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Eveniet voluptatibus ipsa soluta atque asperiores architecto sed ad inventore pariatur dignissimos, dolor sint.
Consequuntur laboriosam, amet eum vitae veritatis consectetur totam!
</p>
</body>text-indent
<style>
p{
border: 1px solid #000;
padding: 10px;
margin: 10px;
}
.indent1{
/* 들여쓰기 15px */
text-indent: 15px;
}
.indent2{
/* %는 브라우저 크기에 따라 반응을 해서 비율 유지 */
text-indent: 5%;
}
</style>
</head>
<body>
<h1>블루베리(Blueberry)</h1>
<p>
블루베리는 비타민A,C,E가 풍부하고 안토니시아민, 페놀 들이
활성산소를 없애 노화를 억제한다.
블루베리는 비타민A,C,E가 풍부하고 안토니시아민, 페놀 들이
활성산소를 없애 노화를 억제한다.
</p>
<p class="indent1">
블루베리는 비타민A,C,E가 풍부하고 안토니시아민, 페놀 들이
활성산소를 없애 노화를 억제한다.
블루베리는 비타민A,C,E가 풍부하고 안토니시아민, 페놀 들이
활성산소를 없애 노화를 억제한다.
</p>
<p class="indent2">
블루베리는 비타민A,C,E가 풍부하고 안토니시아민, 페놀 들이
활성산소를 없애 노화를 억제한다.
블루베리는 비타민A,C,E가 풍부하고 안토니시아민, 페놀 들이
활성산소를 없애 노화를 억제한다.
</p>
</body>line-height
<style>
p{
border: 1px solid #000;
padding: 10px;
margin: 10px;
}
.normal-line{
/* 줄간격 */
line-height: 1;
}
.small-line{
/* 글자가 겹쳐서 보임 */
line-height: 0.7;
}
.big-line{
/* 줄간격이 넓음 */
line-height: 2;
}
</style>
</head>
<body>
<h2>블루베리(Blueberry)</h2>
<p>
블루베리는 비타민A,C,E가 풍부하고 안토니시아민, 페놀 들이
활성산소를 없애 노화를 억제한다.
블루베리는 비타민A,C,E가 풍부하고 안토니시아민, 페놀 들이
활성산소를 없애 노화를 억제한다.
</p>
<p class="normal-line">
블루베리는 비타민A,C,E가 풍부하고 안토니시아민, 페놀 들이
활성산소를 없애 노화를 억제한다.
블루베리는 비타민A,C,E가 풍부하고 안토니시아민, 페놀 들이
활성산소를 없애 노화를 억제한다.
</p>
<p class="small-line">
블루베리는 비타민A,C,E가 풍부하고 안토니시아민, 페놀 들이
활성산소를 없애 노화를 억제한다.
블루베리는 비타민A,C,E가 풍부하고 안토니시아민, 페놀 들이
활성산소를 없애 노화를 억제한다.
</p>
<p class="big-line">
블루베리는 비타민A,C,E가 풍부하고 안토니시아민, 페놀 들이
활성산소를 없애 노화를 억제한다.
블루베리는 비타민A,C,E가 풍부하고 안토니시아민, 페놀 들이
활성산소를 없애 노화를 억제한다.
</p>
</body>text-overflow
<style>
.content{
border: 1px solid #ccc;
width: 300px;
/* white-space 속성의 nowrap 값은 줄바꿈 없음 */
white-space: nowrap;
/* 스크롤 없어지면서 넘치는 글자가 잘림 */
overflow: hidden;
/* 잘린부분이 ... 으로 표시됨 */
text-overflow: ellipsis;
}
.content:hover{
/* 스크롤이 생기면서 잘린 글자를 보여줌 */
overflow: visible;
}
</style>
</head>
<body>
<h2>귀리(Oat)</h2>
<p class="content">
귀리는 베타글루칸(항암 및 면역 증강작용을 가지고 있는
불소화성 다당류) 성분을 포함하고 있다.
</p>
</body>bullet
<style>
.sqbullet{
/* square는 채운 사각형 */
list-style-type: square;
}
.nobullet{
/* none는 불릿 없앰 */
list-style-type: none;
}
</style>
</head>
<body>
<h1>이지스퍼블리싱</h1>
<ul class="sqbullet">
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
<ul class="nobullet">
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
</body>orderde
<style>
.book1{
/* lower-alpha 는 소문자 알파벳 */
list-style-type: lower-alpha;
}
.book2{
/* upper-roman 는 대문자 로마 숫자 */
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h1>도서 시리즈</h1>
<ol class="book1">
<li> it! 시리즈</li>
<li>된다 시리즈</li>
<li>DCM 프로 사진가</li>
<li>데이터과학 시리즈</li>
</ol>
<ol class="book2">
<li> it! 시리즈</li>
<li>된다 시리즈</li>
<li>DCM 프로 사진가</li>
<li>데이터과학 시리즈</li>
</ol>
</body>image-bullet
<style>
ul{
/* 기본값으로 이미지 없음 */
/* list-style-image: none; */
/* list-style-image 속성으로 이미지 불릿 사용 */
/* list-style-image: url("images/dot.png"); */
/* 큰따옴표 or 작은따옴표 or 생략해도 이미지 연결 */
/* list-style-image: url('images/dot.png'); */
list-style-image: url(images/dot.png);
}
</style>
</head>
<body>
<h1>이지스퍼블리싱</h1>
<ul>
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
</body>list-position
<style>
.outside{
/* outside는 내어쓰기 : 기본값 */
list-style-position: outside;
}
.inside{
/* inside는 들여쓰기 */
list-style-position: inside;
}
</style>
</head>
<body>
<h3>list-style-position을 지정하지 않음</h3>
<ul>
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
<h3>list-style-position : inside</h3>
<ul class="inside">
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
<h3>list-style-position : outside</h3>
<ul class="outside">
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
</body>실습
1.
<style>
body{
width: 500px;
padding: 10px;
border: 1px solid #ccc;
line-height: 2;
}
</style>
</head>
<body>
<h1>최신 웹 디자인 트렌드</h1>
<p>
반응형 웹 디자인 - 다양한 화면 크기에 최적화하다<br>
플랫 디자인 - 업체에서 평면으로<br>
풀스크린 배경 - 콘텐츠에 집중<br>
원 페이지 사이트 - 한 페이지에 모든 내용을 담다<br>
패럴랙스 스크롤링 - 동적인 효과로 강한 인상을!<br>
웹 폰트 - 웹 타이포그래피를 받쳐주는 기술<br>
</p>
</body>
<!-- body가 아닌 div로 영역지정하여 클래스 css를 줘서도 가능 -->2.
<style>
body{
width: 500px;
padding: 10px;
border: 1px solid #ccc;
}
a{
font-weight: 700;
font-size: large;
}
</style>
</head>
<body>
<h1>최신 웹 디자인 트렌드</h1>
<p>
<ul>
<li><a>반응형 웹 디자인</a> - 다양한 화면 크기에 최적화하다</li>
<li><a>플랫 디자인</a> - 업체에서 평면으로</li>
<li><a>풀스크린 배경</a> - 콘텐츠에 집중</li>
<li><a>원 페이지 사이트</a> - 한 페이지에 모든 내용을 담다</li>
<li><a>패럴랙스 스크롤링</a> - 동적인 효과로 강한 인상을!</li>
<li><a>웹 폰트</a> - 웹 타이포그래피를 받쳐주는 기술</li>
</ul>
</p>
<!-- a 말고 span 쓰면됨 [클래스 주기 귀찮아서 a씀 -->3.
<style>
body{
width: 500px;
padding: 10px;
border: 1px solid #ccc;
}
.little{
font-weight: 700;
font-size: large;
color: #ad3000;
}
.nobullet{
list-style-type: none;
}
li{
line-height: 2.0;
}
</style>
</head>
<body>
<h1>최신 웹 디자인 트렌드</h1>
<p>
<ul class="nobullet">
<li><span class="little">반응형 웹 디자인</span> - 다양한 화면 크기에 최적화하다</li>
<li><span class="little">플랫 디자인</span> - 업체에서 평면으로</li>
<li><span class="little">풀스크린 배경</span> - 콘텐츠에 집중</li>
<li><span class="little">원 페이지 사이트</span> - 한 페이지에 모든 내용을 담다</li>
<li><span class="little">패럴랙스 스크롤링</span> - 동적인 효과로 강한 인상을!</li>
<li><span class="little">웹 폰트</span> - 웹 타이포그래피를 받쳐주는 기술</li>
</ul>
</p>
</body>
<!-- a쓰고 있으면 뭐라할거 같아서 span으로 바꿈 -->수업자료
'HTML CSS' 카테고리의 다른 글
| CSS_박스모델 (0) | 2024.04.12 |
|---|---|
| 색상과 배경을 위한 스타일 (0) | 2024.04.12 |
| HTML - CSS기초 (0) | 2024.04.10 |
| HTML - form 태그 관련 (0) | 2024.04.10 |
| HTML - 텍스트,표,이미지 태그 (0) | 2024.04.10 |
