본문을 꾸미는데 사용되는 다양한 태그들

<!DOCTYPE html>
<html lang="kr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Hello, My Page </title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <div> div : 구역 나누기 </div>
    <p> p : 문단 나누기 </p>
    <ul>
        <li> ul&li : 점으로 구분하기 1 </li>
        <li> ul&li : 점으로 구분하기 2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h4> hr : 줄 그어주는 태그입니다. </h4>
    <hr>
    span 태그 : 특정 영역 <span style="color:red">글자</span> 꾸미기
    <hr>
    a 태그 : <a href="http://naver.com/"> 네이버 </a>로 하이퍼 링크
    <hr>
    img 태그 : <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그 : <input type="text" />
    <hr>
    button 태그 : <button> 버튼 </button>
    <hr>
    textarea 태그 : <textarea> 입력 창 </textarea>
</body>

</html>

 이것들 말고도 다양한 태그들이 존재한다. 나머지는 차후에 사용할 일이 생기면 코멘트 형식으로 정리하겠다

'HTML,CSS,JavaScript' 카테고리의 다른 글

05. CSS, 사용하기  (0) 2022.11.03
04. CSS, 기초  (0) 2022.11.03
02. HTML, 제목  (0) 2022.11.03
01. HTML, 시작  (0) 2022.11.03
00. HTML, CSS, 그리고 JavaScript  (0) 2022.11.03

앞선 시간에서는 HTML의 기본적인 토대만 마련한 웹 페이지를 만들었다. 이제는 본격적으로 내용을 추가 할 시간이다.

 

HTML에서 지원하는 다양한 속성의 태그가 있는데, 하나씩 써보면서 구조를 알아 볼 것이다.

 

<!DOCTYPE html>

<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title> Hello, My Page!! </title>
</head>

<body>
	<h1> Hello, My Page!! </h1>
</body>
</html>

 앞선 시간에 설명하지 않은 태그가 있는데, 바로 <h1></h1> 태그이다. 이 태그는 본문에 삽입할 내용의 제목을 나타내는 태그인데, 이번 시간에 묶어서 알아보기위해 지난 시간에 설명을 하지 않았다.

 

 <h></h> 태그는 뒤에 숫자를 넣을때 마다 글자의 크기가 달라지는데 크기는 다음과 같다.

숫자가 커질수록 글자는 점점작아진다

<h1>~<h6> 태그는 줄바꿈을 삽입하지 않았는데 자동으로 줄바꿈이 된다는걸 기억하자.

 

 

'HTML,CSS,JavaScript' 카테고리의 다른 글

05. CSS, 사용하기  (0) 2022.11.03
04. CSS, 기초  (0) 2022.11.03
03. HTML, 본문  (0) 2022.11.03
01. HTML, 시작  (0) 2022.11.03
00. HTML, CSS, 그리고 JavaScript  (0) 2022.11.03

 웹 개발을 하기 위해서 가장먼저 다루어야 할 언어인 HTML은 다양한 태그들이 존재한다. 이 태그들을 활용해서 웹 페이지의 구조를 작성할 수 있다.

<!DOCTYPE html>

<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title> Hello, My Page!! </title>
</head>

<body>
	<h1> Hello, My Page!! </h1>
</body>
</html>

 이 것은 간단한 웹페이지를 작성한 HTML 코드이다. 이 코드의 결과물은 다음과 같다. 

나의 첫 웹페이지. Hello, My Page!

  이 페이지에서 사용한 다양한 태그들이 있는데, 이 것들을 하나씩 알아볼 것이다.

 

 가장먼저 설명할 것은 HTML의 기본 속성들이다. 

- <!DOCTYPE html> : 마크업 언어용 DTD(Document Type Definition)태그이며, HTML5의 경우 맨 위에 존재하는 태그이다. 쉽게말해서, 이 문서는 html로 지정한다 라는 의미의 태그이다.

- <html> ~ </html> : 페이지의 전체를 담아주는 최상단의 태그이다. 모든 웹페이지는 html 태그를 가지고있다.

