CSS - 기초(4)

프로그래밍/HTML & CSS 2021. 9. 18.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
div label {display:block;}

form input:not([type=password]) {border: 1px solid #00ff00;} /* :not 부정 패스워드가 아닌 놈들만 */
form input[type=password] {border: 1px solid red;}

/* 적합성 검증이 성공하거나 실패에 따라서 색깔이 바뀐다. */
form input:valid {background: #d4f4fa;} /* 적합성 검사 성공할때 */
form input:invalid {background: #ffd9ec;} /* 적합성 검사 실패할때 */

</style>

<script type="text/javascript">
function send(){
	alert("ok...");
}

</script>

</head>
<body>

<h3> 부정, 정합성 체크 셀렉터 </h3>
<div>
<form action="javascript:send();">
	<label>아이디 : <input type="text" required="required"> </label>
	<label>패스워드 :
		<input type="password" pattern="[a-zA-Z0-9]{4,8}" required="required">
		<span>특수문자를 포함하지 않는 4~8자의 영문자 또는 숫자</span>
	</label>
	<label>이름 : <input type="text" required="required"> </label>
	<label>핸드폰 번호 : 
		<input type="text" pattern="^\d{3}-\d{3,4}-\d{4}$" required="required">
	</label>
	<p><button type="submit">확인</button></p>
</form>	
</div>


</body>
</html>

- 적합성 검사란 텍스트 박스에 내가 원하는 값들이 아닐때 나타나게하는 이벤트이다.

HTML 부분

- 패스워드 부분 = pattern 옵션으로 4~8자의 영문자 또는 숫자만 입력 가능하게 해놈

- 핸드폰 번호 부분 = 마찬가지로 pattern 옵션으로 시작은 숫자3자리 - 숫자 3~4자리 - 숫자 4자리 끝

옵션을 준다.

CSS 부분

- form input:not([type=password]) = form 태그 중에서 input 타입이 패스워드가 아닌 애들만

- form input[type=password] = form 태그 중에서 input 타입이 패스워드인 애들만

- form input:valid = form 태그 중에서 적합성 검사가 성공 했을때 나타날 이벤트

- form input:invalid = form 태그 중에서 적합성 검사가 실패 했을때 나타날 이벤트

가상 요소

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
.subject > p:first-line {color: blue;}
.subject > p:first-letter {color: red; font-weight: bold;}

.city > p:before {content: "* ";}
.city > p:after{content : " !!!"; color: blue; font-weight: bold;}

</style>


</head>
<body>

<h3>가상 요소(Pseudo-elements)</h3>

<div class="subject">
  <p>프로그래밍<br>자바</p>
  <p>프레임워크<br>스프링</p>
  <p>데이터베이스<br>오라클</p>
  <p>웹프로그래밍<br>서블릿</p>
</div>
<hr>

<div>
	<p>:before, :after</p>
	<p>
		어떤 엘리먼트의 앞(before)과 뒤(after)에 내용을 삽입하기 위해 사용된다.
		content 속성이 있어야만 유효하다.
	</p>
</div>
<div class="city">
	<p>서울</p>
	<p>경기</p>
	<p>인천</p>
</div>


</body>
</html>

before 와 after의 개념은 HTML에서 엘리먼트의 앞이나 뒤에 내가 원하는 내용을 삽입 할 수 있게 해준다.

- city부분은 p 태그 앞에는 *을 달고 나오고 뒤에는 !!!가 나온다.

- p:first-line = p 태그의 첫번째 라인까지만 적용한다.

- p:first-letter = p 태그의 첫번째 글자만 적용 하겠다.

li 리스트 태그에 각 태그들 앞에 카운터 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">

.cafe{
	padding: 20px;
}
.cafe > ul {
	list-style: none; padding: 0;

}
.cafe > ul li {
	margin: 10px 0;
}

.cafe > ul li.sale:before {
	content: "SALE!\A할인 "; /* 줄바꿈 엔터 : \A */
	display: inline-block;
	width: 30px; text-align: center;
	padding: 3px 6px; margin-right: 5px;
	font-size: x-small;
	border-radius: 4px;
	color: #fff;
	background: #f55;
	white-space: pre; 
}


.java ol {padding: 0;}
.java li{
	list-style: none;
	counter-increment: chapter; /* 챕터라는 이름의 카운터를 만듬 */
}
.java li:before {
	content:"제" counter(chapter) "장 "; /* 제 ~ 챕터라는 이름의 카운터를 만듬 */
}


</style>



</head>
<body>

<h3>카페 메뉴</h3> 
<div class="cafe">
	<ul>
		<li class="sale">아메리카노 - 2,500원</li>
		<li>에스프레소 - 4,500원</li>
		<li>카페라떼 - 5,000원</li>
		<li class="sale">카푸치노 - 5,500원</li>
	</ul>
</div>
<hr>

<h3>목록 카운터 증가</h3>
<div class="java">
	<ol>
		<li>자바란 ?</li>
		<li>기본 프로그램</li>
		<li>자료형</li>
		<li>제어문</li>
	</ol>  
</div>


</body>
</html>

일단 2개의 리스트 태그 li가 있다.

먼저 java 클래스를 받은 div 태그 부터 보면 따로 제1장~4장 까지 입력하지 않고 CSS를 통해서 준 모습을 확인 할 수있다.

- java li 에 먼저 list-style 를 none으로 줘서 앞에 동그라미들 다 없애고,

counter-increment: chapter를 줘서 챕터라는 이름의 카운터를 만들었음

그리고 java li에 다시 before 속성을 줘서 문장들 앞에 자동으로 content에 (태그 안에 있는 내용) 챕터에 따른 카운터를 주고 counter(chapter) 앞뒤로 제,장을 주면 제1장 제2장 이런식으로 카운트 되게 된다.

위에 카페 메뉴 쪽을 보면

카페 세일 글자 앞에다 설정을 할건데 세일이랑 할인을 줄바꿈만 할거고 (\A)

인라인 블럭으로 설정해서 인라인의 속성을 가지고 있지만 block처럼 width나 height의 속성 부여를 할 수 있게끔 만든다.

white-space: pre는 먼저 white-space는 공백을 주겠다는 의미이고 뒤에 pre는 어떤식으로 공백을 줄지 결정한 형태 이다.

pre = 공백을 코드에 작성한 그대로 표현함 코드에 줄바꿈이 없으면 줄바꿈 안됨.

이렇게 속성들을 주면 위 사진 처럼 빨간 박스안에 담겨서 나온다.

웹 폰트 : 폰트를 외부 사이트에서 가져오는 방식 (안전하지 않아서 잘 안씀 자기 서버에 보통 둠)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">

@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(https://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
@import url(https://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
@import url(https://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
@import url(https://fonts.googleapis.com/earlyaccess/hanna.css);
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

*{
	font-size: 25px;
}

.box1{ font-family: 'Nanum Gothic', sans-serif; }
.box2{ font-family: 'Nanum Myeongjo', sans-serif; }
.box3{ font-family: 'Nanum Gothic Coding', sans-serif; }
.box4{ font-family: 'Nanum Brush Script', sans-serif; }
.box5{ font-family: 'Nanum Pen Script', sans-serif; }
.box6{ font-family: 'Hanna', sans-serif; }
.box7{ font-family: 'Noto Sans KR', sans-serif; }



</style>
</head>
<body>

<h3>웹폰트 예제</h3>
   
<div class="box1">나눔 고딕</div>
<div class="box2">나눔 명조</div>
<div class="box3">나눔 고딕 코딩</div>
<div class="box4">나눔 손글씨 붓</div>
<div class="box5">나눔 손글씨 펜</div>
<div class="box6">한나체</div>
<div class="box7">본고딕</div>


</body>
</html>

@import url을 통해서 외부 폰트들을 가져 올 수 있다.

저작자표시

'프로그래밍 > HTML & CSS' 카테고리의 다른 글

CSS - 영역 관련 (0)	2021.09.22
CSS - 기초(5) / 글자의 공백 처리 및 배경 이미지 다루기 (0)	2021.09.21
CSS - 기초(3) 가상 클래스 / 링크 셀렉터 (0)	2021.09.16
CSS - 기초(2) / 선택자 (0)	2021.09.16
CSS - 상속과 우선순위 (0)	2021.09.16

ABOUT ME

가상 요소

li 리스트 태그에 각 태그들 앞에 카운터 만들기

'프로그래밍 > HTML & CSS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

가상 요소

li 리스트 태그에 각 태그들 앞에 카운터 만들기

'프로그래밍 > HTML & CSS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바