공통문자 엔티티와 이미지 img 태그

공통문자 엔티티 Common character entities의 의미

 

html에서는 태그를 표현할 때 쓰기로 예약된 문자들이 있으며, 이 문자를 텍스트로써 사용하기 위해서는 변환이 필요합니다. 동일한 결괏값으로 인출되는 문자이지만, html 코딩 작성 화면에서는 태그 표현용 입력방법과 텍스트 표현용 입력방법에 차이가 있습니다. 태그 표현용으로 사용하기로 우선 예약이 되어 있기 때문에, 태그 표현용으로는 그냥 그 기호대로 사용하면 됩니다. 그러나 텍스트로 표현하기 위해서는 해당 기호를 약속된 다른 표현 기호로 변환해주어야 합니다.

 

자주 사용되는 문자들은 다음과 같습니다. &는 &와 amp;를 이어서 &amp;로 입력할 경우 문자로 표현됩니다. ampersand ~와 함께 한다는 의미를 갖고 있으며, entities를 만들 때 사용되기도 합니다. <는 부등호 의미를 less than의 약어로 &lt;로 표현합니다. <는 태그를 시작할 때 사용되는 문자입니다. &gt;은 부등호의 의미를 greater than의 약어로 &gt;로 표현합니다. &gt;는 태그 입력을 마무리할 때 /와 태그명을 붙여서 사용합니다. </태그명> 형태입니다. &nbsp;는 nonbreaking space의 약자로서 문단 내 줄 바꿈 없이 공백 1칸을 두는 것을 의미합니다. html은 1칸의 공백만 인식할 수 있기 때문에, 여러 칸으로 이루어진 띄어쓰기를 표현하기 위해서 &nbsp;를 사용할 수 있습니다. 이 밖에도 &quote로 표현하는 " 은 quotion으로 인용구, 큰따옴표를 의미합니다. &apos는 apostrophe, '입니다.

 

이미지 태그를 이용하여 그림을 삽입할 수 있습니다.

 

우선 이미지 파일을 준비합니다. 해당 이미지 파일을 현재 작성 중인 code를 저장하는 폴더에 이동시켜놓아야 이미지를 불러올 수 있습니다. 이미지 태그는 <img src =" "> 형태로 사용합니다. 이때 src 부분은 이미지 태그에 있어서 Attribute 속성의 뜻을 가집니다. src는 source의 약어로서 이미지의 파일명을 입력합니다. <img src="codingimg.jpg">"

 

이미지의 크기를 조절하고 싶다면, 이미지 태그의 src 속성 옆에 새로운 속성을 추가합니다. src 바로 옆에 공백(띄어쓰기)을 1칸 만들어 속성 간 구별이 용이하게 한 후 원하는 속성을 입력합니다. 태그의 기능만으로 정보가 부족할 때 다양한 속성을 추가하여 더 자세한 정보를 제공할 수 있습니다. width는 가로 크기, height는 세로 크기입니다. 가로, 세로 모두 조절하기 위해서는 다음과 같이 이미지 태그를 수정합니다. <img src="codingimg.jpg" width="250" height="250"> 250의 숫자는 px을 의미하며, 100%, 120% 등 원본 비율에 대한 비율로 표현할 수도 있습니다.

이미지를 삽입해 보세요.