- <lang = "ko"> : 언어를 설정하는 태그이다. 현재 문서에서는 한국어로 설정되어 있다.

- <head> ~ </head> : 주로 페이지의 정보를 입력하는 공간이다. 

- <meta> : 메타 데이터를 입력하는 태그이다. 이 코드에서는 charset 속성이 사용 되었는데 HTML문자의 인코딩 방식을 UTF-8의 방식으로 사용하겠다는 의미이다.

- <title> ~ </title> : 해당 타이틀의 제목을 입력하는 태그이다.

- <body> ~ </body> : 페이지의 본문을 입력하는 공간이다. 이 곳에서 페이지의 구조, 즉 뼈대를 만든다.

'HTML,CSS,JavaScript' 카테고리의 다른 글

05. CSS, 사용하기  (0) 2022.11.03
04. CSS, 기초  (0) 2022.11.03
03. HTML, 본문  (0) 2022.11.03
02. HTML, 제목  (0) 2022.11.03
00. HTML, CSS, 그리고 JavaScript  (0) 2022.11.03

HTML 5

- HTML (Hyper Text Markup Language)

 HTML은 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어. 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것 뿐만 아니라 링크, 인용과 그밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다.

 특징으로는, 배우기 쉬운 언어이며, "<>" 속의 "태그"로 정의 되어있는 HTML 요소 형태로 작성한다. JavaScript, CSS를 포함하거나 불러올 수 있다.

CSS 3

- CSS (Cascading Stylesheets)

 HTML을 익힌 후 가장 먼저 배워야할 웹 기술. HTML이 컨텐츠의 구조와 의미를 정의한다고 하면, CSS는 페이지의 스타일과 레이아웃을 지정한다. 

JavaScript

 - JavaScript

 JavaScript는 웹 페이지의 복잡한 것들을 구현할 수 있는 프로그래밍 언어. 웹페이지는 단순히 변하지 않고 정적인 정보들만 보여주는 것 이상의 일을 한다. 시간의 흐름에 따라 업데이트 되는 컨텐츠, 동적인 지도와 움직이는 2D/3D 그래픽등 다양한 컨텐츠를 보여준다.

'HTML,CSS,JavaScript' 카테고리의 다른 글

05. CSS, 사용하기  (0) 2022.11.03
04. CSS, 기초  (0) 2022.11.03
03. HTML, 본문  (0) 2022.11.03
02. HTML, 제목  (0) 2022.11.03
01. HTML, 시작  (0) 2022.11.03

 오늘은 오전시간과 오후시간동안 이번주에 시작한 팀 프로젝트를 했다. 어제까지는 강의를 수강하랴 팀 작업 따라가랴 정신이 없었지만 오늘 하루는 온전히 팀 프로젝트에 집중할 수 있는 시간이었다.

 개인 페이지를 먼저 작업하게 되었는데, 웹 개발 종합반에서 수강했었던 것을 활용해서 페이지를 만들었다.

 아래는 오전시간동안 만들었던 결과물이다.

