컴퓨터 세상! 안녕쓰!

춤추는망고·2020년 3월 23일

WeCode html tag web

정리 전 블로그 글들

목록 보기

29/40

WeCode 7기로 수업을 받고있는 슈퍼개발자,

춤추는망고입니다.

( ~~춤 안춥니다.~~ )

- 이 글은 WeCode 에서 배운 내용을 정리하여 공유하는 글입니다.

( 코딩나라에서 살아남기 정도로 보시면 됩니다. )

WeCode 의 첫날인 오늘,

제가 배운 내용은 !

프로그래밍이라는 찌개의 간을 보는 방법인,

HTML 과 CSS 입니다.

이번 글에선,

개발자를 꿈꾸는 사람들에게

'뭐야? 이정도면 개발자 할만 하겠는걸?'

이라는 말도 안되는 마음을 품게하는 HTML 이란 녀석을 소개합니다.

프로그래밍은 컴퓨터와 소통하는 것이라고 생각합니다.

해킹하고 막 멋잇게 막 그런 해커랑 프로그래머가 되고싶으세요?

백과사전을 읽기전엔 동화책부터 읽어봐야하는 법.

일단, HTML 을 배우며,걸음마를 떼봅시다.

인터넷 브라우져와 웹문서 ??

<!DOCTYPE HTML>	<- HTML : 나는 HTML 이야!
<html>
    <head>
        이제부터 내가 하는 얘기 잘들어!
    </head>
    <body>
        본론쓰 ( 대충 엄청난 내용들 )
    </body>
</html>		<- HTML : 끗이야! ㅎ

브라우져 : ( ㅇ _ ㅇ)

사실,

우리가 인터넷을 할 수 있는 건,

' 인터넷 브라우저 ' 라는 친구가

( 구글의 chrome, MS 의 IE 등등 ! )

HTML 이라는 형식의 ' 내용이 담긴 파일 '

을 읽어줘서,

그 내용대로 화면을 볼 수 있기 때문이랍니다!

제일 첫 줄의

' <!DOCTYPE HTML> ' 은

웹브라우저라는 친구에게

" 너가 지금 읽고있는건 HTML 문서다! "

라고 말해주는 거에요!

그 바로 밑의

<HTML> 에서 </HTML> 까지

그 사이에 문서의 ' 모든 내용 ' 이 들어가죠!

그리고, 줄의 시작으로부터 간격이 있어서

마치, ' 안으로 들어간 것처럼 보이는 부분 ' 을 잘 보시면

<HEAD> 와 </HEAD>,

<BODY> 와 </BODY>

가 있죠?

' HEAD ' 는 ' 머리 ' 라는 뜻이죠?

말 그대로,

' 머릿말 ' 이라고 보시면 됩니다!

' BODY ' 는 ' 몸통 ' 이라는 뜻이죠?

역시나 말 그대로,

' 본론 ' 이라고 보시면 됩니다!

HTML 문서에 대해서는 이정도만 파악해두고!

밑에 나열해둔 여러가지 태그들을

하나씩 써보세요!

방법쓰!

메모장을 열고, 밑의 내용 적기
<!DOCTYPE HTML>
<html>
    <body>
        ( 여기에!! )
    </body>
</html>
( ~~복붙 쌉파써블!~~ )

2. ' 원하는이름.html ' 로 저장쓰

3. 새로운 인터넷 창을 연 뒤, 위에서 저장한 파일을 끌어서 넣기

4. 흰 화면에 ( 여기에!! ) 라고 보이는지 확인하고 놀라기

5. 메모장의 ( 여기에!! ) 라고 적어둔 부분에 아무 내용이나 적어보기

6. 다 적었으면 저장하고, 인터넷 창을 새로고침하기

7. 인터넷 창 화면이 바뀌었는지 확인하고 엄청나게 놀라기

8. 밑의 내용들을 넣어보기

9. 저장하고, 인터넷 창 새로고침하면서 반복쓰!

제목과 문단쓰!

<hn> - h 는 heading 의 약자!
   - 제목쓰 ! ( n = 1 ~ 6 / n ↑ => 크기 ↓ )
   * n에는 숫자! 진짜 hn 쓰면 사수한테 꿀밤띠...
<p> - p 는 paragraph 의 약자!
   - 문단쓰 !

내가 보여주고 싶은데로!

