Byteball 코인은 steemit 사용자를 위한 특별한 Airdrop(공짜로 코인 뿌리기) 프로그램을 운영하고 있습니다. http://byteball.org

아무것도 요구하지 않습니다. 단지 steemit 에 계정만 있으면 그냥 byteball 코인을 줍니다.

대신 본인의 명성에 따라서 제공되는 coin 의 양은 달라지지만, 최소 10달러를 공짜로 받을 수 있습니다. 
  • 스팀 명성치가 30이 넘는 경우 10$ 가치만큼의 GBYTE 코인을 받습니다.
  • 스팀 명성치가 40이 넘는 경우 20$ 가치만큼의 GBYTE 코인을 받습니다.
  • 스팀 명성치가 50이 넘는 경우 40$ 가치만큼의 GBYTE 코인을 받습니다.
  • 스팀 명성치가 60이 넘는 경우 80$ 가치만큼의 GBYTE 코인을 받습니다.
  • 스팀 명성치가 70이 넘는 경우 160$ 가치만큼의 GBYTE 코인을 받습니다.

아주 상세하게 설명드리니 그대로 따라하시면 바이트볼 코인 가상화폐가 본인의 지갑에 들어옵니다. (영문이어서 상세 스크린 샷을 제공해 드립니다)

1. Byteball 지갑 프로그램을 다운로드 합니다.

Screen Shot 2018-08-10 at 1.46.57 AM.png

  • 다운로드 WALLET 를 누르신 후 본인의 OS(안드로이드, iOS, PC, Mac 등 다 있습니다) 에 맞는 지갑 프로그램을 다운로드 하세요.
    Screen Shot 2018-08-10 at 1.48.16 AM.png

2. 설치 후 채팅 화면 열기(Chat)

  • 설치가 완료되면 지갑이 생성되고 아래와 같이 홈화면에서 'Chat' 메뉴를 눌러 채팅 화면을 엽니다.Screen Shot 2018-08-10 at 1.49.54 AM.png

3. 채팅 화면에서 'Steem attestation(증명) bot' 을 클릭합니다.

  • 채팅 화면에서 'Bot Store' 를 선택한 후 목록 상에서 'Steem attestation bot' 메뉴를 클릭합니다.
    Screen Shot 2018-08-10 at 1.50.14 AM.png

4. AirDrop 제공화면이 열리고 여기에 본인의 바이트코인 주소를 채팅 메세지로 보냅니다.

  • 영문으로 된 설명문을 읽어보시고, 영문지시사항 대로 따라하시면 됩니다. (^^)
  • 스팀잇 보상을 위해 본인의 Byte 코인 지갑 주소를 알려달라고 하네요
  • 채팅 화면상에 (...) 버튼을 누른 후 젤 위의 'insert my address' 를 누르시면 본인의 현재 Byte 코인 지갑 주소가 자동으로 입력이 됩니다.
  • Screen Shot 2018-08-10 at 2.16.25 AM.png

5. 지갑 주소를 입력하면 링크 주소가 하나 출력되고 해당 링크를 클릭해 줍니다.

  • Byte 코인 지갑 주소를 입력하면, 본인의 steemit 계정 인증을 위한 링크가 출력됩니다.
  • 해당 링크를 클릭해서 본인의 steemit 계정과 암호를 입력해 줍니다.
  • Screen Shot 2018-08-10 at 2.22.33 AM.png

6. 본인의 Steemit 계정 정보를 공개(public) 할지 비밀(private) 로 할지 선택하고 'Request sign message' 링크를 클릭합니다.

  • steemit 계정 인증을 완료하면 본인의 steemit 계정 이름이 출력되고, 해당 정보를 공개로 할지 비밀로 할지 물어봅니다. 아무거나 선택하시면 됩니다.
  • 아무거나 선택하시면 마지막으로 Byte 코인을 받기 위한 사인 링크가 출력이 됩니다.
  • 해당 링크를 클릭하면 됩니다.
    Screen Shot 2018-08-10 at 2.28.17 AM.png

7. ByteBall 코인이 본인의 지갑으로 입금됩니다.

  • 아래와 같이 최종 Signed 메세지가 출력된 후 본인의 steemit 명성도에 해당하는 만큼의 ByteBall 코인이 본인이 ByteBall 지갑에 입금이 됩니다.
  • 입금은 transaction 처리속도 때문에 약 2분 정도 후에 본인의 지갑으로 입금이 완료 됩니다. 
    Screen Shot 2018-08-10 at 2.34.43 AM.png

여기에서 바로 ByteBall 코인 지갑을 받으신 후 무료로 airdrop 을 받으세요 : http://byteball.org


