'제발 제 코드에 훈수하세요' 태그의 글 목록

준비물
- Unreal 엔진 →에픽게임즈 https://www.epicgames.com/store/ko/download 실행파일 다운로드
- 에픽게임즈 실행파일에서 Unreal 엔진 다운로드 v4.7이상
- nodejs 및 express 다운로드 서버가 express로 돌아갔었습니다.
- 언리얼 프로젝트가 있다면 상관없지만 없다면 에픽게임즈에서 무료로 데모 프로젝트를 다운로드할 수 있습니다.

로컬에서 프로젝트를 브라우저로 띄워보기

1. 언리얼 엔진을 실행시켜주세요 준비물이 모두 준비된 상태에서 가능합니다.

2. 단 탭의 편집 → 에디터 개인설정 → 좌측 탭 레벨 에디터 →Play in Standalone Game →추가 실행 옵션 파라미터에 호스트와 포트 및 오디오 믹서를 설정하는 파라미터 참조 AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888

3. 독립형 게임으로 실행

아래와 같은 이런 창이 생성됩니다.

4. C:\Program Files\Epic Games\UE_4.27\Samples\PixelStreaming\WebServers\SignallingWebServer\platform_scripts\cmd 경로로 폴더 열기 및 run_local을 실행. express가 없다는 에러가 나오면 설치해주세요. npm install express

5. 아래처럼 Streamer Connect라는 표현이 뜬다면 성공

6. WebRTC가 사용 가능한 브라우저 ex) 크롬에서 localhost를 치고 들어가기

7. 성공

Docs에서 제공하는 Pixel 스트리밍 호스팅 및 네트워킹 가이드

https://docs.unrealengine.com/4.27/en-US/SharingAndReleasing/PixelStreaming/Hosting/

위에서는 로컬 서버에 연결하여 테스트해 보았습니다. AWS, GCP, Azure와 같은 클라우드 서비스에서도 사용이 가능합니다.

더 복잡한 네트워크나 개방형 인터넷을 통해 서비스를 배포하려고 하거나 사용자 경험과 연결 흐름을 재설계하려는 경우 설정을 다시 생각해야 할 수 있습니다. 아래와 같은 설정을 생각하여 재설계가 가능합니다.

기본적인 시나리오

브라우저로 Signaling서버를 통해 P2P로 통신하는 구조

다중 플레이어 엔드포인트 시나리오

하지만 이건 그냥 한 사람이 방송하고 나머지가 보는 스트리밍 구조랑 같다. 방송하는 사람 외에는 자신만의 캐릭터가 없다.

매치메이킹을 통한 다중 풀 스택

여러 호스트들(인스턴스)이 Matchmaker서버를 통해 한 곳에서 만나는 구조

*주문형 확장

클라이언트가 연결을 시도할 때마다 새 서버 인스턴스를 가동할 수 있습니다.

출처 및 참고자료

https://tensorworks.com.au/blog/an-open-architecture-for-scalable-pixel-streaming/#11-streaming-protocols [Unreal 커뮤니티에서 본 한 블로그]

https://docs.unrealengine.com/4.27/en-US/SharingAndReleasing/PixelStreaming/[Unreal Pixel 스트리밍 Docs]

https://www.youtube.com/watch?v=ApUBVnQK0Qw&ab_channel=WilliamOrving [ Youtube 강의 ]

제제훈 킹아~

저작자표시

우리가 보통 보는 페이지의 구조이다.

DBcut에서는 요새 트렌드를 잘 알 수 있다.

현 시점을 기준으로는

정형화된 페이지보다 이런식의 시각적이고 눈에 확들어오는 페이지들이 잘 나가는 것을 알 수 있다.

이러한 사이트들을 카피하기위해서는 그 구조들을 면밀히 관찰해야한다.

모양만 보고 구조화를 하게된다면 CSS에 속아 내용이 엉망이 된다.

내용을 잘 분석해서 구조화를 해야 한다.

오늘 배울 것은 바로 페이지의 구조화이다.

구조화

HTML문서중에 제일 중요한 작업인 구조화는 HTML문서의 뼈대를 만드는 작업이다.

구조화에 쓰이는 태그

header: 제목이나 타이틀에 쓰이는 태그, nav를 포함시킬 수 있음, h1태그를 써야한다.

nav: 네비게이션 바에 쓰이는 태그, 사이트 내의 모든 페이지가 들어있어야한다.(보통 list태그들을 사용한다.)

main: 몸체가 되는 태그, 본문 태그이다. 보통 section을 감싸준다.

section: main안에서 쓰일 수 있고 header안으로는 쓰지 못함 하지만 section안에 header, article, footer의 구조를 만들 수 있다.

article: 독립적인 요소, section과 비슷하나 독립적이라는 차이가 있다. 예로는 블로그 포스트나 일반 댓글이 있다.

