HTML(11) - 문자 선택자/전후 문자 선택자/링크 선택자/박스 모델/내용 관련 속성/안쪽 여백/바깐여백과 테두리/그림자 효과
KCasey2020. 5. 15. 17:39
letter-selection01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문자 선택자</title>
<style type="text/css">
p::first-letter {
font-size: 3em;/* em : m 가로길이를 기준으로하는 단위 -> 문자간격 설정 */
}
p::first-line {/* 브라우저 창에서 봤을 때 첫번째 줄만 스타일 적용됨 -> 웹페이지 크기창 변경되면 스타일 적용 범위도 바뀜 */
color: red;
}
</style>
</head>
<body>
<!-- 첫번째 문자 / 첫번째 라인을 선택 -->
<h3>Lorem Ipsum</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam gravida nunc lorem, sit amet finibus tortor viverra quis.
Nunc lectus eros, scelerisque ut molestie nec, facilisis eget diam.
Vestibulum eget diam porttitor, rhoncus nisi ac, condimentum enim.
Cras aliquet ultricies volutpat. Nulla vitae tellus dui.
Maecenas vel nibh sit amet neque luctus tincidunt. Vestibulum quam nibh,
scelerisque at leo elementum, dapibus elementum elit. Phasellus congue sed
lacus in volutpat. In ac nunc a urna gravida laoreet. Etiam tellus purus,
posuere quis accumsan eget, dapibus eget tellus. Pellentesque eget elit libero.
Aenean congue dolor massa, non euismod risus dictum ultricies.
Sed sit amet aliquam neque. Praesent semper magna justo, in tempus odio blandit et.
</p>
<p>
Nam ullamcorper lacus eget tristique maximus.
Integer ante purus, ultrices sit amet rutrum ut, fermentum et neque.
Nullam porttitor congue ligula, nec venenatis sapien aliquet vel. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Phasellus faucibus ultrices nisi et viverra. Etiam quis mi sit amet lorem semper semper.
Nunc facilisis neque quis sem sagittis, nec dictum libero auctor.
Mauris condimentum faucibus velit at aliquam. Ut luctus suscipit risus, a facilisis
nunc faucibus sit amet. Fusce ut neque vel quam mollis tempor non a felis. Nulla
sed ullamcorper neque. Donec aliquam urna orci, quis pulvinar justo mollis sed.
</p>
</body>
</html>
letter-selection02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>전후 문자 선택자</title>
<style type="text/css">
p {
counter-increment: rint;/*p의 개수 세기*/
}
p::before {
content: counter(rint) ".";/* 위에서 카운트된 숫자에 해당하는 숫자를 자동으로 p의 before에 출력한다 */
}/* 자동으로 붙은 텍스트의 경우 드래그 안됨 */
p::after {
content: " - " attr(data-page) " page";/* p의 after에 속성이 attr()과 동일한 태그가 있다면 스타일을 적용시켜서 문자를 출력해준다 */
}
p::first-letter {
font-size: 2em;
}
p::selection {
background-color: black;
color: red;
}
</style>
</head>
<body>
<!-- 태그의 이전/이후에 스타일을 적용
::before, ::after
content 속성을 사용할 수 있음
(content는 before와 after 선택자에서만 사용할 수 있음)
-->
<h3>Lorem Ipsum</h3>
<p data-page="52">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam gravida nunc lorem, sit amet finibus tortor viverra quis.
Nunc lectus eros, scelerisque ut molestie nec, facilisis eget diam.
Vestibulum eget diam porttitor, rhoncus nisi ac, condimentum enim.
Cras aliquet ultricies volutpat. Nulla vitae tellus dui.
Maecenas vel nibh sit amet neque luctus tincidunt. Vestibulum quam nibh,
scelerisque at leo elementum, dapibus elementum elit. Phasellus congue sed
lacus in volutpat. In ac nunc a urna gravida laoreet. Etiam tellus purus,
posuere quis accumsan eget, dapibus eget tellus. Pellentesque eget elit libero.
Aenean congue dolor massa, non euismod risus dictum ultricies.
Sed sit amet aliquam neque. Praesent semper magna justo, in tempus odio blandit et.
</p>
<p data-page="52">
Nam ullamcorper lacus eget tristique maximus.
Integer ante purus, ultrices sit amet rutrum ut, fermentum et neque.
Nullam porttitor congue ligula, nec venenatis sapien aliquet vel. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Phasellus faucibus ultrices nisi et viverra. Etiam quis mi sit amet lorem semper semper.
Nunc facilisis neque quis sem sagittis, nec dictum libero auctor.
Mauris condimentum faucibus velit at aliquam. Ut luctus suscipit risus, a facilisis
nunc faucibus sit amet. Fusce ut neque vel quam mollis tempor non a felis. Nulla
sed ullamcorper neque. Donec aliquam urna orci, quis pulvinar justo mollis sed.
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박스 모델</title>
<style type="text/css">
div {
width: 300px;
background-color: yellow;
padding: 25px;
border: 15px solid navy;
margin: 25px;
}
</style>
</head>
<body>
<p>CSS 박스 모델은 content, padding, border, margin으로 구성</p>
<div>
박스 모델의 padding, border, margin의 기본값은 0, 상, 하, 좌, 우 네 방향으로 값을 지정
</div>
</body>
</html>
content_test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내용 관련 속성</title>
<style type="text/css">
p {
background-color: blue;
max-width: 1000px;
}
</style>
</head>
<body>
<!-- content 관련 속성
실제 내용이 표현되는 곳
가로세로 지정 : width, height
가로세로 최소/최대값 지정 : min-, max-
단위 : pixel(px), %(퍼센트)
-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
gravida nunc lorem, sit amet finibus tortor viverra quis. Nunc lectus
eros, scelerisque ut molestie nec, facilisis eget diam. Vestibulum
eget diam porttitor, rhoncus nisi ac, condimentum enim. Cras aliquet
ultricies volutpat. Nulla vitae tellus dui. Maecenas vel nibh sit amet
</p>
</body>
</html>
padding_test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>안쪽 여백</title>
<style type="text/css">
div {
padding: 70px;
border: 1px solid black;
}
div#pad {
padding-top: 70px;
padding-right: 100px;
padding-bottom: 30px;
padding-left: 10px;
border: 1px solid black;
width: 400px;
}
div#pad2 {
padding: 70px 50px 30px 10px;/* top right bottom left 순서 (시계방향) */
border: 1px solid black;
width: 300px;
}
div#pad3 {
padding: 70px 30px 10px; /* top (right/left) bottom */
border: 1px solid black;
width: 300px;
}
div#pad4 {
padding: 70px 30px; /* (top,bottom) (right/left) */
border: 1px solid black;
width: 300px;
box-sizing: border-box; /* 박스사이즈는 고정시키고 padding만 줄이면 겉에 박스크기는 그대로 있고 나중에 콘텐츠에 따라 padding 만 수정해 줄 수 있음*/
}
</style>
</head>
<body>
<!-- padding : 내부(안쪽) 여백을 설정
고정 단위(px, pt, cm)
지정하지 않을 경우 auto로 설정(브라우저 기본값)
padding-top : 위쪽 여백
padding-right : 오른쪽 여백
padding-bottom : 아래쪽 여백
padding-left : 왼쪽 여백
box-sizing : 박스의 크기 설정
border-box - width + 2*margin
content-box - width + 2*(margin + border + padding)
:: border-box는 보이는 영영ㄱ의 크기에 padding을 제외하여 width에 설정한 크기로 고정
content-box가 기본값.(생략가능)
-->
<div>
이 공간의 안쪽 여백은 70px입니다.
</div>
<hr>
<div id="pad">
이공간의 padding 설정>>
padding-top: 70px;
padding-right: 100px;
border: 1px solid black;
width: 400px;
</div>
<hr>
<div id="pad2">
padding 설정 한번에 하기>>
padding: 70px 50px 30px 10px;/* top right bottom left 순서 (시계방향) */
border: 1px solid black;
width: 300px;
</div>
<hr>
<div id="pad3">
padding: 70px 30px 10px; /* top (right,left) bottom */
border: 1px solid black;
width: 300px;
</div>
<hr>
<div id="pad4">
padding: 70px 30px;
border: 1px solid black;
width: 300px;
</div>
</body>
</html>
margin_border.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>바깥여백과 테두리</title>
<style type="text/css">
#d1 {
width: 200px; height: 100px;
background-color: powderblue;
margin: 50px 70px 60px 10px;
}
p {
border: 1px solid black;/* solid 실선, dotted 점선, dashed 파선 */
}
span {
border: 2px dotted blue;
}
#d2 {/* border를 생성해주려면 3가지 요소 모두 설정해주어야한다!! */
border-width: thick;/* thin(1px)/thick/medium(3px) */
border-style: groove;/* none(테두리 없음), hidden(있으나 안보임), double(지정해준 width 내에서 선 두개), groove(오목선), ridge(볼록선), inset(영역을 안으로 넣은 효과, 오목 공간), outset(영역이 튀어나와보이게,볼록 공간) */
border-color: pink;
border-radius: 50px 10px 0 50px;
}
#d3{
}
</style>
</head>
<body>
<!-- margin 속성
top, right, bottom, left 순으로 설정
margin-top : 위쪽 바깥여백
margin-right : 오른쪽 바깥여백
margin-bottom : 아래쪽 바깥여백
margin-left : 왼쪽 바깥여백
-->
<div id="d1">d1 영역</div>
<hr>
<!-- border 속성 -->
<div id="d2">d2 영역</div>
<p>여기는 p <span>태그</span> 영역입니다.</p>
</body>
</html>
shadow.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그림자 효과</title>
<style type="text/css">
.bs1 {
background-color: yellow;
border: 5px solid blue;
box-shadow: 10px 10px 0px teal;
}
.bs2 {
background-color: orange;
border: 5px solid red;
box-shadow: 20px 20px 50px red;
}
.bs3 {
background-color: silver;
border: 5px solid black;
box-shadow: 20px 20px 30px -20px maroon;
}
.bs4 {
background-color: lime;
border: 5px solid olive;
box-shadow: 4px 4px 0px 4px fuchsia inset;
}
div {
width: 300px;
border: 1px solid blue;
box-shadow: 10px 10px #bce55c,
20px 20px #cef279,
30px 30px #e4f7ba;/*그림자 여러개 붙여줄 수 있음 */
}
h3 {
width: 200px;
box-shadow: 0px 0px 20px 10px rgba(102, 180, 255, 0.4);
}
/*
색상 지정 방법
1. 색상 키워드 활용 : red, blue, green, .. 등
2. 16진수 수치 사용 : #ffffff -> 검정색
3. rgb() 함수 사용 : rgb(255, 255, 255) -> 흰색
4. rgba() 함수 사용 : rgb 함수에 투명도 포함 rgba(0, 0, 0, 0.5) -> 반투명 검정색
*/
</style>
</head>
<body>
<!-- box-shadow @@@@@@@@@@@@@@@@@@@@@메일에서 받기
box-shadow : 수평그림자|수직그림자|
-->
<p class="bs1">그림자 1</p><br>
<p class="bs2">그림자 2</p><br>
<p class="bs3">그림자 3</p><br>
<p class="bs4">그림자 4</p><br>
<hr>
<div>
<h3>박스 그림자 효과</h3>
</div>
</body>
</html>
