728x90 D&D의 역사 및 판본 정리 * 본 포스팅은 Wikipedia의 "Dungeons & Dragons" 문서 내 일부 내용을 발췌 및 인용하여 작성되었음을 밝힙니다. - 자료 출처 : https://en.wikipedia.org/wiki/Dungeons_%26_Dragons#Original_game 1. D&D의 시작 Dungeons & Dragons의 초창기 전신은 Jeff Perren가 작성한 중세 시대 바탕의 미니어쳐들을 사용하는 게임룰 세트였다. 이 초기 룰에 Gary Gygax이 판타지적인 요소를 추가하여 룰을 확장한 다음 Chainmail이라는 게임으로 출판하게 된다. 또한, Dave Wesely는 1970년에 군대에 입대했을 무렵, 그의 친구이며 동료이자, 나폴레옹 워-게임의 게이머였던 Dave Arneson과 Wesel.. 2022. 7. 29. [HTML,CSS-tip] 글자와 관련된 유용한 속성 및 속성값 HTML문서 형식으로 전자책을 만들 때, Epub 형태의 전자책을 만든다면 html문서를 엮어 책을 만들게되므로 결국 html이나 css로 글자를 다룰 수 있어야 한다. 이번 포스팅에서는 글자와 연관된 유용한 css속성들과 그 속성(attribute)들에게 부영할 수 있는 속성값(property)를 알아보자 글자와 관련된 속성들을 설정하는 방법 기본적으로 아래 두 가지 형식은 모두 css파일에 작성하여 html문서에 반영하게 된다. 1)의 형식처럼 각 속성에 대한 값을 한 번에 설정할 수도 있고, 2)처럼 각 속성을 하나씩 꺼내와 개별로 설정 할 수도 있다. 1) font : font-style font-weight font-variant font-size line-height font-family; (.. 2021. 5. 19. [HTML,CSS] 외부의 CSS문서를 HTML문서로 읽어들여보자 지난 포스팅 간략 리뷰 지난 포스팅에서는 html문서의 영역에 이라는 영역을 지정하여 디자인 요소를 전체적으로 컨트롤 할 수 있는 방법을 알아보았다. 자세한 내용은 아래 그림을 터치하면 볼 수 있다. 하지만 이 방법은 영역을 자칫 너무 장황하게 만들어버릴 여지가 있으며, 이 문제를 해결하기 위해 이번 포스팅에서는 html문서의 외부에 css파일을 만든 후 우리가 디자인 요소를 적용하고자하는 html로 읽어들이는 방식으로 디자인 요소를 적용해보고자 한다. 외부 CSS 파일 만들기 먼저 css 파일을 만들어야 한다. 별로 어려운 작업은 아니다. 에디터 프로그램을 실행한 후 내용을 적고, 저장할 때 확장자를 ".css"로 입력하면 된다. css파일 내부의 내용은 이미 이전 포스팅에서 작성해둔 영역 내부의 내용.. 2021. 5. 16. [HTML,CSS] HTML 문서의 구역을 나눠서 CSS를 적용해보자(2) 들어가기에 앞서.. 지난 포스팅에서 HTML문서의 각 문단을 구분하여 지정할 수 있도록 class와 id를 부여해보았다. 이번 포스팅에서는 각 문단에 접근하여 디자인 요소들을 적용해보도록 하겠다. 키워드는 여전히 스타일 구분해둔 문단 영역에 디자인 요소를 적용할 때에도 여전히 키워드는 "style" 을 사용한다. 다만, 이전에 필요한 영역에 바로 적용했었던 때와는 달리 이번에는 style 키워드의 위치가 영역에 위치하게 된다. 기본적인 형식 영역 안에 묶이는 디자인 요소에 대한 기본적인 형식은 아래와 같다. 형식 :접근하고자하는 영역 이름 {(디자인 속성1 이름):(디자인 속성1 값); (디자인 속성2 이름):(디자인 속성2 값);} 예시 : div {margin-left:10%; width:80%} 위.. 2021. 5. 7. [HTML,CSS] HTML 문서의 구역을 나눠서 CSS를 적용해보자(1) 왜 영역을 나눠야할까? 지난번 포스팅에선 HTML 문서 내, 필요한 줄마다 CSS를 적용하여 보았다. 하지만 그런 방식으로 CSS를 적용하는 사례는 드물고 통상 HTML문서 내 영역들을 분류, 혹은 지정하여 CSS를 적용하는 방법이 일반적이다. 그렇다면 왜 문서 내 영역들을 지정하는 방식을 주로 사용하는 것일까? 극단적인 예를 들어보자. 웹에서 불러들인 글이 하나 있다. 굉장히 긴 글이고, 문단(=단락)은 30개 가량이며 첫문단과 마지막 문단의 글자체, 굵기 등 디자인 속성이 동일하다. 나머지 28개 문단은 각 7개씩 소설 / 에세이 / 시 / 수필의 4개 장르로 이루어지며, 장르 별 디자인 속성은 동일하나 장르 간 디자인 속성은 완전히 다르다. 또한, 각 소설의 경우 명대사 부분에 붉은색 글자, bol.. 2021. 5. 4. [HTML,CSS] 웹문서에 style을 입히다, CSS 이번 포스팅의 목표는... 이전 포스팅에서 이라는 자작글을 HTML문서 내로 가지고와 줄바꿈까지 완료해보았다. 이번 포스팅에서는 CSS 사용하여 글의 형태를 다듬어 보려고 한다. CSS를 써보자 CSS를 HTML 문서에 적용하기 위해서는 style이라는 키워드를 사용해야 한다. 아래의 예시를 살펴보자. 꿈 - w r i t t e n b y Y I O R A E - 꿈은 별과 같아서 아무리 손을 뻗어보아도 잡히지 않지만, 달도 누워버린 어두운 밤일 수록 더욱 밝아보여 하염없이 고개를 들어올릴 수 밖에...... 위 코드를 브라우저에서 실행하면 아래처럼 화면이 나온다. 내용이 화면 중앙으로 정렬되고 제목의 글자는 본문보다 크고 굵어서 좀 더 강조되어 보인다. 그리고 마지막줄의 라는 부분은 오른쪽 정렬이 되.. 2021. 4. 29. [HTML] 본격적인 문서 작업을 위한 HTML tag Chrome은 내 글을... 필자는 티스토리에 짧은 글을 연재하고 있다. 부끄럽게도 스스로 "손바닥소설"이라는 장르명까지 붙여가며 열심히 쓰고 있는 중이다. 아래는 연재 중인 손바닥소설의 가장 첫 글이다. 당연하게도 위 글 역시 HTML문서로 만들어졌다. 티스토리 에디터를 이용하여 작성되었으며 갤럭시탭에서 chrome 브라우저를 이용하여 불러온 화면이다. 위와 완전히 동일한 문서를 작성하지는 못하겠지만, 수작업으로 HTML문서를 작성하는 방식을 이용하여 가장 비슷한 형태가 될 수 있도록 작업을 시작해보자. 문단과 문장을 위한 html 태그 앞서 HTML문서의 기본구조에 대해 포스팅을하며 문단 영역을 지정하기 위한 tag 역시 언급했었다. 바로 tag이다. 다시금, HTML문서의 기본 구조를 가져와 사이에.. 2021. 3. 22. [HTML] padding을 입은 div 사이엔 간격(margin)이 필요해 다시 div로 돌아가서...... div는 영역이었다. 앞전 포스트에서 div영역을 선으로 표시하여 사각형의 영역이 발생함을 확인하였다. 그런데 이런 영역이 두 개가 된다면 어떤 일이 일어날까? 기본적으로 두 개의 영역을 지정했다는 것은 이 두 영역이 서로 다름을 전제로하고 있다. 즉, 두 영역은 작성자의 의도에 따라 경계선을 기준으로든, 가운데 빈공간을 기준으로든 나뉠 수 있어야한다. 이 말은 바꿔말하자면 각각의 div 영역이 고유한 빈공간과 경계선을 가진다는 의미가 된다. 어렵게 풀어서 장황하게 설명했으나, 요약해서 말하자면 "div는 고유한 경계와 외부 방향으로의 빈공간을 가진다' 라는 의미이다. 우리 사이에는 간격(margin)이 필요해 - [ feat. padding 입은 div ] 아래 그림을.. 2021. 3. 19. [HTML] HTML문서에 이미지를 넣어보자 당연히 이미지도 들어간다 앞선 포스팅에서 HTML의 역할이 웹문서의 구역을 나누는 것임을 알아보았다. 또한 의도적으로 나눈 구역에 태그를 이용하여 문단을 적을 수 있음도 확인헀다. 글로만 이루어진 문서라면 이것으로 충분할 것이다. 하지만 모든 웹문서가 글자로만 이루어지지는 않는다. 갖가지 귀여운 이모티콘과 읽는 이로 하여금 집중할 수 밖에 없도록 만드는 센스있는 사진은 필수다. 하물며 이 포스팅을 남기는 근본적인 목표인, "출간물"이라면 어떨까? 내용 중간에 들어갈 삽화는 물론, 책의 기본 구성인 표지에서 이미지는 필수불가결한 요소다. 전자책의 한 가지 형태인 ePUB은 HTML로 만들어진다고 하던데 그렇다면 HTML에서 이미지도 다룰 수 있지 않을까? 결론부터 말하자면 대답은 그렇다, 이다. HTML로.. 2021. 3. 15. [HTML] 결국, HTML은 웹문서의 구조를 정의하는 방법론 HTML, 웹페이지의 구조를 정의하는 문서 앞서 두 번의 포스팅에서 확인하였듯이 HTML문서는 기본 구조를 가지고 있다. 이 기본 구조를 통해 웹페이지의 어느 부분이 제목 영역이며, 어느 부분이 본문 영역인지 HTML문서는 결정한다. 따라서 HTML문서는 웹페이지의 구조를 정의한다고 할 수 있겠다. 또한, 과 태그 역시, 태그 안의 내용을 웹페이지의 어느 영역에 표시할지 결정한다는 기능으로 미루어보면 역시나 웹페이지의 구조를 정의하는데 일조하고 있다. 웹페이지를 하나의 간단한 문서로 본다면 '제목'과 '본문'이라는 이분법적인 구조만으로 충분할 지 모르겠으나 인터넷 상의 웹페이지들은(유명 포털사이트와 각종 홈페이지를 포함하여) 제목과 본문만으로 이루어져있지는 않다. 한 페이지에 여러 구획으로 나뉘어진 홈페.. 2021. 3. 6. 이전 1 2 다음 728x90