footer: 저작권이나 주소 전화번호 이메일 등을 나타내기위해 사용된다.(small태그와 address태그를 사용해준다.)

aside: 광고, 빠른메뉴, 있어도 없어도 되는 태그이지만 있으면 좋다.(광고비 때문에 사실 제일 중요함)

종합해서 예시를 들어보자면 아래와 같다.

  <body>
 <!--머리부분-->
      <header>
        <h1>제목입니다.</h1>
      </header>
 <!--네비게이션부분 header로 넣을 수 있다.-->
      <nav>
        <h2>네비게이션 목록</h2>
        <ul>
          <li>목록1</li>
          <li>목록2</li>
          <li>목록3</li>
        </ul>
      </nav>
<!--몸통부분-->      
      <main>
      	<section>
        <h1>메인 몸통의 제목</h1>
        <section>
          <header>
            <h2>첫 번째 본문의 머리부분(제목)</h2>
            <p>첫 번째 본문의 대략적 설명</p>
          </header>
          <article>
            <h3>세부 내용의 제목</h3>
            <p>세부 내용의 설명</p>
          </article>
          <footer>
            <p>마무리 설명</p>
          </footer>
        </section>
        <section>
          <h2>두번째 본문</h2>
          <p>설명</p>
        </section>
        <section>
          <h2>세번째 본문</h2>
          <p>설명</p>
        </section>
        </section>
      </main>
<!--사이드부분-->
      <aside>
        <h2>광고/홍보, 퀵메뉴</h2>
        <p>광고,홍보등의 사이트와 무관한 내용이거나
          관련있더라도 없어도 무방한 내용</p>
      </aside>
<!--끝 부분-->
      <footer>
        <small>저작권 copyright &copy;</small>
      </footer>
  </body>

모든 태그들에는 heading태그로 묶어주는 제목이 필요하다.

왜냐하면 아웃라인을 잡을 때 기틀을 마련해야한다.

※main태그는 header의 하위태그가 아니기때문에 제목을 넣을 때 section을 한 번 입히고 heading태그(h1,h2...)로 제목을 넣어야한다.

아웃라인을 한눈에 검사할 수 있는 사이트는 https://gsnedders.html5.org/outliner/process.py이다.

위의 예시를 검사해보면 아래와 같은 구조가 나온다.

간과할 수 있는것이 구조화이지만 이렇게 구조화하는 것이 탄탄한 기반을 잡아주기 때문에 꼭 필요하다!!

공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요)

그럼~ 앙 제바

저작자표시 비영리 동일조건

'IT아카데미 > HTML' 카테고리의 다른 글

홈페이지 만들기 - HTML[5] (0)	2020.05.01
홈페이지 만들기 - HTML[4] (0)	2020.04.28
홈페이지 만들기 - HTML[3] (0)	2020.04.28
홈페이지 만들기 - HTML[2] (0)	2020.04.23
홈페이지 만들기 - HTML[1] (0)	2020.04.22

앞서 또한 앞으로 우리는 계속 태그를 공부하고 있는데 이것은 좋지 않은 공부법이다.

우리가 직접 실습을 통해서 필요한 태그들을 그때 그때 찾아가며 익히는 것이 훨씬 기억에도 남고 실무에도 도움이 될 것이다.

사이트를 하나 소개하자면 https://www.dbcut.com/bbs/index.php

디비컷 - 웹디자인 벤치마킹 및 우수 웹사이트 모음

디비컷은 신규 오픈한 국내외 웹사이트를 소개 평가하는 웹디자이너 커뮤니티입니다.

www.dbcut.com

이 사이트는 우수사이트를 랭크해놓은 사이트이다.

HTML에서 알아야 할 것들을 배우고 난 후에 우리는 이러한 사이트들의 구조를 파악하고 HTML 문서까지 직접 작성해보는 시간을 가질 것이다.

form태그

오늘의 태그는 바로 form태그

로그인을 하거나 회원가입을 하거나 물건을 사거나 글을 작성할 때!!

우리가 입력한 정보를 서버로 전송할 때 쓰이는 태그이다!

<form action="http://localhost.php/" method="post">
<input type="text" name="study"/>
</form>

이런 식으로 사용한다.

form태그의 속성

action은 보내는 장소(주소) <form action="http://localhost.php/">이런 식으로 정보를 보낼 주소를 적어준다.

method는 서버에 보내는 방식, 값으로는 "post"(암호화), "get"(공개)이 있다.

그 외 많은 속성이 있다. 문자 인코딩 방법(accept-charset), 다른 form과 식별하기 위한 속성(name), 등

form태그 속에 쓰이는 태그들

우리가 페이지 내에서 볼 수 있는 버튼이나 글자를 적을 수 있는 공간을 만들 수 있는 태그들이다.

button태그(input type button과 다름) (=기본적으로 input type submit와 동일하다. type설정을 하지 않은 경우)

textarea태그 넓은 텍스트 상자