<pre>
   HTML 문서는 스페이스바, 탭을 여러번 써도 무시해요...
   하지만, pre 태그 안에 있는 내용은 그대로 보여져요!

줄을 바꾸고싶어!

<br>

a 태그는 꼭 기억쓰!

<a href="주소!" target="어떻게 열까!" title="간단설명쓰!">
   * target : _self(현재창), _blank(새창) / 나머지 몰라도 됨!
   * title : 링크에 마우스 커서 올리면 뜨는 이름쓰!

이런저런 목록, 나중에 필요!

<ul>  -> 순서없는 목록쓰!
   <li>첫번째 내용띠!</li>
   <li>두번째 내용띠!</li>
</ul>

<ol>  -> 앞에 숫자붙는 목록쓰! ( 순서있음! )
   <li>첫번째 내용띠!</li>
   <li>두번째 내용띠!</li>
</ol>

<li>  -> 목록의 구성요소쓰!

포장포장 수납상자쓰!

<div>
   이름붙이는 수납상자
<span>
   줄바꿈없는 수납상자

( 일단 지금은 써보기만 하세요! ) (ㅇ ㅡ<)~*

붙여붙여 이름표쓰!

id
   같은값 여러개 X, 엄청 귀한 이름표!
class
   그냥 평범한 이름표~

( 얘네는 태그 아니에요! )
( 이 뒤에 나오는 CSS 에서 제대로 배우도록 하죠! ) (ㅇ ㅡㅇ)7

태그 안에서 ' < ' 나 ' > ' 를 쓰고싶어!

< : &lt ( less than )
> : &gt ( greater than )

엔터나 스페이스바도 쓰고싶어!

엔터
   - &#13;&#10;
스페이스바
   - &nbsp;

사진파일을 넣고싶어!

<img src="이미지파일경로쓰!" alt="안나오면 이 내용!">
   src : 이미지 파일 경로나 이미지 url 주소
   alt : 대체 이미지나 문구지정
   width :  너비로 크기조정!
   height : 높이로 크기조정!

"표!" 도 넣고싶어!

<table>
    <tr>
        <th></th>
        <td></td>
    </tr>
</table>

   <table> 태그는 표 전체를 묶어줘요!
   그 사이의 <tr> 태그는 표의 한 줄을 묶어줘요!
   그 사이의 <td> 태그는 표의 한 칸에 대한 내용이에요!
   만약 <td> 대신 <th> 태그를 쓰면, 그 칸은 제목이라는 뜻이에요!
   
   <td> 와 <th> 만을 위한 특별한 기능쓰!
      colspan="가로로 합치고싶은 칸 수"
      rowspan="세로로 합치고싶은 칸 수"
       - td 나 th 와 함께 <> 안에 넣어주면 되요!

누군가와 소통하는 웹문서!?

<form>
   <input type="" id="" name="">입력칸쓰~</input>
   <textarea></textarea>
   <button></button>
</form>

<input> 태그는 이런저런 값을 넣을 수 있어요.
   type 에는 입력받을 값의 타입을 정할 수 있어요.
      버튼 ( button ), 체크박스 ( checkbox ),
      글 ( text ), 전화번호 ( tel ), 이메일 ( email ),
      전송하기 ( submit ) 같은 값들이 올 수 있어요.
   id 에는 웹 문서에서 중복되지 않는 값을 써야해요
      우리가 입력에 관해서 식별하는 방법으로 쓰여요.
   name 에 오는 값은
      입력받은 값을 어떤 이름으로 보낼 지 정해줘요.
      ( 이름이 name 인 상자에 우리가 입력받은 값을 넣는거죠! )

input 의 타입을 더 알아보고 싶다면!?
 - https://www.w3schools.com/tags/att_input_type.asp

하나하나씩 써보고, 궁금한 것들은 찾아보면서,

' 이런식으로 쓰는거구나!? ' 하는 감을 익히세요!

일단 부딛혀보세요. 철은 두드릴수록 단단해집니다.

감사합니다. ( _ _)

춤추는망고

지금까지 이런 망고는 없었다. 이것은 개발자인가 춤추는망고인가

이전 포스트

평범하게 자료구조 설명하는 글

다음 포스트

난 HTML 에서 멈췄어야했다.

1개의 댓글

Redonearth

2020년 3월 25일

개성 넘치는 글이네요. 잘 읽었습니다~

답글 달기