뭔가 동적인 느낌이 없어서 아쉬운 듯한 소개페이지

 페이지 베이스는 숙제로 했었던 팬명록을 활용해 만들었는데, 만든 결과물이 심히 마음에 안드는 느낌이였다. 그래서 오후시간동안 필수 구현 기능을 제외하고, 디자인부터 전부 새로 만들기로 했다.

 일단 페이지를 어떻게 구상할까 생각을 했을 때, 요즘 전자 제품들 페이지 광고가 딱 떠올랐다. 영감을 얻은 페이지는 삼성 Z플립 페이지인데 나도 내 소개 페이지를 스크롤 애니메이션을 활용해서 해야겠다 라는 생각이 들었다. 일단, 구현에 앞서서 역시 뭐든 정보를 찾을려면 구글링이 최고긴 한거같다. 내가 모르는것들은 다 적혀있다. 진짜로

 스크롤 애니메이션을 구현하기 위해서는 일단 가장 중요한것이 html의 구조를 이해하는 것이다. 웹 개발을 시작하면서 크게 생각하지 않았던 부분이였는데 처음부터 어렵게 느껴지더라. 

 대부분의 html 태그들은 기본적으로 static 속성을 가진다. 즉, 사용자가 어떻게 조작하더라도 페이지 내의 컨텐츠들은 다 정적인 이미지가 된다. 내가 오늘 처음 만든 소개 페이지가 바로 그렇다.  그리고, 다음 속성으로 fixed 속성인데, 이 속성은 뷰포트 즉, 화면공간의 좌표에 고정시킬수 있는 속성이다. 그러나, 내가 구현하고싶은거는 내가 스크롤링 함에 따라서, 무언가 움직였으면 하는데, 뷰포트 내에서 고정시킨 상태로 된다는 것은 내가 원하는 것이 아니다. 그래서 알아본 것이 바로 sticky 속성이다. sticky는 기본적으로 static과 fixed의 두가지 속성을 가지고있다. 내가 설정한 x와 y의 위치값에 도달하기 전에는 static 속성을, 각 위치값에 도달 이후에는 fixed처럼 동작하게되는 속성이다. 즉, 내가 구현하고 싶은 방식이다. 

 찾아보니 예제는 많았는데, 따라하기가 힘들었다.

예제를 보고 따라만든 연습페이지

 누가 만들었는지 모르겠지만 정말 잘만든 듯?하다

 예제를 따라 만들면서 태그간 속성, class의 이름이 어떻게 연결되는지도 배울 수 있었다. 특히 JS에서 C#에서도 활용했던 여러가지 코드의 생김새가 눈에 들어왔다. 역시 찾아보니깐 비슷한 내용이더라.

연습했던 예제를 활용해서 이제 내 소개페이지를 작성했다. 

예제를 적용한 나의 소개 페이지

 이제야 뭔가 있어보이는 소개페이지가 된거같다. 미니 프로젝트를 진행하면서 많은것을 배우는 것같다. 이번주 처음 웹 개발을 시작했는데 많은 코드를 따라서라도 쳐보니 뭔가 나오는것 같다. 첫 날에 느꼈던 감정들이 꽤나 많이 해소된 하루였다. 

 이제 내일은 팀 작업을 마무리하고 정리할 예정이다. 오늘 만든 개인 소개 페이지를 조금 더 손봐야겠다. 아직도 여러가지로 부족한게 느껴지긴한다.

 오늘은 어제에 이어서 오전과 오후시간에는 웹 개발 종합반을 수강 했고, 저녁 시간 이후에 팀원들과 모여 어제 못다한 미니 팀 프로젝트에 대한 회의를 하였다.

 

 오전 시간동안 웹 개발 종합반을 이어서 수강하였다. 결론적으로, 오늘은 완강하지 못한게 마음에 걸린다. 당장 미니 프로젝트를 진행해야하는데 아직도 나는 강의를 수강하고 있는 중이니 조급함만 느껴지는것 같다. 

 웹 개발 종합반에서 예전부터 관심있던 분야였던 웹크롤링, DB서버 관리 및 활용을 본격적으로 배워서 내심 좋았다. 특히 DB 관련해서 생각난 것이 있는데, 대학교때 한창 네트워크 강의를 들을 때, MySql을 활용할 기회가 있었고, 이 강의에서는 MongoDB를 활용했는데, 두 가지의 DB를 활용해 본 경험으로는 꽤나 MongoDB의 DB설계가 꽤나 흥미롭다고 생각되었다.  이러한 방식으로도 데이터를 활용할 수 있구나 하는 생각이 들었다. 미니 프로젝트가 끝나고, 둘의 차이에 대해 공부할 기회가 있었으면 좋겠다.

 그리고 4주차 강의에서 Flask 서버를 활용할 수 있는데, 아직 local 서버만 활용하여 무언가를 만들어서 외부에서 접속할 수 있는 서버를 구축하고 싶다는 생각이 들었다. 

 

 그리고 오늘 있었던 팀 회의가 있었고, 여러가지 의견을 나눴다. 특히나 느꼈던거지만, 나는 아직 팀 작업을 하기에 준비가 안되있는것 같다는 느낌이 강했다. 팀원들이 나누는 이야기에 적극적으로 참여할 수 없었고, 교류하기 어려웠다고 느꼈던것 같다. 같은팀 팀원분들은 벌써 개인 페이지를 다 작업하고, 메인 페이지를 만들려고 하니, 진도의 차이가 느껴진다라고 할까? 아직 내가 많이 부족하다는걸 느꼈다. 오늘 시간을 더 써서라도 개인페이지를 제작해야겠다는 생각이 들었다.

 

