.hwp 파일을 작성하려면 아래아한글, .ppt 파일을 만들려면 파워포인트 프로그램같이 파일을 열고 편집할 수 있는 프로그램이 필요한데요. 우리도 본격적으로 시작하기 전에 필요한 프로그램 몇 가지를 설치해야한다

웹사이트를 만들 때는 기본적으로 .html 형식의 파일을 만드는데요. HTML 파일을 편집한 다음에 웹 브라우저에서 열면 우리가 평소에 보는 웹사이트처럼 화면에서 볼 수 있습니다.

코드를 작성하는 데 사용할 에디터(편집기) 프로그램이랑, HTML 파일을 열어서 보여줄 웹 브라우저가 필요합니다. 다양한 선택지가 있지만 혼란을 덜기 위해서 VS Code와 크롬을 사용하겠습니다

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는 Cascading Style Sheets의 약자입니다.
CSS는 HTML 요소를 화면에 표시하는 방법을 설명합니다. 종이, 또는 다른 미디어에서
CSS는 많은 작업을 절약합니다. 레이아웃을 제어할 수 있습니다. 한 번에 여러 개의 웹 페이지
외부 스타일시트는 CSS 파일에 저장됩니다.

CSS는 우리가 웹 페이지를 스타일링하는 데 사용하는 언어입니다.

CSS를 사용하는 이유

CSS는 디자인, 레이아웃을 포함하여 웹 페이지의 스타일을 정의하는 데 사용됩니다. 그리고 다양한 장치와 화면 크기에 대한 디스플레이의 변화.

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

실행

CSS 구문

선택기는 스타일을 지정하려는 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는 속성 값입니다.

HTML은 하이퍼 텍스트 마크업 언어를 나타냅니다.
HTML은 웹 페이지를 만들기 위한 표준 마크업 언어입니다.
HTML은 웹 페이지의 구조를 설명합니다.
HTML은 일련의 요소로 구성됩니다.
HTML 요소는 브라우저에 내용을 표시하는 방법을 알려줍니다.
HTML 요소는 "This is aheading", "This is a heading"과 같은 내용을 레이블로 지정합니다. 는 단락, "이것은 링크입니다" 등입니다.

간단한 HTML 문서

<!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 요소는 시작 태그부터 끝 태그까지 모든 것입니다.

<p저의 첫 단락.</p>

참고: 일부 HTML 요소에는 콘텐츠가 없습니다(<br>과 같이). 원소) 이러한 요소를 빈 요소라고 합니다. 빈 요소에는 끝 태그가 없습니다

웹 브라우저

웹 브라우저(Chrome, Edge, Firefox, Safari)의 목적은 HTML 문서를 읽고 표시하는 것입니다. 정확하게

브라우저는 HTML 태그를 표시하지 않지만 이 태그를 사용하여 문서를 표시하는 방법을 결정합니다.

HTML 페이지 구조

다음은 HTML 페이지 구조를 시각화한 것입니다.

참고 : <본문> 섹션 내의 내용 브라우저에 표시됩니다. <title> 요소 내부의 내용은 다음과 같습니다. 브라우저의 제목 표시줄이나 페이지 탭에 표시됩니다.

'웹퍼블리싱 > HTML' 카테고리의 다른 글

HTML 문법 (0)	2024.03.19
HTML 문서 제목 문단 링크 이미지 버튼 목록 (0)	2024.03.12
HTML 기본 (0)	2024.03.12

컴퓨터로 문서를 작성할 떄는 워드나한글 프로그램을 쓰고 발표자료를 만들떄는 파워포인트를 사용함

웹사이트는 만들떄 뭘로 만드는걸까?

바로 HTML이랑 CSS 홈페이지를 만들고싶다면 무조건 배워야한다

HTM,CSS 프로그래밍어 컴퓨터가 프로그램을 만들때 사용하는 언어

언어이기때문에 한국어나영어 단어 문법이 존재한다 문법에따라 쓰면 프로그램이 만들어진다

이때 쓴 내용을 소스코드 라고 하고 짦게 줄여서 코드라고 부른다

코딩한다 프로그래밍언어로 코드를 작성한다

HTML, CSS, JS 한 눈에 보기

HTML, CSS, JS 모두 입력되었을 때 모습

JS를 제거했을 때 모습