select-option태그 선택 상자(하이퍼링크를 걸기 위해서는 자바스크립트가 필요하다. value값에 주소를 적고 select태그에 onchange = "if(this.value) window.open(this.value)"를 걸어주어야 한다.)

또 첫 번째 선택자가 아닌 선택자를 페이지가 뜨자마자 보여주고 싶다면 selected 속성을 이용하면 된다.

datalist 태그 select-option태그와 비슷하다. 하지만 선택뿐만 아니라 글상자로도 사용이 가능하다. 요새 나오는 자동완성 기능과 비슷하다.

fieldset태그 폼 태그의 그룹화를 위해 필요한 태그 사각형으로 안에 있는 태그들을 감싸준다.

legend태그 (레게노?) fieldset태그로 감 싼 곳의 이름을 적기 위해 필요한 태그

label태그 어떤 태그와 그것의 이름을 연결하기 위해 필요함(떨어져서 사용할 경우 id-for을 써준다. ex]input 태그에 id="email"을 적어주고 label 태그에 for = "email"을 적어준다.)

input태그

form 태그의 사용 방법 중 제일 많이 사용되는 태그는 input 태그이다.

input 태그는 단일 태그이며 속성에 거의 반드시 type이 들어간다.

<input type="타입명" 그외 속성들/>

input 태그의 type들

text 텍스트 상자

password 암호 상자

button 버튼

submit 제출 버튼

reset 초기화 버튼

image 이미지

checkbox 체크박스(중복 가능 = 같은 카테고리로 묶어주는 게 좋음)

radio 체크박스 (중복 불가 = name으로 묶어줘야 가능)

file 파일 선택 및 가져오기

color 색

time오전/오후 시 분

week 년 주

month년월

date 연월일

datetime(삭제된 속성)

datetime-local 현지 시각 년 월 일 오전/오후 시 분

{tel, number, range, search, email, url}이 태그들은 스마트폰이 발전해 갈 때 스마트폰 키보드를 조정해주기 위해 사용됨

이렇게나 많은 <input>의 type들이 있다.

이걸 다 외우는 것은 조금 비효율적이다.

페이지를 카피하면서 익히도록 하자

input 태그의 속성들

maxlength 최대 글자 수 설정

name 내용을 구분하기 위해 이름 적기 (id속성처럼 고유해야 한다.)

value 초깃값 설정하기와 버튼의 이름 변경하기, 서버에 제출할 데이터 정하기.

disabled 건드릴수조차 없게 해 놓는 상태(개발자들이 테스트할 때 사용)

readonly는 disabled과 다르게 수정은 못하지만 마우스로 클릭해서 파랗게 만들 수 있음

required form 데이터가 서버로 제출되기 전에 반드시 채워져야 하는 입력 필드를 명시(이 입력란에 입력하세요)

placeholder 전체를 지우고 하는 게 아닌 클릭 또는 키보드 입력하면 없어지는(ex 아이디 입력하세요를 클릭하면 글자가 사라짐)

step (type="number"에 주로 사용되는 속성) 구간을 나누고 싶을 때 구간의 크기를 정한다.

중구난방으로 적었지만 오늘은 정말 많은 태그와 속성에 대해서 알아보았다.

특히 form태그와 input 태그는 꼭 알아놓을 필요가 있다.

중요한 것은 이것을 사용해야 하는 것이다.

※속성 값이 하나인 경우 속성 값만 적어도 유효하다. ex) selected readonly 등등

서로 상충되는 태그는 같이 놓을 수 없다. ex) <a>와 <select>는 a는 링크를 걸고 싶어 하고 select는 선택지를 주고 싶어 한다.

※div와 span 태그 이 두 태그는 아무 의미 없이 쓸 수 있다는 공통점이 있다. 특히 무언갈 감싸주고 id속성을 주어야 할 때 필요하다. div는 블락 요소로 어떠한 태그던지 감쌀 수 있다. span태그는 인라인 요소로 인라인 요소만 감싸고 블락 요소는 감싸지 못한다. 잘 구분하도록 하자

※요롷게 생긴 특수문자나 띄어쓰기를 넣기 위해선 https://entitycode.com/이 페이지를 참고하는 것이 좋다.

여기서 찾고자 하는 특수문자의 코드를 찾을 수 있다.

공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요)

그럼~ 앙 제바

저작자표시

'IT아카데미 > HTML' 카테고리의 다른 글

홈페이지 만들기 - HTML[6] (0)	2020.05.02
홈페이지 만들기 - HTML[4] (0)	2020.04.28
홈페이지 만들기 - HTML[3] (0)	2020.04.28
홈페이지 만들기 - HTML[2] (0)	2020.04.23
홈페이지 만들기 - HTML[1] (0)	2020.04.22

바둑,오목,빙고,땅따먹기 등등

우리는 수없이 많은 네모사각 표들을 접해왔다.