오늘 팀회의동안 만든 팀 메인 페이지 SA

 회의는 여러가지 이야기가 나왔던거 같다. 일단 제일중요한 웹페이지의 디자인 이야기를 하였고, 팀원들의 아이디어가 생각보다 좋았다는 느낌이였다. 왠지 이사람들과 함께가면 아이디어가 많이 생겨나지 않을까 싶었다. 특히 팀원분 중 한분이 우리팀 프로젝트에서 우리가 배운걸 활용한뒤 딱 한걸음만 더 움직일 수 있는 멋진 아이디어가 나와서 좋았던것 같다. 

 그렇게 회의는 좋은느낌으로 종료되었고, 여러가지 안건이 있었고 그걸 활용할 방법을 내일 아침 시간에 이어서 진행하기로 하였다.

 

오늘의 TIL은 뭔가 주절주절 이야기 하는것 같은 느낌이다. 일단 내게 무엇보다도 급한 것은 지급 받은 강의를 빠른 시간안에 완강을 하는 것에 목표를 둬서 크게 이야기를 쓸만한 것이 없었던거 같다. 지금 당장 겉햝기로 공부한 것은 꼭! 복습을 해야겠다.

 

TIL에 들어가기에 앞서서 나는 C#과 Unity Engine을 다루던 개발 지망생이였다. 이에 대해서 설명할 일이 생긴다면 자세하게 설명하겠지만, 지금은 설명하기 애매한 상황인것 같다.

 

오늘 첫 강의 OT와 미니 팀 프로젝트를 수행하게 되었는데, 내가 처한 상황에서는 어처구니가 없다라고 생각이 들었다.

이유는 HTML이나 CSS, JS에 대해서 하나도 모르는 상태에서 팀 프로젝트에 들어가게 되었는데, 내심 불안해 했기 때문에 그런 생각이 들었던 것 같다.

뭐 여튼 중요한 것은 내가 웹 개발을 시작했다는게 중요한 것이 아닐까?

 

대략적인 오늘의 일정은 다음과 같다.

시간 내용
오전 9:00 ~ 오후 12:55   개강 OT 및 미니 팀 프로젝트 팀원과 개발 프로젝트 계획 구상
오후 2:00 ~ 오후 3:40  Git 과 Github, Git bash
오후 4:00 ~ 오후 6:00  미니 팀 프로젝트 AS
오후 7:00 ~ 오후 9:00  개별 공부(웹 개발 종합반 수강)

1. OT 및 미니 팀 프로젝트 소개

 오늘 내가 느꼈던 최고의 멘붕이 이 시기였던거 같다. OT야 뭐, 대학교에서 커리큘럼 설명하는 것과 같은거라고 생각했던 만큼 무난하게 넘어갔지만, 미니 팀 프로젝트 소개때 나에게 문제가 생겼다. 나는 분명 웹 개발 종합반 수강을 하지 않았던 것 같은데 어째서인지 팀 프로젝트에 참가하게 되었더라 분명 발제 시간때는 강의를 수강하지 않은 사람들은 따로 조편성을 한뒤 강의를 집중적으로 수강한다고 했었고, 나도 그렇게 될거라고 생각했었는데, 그런게 아니였으니 말이다.

 이부분때문에, 팀 미팅에서 계속 어리둥절 + 멘탈 붕괴 상황에 처해있어서 팀 미팅도 제대로 못한 것은 이 자리를 빌어서 팀원들에게 사과하고 싶다. 내가 계속 멘탈붕괴 상황에 처해 있었는데, 나를 데리고서 미팅을 제대로 끝냈기 때문에 감사한 마음도 생겼다. "강의를 빠른 시기에 완독하고 프로젝트에 따라가도록 노력하여야 할 것" 이라 생각이 들었다.

 

