infor_home

 태그 사용법

foryou

2023-12-06 12:48:23, 조회 : 55, 추천 : 27

태그는 아주 다방면으로 활용이 가능한 유용한 태그입니다. 주로 <div>와 태그와 함께 웹페이지의 일부분에 스타일을 적용시키기 위해 사용됩니다. span 태그안에 아무런 컨텐츠가 없다면 해당 부분은 아무런 변화가 없지만 span태그 내부에 객체가 들어가면 그 객체의 크기만큼 공간이 할당이 됩니다. 태그로 요소를 감싸면 CSS나 Javascript로 그 부분을 변형시키는것이 가능해 집니다.

태그 사용법
태그 속성 비고
 display diplay요소 변경
width 가로크기
height 세로크기
background-color 배경색 변경
color 글자 색 변경
font-style 글자 형식 변경
margin 외부 여백설정
padding 내부 여백설정
border 테두리 설정
1. display는 태그의 요소를 변경할 수 있는 속성입니다. 태그의 display속성 defalut값은 inline으로 되어있습니다.

2. width는 태그의 가로 사이즈를 지정해줄 수 있는 속성입니다. 이 속성을 사용하기 위해서는 display속성값을 inline에서 block으로 바꿔줘야합니다.

3. height는 태그의 세로 사이즈를 변경시킬 수 있는 속성입니다. 이 속성을 사용하기 위해서는 display속성값이 inline일 경우에는 적용되지 않습니다.

4. background-color는 태그의 배경색을 지정해줄 수 있는 속성입니다.

5. color는 태그안에있는 글자의 색상을 지정해주는 속성입니다.

6. font-style는 태그안의 글자 형식을 지정해주는 속성입니다.

7. margin 태그와 레이아웃간의 여백(외부여백)을 지정해주는 속성입니다.

8. padding 태그의 내부여백을 지정해주는 속성입니다.

9. border 태그 외곽에 테두리를 줄 수 있는 속성입니다.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
 pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8" />
<title></title>
 <style>
 .box{
 display:inline-block; /* default값 inline */
 width:100px; /* display가 block일때만 지정가능 */
 height:50px; /* display가 block일때만 지정가능 */
 background-color:green; /* 배경색 = green */
 margin-left:10px; /* 왼쪽 margin 10px */
 padding:20px; /* padding 20px */
 border:5px dashed skyblue; /* 테두리 */
 font-style:italic; /* 글자형태 : 이태릭체 */
 color:white /* 글자색 : white */
 }
 </style>

</head>
<body>
 
 애국가

 
 동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라 만세 

 
 무궁화 삼천리 화려강산 

 
 대한사람 대한으로 길이 보전하세
</body>
</html>

바른생활 NZEO

글은 인터넷에서 자신을 나타내는 유일한 모습입니다.
상대에게 상처를 주기보다 같이 즐거워 할 수 있는 코멘트 부탁드려요.

2024-05-14
02:32:38

Name

Password

Comment
▼

답글달기 추천하기

목록보기