표절, 뇌절 심지어 게시판도 표이다.

오늘은 HTML에서 사용하는 표 태그에 대해 배워보려고 한다.

표 태그

표 태그는 <table>로 쓰고 그 안에 <tr>,<td>,<th>등을 사용하여 형태를 나타낸다.

<thead>,<tbody>,<tfoot>의 구조안에 각각의 내용들을 넣어 줄 수 있다.

제목이	되는	행이다	.
이렇게	블로그	내에서	표를
만들	수	있다	.

html모드로 이를 확인해보면

<table>
<thead>
<tr>
<th>제목이</th>
<th>되는</th>
<th>행이다</th>
<th>.</th>
</tr>
</thead>
<tbody>
<tr>
<td>이렇게</td>
<td>블로그</td>
<td>내에서</td>
<td>표를</td>
</tr>
<tr>
<td>만들</td>
<td>수</td>
<td>있다</td>
<td>.</td>
</tr>
</tbody>
<tfoot>
<!-- 보통 합계나 비고 등으로 쓰인다 안쓸 수 있음-->  
</tfoot>
</table>

여기서 행과 열을 구분할 수 있다.

행은 <tr>을 쓰고 열은 <td>를 쓴다.

( 행이 가로,row 열이 세로,col )

위의 코드와 같이 <thead>에는<tr>안에 제목셀이되는 <th>를 쓰고 이는 굵은 글씨로 표시된다.

<th>는 scope라는 속성을 갖는데 방향을 표시할 때 쓰는 속성이다.

scope="row"이면 행쪽, scope="col"이면 열쪽이다.

<tbody>에는 <tr>안에 <td>를 쓰고 본문이 되는 내용을 써준다.

하늘색 줄은 아무의미 없다 그냥 한 것이다.

정리하면 <table>안에 <tr>로 행을 만들고 <th>로 제목을 만들고 <td>로 본문을 적어주면 된다.

그것의 구조는 <thead>에 <tr><th>, <tbody>에 <tr><td>이다.

※<table>바로 밑에 <caption>을 사용해 표에 캡션을 달 수 있다.

잠깐 말했던 행(row)과 열(col)을 통해 셀 병합을 할 수 있다.

셀병합

셀 병합은 셀을 합친다는 뜻이고 thead와 tfoot 구간에서는 사용할 수 없다.

제목이	되는	행이다	.
이렇게 블로그		내에서 있다	표를
만들	수	내에서 있다	.

위의 표를 이렇게 행쪽으로 합치는 법과 열쪽으로 합치는 법을 배워보겠다.

바로 <rowspan>과 <colspan>을 사용하는 것인데 각각 행확장, 열확장이라는 뜻을 가진다.

span은 확장이라는 뜻이 있는데 여기서 중요한 점은 방향으로 확장이라는 것이다.

rowspan을 쓰면 행을 확장한다 가로로 확장인줄 알겠지만 세로로 확장한다

어? 세로는 열인데? 하지만 행을 확장하는 것이기 때문에 가로가 확장되면 세로와 합쳐지는(이게 뭔소리..?)

여하튼 rowspan은 행 확장, colspan은 열 확장으로 각각 세로병합, 가로병합이다.(헷갈리지 않게 주의하자!)

<td style="width: 25%;" colspan="2">이렇게<br />블로그</td>
<td style="width: 25%;" rowspan="2">내에서<br />있다</td>

"이렇게" 와 "블로그"는 가로병합이므로 열 확장 => colspan

"내에서" 와 "있다"는 세로병합이므로 행 확장 => rowspan

이꼴(=)뒤에 숫자는 칸이나 줄의 수이다.

headers속성

저번 페이지에 말했던 접근성을 위해 필요한 속성이다.

시각장애우들은 소리로 표를 알기위해 어떤 행과 어떤 열에 있는 지를 알아야한다.

이것을 위해서 headers에는 id값을 받아 그것을 표시해 줄 수 있다.

제목이	되는	행이다	.
이렇게 블로그		내에서 있다	표를
만들	수	내에서 있다	.

"되는"에 id값 "doinun"을 주게 되고 "만들"에 id값 "mandle"을 준다면 "수"는 headers값으로 "doinun mandle"을 가지면 된다.

<td id = "doinun">되는</td>
<td id = "mandle">만들</td>
<td headers = "doinun mandle">수</td>

이렇게하면 시각장애우도 수가 어떤 행과 어떤 열의 칸인지 알 수 있을 것이다.

공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요)

그럼~ 앙 제바

저작자표시

'IT아카데미 > HTML' 카테고리의 다른 글

홈페이지 만들기 - HTML[6] (0)	2020.05.02
홈페이지 만들기 - HTML[5] (0)	2020.05.01
홈페이지 만들기 - HTML[3] (0)	2020.04.28
홈페이지 만들기 - HTML[2] (0)	2020.04.23
홈페이지 만들기 - HTML[1] (0)	2020.04.22