긴글 읽어 주셔서 감사합니다. 즐거운 암호화폐 생활 되세요.


Byteball Coin has special Airdrop program for the steemian.

You can get free ByteBall Coin(GBYTE) If you have any steemit account.

  • You will get 10$ worth GBYTE when you have over 30 steem reputation score.
  • You will get 20$ worth GBYTE when you have over 40 steem reputation score.
  • You will get 40$ worth GBYTE when you have over 50 steem reputation score.
  • You will get 80$ worth GBYTE when you have over 60 steem reputation score.
  • You will get 80$ worth GBYTE when you have over 70 steem reputation score.

How to ?

1. Download Byteball wallet program.

Screen Shot 2018-08-10 at 1.46.57 AM.png

  • Download that matched your device.
    Screen Shot 2018-08-10 at 1.48.16 AM.png

2. Install and open Chat view

  • After install the wallet program, you can see the chat view menu on the main home.
    Screen Shot 2018-08-10 at 1.49.54 AM.png

3. Add Steem attestation bot to your wallet

  • In the chat view, you can see the 'Steem attestation bot' menu on the Bot Store Tab.
    Screen Shot 2018-08-10 at 1.50.14 AM.png

4. Read instruction and send your address as chat message in the 'Steem attestation' chat.

  • You can see the instruction when you open the 'Steem attestation' chat.
  • After read the instruction, you can send your address as chat message by clicking (...) button.
  • And choose first 'insert my address' menu to send your address as chat message.
    Screen Shot 2018-08-10 at 2.16.25 AM.png

5. Verify your steemit account by click steemconnect link that provided in chat.

  • After sending your wallet address, You can see the steemconnect link on the message.
  • Please verify your steemit account by clicking that link.
    Screen Shot 2018-08-10 at 2.22.33 AM.png

6. Sign your steemit account by click 'Request sign message' link that provided in chat.

  • After verfiying your account, you can choose your account name's privacy. you can choose any.
  • After set the privacy for your account, you can sign your account again by clicking the sign link on the message.
    Screen Shot 2018-08-10 at 2.28.17 AM.png

7. You got ByteBall Coin.

  • That's all. You got the some amount of ByteBall Coin to your new wallet.
    Screen Shot 2018-08-10 at 2.34.43 AM.png

Thanks for reading. and Enjoy the cryptocurrency life.

"웹 기술로 앱 개발자 되기" 시리즈 입니다.

1차 목표는 html -> css -> javascript 순의 정리이고,
2차 목표는 es6 -> react -> graphql + mongodb -> react native 순의 정리입니다.

웹 개발자 또는 웹 기술을 통해 앱을 개발해 보고 싶은 분들에게 조금이라도 도움이 되었으면 하는 바램으로 차근차근 자세히 정리해 보도록 하겠습니다.

이번 포스트에서는 HTML 태그 중 내용을 담기위한 단락과 관련 태그들에 대해 알아 보도록 하겠습니다.
Screen Shot 2018-05-28 at 11.41.52 PM.png


HTML 단락

HTML 페이지를 생성하는 가장 큰 이유는 특정 내용을 담아서 되도록 많은 사람에게 그 내용을 전달하고자 함 입니다.
HTML 에서 이 내용을 포함하는 가장 대표적인 태그가 바로 <p> Paragraph 태그입니다.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

최근에는 모바일에서의 웹 검색이 보편화 되어서 이 <p> 태그보다는 사용자 화면크기에 따라 컨텐츠의 배치를 조정하기 위해 편리한 <div> 태그가 아주 아주 많이 사용되긴 하지만, 문서의 내용인 단락을 HTML 에 담기 위한 태그로는 바로 이 <p> 태그가 원조 중에 원조라 할 수 있겠습니다.
Screen Shot 2018-05-28 at 11.40.23 PM.png

특히 <p> 태그와 관련해서 한가지 오해하기 쉬운 점은 이 <p> 태그가 라인을 띄우기 위한 태그라고 이해하고 있는 분들이 한국에는 매우 많다는 점입니다. (저도 처음에 html 을 홀로 배우던 시절 라인을 띄우기 위한 사용이 강조된 책으로 배워서 인지, paragraph 라는 원래 의미는 사라지고, 라인 띄위기 용도로만 알고
사용 하였었던 호랑이 담배피던 시절이 있었음을 고백합니다)

물론 <p> 태그는 이전 포스트에서 다뤘던 <h1>~<h6> 태그와 마찬가지로 브라우저가 태그 위치에 Margin 여백을 추가해 주기 때문에 컨텐츠를 어느 정도 간격을 갖게 랜더링 하고 싶은 경우에 사용이 가능하기는 합니다.

