[HTML] 리스트, 링크 관련 태그

html에 대한 게시글들은 최종적인 html 결과물을 보여드리고 어떻게 만들어가는지를 설명해드릴꺼예요.

눈으로 하는 코딩 말고!! 직접 타이핑하는 코딩을 하시면 실력향상에 무척이나 도움이 된답니다.^^7

기본 태그 소개

---

<ul>

(unordered lists) 번호가 없는 리스트

<ol>

(ordered lists) 번호가 있는 리스트

<li>

(list item) 리스트의 항목

<dl>

(definition lists) 정의 리스트 - 항목들과 함께 항목의 정의(설명)가 표시됨.

<dt>

<dl>태그에서 항목을 나타냄

<dd>

<dl>태그에서 항목의 정의(설명)를 표시함

<a>

(anchor) 하이퍼 링크를 항해한다하여 붙여진 이름. <a>~</a> 부분은 하이퍼링크가 걸린다.

<img>

(image) 이미지(jpg, png, gif, ...)를 불러올 때 사용.

---

안녕하세요. 정선생이예요! 오랜만에 html 게시글을 작성하게 됐네요. 앞으로는 자주 업로드하겠습니다!!! :(

이번 게시글은 기본적으로 사용하는 리스트와 링크, 이미지를 불러오는 태그에 대해 알려드릴거예요.

이미지는 저작권과 관련된 내용이 있을수도 있기에 태그만 알려드릴게요. 직접 코딩해보세요!! :)

자 그러면 결과물을 먼저 볼게요!

두 장을 가져온 이유는 <a> 태그의 활용법을 알려드리려고 만들었는데요. <a>태그와 <img> 태그만 좀 설명 드리면 이번 게시글은 마무리 될 것 같아요!

다음은 코드를 볼게요.

8번줄부터 20번줄까지는 ul과 ol을 비교해드리는 코드를 작성했어요. 어떤 방식으로 출력되는지 아시겠나요? :)

그리고 21번줄부터 27번줄까지는 (저는) 아직까지 사용해본 적 없는, 그렇지만 리스트 종류로는 있는 <dl> 태그의 예시입니다.

<dl> 이라는 큰 틀에 정의를 내리고자하는 단어(그 외도 가능)는 <dt>, 그에 해당하는 내용은 <dd>. 이해 되셨나요? :0

<img> 태그에서 src, alt, width, height가 대표적으로 쓰이는 속성이예요.

src는 경로나 url을 지정해주면되요. (경로에 대해서는 절대 경로와 상대 경로가 있어요.)

alt는 코드에 써드린 것처럼 엑스박스가 나오게 될 때 속성에 있는 값이 출력이되요. 

정확하게 말씀드리면 브라우저가 어떠한 이유로 이미지를 불러올 수 없을 경우에 출력해줄 텍스트. 입니다.

width height 는 다른 태그의 속성으로도 많이 사용하니 꼭 기억해두세요! 가로세로!

<a>태그는 마지막으로 설명해드릴게요. 설명드릴게 생각보다 많네요.

대표적으로 쓰이는 속성은 href, target인데요. 

href는 img에서의 src와 비슷하게 쓰여요. 하이퍼링크의 경로(절대 경로, 상대 경로, 내부 파일)를 넣어줍니다. 

웹 페이지에서의 경로와 일반적으로 쓰이는 경로에 대한 정의가 좀 다른 것 같아요. 여기서는 웹 페이지에 대한 정의를 내려드릴게요. 웹 수업이니까요:0

웹 페이지에서의 절대 경로란, "http://www.google.com" 처럼 다른 웹 사이트의 페이지로 연결되는 것을 말해요.( 보통의 홈페이지 사이트들 )

"http://return-zero.tistory.com"도 절대 경로가 되겠죠?! ^^

상대 경로란, "../doc/info.html"과 같이 현 웹 사이트 안에서의 다른 페이지를 표시하는 것을 말해요. 

내부 파일이란, 현재 페이지 안의 다른 위치를 얘기해요. 예제의 31번줄 코드를 보시면 됩니다.

target은 _blank와 _self를 가장 대표적으로 사용합니다. target 속성을 따로 작성해주지 않으면 자동으로 _self로 인식합니다.

이 말은 default(기본값)가 _self 라는 뜻입니다. :)

_blank와 _self의 차이는 직접 입력해서 눌러보시면 아시겠지만 _blank는 새창을 띄웁니다. 그리고 _self는 현재 창을 바꿔버리는거죠.

오늘은 링크에서 중요한 얘기가 많이 나왔지만 리스트도 빼먹으면 안됩니다.!! 

많이 쓰이는 부분들이예요. 기억해두시면 나중에 사용하시기 편합니다! :0

오늘 준비한 내용은 여기까지예요. 읽어주시느라 고생하셨습니다. 그럼 이만 ^^7

게시글을 보시다가 궁금한 내용, 이게 맞나? 하는 내용, 이건 틀렸어!하는 내용들은 과감하게 댓글 달아주시면 감사하겠습니다.

이론적인 내용에 대한 궁금증은 검색을 통해 궁금증을 해결하는 것이 좋아요!!

실습적인 내용에 대한 궁금증은 최대한 생각을 해보고 검색을 하는 것이 좋아요!!