멀티미디어란 영상·음성·문자 등과 같은 다양한 정보 매체를 복합시킨 장치라고 한다.

대부분의 사람들이 멀티미디어를 행하고 있을 것이다.

스마트폰이나 데스크톱 등 다양한 매체에서 멀티미디어적 요소들을 많이 본다.

이렇게 다양한 매체에 꼭 있는 것이 바로 인터넷이다.

우리는 인터넷에서 멀티미디어 정보를 주고받는다.

요새는 웹이 아닌 어플을 통해 그러한 정보를 많이들 주고받는다.

하지만 모바일폰을 통해서도 웹사이트에 들어오기 때문에 우리는 멀티미디어적 요소를 다룰 수 있어야 한다.

멀티미디어 요소

멀티미디어 요소에는 이미지, 사운드, 미디어 이렇게 세 가지가 있다.

이미지(image)

이미지 태그는 <img>로 쓰고 단일 태그이다.

<img>에 꼭 넣어줘야 하는 속성 값 두 가지는 바로 src(source, 자료), alt(alternative, 대체)이다

src에는 경로와 파일명을 적어 주어야 한다.

<img src = "images/file.png" />

슬래시( / )로 폴더를 구분해주고 이렇게 확장자 명까지 넣어주면 페이지에 이미지가 나올 것이다.

또한 ../로 상위 폴더를 표시해주기도한다. ../../는 두 번 상위 폴더이다.

alt는 접근성을 위해서 필요한 요소이기도하고 이미지를 설명해주는 속성이다.

<img src = "images/file.png" alt = "파이리미지입니다." />

사운드(sound)

사운드 태그는 <audio>로 쓰고 종료가 있는 태그이다.

<audio>에 꼭 들어가야 하는 태그는 src태그이다.

로컬 환경에서는 그렇지 않지만 서버에서는 대소문자를 구분한다.

<audio src = "Sound.mp3">
</audio>

미디어(media)

미디어 태그는 <video>로 쓰고 종료가 있다.

<video>도 마찬가지로 src가 꼭 들어간다.

추가적인 속성으로 controls와 autoplay가 있다.

controls는 재생 일시정지와 같은 바를 영상 하단에 만들어준다.

autoplay는 자동재생을 해주는 속성이다.

<video src = "video.mp4" controls autoplay>
</video>

※<audio>와 <video>가 <img>처럼 단일 태그가 아닌 이유

원래 확장자가 여러 개로 나뉘어 있었다

그리고 그것들을 브라우저가 허용할 수 없었기 때문에

src속성을 여러 개 적어주어야 했다.

HTML5인 현재는 그렇지 않지만 종료가 있는 채로 쓴다.

figure태그, figcaption태그

figure태그는 <figure>로 쓰고 종료가 있는 태그이다.

위와 같은 요소들을 컨테이너처럼 담을 수 있는 태그이다.

figcaption태그는 <figcaption>로 쓰고 종료가 있는 태그이다.

요소에 설명을 넣는 태그로 <figure> 내에 한 번 쓸 수 있다.(안 쓸 수도 있다.)

<figure>와 <figcaption>을 활용해 이미지와 설명을 넣어보자

<figure>
  <img src="images/bird.jpg" alt="멋진 노을 구름 사이로 햇빛이 촤하고 들어오는 중간에 새가 훨훨 날아감">
  <img src="images/bird2.jpg" alt="노란 부리를 가진 새">
  <figcaption>멋진 노을 위를 나는 새와 그 새의 정체 </figcaption>
</figure>

이렇게 두 개의 이미지에 동시에 설명을 넣을 수 있다.

기본의 <img>와 다르게 들여 쓰기가 된 상태에서 이미지가 나타난다.

alt값과 <figcaption>이 갔다면 alt를 생략할 수 있다.

블락, 인라인 요소

이제까지 태그들은 두 가지 요소로 구분할 수 있다.

바로 블락,인라인 요소이다.

블락 요소는 <br/>(줄 바꿈 태그)를 쓰지 않아도 자동으로 줄 바꿈 되는 요소들을 말한다.

인라인 요소는 <br/>을 써야 하는 요소들을 말한다.

인라인 요소는 블락 요소보다 작다. 때문에 인라인 요소가 블락 요소를 감쌀 수 없다.

하지만 HTML5에서 <a>는 편의상 블락요소를 감쌀 수 있다.

이 두 요소는 나중에 CSS(StyleSheet)를 위해서 알 필요가 있다.

※접근성

페이지의 접근성은 인터넷 사용자라면 모두를 위한 것이다.

장애우들에게도 마찬가지이다.

아까 배웠던 alt속성은 시각장애우에게 필수적이다.(파일이 깨졌을 때 설명을 보기 위한 것도 포함)

alt속성은 이미지를 설명해 주는데 시각장애우들은 소리로만 그것을 볼 수 있다.