하지만 이렇게 Margin 여백을 부여하는 이유는 본래의 의미인 Paragraph, 즉 단락을 올바른 범위에서 구분하여 출력하기 위한 것이지 컨텐츠 끼리의 일정 공백을 만들기 위한 용도는 아니라는 것입니다.

뭐 정답은 없듯이 나는 그렇게 계속 사용할꺼야 라고 하시는 분도 계시겠지만, 라인 간의 일정 공백을 만드시기 위한 용도라면 <p> 태그의 사용보다는 style 을 부여해서 처리하실 것을 권해 드립니다. (css 관련 포스트 참조)

다시 한번 강조하지만 <p> 태그는 Paragragh 를 구분지어 출력하기 위한 태그입니다.

HTML 화면 출력에 대해

<p> 태그에 대해 보다 상세한 내용을 알아보기 전에 한가지 짚고 넘어갈 것이 있습니다.

한글이나 워드같은 워드프로세서에서는 문서의 내용을 입력할 때 의도적으로 문서의 내용을 보다 잘 정돈된 모습으로 보이고자 공백문자열을 아주 잘 활용을 합니다.

[공백으로 정돈 전]
순번 이름 나이
1번 홍길동 1
2번 남궁길동무 5
3번 김수한무거북이와두루미 200

[공백으로 정돈 후]
순번                          이름                                        나이
1번                         홍길동                          1
2번                         남궁길동무                       5
3번                         김수한무거북이와두루미             200

이런식으로 말이지요.

하지만 HTML 페이지는 사실 자신이 출력될 대상 화면의 크기에 대해 전혀 알지 못한채로 생성이 됩니다. 큰 화면을 가진 대형 모니터에서 출력이 되는 경우도 있고, 스마트폰 처럼 매우 작은 크기의 화면에서 출력이 되는 경우도 있겠죠.
그리고 이미 출력된 화면을 사용자가 언제든 키우거나 줄일수도 있구요.

그림으로 치자면 전체 캔버스의 크기를 미리 알 수가 없다는 것이지요. (워드프로세서는 A4 크기라는 것을 알수 있지만요).
그래서 HTML 문서는 문서내에 사용된 모든 중복된 공백 문자열을 단 하나의 공백으로 취급해서 출력을 하고 사용자가 입력한 라인바꿈 정보는 모두 무시하고 출력되도록 표준이 되어 있습니다. 오히려 화면마다 크기가 다른 공백문자나 라인바꿈의 출력간격이 달라져서 내용이 모두 어그러져 보이는 것 보다 공백의 중첩이나 라인바꿈 입력정보를 무시해서 내용의 출력이 보다 통일성을 가지도록 방향을 잡은 것이라고 할 수 있습니다.

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser 
ignores it.
</p>

즉 위와같이 여러 줄로 의도적으로 나누어서 단락을 HTML 에 작성하더라도,
Screen Shot 2018-05-29 at 12.09.54 AM.png
브라우저는 모든 띄워진 라인을 무시하고 하나의 단락으로 출력해 버립니다.

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser 
ignores it.
</p>

또한 위와 같이 의도적으로 단어들 사이에 공백문자를 줘서 여백을 주려해도
Screen Shot 2018-05-29 at 12.10.38 AM.png
브라우저는 마찬가지로 모든 중복된 공백을 무시하고 단 한칸의 공백으로 전환해서 출력을 해 버립니다.

https://codepen.io/pen/ 에서 위 두 코드를 직접 입력해 보고 결과를 확인해 보시기 바랍니다.

이런 이유로 HTML 을 접한지 얼마 되지 않은 분들은 공백과 라인바꿈이 무시되는 것 때문에 적잖이 당황을 해서 공백을 수 없이 더 추가해 보기도 하고, 라인바꿈을 마구 마구 추가해 보기도 하면서 괜한 시간낭비를 하게 되는 데요. 여러분은 이런 괜한 시간낭비를 하지 마시길 바래 봅니다.

종료 태그를 잊지 마세요

<p> 태그를 사용할 때 한가지 더 주의해야 할 점이 있는데요. 반드시 <p> 태그를 연 후에는 </p> 와 같이 종료 태그로 닫아주셔야 합니다.

이전 포스트에서도 설명드렸던 것 처럼, 브라우저 마다 종료되지 않은 태그가 사용되었을 경우에는 알아서 자체적(?) 으로 처리하기 때문에 출력에 일관성도 없게되고, 심한 경우에는 아예 해당 단락 자체가 출력이 되지 않고 화면에서 사라져 버리기도 하기 때문입니다.

그러니 반드시 <p> 태그가 열리면 </p> 태그로 닫아주시기를 다시한번 강조해서 말씀드립니다.

