공대남의 정보수용소

안녕하세요 대남이입니다. 오늘은 html 문서에 이미지를 삽입하는 방법과 그 태그에 관하여 배워보겠습니다.

일단 어떤 웹페이지이건 간에 이미지 사용은 필수불가결합니다. 그렇기에 꼭 숙지하고 계셔야 하는 부분입니다.

일단 처음으로 간단한 이미지 태그에 관한 예시를 보고 셜명과 함께 예시 코딩을 해보겠습니다.

이미지 태그 : < img >

일단 기본적인 태그의 구성은 위와 같습니다. img는 이미지를 삽입을 위한 태그입니다. 

html 문서에 이제 이미지를 삽입하겠다고 선언하는 것입니다. 앞서 배운 링크태그에서의 href가 링크의 목적지를 나타내었다면,

이미지태그에서의 src는 이미지 파일을 지정하는 것입니다. 즉, 원하는 파일의 이름을 적으시면 됩니다.

그리고 width는 가로크기, heigth는 세로크기이며 픽셀로 계산됩니다.

그러면 이미지를 삽입하는 간단한 코딩의 예시를 보시겠습니다.

(border 테두리의 크기라고 생각하시면 됩니다. css 에서 자세히 다루는 영역입니다.)

예시 코딩을 보시면, src 에 제가 원하는 사진 이름을 넣고, width와 heigth로 가로 세로의 키를 정하였습니다.

그러면 밑에 사진과 같이 브라우저에 출력됩니다.

속성 alt

이미지 삽입은 어렵지 않지만 웹사이트를 꾸밀때, 또는 제품을 설명할 때 쇼핑몰의 경우 제품을 판매할 때, 많은 경우 이미지 삽입은 필수 입니다.

잘 알아두시면 많이 유용하게 쓰실 수 있습니다. 또, 위 코딩에서 alt는 무엇인지에 관한 의문을 가지셨을 겁니다.

alt 속성은 브라우저가 어떤 이유로 이미지를 화면에 표시하지 못한 경우에, 대체 되어 표시되는 텍스트를 지정하는 것입니다.

저는 alt="PHOTO" 라고 했는데, 만약 브라우저가 이미지를 표시 못하였을 경우에는 밑에와 같이 출력됩니다.

이제 이미지 태그에 관한 기본적인 속성은 모두 배우셨습니다 !

그러면 이번에는 간단한 예시를 다시 연습해보겠습니다.

예시 연습

이 페이지를 보시고 어떤 태그들이 사용되었는지 감이 오시나요? 네 간단한 태그의 조합입니다.

헤딩태그와 단락 그리고 이미지의 조합입니다. 이미지 2장과 텍스트로 간단한 페이지를 만들어보았습니다.

이 페이지의 소스를 확인해보면 이와 같습니다.

이렇게 h2,p 태그와 img태그의 조합으로 코딩되었습니다. 만약 사진의 width와 height를 조정하면, 두 사진의 크기를 같게 할 수 도있고,

다르게 할 수 도있습니다. 그러면 더 나아가 이번에는 앞서배운 링크 태그와 응용한 예시를 들어 보겠습니다.

이번에는, 사진을 누르면 좀 더 자세한 사진의 페이지로 이동하는 예시입니다.

링크 태그와 이미지 태그의 응용

애플사의 제품인 맥북 프로 레티나를 소개하는 페이지를 만들어 보았습니다.

그리고 저 사진을 누르면 좀 더 자세한 사진을 볼 수 있는 페이지로 이동합니다.

이와 같이 사진이 좀 더 커지는 페이지로 이동하였습니다.

이 html 코딩이 뭔지 감이 오시나요?, 앞서 말했듯이 링크태그와의 응용입니다.

링크태그 <a> </a> 사이 이미지를 삽입하고 링크 태그의 href="mac.html"

즉, 링크의 목적지가 더 큰 사진이 있는 또 다른 html으로 설정하면 되는 겁니다. 정답을 보시겠습니다.

이것이 첫번째 페이지의 코드입니다. 링크의 목적지를 더 사진 페이지를 해놓고,

<a> </a> 사이의 추가 설명 부분에 이미지를 삽입하여 이미지를 누르면 이동하게되는 페이지를 만든 것 입니다.

그러면 두번째 페이지의 소스는 이와 같습니다.

이렇게 width와 height를 이용하여 더 큰 사진으로 자세히 볼 수 있게 하였습니다.

이 처럼 html 태그들은 홀로 쓰이기보다 조합되어 쓰이는 경우도 꽤 있습니다.