2. Git과 Github

 이 부분에서는 꽤나 나는 꽤나 자신있는 영역이였다고 생각이 들었다. 왜냐면 대학생활 내내 깃허브를 끼고 살았고, 어느정도 자신있는 영역이기 때문이다. 그래서 어느정도 복습하는 느낌으로 강의를 들었던 것 같다. Git도 Git이지만, 오랜만에 (약소하지만) Linux 환경을 다룰수 있어서 꽤나 반가운 느낌도 들었다. 

 내 나름대로 블로그 포스팅을 할만한 주제가 생겼다고 생각이 든 시간이다.

 

3. 미니 팀 프로젝트 AS

 이 시간에 멘탈 붕괴된 상황에서 약간 회복된 상황이였던거 같았다. 그래도 팀원들이 하는 이야기에 끼어들 수 있는 상황은 아니였던거 같았다. 무엇보다도 내가 들어야할 강의 내용이 나왔는데, 아무것도 모르고 이야기하는걸 듣다보니 이부분은 따라가기 힘들더라. 빨리 강의를 완독해야지 라는 생각밖에 안들었다.

 

4. 개별 공부

 오후 6시이후 저녁시간부터 계속해서 웹 개발 종합반 1주차를 들었다. 본격적으로 웹 개발 강의를 듣기 시작한 시간이다. 일단은 지금시간에는 1주차는 다했고, 숙제까지 끝마친 상황이다. 항상 코딩 공부를 할때마다 느끼는거지만, 강의 실습시간 + 강의 듣는시간보다 개발환경 구성하는게 더 시간이 많이 걸리는거 같다. 

 1주차 강의는 HTML, CSS, JavaScript에 대해 맛보기로 배우면서, 실습하는 과정이 많았는데, HTML은 예전에 살짝 다뤄본적이 있어서 강의 내용자체는 다 이해가 되는거 같았다. 강의 보면서 좀 아쉬웠던 것은 JavaScript부분인데, 워낙 짧은 시간에 문법 강의를 하다보니 설명이 부족한것 같았다. 이 부분은 따로 찾아봐야할것 같다고 생각이 들었다.

 

1주차 강의를 끝내고 만든 결과물

 

 끝으로 오늘의 TIL, TMI를 마치며, 빨리 강의를 완독하고, 미니 프로젝트를 참여해야겠다는 목표가 생겼다.

- 렌더링 파이프라인이란?

렌더링 파이프라인

 기하학적으로 3D 장면을 구성하고 가상의 카메라를 설정한 뒤에 모니터에 2D 표현을 만들어내는 과정을 수행해야하는데, 이와 같은 과정을 렌더링 파이프라인 이라고 한다. 파이프라인 내에서 몇 가지 단계에 의해 하나의 좌표 시스템에서 다른 시스템으로 변화하는 과정이 이용되는데, 이 변환에는 행렬이 이용되며, Direct3D의 책임 하에 이루어진다.

 

1. 로컬 스페이스

 모델링 스페이스라고도 불리는 로컬 스페이스(Local Space)는 우리가 물체의 삼각형 리스트를 정의하는 데 이용하는 좌표 시스템이다. 로컬 스페이스는 모델링 과정을 쉽고 단순하게 만들어주며, 모델 자체의 로컬 좌표 시스템을 이용하는 것이 월드에서 직접 모델을 구성하는 것보다 쉽다.

 

