HTML/맛보기

[HTML] jsp와 css

샛별KIM 2021. 6. 15. 17:14 
<link rel="stylesheet" href="index.css" type="text/css">

설정한 css 파일을 넣기 위해 <head> 태그 안에 위와 같은 줄 삽입

@charset "EUC-KR";

/*
호출 id는 #, class는 .으로
*/

body{
	background-color: #ff8080;
}

#main{
	font-size: 12pt;
	text-decoration: overline;
}

#box{
	width: 150px;
	height: 200px;
	background-color: green;
}

.boxinbox{
	width: 100px;
	height: 50px;
	background-color: pink;
}

css는 주로 눈으로 보이는 것을 설정해둔다.

 

<style type="text/css">
/*
호출 id는 #, class는 .으로
*/
	#red{
		color: blue;
		font-size: 20pt;
	}
	.head1{
		text-decoration: underline;
		text-shadow: 2px 2px red;
		font-style: italic;
		background-color: orange;
	}
    body{
		background-color: green;
	}
</style>

css를 jsp에서도 간단하게 위와 같이 표현할 수 있다. (<head>태그 안쪽에 넣는다)

 

<body>
	<h1 class="head1">index</h1>
	<h2 class="head1">h2입니다.</h2>
	html 뼈대<br>
	css 꾸며주기<br>
	<img>
	<a id="red">link</a>
	<b style="color: red;">bold 인라인 방법</b>
	<b style="background-color: pink;">여기 또 있다면?</b>
	<b id="red">바뀌나요?</b>
	
	<hr>
	<a id="main" href="main.jsp">main</a>
	<a id="list" href="list.jsp">list</a>
</body>

<body>에서  #id나 .class명 정해주기

 

<body style="background-color: yellow">
	<h1 id="main">main</h1>
	<h1>main2</h1>
	
	<div id="box">
		div박스입니다.
		<div class="boxinbox">
			내부 박스
			<div></div>
			<a href="list.jsp">list</a>
		</div>
	</div>
	div 밖입니다.
	
	
	<div id="box">
		div박스입니다.
		안에 적는 것.
	</div>
</body>

<body>에서 <div>박스 설정해주기