라인바꿈을 위한 <br>

<br> 태그를 기억하시나요? 이 포스트에서도 설명드렸던 것 처럼 브라우저는 사용자가 입력한 라인바꿈을 모두 무시하기 때문에 의도적으로 단락에서 라인바꿈을 하고자 하는 경우에 사용하는 태그가 바로 <br> 태그입니다.
여기서 br 은 영문으로 line break 을 뜻합니다.

<p>This is
a paragraph
with line breaks.</p> 
<p>This is<br>a paragraph<br>with line breaks.</p>

Screen Shot 2018-05-29 at 12.28.00 AM.png
사용자가 입력한 라인바꿈은 모두 무시되었지만, <br> 태그를 사용하면 라인바꿈을 화면에 출력할 수 가 있습니다.

라임 맞추기의 문제

하지만 여전히 공백이 무시되는 것은 해결하지 못했네요.
랩 가사를 화면에 옮기려면 라임을 맞춰주기 위해 공백이 꼭 필요한 데요 이럴때 어떻게 해야 할 까요?
아니 라임보다 소스 코드를 화면에 출력할 경우엔 더욱 공백을 무시하면 안되는데 말이죠.

<p>
  if(config.api && config.api.enabled) {
      var express = require('express');
  }
</p>

Screen Shot 2018-05-29 at 12.35.14 AM.png
제 보팅봇 소스 중 일부인데요. 이게 뭔가요? 아름다운 여백의 미는 어디로 가 버린 건나요 ㅠㅠ.

입력된 형식을 그대로 유지해 주는 <pre> 태그

저만 이런 필요를 느낀 것이 아니겠죠? 그래서 HTML 에서는 사용자가 입력한 공백, 라인바꿈, 탭 등등 브라우저가 원래는 무시해 버리는 이런 문자들을 사용자가 입력한 그대로 유지해서 출력해 주는 엘리먼트를 제공합니다.

바로 <pre> preformatted text 태그 입니다.

<pre>
  if(config.api && config.api.enabled) {
      var express = require('express');
  }
</pre>

Screen Shot 2018-05-29 at 12.38.45 AM.png
제 코드의 아름다운 여백미가 돌아왔습니다. 와우~


이번 포스트에서는 HTML 에 내용을 입력하는 대표 엘리먼트인 <p> 태그와 관련 엘리먼트들에 대해 알아보았습니다.

태그설명
<p>단락을 정의합니다. 단락 앞뒤로 여백이 추가됩니다.
<br>라인바꿈을 출력합니다.
<pre>HTML 에 입력된 공백과 라인바꿈 내용을 그대로 출력해 줍니다.

긴글 읽어주셔서 감사합니다.

  1. kaw 2018.06.30 07:21 신고

    html 글 써주시는 것을 하나씩 쭉 봤는데 너무 유익하고 이해가 잘 되고, 실전 경험이 많이 녹아 있으신 것 같아요. 많이 바쁘시겠지만 정기적으로 올려주시면 정말 정말 감사하겠습니다> < !! 진짜 최고입니다

"웹 기술로 앱 개발자 되기" 시리즈 입니다.

1차 목표는 html -> css -> javascript 순의 정리이고,
2차 목표는 es6 -> react -> graphql + mongodb -> react native 순의 정리입니다.

웹 개발자 또는 웹 기술을 통해 앱을 개발해 보고 싶은 분들에게 조금이라도 도움이 되었으면 하는 바램으로 차근차근 자세히 정리해 보도록 하겠습니다.

이번 포스트는 HTML 태그 중 주제를 나타내거나 새로운 단락을 의미있게 분류하기 위해 사용되는 제목관련 태그들에 대해 알아보도록 하겠습니다.

Screen Shot 2018-05-28 at 10.42.16 PM.png


HTML 제목 태그

HTML 에서는 제목(주제를 대표하거나, 이하 내용을 요약해서 나타내는) 처리를 위해 <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 의 Heading 태그를 제공합니다.

이중 <h1> 태그가 가장 중요한 제목을 의미하고, 숫자가 커질수록 하위 단계의 제목 또는 주제를 의미하게 됩니다. 그래서 <h1> 태그가 가장 크게 랜더링(규격에 맞추어 화면에 출력하는) 되고, 숫자가 커질수록 상위의 <h숫자> 태그 보다 작게 랜더링 됩니다.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

https://codepen.io/pen/ 에서 위 소스코드를 직접 붙여넣고 결과를 확인해 보시기 바랍니다.
Screen Shot 2018-05-28 at 10.16.52 PM.png

