#header
{
width:800px;
text-indent:10%
}
#innerHeader
{
width:600px;
text-indent:10%;
}
<!-- HTML-->
<div id ="wraper">
<div id = "header">
text-indent_inherit.html{
width:800px;
text-indent:10%
}
#innerHeader
{
width:600px;
text-indent:10%;
}
<!-- HTML-->
<div id ="wraper">
<div id = "header">
MIME은 아스키 데이터만 처리할수 있는 인터넷 전자우편 프로토콜이다 .
즉 SMTP 를 확장하여 오디오, 비디오, 이미지, 애플리케이션, 기타 여러가지 종류의
데이터 파일을 주고받을 수 있도록 기능을 확장한 프로토콜이다.
즉 SMTP 를 확장하여 오디오, 비디오, 이미지, 애플리케이션, 기타 여러가지 종류의
데이터 파일을 주고받을 수 있도록 기능을 확장한 프로토콜이다.
<div id = "innerHeader">
이러한 재생용 프로그램 중 일부는
웹 클라이언트 , 즉 브라우저에 기본적으로 탑재되며(예를 들면 모든 브라우저는
HTML 파일을 처리하는 것 뿐만 아니라 GIF 와 JPG 이미지를 보여줄수도 있다),
그외의 프로그램은 필요할때마다 다운로드한다.
서버는 어떤 웹전송에라도 시작부분에 MIME 헤더를 집어넣으며,
클라이언트는 헤더가 나타내는 데이터 형식에 따라 이를 재생시키기 위한 적절한
애플리케이션을 선택한다.
</div>
</div>
</div>
text-indent 값을 % 단위로 줄경우 그 값은 해당 div 의 부모 요소의 넓이를 기준으로 들여쓰기 된다.
즉 #header의 width 가 800px 일때 text-indent:10% 를 주면 800픽셀의 10% 인 80px 이 들여 쓰기 되는게 아니라
#header 가 속한 부모요소 즉 #wraper 의 width 의 10% 가 들여쓰기 된다.
마찬가지로 #innerHeader 의 text-indent:10% 는 부모요소인 #header 의 넒이 800px 를 기준으로 10% 들여쓴
80px 이 들여써지게 된다. 자기 넒이의 기준이 아님.
즉
<style type = "text/css">
#wraper
{
width:1200px;
}
#header
{
width:800px;
text-indent:120px;
}
#inHeader
{
width:600px;
text-indent:10%;
/*text-indent:80px;*/
}
#innerHeader
{
width:100%;
text-indent:10%;
/*text-indent:60px;*/
}
</style>
</head>
<body>
<div id = "wraper">
<div id = "header">
이러한 재생용 프로그램 중 일부는
웹 클라이언트 , 즉 브라우저에 기본적으로 탑재되며(예를 들면 모든 브라우저는
HTML 파일을 처리하는 것 뿐만 아니라 GIF 와 JPG 이미지를 보여줄수도 있다),
그외의 프로그램은 필요할때마다 다운로드한다.
서버는 어떤 웹전송에라도 시작부분에 MIME 헤더를 집어넣으며,
클라이언트는 헤더가 나타내는 데이터 형식에 따라 이를 재생시키기 위한 적절한
애플리케이션을 선택한다.
<div id = "inHeader">
이러한 재생용 프로그램 중 일부는
웹 클라이언트 , 즉 브라우저에 기본적으로 탑재되며(예를 들면 모든 브라우저는
HTML 파일을 처리하는 것 뿐만 아니라 GIF 와 JPG 이미지를 보여줄수도 있다),
그외의 프로그램은 필요할때마다 다운로드한다.
서버는 어떤 웹전송에라도 시작부분에 MIME 헤더를 집어넣으며,
클라이언트는 헤더가 나타내는 데이터 형식에 따라 이를 재생시키기 위한 적절한
애플리케이션을 선택한다.
<div id = "innerHeader">
이러한 재생용 프로그램 중 일부는
웹 클라이언트 , 즉 브라우저에 기본적으로 탑재되며(예를 들면 모든 브라우저는
HTML 파일을 처리하는 것 뿐만 아니라 GIF 와 JPG 이미지를 보여줄수도 있다),
그외의 프로그램은 필요할때마다 다운로드한다.
서버는 어떤 웹전송에라도 시작부분에 MIME 헤더를 집어넣으며,
클라이언트는 헤더가 나타내는 데이터 형식에 따라 이를 재생시키기 위한 적절한
애플리케이션을 선택한다.
</div>
</div>
</div>
</div>
이 경우 스타일의 10% 는 아래 주석 처리된 것과 같은 넓이를 가지게 된다.
그리고 해당 text-indent:10% 를 삭제해도 부모로부터 상속받아 적용된다.
픽셀 단위로 상속 받을때는 절대값, %단위로 상속받으면 상대값 적용.
이러한 재생용 프로그램 중 일부는
웹 클라이언트 , 즉 브라우저에 기본적으로 탑재되며(예를 들면 모든 브라우저는
HTML 파일을 처리하는 것 뿐만 아니라 GIF 와 JPG 이미지를 보여줄수도 있다),
그외의 프로그램은 필요할때마다 다운로드한다.
서버는 어떤 웹전송에라도 시작부분에 MIME 헤더를 집어넣으며,
클라이언트는 헤더가 나타내는 데이터 형식에 따라 이를 재생시키기 위한 적절한
애플리케이션을 선택한다.
</div>
</div>
</div>
text-indent 값을 % 단위로 줄경우 그 값은 해당 div 의 부모 요소의 넓이를 기준으로 들여쓰기 된다.
즉 #header의 width 가 800px 일때 text-indent:10% 를 주면 800픽셀의 10% 인 80px 이 들여 쓰기 되는게 아니라
#header 가 속한 부모요소 즉 #wraper 의 width 의 10% 가 들여쓰기 된다.
마찬가지로 #innerHeader 의 text-indent:10% 는 부모요소인 #header 의 넒이 800px 를 기준으로 10% 들여쓴
80px 이 들여써지게 된다. 자기 넒이의 기준이 아님.
즉
<style type = "text/css">
#wraper
{
width:1200px;
}
#header
{
width:800px;
text-indent:120px;
}
#inHeader
{
width:600px;
text-indent:10%;
/*text-indent:80px;*/
}
#innerHeader
{
width:100%;
text-indent:10%;
/*text-indent:60px;*/
}
</style>
</head>
<body>
<div id = "wraper">
<div id = "header">
이러한 재생용 프로그램 중 일부는
웹 클라이언트 , 즉 브라우저에 기본적으로 탑재되며(예를 들면 모든 브라우저는
HTML 파일을 처리하는 것 뿐만 아니라 GIF 와 JPG 이미지를 보여줄수도 있다),
그외의 프로그램은 필요할때마다 다운로드한다.
서버는 어떤 웹전송에라도 시작부분에 MIME 헤더를 집어넣으며,
클라이언트는 헤더가 나타내는 데이터 형식에 따라 이를 재생시키기 위한 적절한
애플리케이션을 선택한다.
<div id = "inHeader">
이러한 재생용 프로그램 중 일부는
웹 클라이언트 , 즉 브라우저에 기본적으로 탑재되며(예를 들면 모든 브라우저는
HTML 파일을 처리하는 것 뿐만 아니라 GIF 와 JPG 이미지를 보여줄수도 있다),
그외의 프로그램은 필요할때마다 다운로드한다.
서버는 어떤 웹전송에라도 시작부분에 MIME 헤더를 집어넣으며,
클라이언트는 헤더가 나타내는 데이터 형식에 따라 이를 재생시키기 위한 적절한
애플리케이션을 선택한다.
<div id = "innerHeader">
이러한 재생용 프로그램 중 일부는
웹 클라이언트 , 즉 브라우저에 기본적으로 탑재되며(예를 들면 모든 브라우저는
HTML 파일을 처리하는 것 뿐만 아니라 GIF 와 JPG 이미지를 보여줄수도 있다),
그외의 프로그램은 필요할때마다 다운로드한다.
서버는 어떤 웹전송에라도 시작부분에 MIME 헤더를 집어넣으며,
클라이언트는 헤더가 나타내는 데이터 형식에 따라 이를 재생시키기 위한 적절한
애플리케이션을 선택한다.
</div>
</div>
</div>
</div>
이 경우 스타일의 10% 는 아래 주석 처리된 것과 같은 넓이를 가지게 된다.
그리고 해당 text-indent:10% 를 삭제해도 부모로부터 상속받아 적용된다.
픽셀 단위로 상속 받을때는 절대값, %단위로 상속받으면 상대값 적용.
'코드 > Html & CSS' 카테고리의 다른 글
| img 요소 아래단 공백 뜨는 현상 (Img - bottom margin) (0) | 2011.06.11 |
|---|---|
| em (0) | 2011.06.05 |
| 상위 요소 값의 상속 (0) | 2011.05.28 |
| Inherit, 자식 선택자. (0) | 2011.05.28 |
| 각종 속성 타겟팅. (0) | 2011.05.18 |