Web과 함께 시작하기 CSS 기본 CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드입니다. 예를 들면, 어떻게 하면 글자색을 검정이나 빨갛게 할 수 있을까? 어떻게 하면 콘텐츠를 화면의 이런 저런 곳에 보이게 할 수 있을까? 어떻게 하면 배경 이미지와 색상들로 웹페이지를 꾸밀 수 있을까? 제목과 같이 이 글은 CSS과 그 기능에 대한 기본적인 이해를 제공할 것입니다. 그래서 CSS가 뭔가요? HTML와 같이 CSS는 실제로 프로그래밍 언어는 아닙니다. 마크업(markup) 언어도 아닙니다. 스타일 시트언어 입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 말입니다. 예를 들면, HTML 페이지에서 모든 문단 요소들을 선택하고 그 문단 요소..
Web과 함께 시작하기 HTML 기본 HTML(Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. 예를 들면, 컨텐트는 여러 개의 문단, 글 머리 목록이 구조화된 것이거나 사진이나 데이터 테이블일 수도 있습니다. 제목과 같이 이 글은 HTML과 그 기능에 대한 기본적인 이해를 제공할 것입니다. 그래서 HTML은 무엇일까요? HTML은 프로그래밍 언어가 아닙니다. 컨텐츠의 구조를 정의하는 마크업 언어입니다. HTML은 컨텐츠의 서로 다른 부분들을 씌우거나 감싸서 다른 형식으로 보이게하거나 특정한 방식으로 동작하도록 하는 일련의 요소(elements)로 이루어져 있습니다. 태그(tags)로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크(hy..
Web과 함께 시작하기 파일 다루기 웹사이트는 문자, 코드, 스타일시트, 미디어 등 수많은 파일로 구성되어 있습니다. 웹사이트를 제작할 때 여러분은 이러한 파일들을 여러분의 컴퓨터에 적당한 양식에 맞춰 정리해야 하고 서로가 잘 작동하는지 확인해야 하며 최종적으로 서버에 업로드하기 전에 모든 내용이 올바르게 나타나게 해야 합니다. 파일 다루기에서는 여러분의 웹사이트를 위한 적당한 양식을 만들기 위해 여러분이 알아야 하는 몇 가지 문제들에 대해 이야기 할 것입니다. 웹사이트는 컴퓨터의 어디에 두어야 할까요? 만약 여러분이 컴퓨터에서 웹사이트에 대해 작업한다며 퍼블리시된 웹사이트의 파일 구조를 반영하는 하나의 폴더 안에 관련된 모든 파일을 유지하여야 합니다. 이 폴더는 어디에나 둘 수 있지만 하드 드라이브에 ..
Web과 함께 시작하기 웹사이트의 외관은 어떻게 할까요? "웹사이트의 외관은 어떻게 할까요?"에서는 "나의 웹사이트가 무슨 정보를 제공할 것인지?", "무슨 글꼴과 색상을 사용할 것인지?", "나의 웹사이트가 무엇을 하는지?" 등을 포함하여 코드를 작성하기 전에 여러분이 해야할 계획 세우기와 디자인에 대해 이야기 할 것입니다. 계획 세우기 코드를 작성하기 전에 여러분은 아이디어가 필요합니다. 웹사이트가 실제로 무엇을 해야하는지? 웹사이트가 기본적으로 무엇을 할 수 있는지? 하지만 여러분의 첫 시도를 위해선 이것을 간단히 할 필요가 있습니다. 우리는 제목과 사진, 그리고 몇 개의 문단을 포함한 간단한 웹페이지를 제작하는 것부터 시작할 것입니다. 스케치하기 다음으로는 펜과 종이를 가져와 여러분의 사이트가 어..
Web과 함께 시작하기 기본 소프트웨어 설치하기 기본 소프트웨어 설치하기에서는 간단한 웹 개발을 하기 위해 어떤 도구가 필요하고, 어떻게 설치할 수 있는지 보여드립니다. 사용하는 도구는 뭔가요? 컴퓨터: 당연한 이야기이지만 웹 개발을 하기 위해서는 컴퓨터가 필요합니다. 텍스트 편집기 : 텍스트 편집기는 Visual Studio Code을 사용하기로 했습니다. Visual Studio Code 사이트 웹 브라우저 : 웹 브라우저는 Chrome을 사용하기로 했습니다. Chrome 다운로드 사이트 이미지 편집기 : 이미지 편집기는 figma을 사용하기로 했습니다. figma 사이트 버전 관리 시스템 : 버전 관리 시스텝은 GitHub을 사용하기로 했습니다. GitHub 사이트 이후 프로그렘이 추가되면 추가하여..
Web과 함께 시작하기 Web과 함께 시작하기(Getting stated with the Web)는 여러분에게 웹 개발의 실직적인 측면을 소개하는 간결한 시리즈입니다. 여러분은 간단한 웹페이지를 만들 때 필요한 도구를 설치하고 여러분의 코드를 게시할 것입니다. 당신의 첫 번째 웹사이트 줄거리 전문적인 웹사이트를 생성하기 위해서는 매우 많은 작업이 필요합니다. 그러니 웹 개발이 처음이라면, 처음은 작게 시작해보세요. 지금 당장 Facebook을 만들 수는 없지만, 자신만의 간단한 온라인 웹사이트를 만드는 건 그리 어럽지 않으니 여기부터 시작하겠습니다. 아래 나열한 항목을 순서대로 진행하면 백지부터 시작해서 첫 웹페이지를 인터넷에 띄울겁니다. 시작합시다! 기본 소프트웨어 설치하기 웹사이트 제작을 위한 도구는..