아무런 스타일(화면에 출력될 모양이나 폰트 색깔등을 지정하는 것을 스타일 이라고 함)을 지정하지 않아도 브라우저가 알아서 h 뒤의 숫자에 따라 강조해서 랜더링을 하는 것을 알 수 있습니다.

그리고 브라우저는 이 <h숫자> 태그를 출력할 때는 사용자가 단순히 화면에 강조해서 랜더링만을 하는 것이 아니라 <h숫자> 태그를 둘러싼 여백(Margin) 을 추가해서 다른 내용과 구분되어 보이도록 랜더링을 합니다.

참고로 HTML 에서 여백은 Margin 여백과 Padding 여백의 두 종류가 있는데요. Margin 은 내 것의 경계를 이루는 Border 밖의 다른 것과의 간격을 의미하고, Padding 은 내 것의 경계인 Border 안에 내것 자체가 갖는 빈 공간을 의미해서 서로 차이가 있습니다.
Screen Shot 2018-05-28 at 10.24.56 PM.png

브라우저는 <h숫자> 태그 처리시 Margin 여백을 사용하는 데요. Margin 과 Padding 이 여백처리에 있어 갖는 보다 상세한 차이와 특성에 대해서는 차후 CSS 편에서 보다 상세히 다루도록 하겠습니다.


제목 태그의 중요성

이 제목 태그는 단순히 크고 진하게 출력되는 것 보다 HTML 페이지에서 더 중요한 특징을 갖는데요.
바로 검색 엔진에 대한 대응(SEO 라고도 하지요. Search Engine Optimization) 때문입니다.

검색 엔진이 페이지의 내용을 읽어서 내용을 확인하고 분류하고 점수를 매길 때 이 제목 태그를 사용하기 때문입니다.
즉 페이지의 전체 내용을 이해해서 페이지를 요약하는 것이 아니고 이 제목 태그를 이용해서 페이지의 내용을 색인화 하기 때문에 나의 컨텐츠가 효과적으로 검색엔진에게 노출되기를 바라신다면 이 제목 태그를 아주 적절하게 사용 하셔야만 합니다.

그리고 나의 웹 페이지를 보는 사용자도 내용보다는 이 제목들이 먼저 눈에 들어오고 이 제목들을 통해 페이지의 전체 구조도 파악이 되기 때문에 적절한 제목 태그의 사용은 정말 중요하다고 할 수 있겠습니다.

일반적으로 <h1> 태그는 가장 메인이 되는 주제를 표현하기 위해 사용하고, <h2> ~ <h6> 태그는 이 메인 주제에 종속된 하부 주체를 순차적으로 표현하기 위해 사용하는 것이 좋습니다.

그리고 당연하게도 <h숫자> 태그는 주제나 제목을 표현하기 위해 사용해야지 단순히 특정 문자열을 크고 굵게 출력하기 위해 사용되어서는 안됩니다.

화면에 보이는 것이 중요한 것이 아니고 페이지 내부 구조를 올바로 표현해야만 검색엔진이 내 페이지를 올바로 분류해서 보다 많은 곳에서 사용되고 노출되고 인용될 수 있도록 처리할 수 있기 때문입니다.


보다 큰 제목

각각의 <h숫자> 태그는 사전에 정의된 기본 크기를 가지고 있습니다. 그 때문에 알아서 크고 굵게 출력이 되는 것이지요.

하지만 필요한 경우에는 기 기본 정의된 크기가 아닌 보다 큰 제목을 출력할 수 가 있습니다.
바로 style 속성을 이용하면 되는데요. style 속성에 font-size 를 정의하면 내가 원하는 크기로 제목을 출력할 수가 있게 됩니다. (style 에 대한 내용은 추후 더 상세히 다루도록 하겠습니다)

<h1>Heading Default
<h1 style="font-size:60px;">Heading Styled</h1>

위 코드를 https://codepen.io/pen/ 에서 확인해 보도록 합니다.
Screen Shot 2018-05-28 at 10.50.39 PM.png
기본 사이즈보다 엄청 커진 제목을 볼 수 있지요?

HR 태그

HTML 태그 중에는 제목으로 출력되지는 않지만 제목과 유사한 역할(다른 주제의 단락들과 구분해 주는) 을 해주는 태그가 하나 더 있습니다.
바로 <hr> 영문으로는 Horizontal Rule 을 뜻해서 단락들을 서로 구분해 주는 선을 하나 화면에 그려주는 역할을 합니다.

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

위 코드를 https://codepen.io/pen/ 에서 확인해 보도록 합니다.
Screen Shot 2018-05-28 at 10.57.55 PM.png
이렇게 수평으로 선을 하나 그어 주게 됩니다.

