조회 수 10127 추천 수 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
번호 분류 제목 날짜 조회 수
41 HTML 4. DIV안에 DIV 넣어 정렬하기 5 file 2015.12.23 134703
40 HTML 5. DIV를 통한 헤더 만들기 1 file 2015.12.24 83946
39 HTML 6. DIV를 통한 전체 화면 사용하기 & 응용 2 file 2015.12.24 53803
38 HTML 3. DIV내의 문자컨텐츠 수평정렬과 수직정렬 1 file 2015.12.23 24264
37 HTML 8. PHP를 통한 index파일의 구성 1 file 2015.12.28 19804
36 HTML 10. position: absolute; 에 대해 알아보자 1 file 2015.12.30 19672
35 HTML JavaScript의 반복문을 알아보자. 2 file 2016.02.24 16534
34 HTML 2. DIV요소의 수평정렬과 수직정렬 file 2015.12.23 15482
33 HTML Transition에 대해 알아보자. 8 2016.06.22 13707
32 SASS Sass 소개 2019.09.19 13118
31 HTML Form 요소 설명 4 2016.06.01 12831
30 HTML DIV 제거와 CSS 코드 줄이기 file 2016.02.17 10580
29 HTML li 에 대해 알아보자. 2 file 2016.02.15 10342
28 HTML 요소의 수직정렬을 알아보자. 1 file 2016.03.01 10340
» HTML 1. Inline 요소와 Block 요소에 대한 이해 file 2015.12.22 10127
26 HTML 11. viewport를 활용한 반응형 예제 file 2015.12.31 9208
25 HTML 9. position: relative; 에 대해 알아보자 file 2015.12.29 8553
24 HTML 7. position: static; 에 대해 알아보자. file 2015.12.28 7259
23 HTML class 에 대해 알아보자. 1 file 2016.02.16 6740
22 HTML 하나의 class = 하나의 디자인 ????? file 2016.02.23 6204
Board Pagination Prev 1 2 3 Next
/ 3