따라서 눈 감고 그 이미지를 느낄 수 있도록 상세한 설명을 적어주는 것이 필요하다.

공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요)

그럼~ 앙 제바

저작자표시

'IT아카데미 > HTML' 카테고리의 다른 글

홈페이지 만들기 - HTML[5] (0)	2020.05.01
홈페이지 만들기 - HTML[4] (0)	2020.04.28
홈페이지 만들기 - HTML[2] (0)	2020.04.23
홈페이지 만들기 - HTML[1] (0)	2020.04.22
홈페이지 만들기 - HTML[0] (0)	2020.04.21

이전에 배운 h1-h6태그에서 아웃라인을 잘 정해줘야 한다고 했었다.

그 이유는 바로 네비게이션 바에 있다.

내비게이션은 지도에서 출발지부터 목적지까지의 경로를 잘 안내해준다.

이처럼 사이트를 지도라고 생각한다면 사이트 내에서 내비게이션 바는 관련된 모든 사이트를 갈 수 있는 메뉴이다.

리스트 태그(list tag)

리스트란?

다수의 품명(品名)이나 인명(人名) 등을 기억하거나 점검하기 쉽도록 특별한 순서로 적어 놓은 것. 목록이나 명단으로 불릴 수 있다.

순서가 있거나 어떤 내용을 나란히 나열해야 할 경우 이 태그를 사용하면 좋다!

리스트 태그는 <li>,<ol>,<ul>,<dl>가 있다.

<li>는 'list item'의 약자로 목록에 나열될 내용들을 의미한다.

<li>를 사용하기위해서는 내용을 구분할 숫자 또는 기호를 표시해주는 태그가 필요하다.

나열하기 위해 숫자로 표시하느냐 기호로 표시하느냐에 따라 <ol>, <ul>으로 나뉜다.

<ol>은 'ordered list'의 약자이고 숫자로 내용을 나열한다.

<ul>은 'unordered list'의 약자이고 숫자가 아닌 기호로 나열한다.

<ol>
  <li>주제</li>
  <li>부주제</li>
  <li>본문</li>
</ol>

<ol>로 감싼 <li>는 내용 앞에 숫자를 넣지 않아도 자동으로 숫자가 매겨져 있다.

결과

주제
부주제
본문

<ul>
  <li>주제</li>
  <li>부주제</li>
  <li>본문</li>
</ul>

마찬가지로 <li>를 감싼다. 하지만 <ul>이기때문에 숫자 대신 검정 동그라미가 표시된다.

결과

주제
부주제
본문

마지막으로 <dl>는 'definition list'의 약자이고 사전처럼 용어를 설명하는 목록을 만든다.

<dl>는 다른 리스트 태그와 다르게 두 가지 태그들이 필요하다.

바로 <dt>,<dd>이다.

<dt>는 'definition term'의 약자이며 용어를 적을 때 사용된다.

<dd>는 'definition description'의 약자이며 설명하는 내용에 사용된다.

<dl>
  <dt>용어</dt>
  <dd>설명</dd>
</dl>

결과

용어

설명

앵커 태그(anchor 태그)

뉴스에 나오는 사람만 앵커가 아니라 닻이라는 뜻도 있다.

사이트 내에서는 북마크(책갈피)로 생각하면 더 쉬울 것 같다.

줄여서 <a>로 쓰는데 이 태그는 중요한 속성이 있다.

바로 우리가 자주 쓰는 링크 속성을 이 태그를 통해 사용할 수 있다.

~~(처음 링크 속성을 사용했을 때 정말 가슴이 웅장해졌다.)~~

<a> 안에 href라는 속성을 더해주면 링크 완성!

herf는 'hypertext reference'의 약자로 하이퍼텍스트 참조라는 뜻을 가지는데 링크를 걸어주는 핵심 속성이라 볼 수 있다.

바로 예시를 보여드립니다!

<a href = "https://www.naver.com">네이버로 가는 길</a>

결과

네이버로 가는 길

또한 href를 이용해서 페이지 맨 위로 갈 수 있다. 바로 #을 이용하는 것이다.

<a href = "#">TOP</a>

결과

TOP

한 편 <a>는 원래 좁은 영역이지만 편의를 위해 HTML5에서는 큰 영역들의 태그들을 감쌀 수 있다.

id 속성

HTML 문서에서 어떤 태그를 찾거나 내용을 찾고자 할 때 꼭 필요한 속성이 바로 id속성이다.

우리가 사이트에 회원가입을 하거나 주민등록번호와 같이 어떤 특정 인물을 나타내 주는 값이 바로 id이다.

그래서 보통 id는 중복이 불가능하다.

마찬가지로 id속성도 중복이 불가능하고 고유한 문자나 숫자를 사용해야 한다.

<a>의 href="#"과 id속성을 사용해서 할 수 있는 것이 바로 페이지 내에 어느 특정 부분으로의 이동이다.