여기서 퀴즈!. 그럼 <vr> 태그는 있을까요? 없을까요?
직접 codepen 에서 입력해서 결과를 확인해 보시면 되겠죠?

HTML 문서의 제목 태그 <head>

HTML 에는 하나 더 제목 처리를 해주는 태그가 있습니다. 브라우저로 특정 페이지를 열면 브라우저의 탭에 출력되는 문서의 제목, 즉 <title> 태그인데요. 이 <title>태그를 포함하는 <head> 태그가 그 주인공 입니다.

사실 <head> 태그 자체는 HTML 문서의 제목에 대해서 아무 처리도 하지 않습니다.
하지만 이전 포스트에서 설명드렸던 것 처럼 <body> 엘리먼트 내에 포함시킬 수는 없지만 반드시 제공되어야 하는 페이지에 대한 메타정보들을 포함하는 엘리먼트들을 포함하는 곳이 바로 이 <head> 태그 입니다.

<head> 태그에 포함된 엘리먼트 들은 화면에 출력되지 않지만 <title> 엘리먼트 만은 브라우저에서 읽어서 해당 웹 페이지의 제목으로 출력을 해 주게 됩니다.

이 <head> 태그에는 문서의 제목, 문서의 문자세트(다국어 지원을 위한 문자규격), 문서에서 사용되는 스타일, 문서에서 사용되는 script(대표적으로 javascript 등), 그리고 추가적인 메타정보들을 포함하게 됩니다.

나중에 css 와 javascript 정리시에 다시 <head> 태그에서 사용되는 다양한 메타정보와 관련 태그들에 대해 다시 알아보도록 하겠습니다.


또또 상세히 설명하다 보니 길어졌네요.
이번 포스트에서는 HTML 에서 중요한 의미를 갖는 Heading 처리에 대해 알아보았습니다.

다음 포스트에서는 실제 HTML 문서에 담기는 내용을 처리하는 <p> 태그에 대해 상세히 알아보도록 하겠습니다.
긴글 읽어주셔서 감사합니다.

"웹 기술로 앱 개발자 되기" 시리즈 입니다.

스스로 그 동안 사용하던 웹 기반 기술들에 대한 복습을 겸한 강의여서 html -> css -> javascript 의 순으로 먼저 정리하고,
추가로 es6 -> react -> graphql + mongodb -> react native 의 순으로 진행해 볼까 합니다. 기간은 두어달 정도로 예상을 해 봅니다.

웹 개발자 또는 웹 기술을 통해 앱을 개발해 보고 싶은 분들에게 조금이라도 도움이 되었으면 하는 바램으로 차근차근 정리해 보도록 하겠습니다.

이번 포스트는 HTML 태그들 마다 추가로 정의할 수 있는 속성(Attribute) 에 대해 알아보도록 하겠습니다.
Screen Shot 2018-05-26 at 1.20.50 AM.png


HTML 태그 속성 - Attribute

태그의 속성이란, HTML 엘리먼트를 구성하는 태그에 부여하는 엘리먼트에 대한 보다 상세한 정보를 의미합니다. 모든 태그가 이름은 갖지만 부여하는 속성에 따라 출력되는 이미지가 바뀌고, 연결되는 링크가 다르고, 크기, 모양 등등이 다른 이유가 바로 이 정의된 속성이 서로 다르기 때문입니다.

따라서 반드시 대표적으로 사용되는, 그리고 태그들 마다 다른 각각의 속성들에 대해 충분히 이해하고 있어야만 내가 원하는 모양의 화면이 출력되도록 HTML 을 구성할 수가 있습니다.

HTML 태그들의 속성(Attribute)은 다음과 같은 특징을 갖습니다.

  • 모든 HTML 엘리먼트는 여러 속성(Attribute)들을 가질 수 있습니다.
  • 속성은 현재 HTML 엘리먼트에 다른 엘리먼트와 다른 추가정보를 제공 합니다.
  • 모든 속성은 시작태그에 정의합니다. 종료태그에 정의하지 않습니다. 종료태그에 정의할 수 없습니다.
  • 속성은 속성 이름과 속성 값이 서로 짝으로 존재합니다. (속성이름 name= 속성 값 "value")


href 속성

HTML 링크는 <a> 태그로 정의되며, <a> 태그는 href 속성을 통해 대상 주소 정보를 <a> 태그에 추가 할 수 있습니다.

<a href="http://dreamholic.tistory.com">블로그</a>



src 속성

HTML 이미지는 <img> 태그로 정의되는데, <img> 태그는 src 속성을 통해 이미지 파일이 있는 실제 네트워크상의 주소와 파일명 정보를 <img> 태그에 추가할 수 있습니다.

<img src="https://steemitimages.com/apple.png"/>



