정선생의 프로그래밍

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

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

기본 태그 소개

<table>

표 형태의 데이터를 표시하는 데 사용되는 태그이다.

<tr>

Table Row의 약자. 하나의 행을 표현한다.

<td>

Table Data의 약자. 행 안의 데이터를 표현(하나의 셀이라 봐도 무방)

<th>

Table Header의 약자. 테이블 열제목. 첫 번째<tr>~</tr> 사이에 위치한다.

<caption>

테이블의 제목을 삽입하는 태그.

border 속성

테이블에 경계선을 만드는 속성

colspan 속성

열을 병합한다.

rowspan 속성

행을 병합한다.

안녕하세요 정선생이예요~ 이번 게시글에서는 표를 표시해주는 테이블 태그에 대해 알아볼꺼예요.

테이블은 초기의 웹페이지에서는 전체 페이지 레이아웃을 지정할 때 많이 사용했어요.

그렇지만 HTML5로 넘어오면서 부터는 단순히 표를 표현 할 때만 사용하는 것 같아요.

오늘의 결과물입니다!!

결과물의 코드예요.

일단 표는 <table>~</table> 로 표현을 합니다.

그리고 각 하나의 행을 표현해주는 태그는 <tr>~</tr>예요.

하나의 행을 표시했다면 그 행에 데이터를 넣어줘야겠죠? 그 데이터를 넣게 해주는 태그는 <td>~</td>예요.

그렇다면 기본적인 틀은 아래와 같겠죠?

그리고 table 태그 속에서 속성이 몇 가지가 있는데 자주 쓰이는 것을 소개해드릴꺼예요. ( 그렇지만 css로 정의하는 것이 원칙이예요. )

<table border=?> 이 속성은 테이블(표)의 라인, 즉 경계선을 얘기해요. 이 경계선 크기를 ?로 설정해주겠다는 것이예요. ?에는 숫자가 들어가요.

<table width=?> 이 속성은 표 전체의 가로길이를 ?로 지정하겠다. 이구요

그렇다면 세로도 있겠죠? <table height=?> 예요. ^^

그리고 테이블에서 가장 중요한 내용!!

rowspan 속성과 colspan 속성이예요.

rowspan은 현재 위치에서 아래로 가면서 행을 합쳐버려요. 예제를 봐보시면 아하! 하실꺼예요

colspan은 rowspan의 반대니까, 열을 합쳐버리는거겠죠? 이건 아래로 갈 수 없으니 현재 위치에서 오른쪽으로 가요.

셀들을 합친다는 얘기를 병합한다. 라고해요. 엑셀류에서 많이 쓰는 용어죠? :)

각 셀들에 다른 태그들을 넣을 수도 있어요.

예를들면 사진을 넣을 수도 있죠.

리스트도 가능하고, 추후에 배울 비디오라던지, 오디오라던지, 등등. 다른 태그들을 사용 할 수 있어요.

활용 할 수 있는 부분이 되게 많죠?? 그만큼 기본적인 구조만 잘 알아두면 어디든 활용 할 수 있다는 사실!

테이블은 여기까지 준비해봤어요. 어렵지 않은 부분이라 직접 코딩 해보면서 결과물 확인하시면 금방 이해하실거예요!!

모두 고생하셨습니다 ^^7

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

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

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

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

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

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

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

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

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

기본 태그 소개

<p>

단락(paragraph)을 표시한다. 웹 브라우저는 자동적으로 단락의 전후에 빈 줄을 추가한다.

<br />

break에서 나온 용어이고, 종료 태그를 가지지 않는다. XHTML과의 연동을 위해 <br> 보다는 <br />로 작성하는 것이 좋다.

XHTML에서는 닫는태그가 필수이기 때문에 알려줘야한다.

<pre>

Previously Formatted text에서 나온 용어. 자신이 입력한 그대로 출력시켜준다.

<h1>~<h6>

Heading 이며 웹 페이지의 머리기사(Headline)이다. 숫자는 커질수록 글자는 작아진다.

<b>

볼드체로 표시

<i>

이탤릭체로 표시

<strong>

볼드체로 표시도 하지만 텍스트를 강하게 표시한다.  현재는 strong과 아래 나와있는 em 태그는 볼드체와 이탤릭체로 표시해준다.

