0515 HTML/CSS - 문자 선택자, 박스 모델/여백(안쪽, 바깥쪽)/내용 관련/그림자 속성

zy._.won 2020. 5. 15. 15:43

2020. 5. 15. 15:43

문자 선택자

first-size	첫번째 문자의 속성
first-line	첫번째 라인의 속성

문자 선택자 예제)

<heda>
<style type="text/css">
p::first-letter {
	font-size: 3em; 
}
p::first-line {
	color: red;
}
</style>
</head>
<body>
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam sit amet odio sit amet orci rhoncus egestas.
Nulla egestas varius libero vitae dictum. Phasellus ac molestie ipsum, at mattis risus.
Vestibulum sit amet mauris sem. Suspendisse vulputate condimentum malesuada.</p>
<p>Nullam nulla massa, malesuada et molestie gravida, pellentesque non nisi. Vestibulum luctus quis urna vel fermentum.
	Vestibulum congue, odio mattis auctor semper, mi nunc consectetur eros, sit amet finibus orci mi a diam.
	Nunc vehicula magna accumsan tempus condimentum.</p>
</p>	
<hr>
</body>

화면 상에서의 첫번째 라인에 속성을 주는 것이기 때문에 창 크기에 따라서 속성 받는 부분이 달라진다.

전후 문자 선택자

태그 이전/이후에 스타일을 적용

::before, ::after

content 속성을 사용할 수 있음(content는 before와 after 선택자에서만 사용 가능함.)

전후 문자 선택자 예제)

<head>
<style type="text/css">
p {
	counter-increment: rint;
}
p::before{
	content: counter(rint) ". ";
}
p::after {
	content: " - " attr(data-page) " page";
}
p::first-letter {
	font-size: 2em;
}
p::selection {
	background-color: black;
	color: red;
}
</style>
</head>
<body>
<h3>Lorem ipsum</h3>
<p data-page="52">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam sit amet odio sit amet orci rhoncus egestas.
Nulla egestas varius libero vitae dictum. Phasellus ac molestie ipsum, at mattis risus.
Vestibulum sit amet mauris sem. Suspendisse vulputate condimentum malesuada.
Mauris condimentum interdum venenatis. Nulla suscipit convallis mi, et bibendum mi.</p>
<p data-page="273">Nullam nulla massa, malesuada et molestie gravida, pellentesque non nisi. Vestibulum luctus quis urna vel fermentum.
Vestibulum congue, odio mattis auctor semper, mi nunc consectetur eros, sit amet finibus orci mi a diam.
Nunc vehicula magna accumsan tempus condimentum.</p>
</body>

data-page는 원래 없는 속성이지만 style 효과를 주기위해 사용함.

p::selection은 글을 드래그 했을시 나타는 효과를 주기위해 사용함.

박스 모델

content, padding, margin으로 구성되어 있음

padding, border, margin의 기본값은 0이고, 상, 하, 좌, 우 네 방향으로 값을 지정함.

박스 모델 예제)

<head>
<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, margin으로 구성</p>
<div>
	박스 모델의 padding, border, margin의 기본값은 0, 
	상, 하, 좌, 우 네 방향으로 값을 지정.
</div>
</body>

내용 관련 속성

content 관련 속성	실제 내용이 표현되는 곳
가로세로 지정	width(너비), height(높이)
가로세로 최대/최소값 지정	max-, min-
단위	pixel(px), %(퍼센트)

내용 관련 속성 예제)

<head>
<style type="text/css">
p {
	background-color: powderblue;
	width: 3cm;	   
}</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget feugiat ex, ut sagittis tellus. Nulla facilisi.</p>
</body>

안쪽 여백 속성

paddin	내부(안쪽) 여백을 설정
	고정 단위(px, pt, cm) (%는 사용 못함)
	지정하지 않을 경우 auto로 설정(브라우저 기본값)
box-sizing	박스의 크기 설정
	border-box => width + 2*margin
	content-box => width + 2*(margin + border + padding)
	::border-box는 보이는 영역의 크기에 padding을 제외하여 width에 설정한 크기로 고정. content-box가 기본값. (생략가능)