2. 월드 스페이스

 로컬 스페이스로 구성한 다수의 모델들은 월드 좌표 시스템으로 옮겨 하나의 장면을 구성해야 한다. 로컬 스페이스의 물체들은 이동, 회전, 크기 변환 등을 포함하는 월드 변환이라는 작업을 거쳐 월드 스페이스로 옮겨진다. 월드 변환은 하나의 행렬로 표현되며, 변환 타입에 D3DTS_WORLD를 지정하고 IDirect3DDevice9::SetTransform 메서드를 호출하여 수행할 수 있다.

 

3. 뷰 스페이스

 월드 스페이스 내에서 기하물체와 카메라는 월드 좌표 시스템과 연계되어 정의한다. 그러나 카메라가 월드 내 임의의 위치나 방위를 가진다면 투영이나 그 밖의 작업이 어렵거나 비효율적이되는데, 이를 해결하기 위해 카메라를 월드 시스템의 원점으로 변환하고, 카메라가 양의 z축을 내려다 보도록 회전시키는 작업을 한다. 이러한 변환을 뷰 스페이스 변환이라 하며, 이 변환을 거친 뒤의 기하물체는 뷰 스페이스 내에 위치한다고 말한다.

 

4. 후면 추려 내기(backface culling)

 폴리곤은 두 개의 면을 가지고 있으며 하나의 면을 전면, 다른 면을 후면이라 부른다. 화면에 보이는 일반적인 물체는 전면을 보여주며, 후면의 폴리곤은 보이지 않아야한다. 즉, 후면의 폴리곤을 처리에서 제거하는 작업을 후면 추려 내기라한다. 이 과정 중 Direct3D의 입장에서 어떤 폴리곤이 전면 폴리곤이고 후면 폴리곤인지 확인 할 수 있어야 하는데, 이러한 작업을 두르기 순서라고 한다.

 

5. 조명

 광원은 월드 스페이스 내에 정의되지만, 뷰 스페이스 변환에 의해 뷰 스페이스로 변환 된다. 광원은 물체의 명암을 추가하여 장면의 사실감을 더해준다.

 

6. 클리핑(Clipping)

 시야 볼륨 외부의 기하물체를 추려내는 과정을 클리핑(Clipping) 이라한다. 시야 절두체에서의 삼각형 위치는 다음과 같이 구분할 수 있다.

  • 완전한 내부 - 삼각형이 완전히 절두체 내부에 위치하면 그대로 보존되어 다음 단계로 진행한다.
  • 완전한 외부 - 삼각형이 완전히 절두체 와부에 위치하면 추려내어진다.
  • 부분적 내부 - 삼각형이 부분적으로 절두체 내부에 위치하면 삼각형을 두개의 부분으로 분리한다. 절두체 내부의 부분은 보존되며, 나머지는 추려내어진다.

 

7. 투영(Projection)

 뷰 스페이스에서는 3D 장면의 2D 표면을 얻는 과정이 남아있다. 이와 같이 n 차원에서 n-1 차원을 얻는 과정을 투영(Projection)이라 한다. 원근 투영(Perspective Projection)을 이용하여 기하물체를 투사한다. 즉 카메라에서 멀리 떨어진 물체는 가까운 물체보다 작게 나타난다. 

 

8. 뷰포트 변환

 프로젝트의 윈도우의 좌표를 뷰 포트라 불리는 화면의 직사각형으로 변환하는 과정을 말한다. 게임에서의 뷰 포트는 직사각형의 전체 화면이 되지만, 윈도우 모드에서 실행하는 경우에는 클라이언트 영역이나 화면의 일부가 될 수도 있다.

 

9. 레스터라이즈

 스크린 좌표로 버텍스들이 변환한 다음에는 2D 삼각형들의 리스트를 가지게 된다. 레스터라이즈 단계는 각각의 삼각형을 그리는데 필요한 픽셀컬러들을 계산하는 과정이다.

'DirectX9' 카테고리의 다른 글

Direct3D에서의 모델 표현과 가상 카메라  (0) 2021.06.02
Direct3D 기초  (0) 2021.06.02
VS2017에서 DirectX9 SDK 세팅하기  (0) 2021.06.02
평면(Plane)  (0) 2021.06.02
행렬의 변환  (0) 2021.05.31

+ Recent posts