width 와 height 속성

HTML <img> 태그는 width 속성을 통해 이미지의 출력 폭 크기를, 'height' 속성을 통해 이미지의 출력 높이 크기를 <img> 태그에 추가할 수 있습니다. 브라우저는 이 width 와 height 속성 정보를 읽어서 실제 화면에 출력할 때 어떤 폭과 높이로 이미지를 출력할지를 결정하게 됩니다.

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

width 와 height 속성을 제공하지 않은 경우에는 원본 이미지가 가진 width 와height 크기로 이미지를 출력하게 되서 과도하게 크게 출력이 되거나 너무작게 출력이 되어 문제가 되곤 하니 되도록 <img> 태그에는 width 와 height 속성을 추가해 주시는 것이 좋습니다.


alt 속성

alt 속성은 보통 <img> 태그에서 사용하는데, <img> 태그에서 보여주고자 하는 이미지를 출력할 수 없는 경우에 이미지 대신 사용자가 활용할 수 있는 대체 텍스트 정보를 <img> 태그에 추가할 수 있습니다.

시작장애인을 위한 텍스트기반의 웹 탐색이나, 검색엔진의 로봇등에 의한 웹 탐색시에는 이 alt 속성을 부여하지 않으면 이미지가 실제 무엇(사과그림인지, 토끼그림인지)를 알 수가 없기 때문에 가능한 모든 <img> 태그에는 이 alt 속성을 통해 이미지에 대한 설명문을 추가해 주는 것이 좋습니다.

설명문을 추가해 주면 시각장애인이 웹을 탐색할때 이 그림에 대한 설명을 음성으로 안내할 수 있고, 검색엔진에게도 이미지가 무슨 이미지인지에 대한 정보를 제공하여 웹 페이지가 올바로 분류될 수 있도록 해 줍니다.

<img src="https://steemitimages.com/logo.png" alt="스팀봇 로고 이미지"/>

alt 속성은 또한 네트워크상에 대상 이미지 파일이 지워지거나 이전되어 실제로 대상 파일을 찾을 수 없는 경우에도 사용자에게 원래 이미지에 대한 정보를 제공해 줄 수 있기 때문에 매우 유용한 속성이라 할 수 있겠습니다.


style 속성

style 속성은 거의 모든 엘리먼트에 사용이 가능한 속성으로 화면에 출력되는 모양과 형태(스타일) 정보를 추가하기 위해 사용하는 속성입니다.

대표적으로 엘리먼트의 색상, 폰트종류, 크기를 정의하게 되는데, 사실 style 을 통해 정의할 수 있는 모양과 형태의 수는 헤아릴 수 없을 만큼 많습니다.

style 에 대한 부분은 향후 조금 더 자세하게 다루고, 별도의 'css' (Cascading Style Sheet) 정리를 통해 다시 알아 보도록 하겠습니다.

<p style="color:red">I am a paragraph</p>

간단히 HTML 단락 엘리먼트의 색상을 빨갛게 속성 부여한 예시입니다.
Screen Shot 2018-05-26 at 1.16.31 AM.png


lang 속성

HTML 은 기본적으로 국제적인 표준이기 때문에 어떤 언어로 안에 컨텐츠를 읽어야 할지를 지정해 주어야 합니다.
같은 알파벳 글짜로 쓰여있어도 이게 불어인지, 영어인지, 스페인어인지 알지 못하면 해석이 어렵겠죠?
그래서 필요한 것이 바로 lang 속성입니다.

lang 속성은 HTML 문서 전체에 영향을 주기 때문에 <html> 태그에 정의합니다.
외국의 경우에는 웹 접근성(어느 누구라도 웹을 이용할 수 있고, 동일한 정보를 취할 수 있는 정보 접근상의 평등 기회 제공의 척도, 좀 어렵죠?) 이 아주 중요해서 병원사이트에서 정보를 제공하는데 시작장애인에게도 동일한 정보에 대해 접근이 가능하도록 서비스를 제공하지 않으면 웹 접근성 위배사유가 되어서 집단 소송을 당해서 천문학적인 손해배상을 해야하는 경우가 왕왕 있습니다.

따라서 시각장애인이 올바로 정보를 취득할 수 있도록 웹 사이트를 읽어주는 소프트웨어도 제공하고 이 소프트웨어를 위해 HTML 문서 내용에 대한 올바른 language 정보를 제공하는 것이 무엇보다 중요한데요. 이때 반드시 필요한 속성이 바로 이 lang 속성입니다.

당연히 다국어 사이트를 운영하고자 하는 경우에도 이 lang 속성을 이용해서 제공 언어에 해당하는 올바를 값을 설정해 주어야 하구요.

