홈페이지 이미지 요소와 속성

속성이라고 말하는 부분은 모든 태그 요소에 들어가는 html이 이해하도록 명령해주는 코드라고 생각하면 이해가 쉽습니다.

 

---

 

img

<img src="blueseal.jpg">

▲이미지는 이렇게 시작되며, src=""라는 속성을 붙여줌으로서 정상적으로 동작합니다. 확장자명은 .jpg처럼 꼭 붙여주어야 인식합니다.

 

 

<img src="blueseal.jpg" width="600" height="500">

▲또한 이미지의 크기도 지정할 수 있는데, 가로(width) 세로(height)를 지정해 원하고자 하는 크기를 정해줄 수 있습니다. (가로와 세로를 지칭하는 width, height는 나중에 CSS에서도 많이 쓰는 퍼블리싱 요소기 때문에 단어 입력을 손에 꼭 익혀 놓으시는 게 좋습니다.)

 

 

<img src="blueseal.jpg" width="600" height="500" alt="블루씰디자인">

▲ alt 요소로 이미지가 가진 내용의 의미를 붙여 줄 수 있으며, 이는 엑박이 뜨는 현상을 대체하거나 시각장애인들을 위한 태그 요소로 꼭 붙여주시는 게 좋습니다.

 

 

<img src="blueseal.jpg" width="600" height="500" alt="블루씰디자인" title="블루씰디자인">

▲ title요소는 pc에서 이미지에 마우스를 갖다 댈 경우 마우스부근에 조그맣게 타이틀이 보이게 만들어줍니다.

 

---

반응형

 

figure,figcaption

<figure>
   <img src="blueseal.jpg" width="600" height="500" alt="블루씰디자인" title="블루씰디자인">
   <img src="blueseal.jpg" width="600" height="500" alt="블루씰디자인" title="블루씰디자인">
   <figcaption>블루씰 홈페이지 이미지</figcaption>
</figure>

▲ 위와같이 그룹핑을 하면, 이미지 밑에 설명으로 달리게 됩니다.

 

 

---

 

a 

링크 요소로 쓰이는 태그입니다. 태그 요소로 사용되지만, 속성 또한 입력해주어야 정상 동작합니다. 링크타입은 3가지정도로 크게 나뉘어 볼 수 있는데, ​ 

1. 페이지내에서 분류 이동 
2. 페이지내에서 카테고리 이동 
3. 페이지에서 외부링크로 이동 ​ 의 3가지 큰 경우로 나뉠 수 있습니다. ​ 

해당의 예시는 외부 링크 타입만을 기술 했으며, 카테고리와 분류의 이동은 페이지테마 영역으로 따로 포스팅 하겠습니다.

 

<a href="http://blueseal.kr">blueseal.kr</a>

▲ href=""를 속성으로 문자를 입력시켜주어 태그 사이 문자에 링크를 달아 줄 수 있습니다.

 

 

<a href="http://blueseal.kr" alt="블루씰디자인"><img src="blueseal.jpg"></a>

▲ img , a태그를 동시에 사용해 문장의 링크형태가 아닌 이미지의 링크 형태를 태그안에 넣어 만들수도 있습니다. 태그 사이의 문자,이미지는 이동을 위한 디딤돌의 역활을 함으로서 직접적인 영향은 주지 않습니다. ​

 

 

<a href="http://blueseal.kr" target="_blank|_self|_parent|_top|framename">

▲ 링크에 대한 창을 제어하는 타겟(target) 태그입니다. 

위에서 기술한 페이지내에서 외부링크 이동을 위한 새창 열기 태그를 사용할 수 있고, ​ target은 총 5가지로 나뉠 수 있습니다. ​

•  _blank: 새창열기 
• _self(기본): 클릭한 창에서 이동을 명령 
• _parent: 한단계 상위탭에서 링크를 엽니다. 
• _top: 최상단탭에서 링크를 엽니다. 
• framename: 프레임을 지정해서 해당 창에서 열수 있게 만들어 줍니다. ​ 

 

외부링크를 자주 사용하기 때문에 새창열기로 target="_blank"를 최우선으로 외워두시면 됩니다. 또한 아무것도 지정하지않으면 _self로 자신의 창에 링크를 열게 만들어줍니다.) ​

<a href="http://blueseal.kr" title="블루씰디자인">

▲ title요소는 pc에서 링크에 마우스를 갖다 댈 경우 마우스부근에 조그맣게 타이틀이 보이게 만들어줍니다.

 

 

<a href="http://blueseal.kr" alt="블루씰디자인">

▲ alt 요소로 이미지가 가진 내용의 의미를 붙여 줄 수 있으며, 이는 엑박이 뜨는 현상을 대체하거나 시각장애인들을 위한 태그 요소입니다. 

※ 그냥 넘어가도 홈페이지 기능적 문제로는 아무 상관없지만, 웹 접근성의 점수를 높이고 싶다면 간과하지말아야 하는 요소입니다.

 

※ img와 a태그는 html 본래의 의미로 코드를 위와 같이 사용하진않고 img태그는 css상에서 background 처리를 해주거나 a태그는 외부링크만 사용하며, 목록 마크업인 ul,li처리를 많이 사용합니다.

 

본문 출처: https://www.w3schools.com