JS와 CSS를 모두 제거했을 때의 모습

☑️ HTML

HTML : Hypertext Markup Language
HTML은 웹페이지를 만드는 컴퓨터 언어에요. 웹페이지는 텍스트, 이미지, 링크 등의 다양한 요소로 이뤄져 있는데, HTML은 이 모든 것들을 구조화하고 웹페이지에서 어떻게 보여질지를 결정합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 예시</title>
  </head>
  <body>
    <h1>HTML 예시</h1>
    <p>이것은 단락입니다.</p>
  </body>
</html>

CSS

CSS : Cascading Style Sheets
웹 페이지를 스타일링 하기 위한 코드입니다. 색깔, 모양, 디자인을 선택하여 웹페이지를 시각적으로 만들어줘요.

예시코드

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: orange;
        text-align: center;
      }

      p {
        background-color: lightblue;
        padding: 20px 10px;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <h1>CSS 예시</h1>
    <p>이것은 단락입니다.</p>
  </body>
</html>

JS(JavaScript)

JS는 세계에서 가장 인기 있는 프로그래밍 언어로, 웹페이지를 생동감 있게 만들어줍니다. 클릭하면 무언가 일어나고, 움직이는 것을 만들고, 심지어 게임도 만들 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript 예시</title>
  </head>
  <body>
    <h1 id="demo">JavaScript 예시</h1>
    <button onclick="changeText()">클릭하세요</button>

    <script>
      function changeText() {
        document.getElementById("demo").innerHTML = "안녕하세요, JavaScript!";
      }
    </script>
  </body>
</html>

'웹퍼블리싱' 카테고리의 다른 글

하이퍼링크 줄바꾸기 (0)	2024.03.19

카카오맵 승하차 알림 서비스 개편

저는 대중교통을 이용하면서 핸드폰을 보느라 정류장을 지나친 적이 많아서 하차 알림 서비스를 애용하는데요. 카카오맵을 이용하다가 왜 지하철은 승하차 알림이 안 되는지에 대해서 의문을

www.behance.net

프론트엔드 개발자라면 반드시 알아두어야 할 32가지의 UI 요소 (번역)

원제 : 32 User Interface Elements For UI Designers프론트엔드 개발자는 유저 인터페이스(UI)에 대해 그 어떤 개발자보다 잘 이해하고 숙지해야 합니다. 디자이너와 소통하며 그들을 이해하고, 때론 스스로

velog.io

'UXUI' 카테고리의 다른 글

UX/UI 아티클 모음 (0)	2024.03.08

기술 블로그 모음 - TechBlogPosts

IT 기술 블로그들의 최신 포스트를 한곳에서 보세요.

techblogposts.com

GitHub - awesome-devblog/awesome-devblog: 어썸데브블로그. 국내 개발/기술 블로그 모음(only 실명으로).

어썸데브블로그. 국내 개발/기술 블로그 모음(only 실명으로). Contribute to awesome-devblog/awesome-devblog development by creating an account on GitHub.

github.com

GeekNews - 개발/기술/스타트업 뉴스 서비스

개발 뉴스, 기술 관련 새소식, 스타트업 정보와 노하우, 세상의 재미난 것들을 좋아하는 사람들을 위한 뉴스 사이트. 이메일 뉴스레터/트위터/슬랙 봇으로 구독 가능

news.hada.io

GitHub - ShinjungOh/TIL: Today I Learned

Today I Learned. Contribute to ShinjungOh/TIL development by creating an account on GitHub.

github.com

Deploy 2018

2018년이 마무리 되었으니, 이제 배포 를 위한 글을 작성한다. ‘회고’ 라고 쓸까하다가 개발자적인 위트 끌어모아서 Deploy .. 2018 회고에 앞서 2017년 회고글을 다시 보았다. 역시 2017년 보다 2018년

so-so.dev

[TIL] 2024-02-28 슬랙api + node-schedule

오늘의 이슈 좌측 코드의 노드 스케줄로 우측 코드의 router.post(/submi/slack) 을 원하는 시간에 실행하려 했다. 노드 스케줄을 적용시키는데에는 큰 어려움이 없었으나 해당 api를 요청하기 위해서는

rate-allempty.tistory.com

'개발에 필요한 자료집' 카테고리의 다른 글

커뮤니티 (0)	2024.04.17
개발자 공부하는 유트브 모음 (0)	2024.03.20
CSS 자료창고 (0)	2024.03.19
파이썬 자료창고 (2)	2024.03.08

새로운 이야기들 | 요즘IT

매일 업데이트되는 최신 IT 콘텐츠를 만나보세요.

yozm.wishket.com

데이터 분석이란 무엇일까? | 요즘IT

오늘날 데이터는 어디에나 있습니다. 그리고 우리가 생산하는 데이터는 해를 거듭할수록 증가하고 있습니다. 우리가 사용할 수 있는 데이터의 양은 방대하지만, 이 모든 데이터로 무엇을 할 수

yozm.wishket.com

데이터 리터러시(Data Literacy)를 올리는 방법 | 요즘IT

화해팀은 일찍이 데이터의 중요성을 강조해왔는데요. 조직 전반적으로 데이터 활용력을 높이고, 데이터 의사결정 문화를 활성화하기 위해 많은 시도를 해왔습니다. 데이터를 거의 실시간에 가

yozm.wishket.com

데이터 시각화 101: ① 데이터 시각화는 왜 중요할까? | 요즘IT

데이터의 양이 늘어나고 복잡해질 수록 데이터를 좀 더 쉽게 이해하고 인사이트를 발견하는 것의 필요성이 높아지고 있는데요. 데이터 시각화란 말 그대로 데이터에서 발견한 정보를 시각적으

yozm.wishket.com

데이터 시각화 101: ②직관적인 데이터 시각화 만들기 | 요즘IT

데이터를 시각화하여 전달하면 우리의 뇌는 빠른 속도로 많은 양의 정보를 처리할 수 있고, 데이터 테이블에 비해 트렌드나 패턴, 아웃라이어 등을 쉽게 파악할 수 있습니다. 때문에 데이터를

yozm.wishket.com

데이터 기반 의사결정의 장점 | 요즘IT

데이터 기반 의사결정은 의사결정을 내리기 전, 데이터를 활용해서 이대로 진행해도 무리가 없는지 체크하여 행동 방침을 승인하는 과정을 의미합니다. 데이터 기반의 의사결정은 분명 수많은

yozm.wishket.com

/

데이터 분석가가 되어보니 중요한 것들 | 요즘IT

개발자, 디자이너, 기획자, HR, 오퍼레이션 등 대부분의 직무에서 우리가 일하기 전 예상했던 업무와 실제 업무에는 차이점이 존재합니다. 비즈니스는 빠르게 변화하기 때문에, 학생 때 배운 교

yozm.wishket.com

데이터 분석가가 갖춰야 할 9가지 역량 | 요즘IT

최근 노코드 툴, 데이터 플랫폼, ChatGPT 등이 등장하면서 데이터 분석가에게 요구되는 역량도 변화하고 있습니다. 이번 글에서는 데이터 분석가가 갖춰야 할 9가지 역량을 크게 하드 스킬과 소프

yozm.wishket.com

ㅇ

제4회 스파르톤 타임라인:

19:00-19:30: 개막식

19:30-20:30: 코딩 워밍업

20:30-22:00: 코딩 버닝 타임

22:00-23:30: 실습 스퍼트

23:30-24:00: 시상식 & 폐막식

스파르톤은 열정적인 코딩 대회로, 참가자들은 다양한 과제와 도전을 통해 프로그래밍 능력을 겨루게 됩니다. 개막식을 시작으로 코딩 워밍업 시간에서는 참가자들이 팀을 구성하고 대회에 대한 간략한 안내를 받습니다. 이후, 코딩 버닝 타임에서는 실제 코딩 과제에 도전하게 됩니다. 참가자들은 주어진 시간 동안 열심히 코딩을 하고 문제를 해결합니다.

실습 스퍼트는 참가자들이 자신의 프로젝트를 실제로 구현하며 팀원들과 협업합니다. 이 시간에는 멘토들이 참가자들을 도와주고 가이드합니다. 마지막으로, 시상식 및 폐막식에서는 참가자들의 노력과 열정을 인정하며 수상자를 발표합니다

스파르톤 맵은 스파르톤 대회 장소와 구역을 표시하는 지도입니다. 이를 통해 참가자들은 효과적으로 이동하고 필요한 자료를 찾을 수 있습니다.