<!DOCTYPE html>
<html lang="ko-kr">
<body>

...
</body>
</html>

위 예시는 HTML 문서의 언어 설정을 한국어로 지정한 예시입니다. 보통 이 lang 값을 지정해주지 않아서 한글내용이 브라우저에서 깨져서 출력되는 경우가 있는 것입니다. HTML 문서에서 언어정보를 알 수가 없으니 브라우저가 기본 국가언어로 출력해 주는 것인데 그게 가끔 안 맞아서 깨져서 출력이 되는 것이지요.

추가로 ko-kr 을 설명드리면, 앞에 두 글자는 언어를 두의 두 글자는 국가를 의미합니다.
ko - 한국어를 의미, kr - 한국을 의미
사실 한국어는 남한과 북한 밖에는 사용을 하지 않기 때문에 ko-kr 밖에는 없지만, 영어의 경우에는 en-US, en-UK 등등 영어를 사용하는 많은 나라들을 위한 lang 속성 값이 존재합니다.

언어가 같더라도 국가별로 날짜 출력 순서나 화폐, 무게 표준 등등이 차이가 있기 때문에 언어와 국가 정보를 분리해서 정의한 것입니다. (또 설명 길어짐.. 죄송)


title 속성

title 속성은 <p> 엘리먼트에 추가하는 속성으로 해당 단락의 제목 정보를 추가로 제공할 경우 사용합니다.
title 속성이 추가된 <p> 엘리먼트는 마우스가 가까이 올 때 이 title 속성으로 추가된 정보를 사용자에게 제공하게 됩니다.

<p title="Paragraph Title!">
This is a paragraph. content.
</p>

Screen Shot 2018-05-26 at 1.39.50 AM.png


속성이름은 소문자를 사용

HTML5 에서는 태그와 마찬가지로 속성도 대소문자를 구분하지 않습니다.
그래서 title 이나 TITLE 이나 아무것도 써도 상관은 없습니다.
하지만 태그이름과 마찬가지로 XHTML 규격 같은 경우에는 대문자를 지원하지 않기 때문에 소문자로 속성이름을 사용할 것을 권장합니다.


속성 값은 인용부호로 감싸줄 것

HTML5 에서는 인용부호 사용에 대해 강제하지 않지만 속성값을 입력할 때는 인용부호로 감싸 주는 것이 좋습니다.
특히 한글 또는 공백문자가 속성값에 들어가는 경우에는 인용부호로 감싸주지 않으면 정상적으로 값 설정이 안되거나 띄워써진 문자를 별도의 속성이름으로 해석하는 경우가 발생하기도 하기 때문에 반드시 속성값을 처음부터 무조건 인용부호로 감싸 주는 것으로 규칙을 정해버리는 것이 좋습니다.

<a href=우리반 주소록.hwp>주소록</a>

위 처럼 작성하면 이런 링크로 보내버립니다. "https://우리반"

<a href="우리반 주소록.hwp">주소록</a>

이렇게 인용부호로 값을 잘 감싸 주어야 의도한 정상링크로 우릴 안내하지요. "https://우리반 주소록.hwp"


인용부호는 작은 따옴표 또는 큰 따옴표 한 종류로

되도록 이면 표준적으로 큰 따옴표 사용을 권장합니다. 이유는 영문을 내용으로 작성할 경우 작은 따옴표(') 가 내용안에 사용되는 경우가 있기 때문입니다.

<p title="John 'ShotGun' Nelson">

물론 아래와 같이 작은 따옴표와 큰 따옴표를 바꿔도 됩니다.

<p title='John "ShotGun" Nelson'>

하지만 당연히 작은 따옴표로 시작했는데 큰 따옴표로 마치거나, 큰 따옴표로 시작했는데 작은 따옴표로 마치면 안됩니다.
왜 안되나고요?
codepen.io 사이트에서 한번 직접 해 보시길 권해드립니다. "백견이 불여일타!"

요약 정리

  • 모든 HTML 엘리먼트는 속성을 가질 수 있습니다.
  • title 속성은 사용자에게 Tool Tip (마우스를 가까이 가져갔을 때 나타났다 사라지는 텍스트) 형태로 출력해 줍니다.
  • href 속성은 링크에 대한 실제 주소 정보를 정의할 때 사용합니다.
  • width' 와height` 속성은 이미지의 출력 크기를 정의할 때 사용합니다.
  • alt 속성은 이미지에 대한 정보, 대체 텍스트를 추가할 때 사용합니다.

또 상세히 설명하다 보니 길어졌네요.
하지만 항상 최선을 다해 설명드리도록 노력하겠습니다.

긴글 읽어주셔서 감사합니다.

+ Recent posts