오늘은 쉽지만 중요한 이미지 삽입, 태그에 대하여 배워봤습니다 !

다음번에도 더 유익한 정보들을 가져와서 알려드리겠습니다. 감사합니다.

안녕하세요 ! 대남이 입니다. 오늘은 링크와 리스트에 관련된 태그를 배워보도록 합니다.

링크관련 태그는 아주 자주쓰여서 중요하니 잘 숙지해두시면 많은 도움이되실 겁니다.

일단 링크에 관련된 태그를 배워보고 리스트에 관련된 태그를 배워보도록 하겠습니다.

1. 링크

링크는 하이퍼링크라고도 하며 다른 무서로 점프할 수 있는 단어나 이미지입니다. <a> 태그로 링크를 정의할 수 있는데,

a는 "anchor"의 약자입니다. 이 태그의 구조를 살펴보도록 하겠습니다.

기본구조는 이와같습니다. href는 가장 중요한 속성인데 목적지를 나타냅니다. 다른 사이트주소를 삽입하면 클릭하면

그 사이트로 이동하게됩니다. 추가정보에는 텍스트나 이미지를 삽입할 수 있고, 커서를 올리면 클릭할 수 있는 모양으로 변합니다.

이미지삽입법은 이후에 자세히 배워 보도록하겠습니다.

그러면 화면에서 링크는 기본적으로 생성되는 색상이있는데 이 디폴트값을 살펴 보도록하겠습니다.

브라우저에는 이와같이 출력됩니다.

이렇게 생성됩니다. 클릭을 하게되면 이처럼 출력됩니다.

여기서 target은 링크가 클릭이 되었을 때 페이지가 열리는 위치를 결정하게 되는데, 

_blank 값은 새로운탭에서 페이지를 열게됩니다.

target 값들은 다음과 같습니다.

1-2. id 태그

이번에는 현재 페이지에서 특정 부분으로 이동하는 법을 배워보겠습니다. 이것도 <a>태그를 이용합니다.

이때 id 속성을 이용하여 HTML 안에 특정요소에 적용시킵니다.

예시를 보시겠습니다.

이와 같이 코딩하였습니다. p태그에 id를 적용시켰습니다. 그리고 a태그의 href속성에 #section1 이라고 p태그 id 속성을 입력합니다.

그러면 브라우저에는 이와같이 출력됩니다.

이와 같이 나오는데 링크를 클릭하게되면

이렇게 p태그로 이동하게 됩니다. 이처럼 a태그와 id속성을 이용하여 페이지내에서 이동이 가능하게됩니다.

번외로써, <a>태그를 이용하여 이메일링크나 다운로드링크도 생성할 수 있습니다.

2.리스트

리스트는 항목을 나열하기위해 사용 할 수 있는 태그입니다. 리스트태그는 크게 항목 번호가 있는 리스트와

없는 리스트롤 나눌 수 있습니다. 

2.1 번호 없는 리스트

번호 없는 리스트는 unordered lists로써 <ul>태그로 나타냅니다. 

각 리스트 항목은 <li> 태그로 시작합니다. 예시를 보시겠습니다.

이와 같이 코딩하면 다음과 같이 브라우저에 출력이 됩니다. 번호가 없는 상태로 출력됩니다.

2.2 번호 있는 리스트

번호 있는 리스트는 ordered list로써 <ol>태그로 나타냅니다.

예시를 보시겠습니다.

이처럼 ol 태그를 사용하면 다음 처럼 번호가 있는 리스트가 출력됩니다.

상황에 따라 리스트를 작성하실 때 편하신걸 사용하시면 됩니다.

다음으로 마지막으로 정의 리스트를 배워보도록 하겠습니다.

2.3 정의 리스트

정의 리스트는 definition list로써 항목들과 함께 항목의 정의가 표시되는 리스트입니다.

정의 리스트는 <dl> 태그로 생성할 수 있고, <dt> 태그는 항목을 나타내며 <dd> 태그는 그 항목에 대한 설명을 나타냅니다.

예시 코딩을 보시겠습니다.

dl태그로 정의리스트를 생성하고 이처럼 dt태그로 항목을 나타내고 dd태그로 항목에대한 설명을 적어주시면 됩니다.

그럼 다음과 같이 브라우저에 표시가 됩니다.

-

오늘은 여기까지 링크와 리스트에 관한 태그를 학습해보았습니다.

다음번에는 이미지 삽입에 대하여 배워 보도록하겠습니다. 감사합니다!