예시로 리스트, 앵커 태그와 id속성으로 바로 갈 수 있는 단어들을 만들어 보았다.

이동할 부분의 href속성에 같은 이름의 id 값을 넣어주어 만들 수 있다!!

리스트 태그

앵커 태그

id 속성

※카더라 통신

며칠 전 아르바이트를 구하기 위해 공고를 보니 재택근무이면서 홈페이지 관리를 통해 월급을 받을 수 있는 고수익 알바가 있었다. 프로그램마다 다르지만 그 가게는 고도몰을 이용하는 것 같았다. 우리가 배우는 HTML을 통해 고도몰의 세부적인 기능까지 다룰 줄 알게 된다면 먹고사는데 크게 지장은 없을 것 같다ㅎ

이상으로 리스트 태그, 앵커 태그, id속성에 대해 알아보았다.

내일은 멀티미디어 요소 태그들을 살펴볼 예정이다.

공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요)

그럼~ 앙 제바

저작자표시

'IT아카데미 > HTML' 카테고리의 다른 글

홈페이지 만들기 - HTML[5] (0)	2020.05.01
홈페이지 만들기 - HTML[4] (0)	2020.04.28
홈페이지 만들기 - HTML[3] (0)	2020.04.28
홈페이지 만들기 - HTML[1] (0)	2020.04.22
홈페이지 만들기 - HTML[0] (0)	2020.04.21

나는 어릴 적 철권 태그 게임을 했었다.

레슬링에서 터치를 하면 선수를 바꿀 수 있는 것처럼 철권 태그도 그랬다.

HTML에도 무수히 많은 태그들이 있다.(억지..)

우리는 HTML에서의 태그들에 대해 배워보도록 할 것이다.

HTML의 기본 구성

HTML이란?

"Hyper Text Markup Language"의 약자로 하이퍼 기능을 하는 언어이다.

웹 문서나 사이트를 이루는 가장 기본적인 언어라고 볼 수 있다.

하이퍼기능은 링크라고도 하는데 거미줄처럼 연결되어 텍스트가 텍스트 사이의 이동을 하는 것이다.

마크업은 문서를 편집 또는 구성하기위해 특정 표시를 하는 것을 말한다.

태그란?

HTML에서 태그는 HTML문서를 구성하는 명령어이다.

<> 이렇게 꺽쇠 안에 명령어를 넣는다.

보통은 <a></a>이런식으로 시작과 종료를 슬래쉬로 알린다.

하지만 단일 태그는 <br/>이렇게 하나의 태그로 종료하며 슬래쉬가 뒤에 있다.

자 그럼 HTML의 기본 구성을 살펴 볼까?

<!doctype html>
<html lang = "ko">
 <head>
  <meta charset = "utf-8">
  <title>HTML의 기본구조</title>
 </head>
 <body>
asdasd
 </body>
</html>

먼저 doctype은 문서 형태를 말하고 우리는 html이라 html을 써준다.

다음, html태그와 한국어로 구성되어있음을 뜻하는 속성 lang이다.

크게 헤드와 바디로 구성되어있다.

헤드에는 인코딩 유형을 정하는 meta태그의 charset속성을 적는다.

또 창을 띄울 때 맨 위에 나타나는 제목 태그인 title태그.

바디에는 드디어 내용이 들어간다.

이때까지 말한 내용 중 알 수 있는 정보가 있다!!!

그것은 바로!!! 태그에는 명령어와 속성을 집어넣을 수 있다는 것이다.

명령어가 본체라면 속성은 그것이 할 수 있는 기능(?)이라고 생각하면 쉽다.

속성을 통해 할 수 있는 것이 많으니 잊지 말자!

제목 태그

위의 제목 태그라는 글자에도 제목 태그가 붙여졌다.

tistory에는 블로그를 html 소스로 작성할 수 있는 기능이 있는데 확인해 보면 아래와 같다.

찾으셨나요?

바로 h3이다.

제목 태그는 h1부터 h6까지 있다.

제목입니다.(h1)

제목입니다.(h2)

제목입니다.(h3)

제목입니다.(h4)

제목입니다.(h5)

제목입니다.(h6)

우리가 어떤 것을 만들던지 제목을 넣기 위함이라면 h1-h6의 태그를 넣어줌이 좋다.

제목 태그가 곧 웹 사이트의 아우트라인이 되기 때문이다.

뭔 말이냐면 사용자가 검색을 하거나 그 사이트를 찾아올 때의 검색어가 될 수 있다.

또한 사이트 내에서 찾아들어갈 때 제목을 보고 찾아들어간다.

그래서~~ 제목이 너무 많으면 찾아가기 복잡하고 골치 아프다.

잘 만든 사이트는 직관적이어야 한다.(꼭 필요한 아웃라인만을 사용하는 것이 좋다.)

