조회 수 7883 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

태그는 Inline요소와 Block요소로 나뉜다. 이 두가지에 대한 CSS적용의 예를 알아보자.

 

아래의 예제는 대표적인 Inline요소인 A태그와 Block요소인 P태그를 사용한 예제이다.

 

HTML문서내에 CSS를 적용한 아래의 예를 보자.

 

<style>
a { 
    border: 1px solid red;
}
p { 
    border: 1px solid blue;
}
</style>
<a href="#">A태그 클릭</a>
<p>P 태그를 사용한 구문</p>

 

1-1.png

 

위의 결과처럼 표시된다. 그럼, 각 요소에 대해 크기값을 지정해보자.

 

<style>
a { 
    width: 200px;
    height: 100px;
    border: 1px solid red;
}

p { 
    width: 200px;
    height: 100px;
    border: 1px solid blue;
}
</style>

<p>P 태그를 사용한 구문</p>
<a href="#">A태그 클릭</a>
<p>P 태그를 사용한 구문</p>

 

1-2.png

 

 

위의 그림 처럼 P태그는 크기가 적용되고 있지만 A태그는 적용되지 않는다는 것을 알 수 있다. 즉 Inline요소는 CSS를 통해 크기를 제어하지 못한다는 것을 알 수 있다.

 

정리 - Inline 요소는 그자체로 CSS의 크기가 반영되지 않는다.

 

그럼 요소가 지고 있는 컨텐츠 자체에 크기값을 주어보자. A태그의 컨텐츠인 문자열에 폰트크기를 40px로 지정해 보았다.

 

<style>
a { 
    width: 200px;
    height: 100px;
    border: 1px solid red;
    font-size: 40px;
}

p { 
    width: 200px;
    height: 100px;
    border: 1px solid blue;
}
</style>

<p>P 태그를 사용한 구문</p>
<a href="#">A태그 클릭</a>
<p>P 태그를 사용한 구문</p>

 

1-3.png

 

위의 결과처럼 A태그의 켄텐츠에 대해 글자 크기가 변경된 것을 확인 할 수 있다. 또한, A태그를 감싸는 보더의 크기도 변경된 것을 확인 할 수 있다. Inline요소는 컨텐츠의 크기에 따라 동족으로 크기가 바뀌는 것을 확인 할 수 있다.

 

정리 - Inline요소의 크기는 컨텐츠의 크기에 영향을 받는다.

 

A태그에 CSS 크기를 반영하기 위해 가장 간단한 방법은 아래와 같이 블럭요소로 변경해 주면 된다.

 

<style>
a { 
    display: block;
    width: 200px;
    height: 100px;
    border: 1px solid red;
    font-size: 40px;
}

p { 
    width: 200px;
    height: 100px;
    border: 1px solid blue;
}
</style>

<p>P 태그를 사용한 구문</p>
<a href="#">A태그 클릭</a>
<p>P 태그를 사용한 구문</p>

 

1-4.png

 

 

마진이나 패딩에 의한 크기 조절은 가능한가를 알아보자.

 

<style>
a { 
    width: 200px;
    height: 100px;
    border: 1px solid red;
    font-size: 40px;
    margin: 30px;
    padding: 30px;
}

p { 
    width: 200px;
    height: 100px;
    border: 1px solid blue;
}
</style>

<p>P 태그를 사용한 구문</p>
<a href="#">A태그 클릭</a>
<p>P 태그를 사용한 구문</p>

 

1-5.png

 

위의 그림 처럼 마진값은 좌우로만 영향을 주고 상하로는 영향을 주지 않으면 P태그의 요소와 영역이 겹침을 알 수 있다. 또한 마치 P태그 처럼 크기가 잡히는 것을 알 수 있다.

 

정리 - Inline요소는 마진과 패딩의 영향을 받는다.

          마진의 경우 좌우, 패딩의 경우 상하좌우 모두 영역이 잡히며 해당 영역은 다른 요소와 겹쳐 표시된다.

 

Inline요소를 정상적으로 사용하기 위해서는 반드시 아래와 같이 Block요소로 변경하여 사용해야 정확한 크기를 잡을 수 있다.

 

<style>
a { 
    display: block;
    width: 200px;
    height: 100px;    
    border: 1px solid red;
    font-size: 40px;
    margin: 30px;
    padding: 30px;
}

p { 
    width: 200px;
    height: 100px;
    border: 1px solid blue;
}
</style>

<p>P 태그를 사용한 구문</p>
<a href="#">A태그 클릭</a>
<p>P 태그를 사용한 구문</p>

 

1-6.png

 

 

?

List of Articles
번호 분류 제목 날짜 조회 수
» HTML 1. Inline 요소와 Block 요소에 대한 이해 file 2015.12.22 7883
Board Pagination Prev 1 2 3 Next
/ 3