생활코딩 학습일기(Web 기초)14 8) 박스모델과 그리드 오늘은 무엇을 할 것인가? 저번에 하고자 했던 웹페이지 디자인을 마무리 지을 것이다. 이번 글에서는 박스모델과 그리드에 대해서 배우는 것이 핵심이지만, 이것을 이해하고 활용하기 위해서는 다른 여러가지 개념도 같이 배워야 한다. 다행스럽게도 크게 어려운 내용은 없으니, 하나하나 배워보자. 목차 1. 블록 요소와 인라인 요소 2. 블록 요소의 구성 3. 그리드 1. 블록 요소와 인라인 요소 먼저 저번에 한 것을 돌이켜보자. 저번에는 class와 id를 활용하는 방법을 배웠고, 이 방법을 활용해서 원하는 부분의 글자색을 바꾸고, 하이퍼텍스트의 밑줄까지 조절했다. 그리고 이번에는 배치에 관한 것을 수정할 차례이다. 사각형 상자 형태로 내용을 나누어서, 위쪽은 Web이라고 써진 부분을, 왼쪽은 리스트 부분을, 오.. 2022. 8. 12. 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. 이전 1 2 3 다음