※카더라통신

지금까지 한 내용은 메모장으로도 충분히 할 수 있다.(이건 진짜)

메모장을 말 한 이유 : 어떤 회사에서는 면접이나 테스트를 할 때 에디터 툴을 사용하지 않고

메모장만으로 보는 경우도 있다고 한다. 여러분도 기본구조 정도는 에디터 없이 적을 수 있다면

혹시나 에디터도 없고 인터넷도 잘 안 터져서 다운받지도 못하는 상황에서 HTML 문서를 작성할 수 있지 않을까?

내일은 리스트 태그와 앵커 태그 속성인 id를 알아볼 것이다.

공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요)

그럼~ 앙 제바

저작자표시

'IT아카데미 > HTML' 카테고리의 다른 글

홈페이지 만들기 - HTML[5] (0)	2020.05.01
홈페이지 만들기 - HTML[4] (0)	2020.04.28
홈페이지 만들기 - HTML[3] (0)	2020.04.28
홈페이지 만들기 - HTML[2] (0)	2020.04.23
홈페이지 만들기 - HTML[0] (0)	2020.04.21

요새는 코로나가 슬슬 완화되고 있는지도 모르겠다.

밖에 사람들이 하나두 명 슬슬 보이기 시작한다.

그래도 긴장을 늦추기보단 손 소독을 하고 마스크를 꼭 끼자.

여하튼 올해 코로나가 기승을 부리며 온라인 재택 근무자들이 많아졌다.

사람들이 홈페이지에도 관심을 조금씩 보이는 것 같다.

그래서 준비했다!!! 홈페이지 만들기!

홈페이지 만들기

홈페이지를 만들기 위해서는 메모장이면 충분하다.

먼저 새 메모장 파일을 만들어준다.

메모장 == 텍스트 문서

그리고 이름을 아무거나 뒤에. html을 붙여주면 끝!!

Vㅏ우~ 이렇게 크롬 모양(크롬이 없다면 익스플로러 또는 어떤 브라우저)의 파일이 나타나게 된다.

그럼 빈 html문서를 작성한 것이다ㅎ

아무것도 없어서 실망 했을 수 있다!

하지만 우리는 큰 한걸음을 실행시켰다.

아무것도 모르던 때에서 html문서를 만들 수 있는 사람으로 레게노ㅎ

홈페이지의 구성

홈페이지(=웹페이지), 즉 우리가 컴퓨터를 켜고 크롬이나 익스플로러 같은 웹브라우저를 눌러 나오는 사이트.

이걸 우리가 만들려고 한다. 어떻게 생겨먹은지 알아보자

먼저 우리가 보는 사이트 하나하나는 인터넷 시스템을 통해 나타난다.

인터넷 시스템은 클라이언트와 서버로 구성되어있다.

쉽게 말하면 클라이언트는 우리들이 사용하는 휴대폰 컴퓨터 등등.

서버는 정보들을 우리에게 보내주는 프로그램이나 컴퓨터를 의미한다.

그럼 우리가 클라이언트에서 웹브라우져를 통해 보는 홈페이지는?

위와 마찬가지로 홈페이지는 클라이언트에 남아있는 페이지와 서버, 데이터 베이스가 필요하다.

페이지에는 보이는 정보 html, css, javascript 등이 있다.

일단 html은 문서(내용, 핵심),

css(약간 움직임)와 javascript(강한 움직임)는 꾸며주는 느낌이다.

서버에는 정보를 제공하기 위한 프로그램이나 저장해야 하는 정보들이 있다.

서버(Apache, Tomcat), App(php, jsp, asp), 데이터베이스(Mysql, MongoDB)가 있다.

우리는 먼저 HTML로 흥미를 가져볼 생각입니다

※카더라 통신

취준생이어서 들린 이야기

요새는 프론트(페이지와 클라이언트 쪽)와 백엔드(서버 쪽)의 경계가 모호해졌다고 한다.

왜냐면 Javascript를 통해 서버도 조금씩 만지고 있기 때문이라고 한다.

그래서 채용공고에 풀 스택(양 쪽 모두 가능한) 개발자를 구한다고 한다.

하지만 그만큼의 몸값은 받지 못하는 게 현실이라고 한다.

나는 개인적으로 많이 배우고 익숙해지면 어디든 쓰일 것이라 생각한다.

공감 또는 훈수 부탁드립니다.(내가 그걸모를꺼 같니?? 라던가 응 아니야~이거야~ 해주세요)

저작자표시

'IT아카데미 > HTML' 카테고리의 다른 글

홈페이지 만들기 - HTML[5] (0)	2020.05.01
홈페이지 만들기 - HTML[4] (0)	2020.04.28
홈페이지 만들기 - HTML[3] (0)	2020.04.28
홈페이지 만들기 - HTML[2] (0)	2020.04.23
홈페이지 만들기 - HTML[1] (0)	2020.04.22