SBDB_뉴유 SBDB_뉴유

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을 만들 수는 없지만, 자신만의 간단한 온라인 웹사이트를 만드는 건 그리 어럽지 않으니 여기부터 시작하겠습니다. 아래 나열한 항목을 순서대로 진행하면 백지부터 시작해서 첫 웹페이지를 인터넷에 띄울겁니다. 시작합시다! 기본 소프트웨어 설치하기 웹사이트 제작을 위한 도구는..

01. HTML 소개_HTML 텍스트 기초02 moz://a에서 운영하는 학습사이트로 우리는 여기서 배워 보도록 하겠습니다. 출처moz://a 리스트 이제 목록에 관심을 돌려 보겠습니다. 목록은 쇼핑 목록, 길찾기 목록, 지침 목록에 이르기까지 삶의 모든 곳에 있습니다. 목록은 웹의 도처에 있으며 우리는 세 가지 유형에 살펴보겠습니다. 유형1: 요소만으로 단순히 리스트를 표현합니다. 리스트01 리스트02 리스트03 리스트04 유형2: , 요소를 사용하여 순서가 정해지지 않은 리스트를 목록으로 묶습니다. 이것은 모든 리스트 항목을 둘러쌉니다. 리스트01 리스트02 리스트03 리스트04 유형3: , 요소를 사용하여 순서가 있는 리스트를 목록으로 묶습니다. 이것은 모든 리스트 항목을 둘러쌉니다. 리스트01 리..

01. HTML 소개_HTML 텍스트 기초01 moz://a에서 운영하는 학습사이트로 우리는 여기서 배워 보도록 하겠습니다. 출처moz://a 제목 및 단락 대부분의 구조화된 텍스트는 이야기, 신문, 대학 교과서, 잡지 등을 읽고 있든 간에 제목과 단락으로 구성됩니다. 제목: ~ 6개의 표제 요소가 있습니다. , , , , , 각 요소는 문서에서 다른 수준의 콘텐츠를 나타냅니다. 은 주제목을 은 부제목을 은 그 다음 부제목을 나타내는 식입니다. 단락: HTML에서 각 단락은 요소로 래핑되어야 합니다. 예시 단락 코드 01. HTML 소개_HTML 텍스트 기초01 moz://a에서 운영하는 학습사이트로 우리는 여기서 배워 보도록 하겠습니다. 출처moz://a 제목 및 단락 대부분의 구조화된 텍스트는 이야기..

01. HTML 소개_HEAD에 뭐가 들었어?02 moz://a에서 운영하는 학습사이트로 우리는 여기서 배워 보도록 하겠습니다. 출처moz://a 사이트에 사용자 정의 아이콘 추가 사이트 디자인을 더욱 풍부하게 하기 위해 메타데이터의 사용자 정의 아이콘에 대한 참조를 추가할 수 있습니다. 이는 특정 컨텍스트에서 표시됩니다. 이들 중 가장 일반적으로 사용되는 것은 favicon(파비콘)입니다. 예시 CSS와 JavaScript를 HTML에 적용하기 거의 모든 웹 사이트는 CSS 를 사용하여 멋지게 보이게 하고 JavaScript 를 사용하여 비디오 플레이어, 지도, 게임 등과 같은 대화형 기능을 강화할 것입니다. 예시 문서의 기본 언어 설정 페이지의 언어를 설정할 수 있고 실제로 설정해야 한다는 점을 언급..

01. HTML 소개_HEAD에 뭐가 들었어?01 moz://a에서 운영하는 학습사이트로 우리는 여기서 배워 보도록 하겠습니다. 출처moz://a 01. HTML 소개_HEAD에 뭐가 들었어?01 moz://a에서 운영하는 학습사이트로 우리는 여기서 배워 보도록 하겠습니다. 출처moz://a HTML 헤드는 요소의 내용입니다. 요소의 내용은 와 달리 페이지에 표시되지 않습니다. 대신 헤드의 작업은 문서에 대한 메타데이터 를 포함 합니다. 문서에 제목을 추가하는 데 사용할 수 있습니다. 예시 title: 페이지 제목 메타데이터는 데이터를 설명하는 데이터이며 HTML에는 문서에 메타데이터를 추가하는 "공식적인" 방법인 <..

01. HTML 소개_HTML 시작하기02 moz://a에서 운영하는 학습사이트로 우리는 여기서 배워 보도록 하겠습니다. 출처moz://a HTML 문서의 구조 개별 HTML 요소는 그 자체로는 그다지 유용하지 않습니다. 다음으로 개별 요소가 결합하여 전체 HTML 페이지를 형성하는 방법을 살펴보겠습니다. : 요소는 유효한 문서 유형으로 간주되는 가장 짧은 문자열입니다. : 요소는 페이지의 모든 콘텐츠를 래핑합니다. 루트 요소라고도 합니다. 엔티티 참조: HTML에 특수 문자 포함 HTML에서 , ", ', &문자는 특수 문자입니다. 그것들은 HTML 구문 자체의 일부입니다. HTML 주석 HTML에는 코드에 주석을 작성하는 메커니즘이 있습니다. 브라우저는 주석을 무시하여 사용자가 주석을 효과적으로 볼 ..

01. HTML 소개_HTML 시작하기01 moz://a에서 운영하는 학습사이트로 우리는 여기서 배워 보도록 하겠습니다. 출처moz://a HTML이란 무엇입니까? 먼저 HTML(Hypertext Markup Language)은 프로그래밍 언어가 아니고 방문하는 웹 페이지를 구성하는 방법을 웹 브라우저에 알려주는 마크업 언어 입니다. HTML은 웹 개발자가 원하는 만큼 복잡하거나 간단해질 수 있습니다. HTML은 콘텐츠의 다른 부분을 열거나 닫거나 마크업하여 특정 방식으로 나타나거나 작동하도록 하는 데 사용 하는 일련의 요소로 구성됩니다. 예를들어 콘텐츠를 하이퍼링크로 만들어 다른 페이지에 연결하고 단어를 기울임꼴로 표시하는 등의 작업을 수행할 수 있습니다. HTML 요소의 구조 요소는 여는 태그, 내용..