안쪽 여백 속성 예제)

<head>
<style type="text/css">
div {
	padding-right: 50px;
	border: 1px solid black;
	width: 300px;
	box-sizing: border-box;;
}
</style>
</head>
<body>
<div>
	이 공간의 안쪽 여백은 70px입니다.
</div>
</body>

바깥 여백과 테두리

margin 속성	top, right, bottom, left 순으로 설정
	margin-top	위쪽 바깥여백
	margin-right	오른쪽 바깥여백
	margin-bottom	아래쪽 바깥여백
	margin-left	왼쪽 바깥여백
border 속성	요소에 테두리 선을 부여하는 속성
	solid(실선), dashed(파선), dotted(점선), double(이중실선), groove(오목선), ridge(볼록선), inset(오목공간), outset(볼록공간)
	thin(1px), medium(3px)
	none(아예 존재하지 않는것), hidden(존재하지만 보이지않는 것) => 둘 다 안 써줘도 됨

바깥 여백과 테두리 예제)

<head>
<style type="text/css">
#d1 {
	width: 200px; height: 100px;
	background-color: powderblue;
	margin: 50px 70px 10px;
}
p {
	border: 1px solid black;
}
span {
	border: 2px dotted blue;
}
#d2 {
	border-width: medium;
	border-color: pink;
	border-style: outset;
	
	border-radius: 10px 10px 0px 10px;
}
#d3 {
	border-top: 1px solid red;
	border-bottom: 2px dashed blue;  
	border-right: 3px dotted green;
	border-left: 5px double powderblue;
}

</style>
</head>
<body>
<div id="d1">d1 영역</div>
<hr>
<div id="d2">d2 영역</div>
<p>여기는 p <span>태그</span> 영역입니다.

<div id="d3">d3 영역</div>
</body>

border에서 top, bottom, right, left의 속성을 다르게 줌으로써 테두리를 4부분 다 다르게 설정할 수 있음.

그림자 효과

box-shadow

색상 지정 방법

색상 키워드 활용	red, blue, green, .. 등
16진수 수치 사용	#ffffff -> 검정색
rgb() 함수 사용	rgb(255, 255, 255) -> 흰색
rgba() 함수 사용	rgb 함수에 투명도 포함.
rgba() 함수 사용	rgba(0, 0, 0, 0.5) -> 반투명 검정색

rgb()와 rgba()의 차이점

rgb()	red, green, blue
rgba()	red, green, blue + alpha(투명도)

그림자 효과 예제)

<head>
<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 30px red;
}

.bs3 {
	background-color: silver;
	border: 5px solid black;
	box-shadow: 20px 20px 30px -20px maroon;
}

.bs4 {
	background-color: oldlace;	
	border: 5px solid lightsalmon;
	box-shadow: 10px 10px 0px 10px rgba(212, 0, 255, 0.411) inset;
}

div {
	border: 1px solid black;
	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);
}
</style>
</head>
<body>
<h1 class="bs1">그림자 1</h1>
<h1 class="bs2">그림자 2</h1>
<h1 class="bs3">그림자 3</h1>
<h1 class="bs4">그림자 4</h1>

<div>
	<h3>박스 그림자 효과</h3>
</div>
</body>

'HTML5 CSS3' 카테고리의 다른 글

0519 HTML/CSS - gradient, font, transform, transition, transition-timing, line-height (0)	2020.05.19
0518 HTML/CSS - position, float, display, opacity, overflow, table, z-index (0)	2020.05.18
0514 HTML/CSS - 일반 속성 선택자, 가상 선택자(반응 선택자/구조 선택자) (0)	2020.05.14
0514 HTML/CSS - 기본 선택자(전체/태그/클래스/아이디/속성), 인라인/내부/외부 스타일 (0)	2020.05.14
0513 HTML - input이 아닌 입력 태그 (0)	2020.05.13

zy._.won