<em>

emphasized에서 나온 용어. 텍스트를 강조하는 것을 의미한다.

<code>

텍스트가 코드(code)임을 알려주는 태그이다.

<sup>

위첨자(superscript)를 표시한다.

<sub>

아래첨자(subscript)를 표시한다.

<hr>

horizontal line의 약자로 브라우저의 너비만큼 수평선을 그려준다.

&nbsp;

non-breaking space의 약자로 공백 문자 한 개를 출력해준다.

&lt;

< 를 출력

&gt;

> 를 출력

&quot;

" 를 출력

&amp;

&를 출력

안녕하세요! 정선생이예요. 태그 설명이 좀 많네요. 필수로 다 외워야하는 태그들은 아니예요. 필요할 때 갖다쓰면 되요. 그리고 요즘은 검색만해도 잘 나오니까요! ( 강의는 기본적으로 편집기의 사용법을 알고 계신다는 전제하에 진행하겠습니다. )

모든 html 파일들은 저장 하실때 확장자를 html로 설정을 해주셔야 웹브라우저가 읽어 낼 수 있습니다! ^^

그럼 텍스트 관련 태그 게시글 시작할게요.

이번에 만들어야 할 페이지의 최종 모습입니다.

위에서부터 차근차근 봐볼까요? 일단 웹페이지의 제목은 "텍스트 관련 태그"로 되어있네요.

그러고 쭉~ 태그들에 대한 설명들이 있어요.

아래 코드를 봐볼까요?

먼저 <head>를 봐볼게요. <head> 태그 속에 있는 <title> 태그는 웹페이지의 제목을 표시 할 때 쓴다는 것을 결과값으로 알 수 있어요.

<body>태그로 넘어가보죠. 결과값이랑 비교하면서 보시면 될 것 같아요. 

&lt; &gt; 를 이용해서 태그 이름을 쓸 수 있다는 것과, 공백은 아무리 입력해도 하나로 인식된다는 것과. <pre> 태그, <h1>~<h6>까지의 태그들까지.

막상 코드를 입력하고 보니까.. 코드에 설명들이 다 있는 것 같아요. 마땅히 더 추가로 정리해야 할 내용은 없는 것 같아요.

한 번 꼭 손 코딩이나 타이핑 코딩으로 꼭 해보시고 html의 기본적인 태그들에 익숙해지시면 좋겠습니다. :)

html의 텍스트와 관련된 태그는 여기서 마무리 짓도록 할게요.

읽어주시느라 고생하셨습니다. 그럼 이만 ^^7

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

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

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

안녕하세요! 정선생이예요. 이번 게시글은 문서편집기의 종류를 알려드리려고해요.

그럼 시작할게요.

HTML 문서편집기는 되게 많아요. 어떤 것을 사용해도 상관이 없어요. 어린시절 처음 HTML을 접했을 때는 메모장으로 했었거든요ㅎㅎ

종류를 이제 알려드릴게요. 사진은 없네요.. 죄송해유.. 참고로 저는 Sublime Text3 를 사용하고 있어요.

1. 메모장(Notepad)

정말 틀린 부분을 하나도 알 수 없어요. 정말 신중에 신중을 기해서 편집을 해야하죠. 저장할때 확장자를 .html로 바꿔주시면 됩니다!

2. 비주얼 스튜디오 코드(Visual Studio Code)

저는 다른 프로그래밍을 할 때 Visual Studio만 써왔었는데 최근에 Visual Studio Code라는 프로그램이 있다는 걸 처음 알았어요 :0

3. 에디트플러스(EditPlus)

정말 가벼워서 사용하기는 편했어요. 태그들을 다른색으로 표시하는 기능이 있어서 메모장에 비해 눈이 훨씬 덜 피로했죠ㅎㅎ

4. 아톰(ATOM)

지금 Sublime Text와 양대산맥?이라 해도 될 정도예요.

5. 서브라임(Sublime Text)

제가 사용하고 있는 프로그램입니다.

... 등등 많아요!

