CSS - inline 방식과 Internal 방식

728x90

CSS Cascading Style Sheet
1. 문자의 컬러, 종류, 형태지정
2. 배경화면 이미지, 컬러 변경
3. 테두리 넣기
4. 각종 tag에 이미지 형태나 라인형태 설정

inline 방식 / 태그안에다가 스타일 지정해준거 , 하지만 일일히 집어넣어야해서 피곤한 방식

Internal 방식 / 헤드 안쪽영역에서 정의해 준것

결과값

코드

<!DOCTYPE html>
<html>

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


<style type="text/css">
/*헤드 안쪽부분이 디자인 설정하는 부분이다-->*/
p{
	background-color : blue;   /*p태그에대한 영역은 모두 blue로 맞춰라*/
}

/* #은 id다 / .은 class다  */
#p1{
	color : white;  
}

.pcls{
	font-size:150%;
	background-color:yellow;
}

h3.pcls{ 
     color:#00ff00 /*h3안에있는 pcls클래스인 곳 만 적용*/
}

/* 위와같은 방식은 Internal 방식이다. */

</style>


</head>

<body>

	<!-- 
		CSS Cascading Style Sheet
		문자의 컬러, 종류, 형태지정
		배경화면 이미지, 컬러 변경
		테두리 넣기
		각종 tag에 이미지 형태나 라인형태 설정
		
	 -->
	 
	
	  <!-- inline 방식 /  태그안에다가 스타일 지정해준거 , 하지만 일일히 집어넣어야해서 피곤한 방식  -->
	  
	  <p style="font-size: 10pt">p tag fontsize 10pt</p> 
	  
	  
	  <p id="p1">p tag id p1</p>
	  
	  
	  <h3 id="p1">h3 tag id p1</h3> <!-- css 적용에 id는 같이 쓸수있지만 규칙위반, JSP에서 앞전 id만 접근이된다. -->
	  
	  
	  <p class="pcls">p tag class pcls</p> <!-- css 적용에는 class를 사용한다, JSP에서 모든 class 접근가능 -->
	  
	  <h3 class="pcls">h3 tag class pcls</h3>

</body>
</html>

저작자표시 (새창열림)

'🌍 HTML\CSS' 카테고리의 다른 글

div이용 internal방식 적용 예제 - 1 (0)	2021.02.25
CSS 이용한 글자크기 조정 (0)	2021.02.25
target과 iframe을 활용한 이미지 확대 출력 (0)	2021.02.25
BMW 홈페이지 차량 주문서 만들어보기 <미완> (0)	2021.02.24
설문조사 예제 - form이용, jsp (0)	2021.02.24

👨‍💻 코딩 도서관

CSS - inline 방식과 Internal 방식

CSS Cascading Style Sheet
1. 문자의 컬러, 종류, 형태지정
2. 배경화면 이미지, 컬러 변경
3. 테두리 넣기
4. 각종 tag에 이미지 형태나 라인형태 설정

'🌍 HTML\CSS' 카테고리의 다른 글

댓글

티스토리툴바

CSS - inline 방식과 Internal 방식

CSS Cascading Style Sheet 1. 문자의 컬러, 종류, 형태지정 2. 배경화면 이미지, 컬러 변경 3. 테두리 넣기 4. 각종 tag에 이미지 형태나 라인형태 설정

'🌍 HTML\CSS' 카테고리의 다른 글

관련글

댓글

티스토리툴바

CSS Cascading Style Sheet
1. 문자의 컬러, 종류, 형태지정
2. 배경화면 이미지, 컬러 변경
3. 테두리 넣기
4. 각종 tag에 이미지 형태나 라인형태 설정