'웹퍼블리싱' 카테고리의 다른 글
웹사이트 어떻게 만들나요? (0) | 2024.03.11 |
---|
웹사이트 어떻게 만들나요? (0) | 2024.03.11 |
---|
부분 트리 (sub-tree): 현재 트리의 일부분을 이루고 있는 더 작은 트리를 말합니다. 위 그림의 트리는 root 노드가 A인 트리입니다. 그런데 이 트리를 좀더 작은 단위로 쪼개보면 더 작은 부분 트리들을 발견할 수 있습니다. 예를 들어 위 그림의 노란색 큰 박스 안을 보세요. 노란색 큰 박스 안에는 ‘C가 root 노드인 트리’가 있는데요. 이런 걸 바로 부분 트리라고 합니다. 지금 C가 A의 오른쪽 자식이죠? 그래서 노란색 큰 박스 안에 있는 부분 트리를 A의 “오른쪽 부분 트리”라고 합니다. 특정 노드를 root 노드라고 생각하고 바라본다면 여러 가지 부분 트리들을 발견할 수 있습니다. 하나의 전체 트리에 여러 부분 트리들이 존재하는 겁니다.
템플릿 변수 (0) | 2024.04.25 |
---|
파이썬 추상화 (0) | 2024.03.08 |
---|---|
파이썬 자료형 문자열 불린 정수 소수 (0) | 2024.03.08 |
파이썬 기초 문법 (0) | 2024.03.08 |
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML 문법 (0) | 2024.03.19 |
---|---|
HTML 기본 (0) | 2024.03.12 |
HTML이란 무엇입니까? (0) | 2024.03.11 |
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
HTML 문서
모든 HTML 문서는 문서 유형 선언으로 시작해야 합니다. <!DOCTYPE html>.
HTML 문서 자체는 다음으로 시작합니다. <html> 그리고 그것으로 끝납니다. </html>.
HTML 문서에서 보이는 부분은 다음과 같습니다. <body> 그리고. </body>.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<!DOCTYPE> 선언은 문서 유형을 나타내며 브라우저에서 웹 페이지를 올바르게 표시하는 데 도움이 됩니다.
선언은 페이지 상단(HTML 태그 앞에)에 한 번만 표시되어야 합니다.
<!DOCTYPE> 선언은 대소문자를 구분하지 않습니다.
HTML5의 <!DOCTYPE> 선언은 다음과 같습니다:
<!DOCTYPE html>
HTML 제목은 <h1>에서 <h6> 태그로 정의됩니다.
<h1>은 가장 중요한 제목을 정의합니다. <h6>은 가장 중요하지 않은 제목을 정의합니다:
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
HTML 단락은 다음과 같이 정의됩니다. <p> 태그
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
웹 페이지를 보고 "어떻게 저렇게 만들었을까?"라고 궁금해한 적이 있나요?
HTML 페이지에서 CTRL + U를 클릭하거나 페이지를 마우스 오른쪽 버튼으로 클릭하고 '페이지 소스 보기'를 선택합니다. 그러면 페이지의 HTML 소스 코드가 포함된 새 탭이 열립니다.
요소(또는 빈 영역)를 마우스 오른쪽 버튼으로 클릭하고 '검사'를 선택하면 어떤 요소로 구성되어 있는지 확인할 수 있습니다(HTML과 CSS가 모두 표시됩니다). 열리는 요소 또는 스타일 패널에서 HTML 또는 CSS를 즉석에서 편집할 수도 있습니다.
HTML 문법 (0) | 2024.03.19 |
---|---|
HTML 문서 제목 문단 링크 이미지 버튼 목록 (0) | 2024.03.12 |
HTML이란 무엇입니까? (0) | 2024.03.11 |
.hwp 파일을 작성하려면 아래아한글, .ppt 파일을 만들려면 파워포인트 프로그램같이 파일을 열고 편집할 수 있는 프로그램이 필요한데요. 우리도 본격적으로 시작하기 전에 필요한 프로그램 몇 가지를 설치해야한다
웹사이트를 만들 때는 기본적으로 .html 형식의 파일을 만드는데요. HTML 파일을 편집한 다음에 웹 브라우저에서 열면 우리가 평소에 보는 웹사이트처럼 화면에서 볼 수 있습니다.
코드를 작성하는 데 사용할 에디터(편집기) 프로그램이랑, HTML 파일을 열어서 보여줄 웹 브라우저가 필요합니다. 다양한 선택지가 있지만 혼란을 덜기 위해서 VS Code와 크롬을 사용하겠습니다
VS Code는 전문적으로 프로그램을 만드는 개발자들도 많이 사용하는 편집기
그럼, 먼저 VS Code 를 설치해 봅시다. VS Code는 Visual Studio Code의 약자인데, 구글 같은 검색 사이트에서 VS Code 로 검색하면 쉽게 찾을 수 있으실 겁니다.
아마 맨 위에 뜨는 대표 사이트로 들어가면 메인 화면에 곧바로 내가 사용 중인 운영체제(윈도우즈, 맥)에 맞는 다운로드 버튼이 나올 겁니다. 이걸 눌러서 설치하시면 됩니다.
크롬은 구글에서 만든 웹 브라우저인데요. 대중적으로 많이 사용하는 브라우저기 때문에 이 브라우저를 사용할 겁니다.
검색 사이트에서 Chrome 또는 한글로 크롬을 검색하면 위쪽에 대표 사이트가 나오는데요. 들어가면 VS Code 사이트처럼 자신이 사용하는 운영체제(윈도우즈, 맥)에 맞는 다운로드 버튼이 나옵니다.
버튼을 클릭하면 다운로드가 진행되고, 설치 프로그램의 안내에 따라서 크롬을 설치하시면 됩니다.
프로그래머가 영어를 잘해야 하는 이유 (0) | 2024.04.17 |
---|---|
트렌드를 읽는방법 (0) | 2024.04.17 |
컴퓨터 사이언스의 기초 (0) | 2024.04.15 |
프로그래밍 언어 이해 하기 (0) | 2024.03.07 |
CSS는 우리가 웹 페이지를 스타일링하는 데 사용하는 언어입니다.
CSS는 디자인, 레이아웃을 포함하여 웹 페이지의 스타일을 정의하는 데 사용됩니다. 그리고 다양한 장치와 화면 크기에 대한 디스플레이의 변화.
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
실행
선택기는 스타일을 지정하려는 HTML 요소를 가리킵니다.
선언 블록에는 세미콜론으로 구분된 하나 이상의 선언이 포함됩니다.
각 선언에는 콜론으로 구분된 CSS 속성 이름과 값이 포함됩니다.
여러 CSS 선언은 세미콜론으로 구분되며 선언 블록은 중괄호로 둘러싸여 있습니다.
이 예제에서는 모든 <p> 요소가 가운데 정렬되고 텍스트 색상이 빨간색으로 표시됩니다:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
p는 CSS의 선택기입니다(스타일을 지정하려는 HTML 요소인 <p>를 가리킴).
color는 속성이고red은 속성 값입니다.
text-align은 속성이고 center는 속성 값입니다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
실행
<!DOCTYPE html> 선언은 정의합니다. 이 문서가 HTML5 문서라는 것.
<html> 요소는 HTML의 루트 요소입니다. 페이지입니다.
<head> 요소에 대한 메타 정보가 포함되어 있습니다. HTML 페이지
<title> 요소는 다음에 대한 제목을 지정합니다. HTML 페이지(브라우저의 제목 표시줄 또는 페이지의 탭에 표시됨)
<body> 요소는 다음을 정의합니다. 문서 본문은 다음과 같은 모든 가시적인 내용을 위한 컨테이너입니다. 제목, 단락, 이미지, 하이퍼링크, 표, 목록 등
<h1> 요소는 큰 제목을 정의합니다.
<p> 요소는 단락을 정의합니다.
HTML 요소는 시작 태그, 일부 내용 및 끝 태그로 정의됩니다.
HTML 요소는 시작 태그부터 끝 태그까지 모든 것입니다.
참고: 일부 HTML 요소에는 콘텐츠가 없습니다(<br>과 같이). 원소) 이러한 요소를 빈 요소라고 합니다. 빈 요소에는 끝 태그가 없습니다
웹 브라우저(Chrome, Edge, Firefox, Safari)의 목적은 HTML 문서를 읽고 표시하는 것입니다. 정확하게
브라우저는 HTML 태그를 표시하지 않지만 이 태그를 사용하여 문서를 표시하는 방법을 결정합니다.
다음은 HTML 페이지 구조를 시각화한 것입니다.
참고 : <본문> 섹션 내의 내용 브라우저에 표시됩니다. <title> 요소 내부의 내용은 다음과 같습니다. 브라우저의 제목 표시줄이나 페이지 탭에 표시됩니다.
HTML 문법 (0) | 2024.03.19 |
---|---|
HTML 문서 제목 문단 링크 이미지 버튼 목록 (0) | 2024.03.12 |
HTML 기본 (0) | 2024.03.12 |