생활코딩 학습일기13 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 2 3 다음