4, 5번의 경우는 패키지 설치가 가능해서 여러 기능을 얹어서 사용 할 수 있어요. 예를 들면, 자동완성 기능이라던지. 프로그램의 배경을 바꾼다던지, 테마를 입힌다던지 등등 이런게 가능해서 인기가 훨씬 많은 것 같아요.

이번 게시글은 여기까지 준비해봤어요. 요즘 편집기들은 워낙 성능들이 다 좋아서 이게 좋아! 라고 단정을 짓기가 힘들어요.

그치만 정말 좋은 편집기는 자신에게 맞는 편집기인 것 같아요. 그렇지 않나요?

여러 편집기를 사용해보고 자신에게 맞는 편집기를 사용하면 되겠죠? ^^

그럼 이만 물러나겠습니다.^^7

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

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

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

기본 용어 소개

문서의 구조와 스타일을 나타내는 단어이다. 시작태그와 종료태그가 있다.

<html>~</html> => html 태그

요소(Element)

시작 태그와 종료 태그로 이루어진 문서의 구성 요소이다.

요소 = (시작 태그 + 콘텐츠 + 종료 태그)

<title>정선생의 프로그래밍</title> => 전체를 요소로 봐도 된다.

속성(Attribute)

요소에 대한 추가적인 정보를 제공함. 항상 시작 태그에 기술된다.

이름="값" 형태로 기술된다.

<a href="http://return-zero.tistory.com">정선생의 프로그래밍</a> a태그 속의 href를 속성이라고 부른다.

주석(Comment)

HTML 코드를 설명하는 글이다.

<!-- 주석 내용 --> 으로 기술한다.

안녕하세요! 정선생이예요. 이번 게시글은 HTML의 기본 구조를 설명해드릴꺼예요.

기본 구조만 알려드리고 바로 다음 단계로 넘어갈꺼니까 훑어본다는 식으로 보시면 되요.

그럼 시작할게요!

HTML 문서는 <HTML>로 시작해서 </HTML>로 끝나요.

<!DOCTYPE html>
<html>
    <head>
<title>정선생의 HTML</title>
</head>
<body>
Hello        Web Programming!
<!-- 이건 주석을 표현해줘요! -->
</body>
</html>

위의 내용이 HTML의 기본 구조예요. 미리 말씀드리자면 HTML 문서를 작성 할 때 태그들은 대소문자를 구별하지 않아요. 이 말은 <HTML>과 <html>은 똑같이 인식한다는 것이예요. 그렇지만 꼭 대문자로 써줘야하는 것이 있는데, <!DOCTYPE html> 이예요. 이유는 (클릭)해서 확인해보시면 되요.

그럼 이 <!DOCTYPE>이 무엇인지에 대해서 알려드릴게요. <!DOCTYPE>이라는 것은 문서 형식 정의(Document Type Definition, DTD)예요. 말 그대로 브라우저가 올바르게 웹 페이지를 표시할 수 있도록 도와주는 문서의 형식을 정의해주는 것이죠. HTML5로 발전하게되면서 DTD는 <!DOCTYPE html>로 html문서 1번째 줄에 작성을 해주면되요. 예전 HTML4버전에서는 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/html4/loose.dtd"> .. 길죠? 이렇게 정의를 했었답니다.

HTML 문서는 <html>과 </html>로 둘러 쌓여있어요. 그리고 그 속에는 <head></head> <body></body>가 있죠. 헤드는 웹 페이지에 대한 정보를 저장하는 곳이예요. 대표적인 예로는 <title> 태그. <title>은 제목. 즉 제목 표시줄에 대한 정보를 표현해주는 태그인거죠. 바디는 웹 페이지의 모든 시각적으로 표현되는 내용들이 들어간다고 생각하시면 되요. HTML 문서의 본문을 정의한다고 생각하면 되겠죠?

HTML에서는 연속된 공백은 하나의 공백으로 인식을 해요. 이 말은 body 태그 안에 있는 Hello       Web Programming! 이라는 글자는 Hello Web Programming! 이라고 출력이 된다는 소리예요. 그럼 연속된 공백은 쓸 수 없나?! 그건 아니예요. 연속된 공백을 쓰기 위한 것은 추후에 알려드릴게요. 

이번 게시글에서 준비한 내용은 여기까지예요. 고생하셨구요. 그럼 이만! ^^7

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

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

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