본문 바로가기

전체 글35

7) CSS의 class와 id 저번 글에서는 CSS의 주된 특징과 선택자와 속성을 이용하는 방법에 대해서 배웠다. 이번 글과 다음 글에서는 위의 그림과 같은 웹페이지를 만들어볼 것이다. 이번 글에서는 클래스와 id라는 아주 중요한 개념을 배운다. 목차 1. 인라인 속성 적용 2. 클래스 3. id 1. 인라인 속성 적용 저번에 만든 웹사이트와 이번에 만들 웹사이트와 대조해보자. 무엇이 다를까? 뭔가 많은 것이 바뀌었다. 내용은 모두 같지만 디자인 적인 요소가 많이 다르다. 일단 Web의 글자색이 바뀌었다. 그리고 내용마다 배치가 달라졌고 사각형 모양으로 구획 같은 게 생겼다. 글자 크기도 좀 달라졌다. 리스트 하이퍼텍스트에서는 원래는 있어야 할 밑줄도 없다. 차근차근 바꿔 나가 보자. 인라인(Inline) 속성 적용 먼저 글자색을 바.. 2022. 8. 12.
6) 입문자가 알아야 할 CSS의 기본 특징 CSS는 무엇을 위해 나왔을까? 이미 언급한 바 있지만 웹페이지를 꾸미기 위해서다. HTML은 웹페이지의 정보를 구조화해서 정확하게 전달하기 위해서 나왔다. 이를 위해서 ‘태그’를 사용한 마크업 언어라는 특징을 갖고 있다. 반면 CSS은 정보를 전달하기 위해서가 아니라, 그 정보를 어떻게 이쁘게 장식해서 전달할까에 중점을 맞춘 언어이다. HTML이 만들어진 초창기에는 CSS라는 것이 없었다. 하지만 사람의 욕심은 끝이 없어서 당시에도 웹페이지를 아름답게 디자인하고 싶었던 사람이 많았다. 그래서 웹페이지를 이쁘게 만들기 위해서 안타깝게도 디자인의 모든 것을 HTML안에 때려박았다. 그러다보니 HTML이 정보의 구조화라는 본래의 목적을 잃고 디자인을 위한 언어가 되어갈 때가 많았고, 결국엔 웹페이지 디자인을.. 2022. 8. 12.
5) 웹페이지 탐방하기 이번 글에서는 웹페이지 탐방을 가보려고 한다. 웹 페이지 탐방이란게 흔히 말하는 웹 서핑을 하자는 것은 아니다. 우린 HTML로 웹페이지를 만드는 방법을 배웠고 인터넷과 웹이 어떻게 돌아가는지를 배웠다. 이제 어엿한 개발자의 마음가짐으로 웹페이지의 내부 세계를 들여다보겠다 이거다. 크롬 개발자 도구를 조금 사용해 볼 것이다. 과연 웹페이지를 바라보는 시선이 처음 공부를 시작할 때보다 얼마나 넓어졌는지 확인하는 시간이 될 것이다. 오늘은 생활코딩 같이 세계 최초의 웹페이지를 한 번 가볼까 한다. 최초의 웹페이지는 WWW에 대해서 설명한 웹 사이트이다. 주소: http://info.cern.ch/hypertext/WWW/TheProject.html The World Wide Web project The Wo.. 2022. 8. 11.
4) 웹의 구조와 웹사이트 올리기 웹은 인터넷에 연결되어 있는 컴퓨터를 통해 모든 사람들이 자유롭게 정보를 공유 및 검색할 수 있는 서비스를 말한다. 우리는 저번에 HTML로 만든 웹사이트를 온라인 공간에 올리려고 한다. 정확히 말하면 인터넷에 올려서, 인터넷에 접속해 있는 모든 사람들이 검색할 수 있게 만들려고 한다. 어떻게 해야 할까? 목차 1. 서버와 클라이언트 2. 웹의 역사 3. 일반인이 서버를 구하는 법 1. 서버와 클라이언트 답은 매우 간단하다. 나는 내가 만든 HTML파일을 인터넷에 연결된 어떤 기계에 저장을 한다. 인터넷에 연결된 기계 장치를 전문용어로 호스트(Host)라고 한다. 달리 말하면, 이 호스트에 내가 만든 파일을 저장한다. 그리고 다른 사람들은 인터넷에 연결된 자신의 컴퓨터로 그 파일에 접근한다. 여기서 사람.. 2022. 8. 11.
3) 기본적인 웹사이트 만들기 이번 글에서는 드디어 웹사이트를 만들어 보기 시작한다. 놀랍게도 우리가 저번 글에서 배운 지식만으로도 웹사이트를 만들어볼 수 있다. 목차 웹사이트와 웹페이지 차근차근 웹사이트 만들기 내가 만든 웹사이트의 문제점 2가지 1. 웹사이트와 웹페이지 먼저 웹사이트는 무엇인가? 웹페이지와 헷갈릴 수 있지만, 엄격하게는 둘은 다르다. 이 둘의 차이점에 대해서 눈치가 빠르거나, HTML수업을 미리 들은 사람들은 잘 알 것이다. 웹사이트는 웹페이지가 모여 있는 곳이다. 웹페이지는 웹에 올려져 있는 개개의 문서를 의미한다. 우리가 지금까지 시험삼아 만든 HTML파일들이 웹에 올려지게 되면, 그 하나하나의 파일들은 웹페이지가 된다. 웹페이지가 모여서 일종의 책이 만들어지게 되면, 그것은 웹사이트가 된다. 예를 들어 보자... 2022. 8. 11.
2) 입문자를 위한 HTML 기초 생활코딩의 HTML & Internet 수업의 목표는 3가지로 이루어져 있다. 기본적인 수준의 웹사이트를 HTML으로 만들어보면서 HTML 익히기. 자신이 만든 웹사이트를 서버를 이용하여 웹에다 올리고, 인터넷의 동작원리 익히기. 초보 개발자로서 가져야 할 기본적인 자세 익히기. 사실 세번째 목표가 이 수업에서 가장 중요하긴 하지만 나는 여기서 지식적인 측면을 다룰 예정이다. 다시 말하면 첫번째, 두번째에 해당하는 부분에 대해서 나름대로 정리한 글을 쓸 것이다. 전문가가 아니기 때문에, 내가 쓴 글이 오류가 있을 수도 있지만, 최대한 오류가 나지 않도록 신경을 썼다. 그와 동시에 나처럼 웹프로그래밍 분야에 갓 입문을 한 사람들의 이해를 돕기 위해서 쉬운 말을 쓰려고 노력했다. 글에 대한 피드백 혹은 내가.. 2022. 8. 9.
1) Intro 당신은 어쩌다가 프로그래밍에 관심을 갖게 됐나요? 난 이 글을 보는 모든 사람들에게 물어보고 싶다. 무슨 사연이 있길래 이 길을 택했을까 하고. 나에게는 대충 이런 사연이 있다. 나는 정보통신공학이라는 전공 특성상 C, C++언어를 조금 다루어 본 적이 있다. 처음 실습을 했을 때 나는 “Hello World”라는 메세지를 컴퓨터에 띄웠다. 참 신기했다. 정말 별 것 아니지만 내가 사람의 언어를 이용했음에도, 기계가 어떤 행동을 한다는 것이 꽤 인상적이었다. 그리고 궁극적으로 이러한 언어를 통해서 사람들을 편리하게 해줄 수 있다는 점도 신기했고. 프로그래밍은 사람들에게 편리함 혹은 어떠한 경지에서는 감동까지 줄 수 있는 강력한 도구 중 하나다. 난 사람들에게 프로그래밍을 통해 나만의 서비스를 제공하고 사.. 2022. 8. 9.
더 비기너스 가이드 한글 패치 파일입니다. 더 비기너스 가이드 한글 패치 파일입니다. 1. 간단한 사과의 글 일단 약 4개월 정도 불편을 겪으셨던 분들에게 사과를 드립니다. 제가 학교를 다니는 동안 이전에 사용했던 블로그를 방치해 놨었는데 그 사이에 도메인 사용기간이 만료가 됐습니다... 한글패치를 포함해서 제가 올렸던 프로그래밍 관련 글들도 싹 지워지고 말았습니다ㅠㅠ 그래서 이번에는 블로그 날아갈 걱정이 없는 티스토리를 이용하여 배포를 하게 되었습니다. 이전 패치 파일들은 제가 여러 번 수정을 했었는데 이번이 마지막 수정이 될 것 같습니다. 만약 또 수정을 하게 된다면 핫픽스 정도의 느낌으로 수정하거나 텍스쳐 몇 개 수정하지 않을까 싶습니다. 2. 마지막 패치를 만든 소감 저번에 했던 번역이 제 맘에 들지가 않아서 조금 신경써서 번역을 했습니다.. 2022. 8. 1.

티스토리툴바