모행

근로장려금 정기신청기간이 5/1~6/2 이라고 합니다.  소득은 아직 많지 않지만 꾸준히 일하며 노력하는 분들을 응원하고, 생활에 실질적인 도움을 드리기 위해 만들어진 아주 고마운 제도입니다. 이 지원금으로 생활비 부담도 덜고, 더 힘내서 일할 수 있겠죠?

근로장려금 그리고 자녀장려금까지 누가 어떻게 혜택을 받을 수 있는지 알려드리겠습니다.

1. 근로장려금/ 자녀장려금이란?

- 근로장려금

소득과 재산이 일정 금액 미만인 근로자, 종교인 또는 사업자(전문직 제외)가구에 대해 일하는 만큼 가구원 구성과 총급여액 등(부부합산)에 따라 산정된 근로장려금을 지급하여 근로를 장려하고 소득을 지원하는 일과 연계된 복지제도입니다. 

쉽게 말해 열심히 일하는 분들에게 나라에서 드리는 '특별한 보너스' 같은 거라고 생각하시면 될것같습니다.

소득은 아직 많지 않지만 꾸준히 일하며 노력하는 분들을 응원하고, 생활에 실질적인 도움을 드리기 위해 만들어진 아주 고마운 제도입니다.

- 자녀장려금

자녀장려금 역시 같은 취지의 제도라고 이해하시면 되는데요. 18세 미만 자녀를 부양하는 가구 중, 부부합산 연간 총소득이 7000만 원 미만인 저소득 가구를 대상으로 자녀 1인당 최소 50만 원에서 최대 100만 원을 지원하는 제도입니다.

★ 두 장려금은 중복지원을 받을 수 있어요!!

한 가지 꼭 알고 계셔야 하는 사실은 근로장려금과 자녀장려금은 중복 신청, 중복 수령이 가능하다는 점인데요. 근로장려금 요건과 자녀장려금 요건을 모두 충족하는 경우 두 장려금을 동시에 지원받을 수 있다는 뜻입니다.

2. 신청기간 및 방법

★ 정기신청기간 : 2025/05/01 ~ 06/02

★ 기한 후 신청기간 : 2025/06/03 ~ 2025/12/01

정기신청한 신청자에 대한 장려금 지급은 8월 말쯤이 되니 참고 하시면 될것같습니다.

신청방법 상세하게 알아보기 CLICK

1) 신청안내문을 받은 경우

신청안내문을 받은 경우에는 ARS전화/ 홈택스(모바일앱)/홈택스PC/ 모방일 안내문에서 바로 신청하기등 여러가지 방법이 있는데

아무래도 가장 쉬운 방법은 ARS 인것같아요

2) 신청안내문을 받지 못한 경우

홈택스(PC) 또는 모바일 앱으로 진행해야하며

서면 신청도 가능합니다.

-홈택스(PC)
홈택스 로그인 → 장려금ㆍ연말정산ㆍ전자기부금 → 근로ㆍ자녀장려금 정기신청 → 직접입력 신청 → 신청요건 확인 → 인적사항 작성 → 소득명세 작성 → 전세금명세 작성 → 계좌번호ㆍ연락처 작성 → 신청확인 및 전송 → 접수증 출력

-홈택스(모바일앱)
홈택스 모바일 앱 로그인 → 전체메뉴 → 장려금ㆍ연말정산ㆍ전자기부금 → 근로ㆍ자녀장려금 정기신청 → 직접입력 신청 → 신청요건 확인 → 인적사항 작성 → 소득명세 작성 → 전세금명세 작성 → 계좌번호ㆍ연락처 작성 → 신청확인 및 전송 → 접수증 출력

-서면신청(세무서 문의전화, 우편접수)

3. 근로/자녀 장려금 최대 지급액

가장 중요한 지급액

4. 신청자격

1) 가구원 조건

2) 소득요건

3) 재산요건

2024년 6월 1일을 기준으로 가구원 모두가 소유한 재산 합계액이 2억 4천만 원 미만이어야 합니다.

- 주택ㆍ토지ㆍ건축물(시가표준액), 승용자동차(시가표준액, 영업용제외), 전세금3), 금융자산ㆍ유가증권, 회원권, 부동산을 취득할 수 있는 권리

1) 1세대(가구)의 범위 = 2024.12.31. 현재 거주자와 다음의 ①,②,③에 해당하는 자가 구성하는 세대.
　 ① 배우자 ② 거주자 또는 그 배우자와 동일한 주소 또는 거소에 거주하는 직계존비속 ③ 부양자녀
　 　* 조세특례제한법시행령 제100조의4①

2) 재산가액에서 부채는 차감하지 않으며, 재산합계액 1억7천만 원 이상이면 장려금 지급액의 50%를 차감

3) 주택은 간주전세금(기준시가X55%)과 실제 전세금 중 작은 금액, 상가는 실제 전세금으로만 평가.
단, 신청자와 그 배우자의 직계존비속(그 배우자 포함)으로부터 임차한 주택은 실제 전세금과의 비교없이 간주전세금(주택가액의 100%)으로만 평가

4) 신청 제외

다음 중 어느 하나에 해당하는 경우에는 장려금을 신청할 수 없습니다.

2024.12.31. 현재 대한민국 국적을 보유하지 아니한 자
* 대한민국 국적을 가진 자와 혼인한 자, 대한민국 국적의 부양자녀가 있는 자는 제외
2024년 중 다른 거주자의 부양자녀인 자
거주자(배우자 포함)가 전문직 사업을 영위하고 있는 자
2024.12.31일 현재 거주자(배우자 포함)가 계속 근무하는 상용근로자로서 월 평균 총급여액 500만원 이상인자(근로장려금만)

근로/자녀 장려금 상세 확인하러가기

소상공인정책자금지원이란 소상공인의 창업, 경영개선, 사업확장 등을 지원하기 위해 정부가 제공하는 저금리 대출 또는 이자 보전 자금입니다.

경기도 어렵고 고정비 부담이 큰 요즘같은 때에 소상공인정책자금이 정말 든든한 지원군이 되어줄것같은데요

다만 많은분들이 이러한 정책이있는지도 몰라 기회를 놓치기도 하는것같아 정리해서 올려보려고해요!

1. 소상공인정책자금이 뭔가요?

쉽게말해, 정부에서  소상공인 사장님들의 사업운영과 성장을 돕기 위해 낮은 금리로 빌려주는 돈입니다.

시중 은행보다 조건이 좋아 자금 부담을 많이 줄일 수 있는 장점이 있습니다.

2. 지원대상이 어떻게 되나요?

'소상공인 보호 및 지원에 관한 법률'에 따른 소상공인이라면 신청자격이 부여됩니다.

- 직원이 5인  미만인 사업체( 제조업,건설업,운수업,광업은 10인 미만)

- 제외업종 : 유흥향락업종, 전문업종, 금융업, 보험업, 부동산업

3. 소상공인정책자금 종류는 어떻게 되나요?

크게 세가지정도로 나눌 수 있습니다.

4. 돈은 어떻게 받을 수 있나요?

정책자금은 돈을 받는 방식에 따라 두가지로 나눌 수 있어요

5. 소상공인정책자금 지원 신청방법

1) 사전 준비: 먼저 소상공인시장진흥공단 정책자금 홈페이지에 접속해서 어떤 자금이 나에게 맞는지 찾아보고, 신청 자격을 꼼꼼히 확인하세요.

2) 온라인 신청: 홈페이지에서 회원가입을 하고, 신청하려는 자금을 선택해서 안내에 따라 신청서를 작성하고 필요한 서류를 온라인으로 제출합니다. (대리대출은 '지원 대상 확인서' 발급 신청 먼저!)

3) 심사 및 결과 기다리기: 신청한 내용을 바탕으로 공단에서 심사를 진행합니다. 서류 검토, 사업성 평가, 신용도 확인 등이 이루어질 수 있어요. 결과는 보통 문자나 알림톡으로 알려줍니다.

4) 대출 실행: 심사 승인이 나면, 직접대출은 공단과, 대리대출은 확인서를 가지고 금융기관과 대출 약정을 맺고 자금을 받게 됩니다.

6. 꼭 알아두세요! (꿀팁 및 유의사항)

✔️예산 소진: 정책자금은 정해진 예산이 있어요. 인기가 많은 자금은 예산이 금방 소진돼서 조기에 마감될 수 있답니다. 평소에 공단 공지사항을 자주 확인하시는 게 좋아요!

✔️정확한 정보 입력: 신청할 때 사업체 정보나 개인 정보, 사업 계획 등을 정확하게 입력하는 것이 중요합니다. 잘못된 정보는 심사 탈락의 원인이 될 수 있어요.

✔️자금별 상세 내용 확인: 오늘 알려드린 내용은 전체적인 개요이고, 각 자금별로 지원 대상, 한도, 금리, 제출 서류 등이 다 다릅니다. 반드시 신청하려는 자금의 상세 공고를 확인하세요!

✔️공식 사이트 활용: 가장 정확하고 최신 정보는 역시 **소상공인시장진흥공단 정책자금 홈페이지(ols.sbiz.or.kr)**에서 확인하는 게 제일 좋겠죠?

https://ols.semas.or.kr/

중장년 경력지원제는 중장년에게 일경험을 쌓을 수 있도록 지원하여

중장년의 취업가능성을 제고하기위해 만들어졌다고해요!!

직무교육은 물론 참여수당으로 월 150만원까지 지원받을 수 있어 정말 좋은 지원프로그램인것같아요

1) 중장년 경력지원제 참여요건

2) 참여혜택

3) 진행순서

4) 신청방법

1. 온라인 신청

- 워크넷(work.go.kr) 접속 후 신청하기

https://www.work24.go.kr/cm/main.do

- 정부24에서 지역별 정책 확인가능

2.오프라인신청

- 전국 고용복지센터방문

-중장년일자리센터 및 지자체 중장년 지원센터 방문

3.문의 및 상담

지역별 연락처는 위 이미지를 참고하면되고

중장년내일센터를 통해 상담받으면 상세하게 알아볼 수 있다고해요

대표문의번호는 02-6021-1000

[웹프로그래밍 기초강좌 - HTML 08]

HTML 오디오태그, 비디오태그​

(HTML기초강좌 8강)

 ① 오디오 태그 (audio)

- HTML5에서는 audio태그를 이용하여 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공합니다.

- HTML5 표준이 공식적으로 지원하는 오디오 파일 형식은 MP3, WAV, OGG뿐입니다.

<예제>

  <audio src="sample_audio.mp3" controls="controls" autoplay muted> </audio>

<실행화면>

 ② 비디오 태그 (video)

- 웹페이지에 비디오를 보여주기위해 video태그를 사용합니다.

<예제>

  <video src="sample_video.mp4" controls="controls" poster="posterimage.jpg"> </video>

<실행화면>

[웹프로그래밍 기초강좌 - HTML 07]

HTML 이미지태그​

(HTML기초강좌 7강)

- <img> 태그는 웹페이지에 이미지를 삽입할때 사용됩니다.

- <img> 태그는 닫는태그가 없는 태그입니다.

- <img> 태그는 두개의 필수 속성이 있습니다.

-필수 alt속성은 사용자가 어떤 이유로 이미지를 볼 수 없는 경우(느린 연결, src 속성의 오류 또는 사용자가 화면 판독기를 사용하는 경우) 이미지에 대한 대체 텍스트를 제공합니다.

1) 절대경로  

Q. 우리은행이 어디에 있나요?
A. 경기도 안양시 동안구 벌말로66 1층에 있어요~

- 현재위치가 어디이든 한번에 갈 수 있는 고유한 경로(주소) 입니다.

- 예) C:\Users\Desktop\블로그\01.HTML\07.이미지태그

- 예) https://molra0000.tistory.com/

2) 상대경로

Q. 우리은행이 어디에 있나요?
A. 쭉직진해서 오른쪽 골목으로 들어가면 1층에 있어요~

- 현재위치를 기준으로 경로를 작성하는 방법입니다.

- 현재 코드를 작성중인 위치(폴더)를 기준으로 작성한 상대적인 경로입니다.

- 예) <img src="dophin.jpg>  : 현재 작성중인 파일과 같은 폴더 안에  이미지가 있습니다.

- 예) <img src="../dolphin.jpg" : 현재 작성중인 파일 상위 폴더 안에 있습니다.

/ : 가장 최상위 디렉토리 (root)로 바로 이동
./ : 현재 디렉토리를 의미합니다. 생략가능
../ : 상위 디렉토리
../../ : 두 단계 위의 디렉토리

<실습코드>

  <p>기본이미지-크기미지정</p>
  <img src="dolphin.jpg" alt="돌고래">
  
  <p>이미지 크기지정 가로500,세로300</p>
  <img src="dolphin.jpg" alt="돌고래" width="500" height="300">

<실행화면>

[웹프로그래밍 기초강좌 - HTML 06]

HTML 테이블태그 ( table )​

(HTML기초강좌 6강)

① 기본 테이블 구조 (table/tr/td)

- 테이블을 사용함으로 웹개발자가 데이터를 열과행으로 정렬하여 표현할 수 있습니다.

- 테두리를 설정해주지 않으면, 기본으로 빈 테두리로 테이블이 생성됩니다. (* 참고: css border으로 지정)

- 모든 테이블 행에는 셀의 수가 동일해야합니다. (셀을 합쳐야할경우, 아래 배우게 될 colspan,rowspan속성을 이용합니다.)

<예제>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>06강 테이블태그</title>
</head>
<body>
  <h1>테이블 만들기</h1>
  <table border="1">
    <caption>음식</caption>
    <tr>
      <th>한식</th>
      <th>양식</th>
      <th>중식</th>
    </tr>
    <tr>
      <td>불고기</td>
      <td>피자</td>
      <td>짜장면</td>
    </tr>
    <tr>
      <td>청국장</td>
      <td>오일파스타</td>
      <td>짬뽕</td>
    </tr>
    <tr>
      <td>우렁쌈밥</td>
      <td>스테이크</td>
      <td>탕수육</td>
    </tr>
  </table>
</body>
</html>

<실행화면>

② cospan - 열 합치기

- colspan 속성으로 테이블의 열(column)을 합칠 수 있습니다.

<예제>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>06강 테이블태그</title>
</head>
<body>
  <h1>테이블 만들기</h1>
  <table border="1">
    <caption>월화수 식단표</caption>
    <tr>
      <th>월</th>
      <th>화</th>
      <th>수</th>
    </tr>
    <tr>
      <td colspan="3">우유</td>
    </tr>
    <tr>
      <td colspan="2">쌀밥</td>
      <td>스파게티</td>
    </tr>
    <tr>
      <td>떡갈비</td>
      <td>오징어볶음</td>
      <td>피클</td>
    </tr>
  </table>
</body>
</html>

<실행화면>

③ rowspan - 행 합치기

- rowspan속성으로 테이블의 행(row)을 합칠 수 있습니다.

<예제>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>06강 테이블태그</title>
</head>
<body>
  <h1>테이블 만들기</h1>
  <table border="1">
    <caption>월화수 식단표</caption>
    <tr>
      <th>월</th>
      <th>화</th>
      <th>수</th>
    </tr>
    <tr>
      <td>쌀밥</td>
      <td>흑미밥</td>
      <td>현미밥</td>
    </tr>
    <tr>
      <td>떡갈비</td>
      <td>미니돈까스</td>
      <td rowspan="2">제육볶음</td>
    </tr>
    <tr>
      <td>배추김치</td>
      <td>피클</td>
    </tr>
  </table>
</body>
</html>

<실행화면>

④ table 직접 만들어보기 (문제)

-  아래의 테이블의 코드를 직접 짜보세요!

-  각각의 셀크기는 무시하고 만들시면 됩니다. 

<테이블 만들기 문제>

<답>  꼭 코드를 작성해보고 아래 더보기를  클릭하여 답을 확인하세요! 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>06강 테이블태그</title>
</head>
<body>
  <h1>식단표 테이블 만들기</h1>
  <table border="1">
    <caption>머행블로그 식단표</caption>
    <tr>
      <th>월</th>
      <th>화</th>
      <th>수</th>
      <th>목</th>
      <th>금</th>
      <th>토</th>
      <th>일</th>
    </tr>
    <tr>
      <td colspan="2">쌀밥</td>
      <td colspan="3">잡곡밥</td>
      <td>스파게티</td>
      <td>짜장면</td>
    </tr>
    <tr>
      <td>불고기</td>
      <td>떡갈비</td>
      <td>미니돈까스</td>
      <td>오징어볶음</td>
      <td>제육볶음</td>
      <td rowspan="2">피클</td>
      <td>단무지</td>
    </tr>
    <tr>
      <td>배추김치</td>
      <td>깍두기</td>
      <td>미소된장국</td>
      <td>동치미</td>
      <td>고추절임</td>
      <td>짬뽕국물</td>
    </tr>
  </table>
</body>
</html>

[웹프로그래밍 기초강좌 - HTML 05]

HTML 목록태그​

(HTML기초강좌 5강)

-  <ul> 태그는 unordered list의 약자로, 순서가 필요없는 목록을 만들때 사용됩니다.

- <ul> 태그 내부에 <li>요소 (list item)을 사용하여 각 항목을 표시합니다.

- 대부분의 브라우저에서 ul태그의 리스트에는 원과 같은 불릿(bullet)으로 표시됩니다.

<ul 리스트>

<!DOCTYPE html>
<head>
</head>
<body>
   <ul>
     <li>떡볶이</li>
     <li>피자</li>
     <li>타코</li>
     <li>치킨</li>
     <li>라면</li>
   </ul>
</body>
</html>

<실행화면>

-  <ol>태그는 순서가 있는 목록을 만들기 위해서 사용됩니다.

- <ul>과 동일하게 내부에 <li>로 리스트를 작성합니다.

- 대부분의 브라우저에서 리스트를 숫자(기본값)로 표현되며, 속성을 지정하여 변경이 가능합니다.

- <ol>리스트에는 type,start,reserved와 같은 속성을 사용할 수 있습니다.

<ol 예제>

<!DOCTYPE html>
<head>
</head>
<body>
   <ol>
     <li>떡볶이</li>
     <li>피자</li>
     <li>타코</li>
     <li>치킨</li>
     <li>라면</li>
   </ol>
</body>
</html>

<실행화면>

<ol 예제2>

<!DOCTYPE html>
<head>
</head>
<body>

  <p>type 영어대문자로 변경</p>
   <ol type="A">
     <li>떡볶이</li>
     <li>피자</li>
     <li>타코</li>
     <li>치킨</li>
     <li>라면</li>
   </ol>

<p>4부터 숫자리스트</p>
   <ol start="4">
     <li>떡볶이</li>
     <li>피자</li>
     <li>타코</li>
     <li>치킨</li>
     <li>라면</li>
   </ol>
   
<p>숫자 거꾸로 </p>
   <ol reversed>
     <li>떡볶이</li>
     <li>피자</li>
     <li>타코</li>
     <li>치킨</li>
     <li>라면</li>
   </ol>
</body>
</html>

<실행화면>

-  <dl>태그는 제목과 설명이 한 쌍인 설명 목록을 만들때 사용됩니다.

-  dl은 description list 의 약자입니다.

- dt,dd를 내부에 같이 사용되며 dt는 제목 / dd는 설명을 표시합니다.

<dl 예제>

<!DOCTYPE>
<html>
    <head>
    </head>
    <body>
       <dl>
           <dt>떡볶이</dt>
           <dd>가래떡을 적당한 크기로 잘라 여러 가지 채소를 넣고 양념을 하여 볶은 음식</dd>
           <dd>양념은 간장으로 하기도 하고, 고추장으로 하기도 한다.</dd>
           <hr />
           <dt>타코</dt>
           <dd>멕시코의 대표적인 요리의 하나</dd>
           <dd>옥수숫가루 반죽을 살짝 구워 만든 토르티야라는 빵에 야채나 고기를 싸서 먹는다.</dd>
       </dl>
    </body>
</html>

<실행화면>

[웹프로그래밍 기초강좌 - HTML 04]

HTML 글자관련 태그 알아보기​

(HTML 텍스트테그)

(1) 제목 태그 (h1~h6)

- HTML 제목은 h1부터 h6 태그로 정의됩니다.

- <h1>는 주요 표제 (가장중요)에 사용되야하며, 그다음에 <h2>.....<h6> 까지 순서대로 사용되어야합니다.

- 검색엔진은 제목을 사용하여 웹 페이지의 구조와 내용을 색인합니다.

* 브라우저는 제목 앞뒤에 일부공백을 자동추가 합니다.

* 제목태그는 HTML 제목에만 사용해야합니다. 텍스트를 굴게 만들거나 크게 만들기 위해 사용하면 안됩니다.

- 각 HTML 제목 태그에는 기본 크기가 있습니다. ( 추후 CSS로 변경은 가능 )

​

<코드 작성>

  <h1>h1 글자 태그입니다.</h1>
  <h2>h2 글자 태그입니다.</h2>
  <h3>h3 글자 태그입니다.</h3>
  <h4>h4 글자 태그입니다.</h4>
  <h5>h5 글자 태그입니다.</h5>
  <h6>h6 글자 태그입니다.</h6>

<실행화면>

(2) 본문 태그

<예재코드>

  <p>안녕하세요 p태그입니다.
  줄바꿈을 해도 줄바꿈이 되지않습니다.</p>
  <hr />
  <p>
    안녕하세요. p태그입니다 <br />
    줄바꿈 확인하기.
  </p>
  <pre>
    안녕하세요 pre태그입니다.
    줄바꿈을 하면
    줄바꿈 한대로 출력됩니다.
  </pre>

<실행화면>

<a href="https://molra0000.tistory.com/">모행블로그 바로가기</a>

1.  앵커태그 <a>는 하이퍼링크를 정의합니다.
2.  href 속성으로 이동할 페이지의 url을 지정합니다.
3.  기본적으로 링크된 페이지는 현재 브라우저 창에서 표시됩니다. 이를 변경하려면 링크에 대해 다른 대상을 지정해야합니다
4. target 속성 지정으로 링크된 페이지를 여는 방법을 변경할 수 있습니다.

<예재코드>

<a href="https://blog.naver.com/molra0000" target="_self;">모행블로그 바로가기</a>
<a href="https://blog.naver.com/molra0000" target="_blank;">모행블로그 바로가기</a>
<a href="https://blog.naver.com/molra0000" target="_parent;">모행블로그 바로가기</a>
<a href="https://blog.naver.com/molra0000" target="_top;">모행블로그 바로가기</a>

* 각 속성별로 링크된 페이지를 여는 방법이 달라지니, 직접 코드를 작성하고 실행하여 확인을 해보셔야 합니다.

<예재코드>

<!--기본글자-->
<p>p태그 : Hello Wolrd!</p>
<!--<b>글자태그--> <hr>
<b>b태그 : Hello World!</b>
<!--<i>글자태그--> <br>
<i>i태그 : Hello World!</i>
<!--<small>글자태그--> <br>
<small>small태그 : Hello World!</small>
<!--<sub>글자태그--> <br>
<sub>sub태그 : Hello World!</sub>
<!--<sup>글자태그--> <br>
<sup>sup태그 : Hello World!</sup>
<!--<del>글자태그--> <br>
<del>del태그 : Hello World!</del>
<!--<ins>글자태그--> <br>
<ins>ins태그 : Hello World!</ins>

<실행화면>

1. 특수문자가 포함된경우 브라우저에서 웹소스의 일부로 인식하여 오류가 발생할 수 있기때문에 특수문자를 문자표현으로 대체하여 사용합니다.
2. 예를 들어 <>안에 코드 형식으로 쓰고 그대로 보여주고 싶어도 코드로 인식하여 화면에 표시가 안되는 경우가 발생하기때문에 사용됩니다.
3. 전체 특수 문자 표 보러가기 : https://dev.w3.org/html5/html-author/charref

- 사실 특수문자를 모두 외워서 사용할 필요는 없습니다.

- 이미 HTML을 실습하기위해 다운받은 ATOM에디터나 브라켓 등 에디터에서 자동으로 생성되어 선택할 수 있습니다. 

[웹프로그래밍 기초강좌 - HTML 03]

HTML 기본 용어 , 기본구조  그리고 웹표준이란?​

(HTML기초강좌 3강)

- HTML 요소는 시작태그부터 종료태그까지의 모든 것입니다.

- 태그는 <> 꺽쇠 괄호로 표기합니다.

- HTML 태그는 대부분 시작태그 / 종료태그가 있지만, 일부 태그들은 빈요소로 종료태그없이 사용될 수 있습니다.

(<br>, <img> 등)

- 모든 HTML 요소는 속성을 가질 수 있습니다.

- 속성은 요소에 대한 정보를 제공합니다.

- 속성은 항상 시작태그에 지정합니다.

- 속성은 대부분 name="value" 와 같이 이름/값이 쌍으로 제공됩니다. (href="molra0000.tistory.com")

(1)  href 속성 

<a href="https://molra0000.tistory.com">모행블로그 바로가기</a>

- <a>태그 (앵커태그)는 하이퍼링크를 정의합니다.

- href 속성으로 이동할 페이지의 url을 지정합니다.

[실행결과]

(2)  src 속성 

<img src="1.jpg">

- <img> 태그는 html 내에 이미지를 첨부할때 사용합니다.

- src 속성으로 이미지 경로값을 표시합니다

(3)  width, height 속성 

<img src="1.jpg" width="500" height="500">

- 폭과 높이를 지정하는 속성입니다.

(4)  대체속성 (alt) 

<img src="logo.png" alt="모행블로그 로고">

- alt 속성은 img태그의 필수 속성입니다. 

- 이미지를 대채할 수 있는 내용을 텍스트로 삽입합니다.

- 시각장애인에게도 해당 이미지가 무엇인지 알려줄 수 있는 설명을 작성합니다.

- 연결속도가 느리거나, src속성오류가 있을때에 스크린리더를 통해 음석으로 확인이 가능합니다.

(5)  스타일속성 (style) 

<p stlye="color:red;">글씨색 빨간색으로 해주세요.</p>

-  스타일을 지정하는 속성입니다.

- 폰트색상, 크기, 폰트체등을 지정합니다.

- css를 지정하는 속성입니다.

(6)  언어속성(lang) 

<!DOCTYPE html>
<html lang="en">

- 웹페이지의 언어를 지정하는데에 사용합니다.

(5)  제목 속성(title) 

<h1 title="나는 툴팁입니다.">모행블로그 입니다.</h1>

-  title속성은 요소에 대한 몇가지 추가 정보를 정의합니다.

- 제목 속성 값은 요소 위로 마우스를 가져가면 툴팁으로 표시됩니다.

<!-- 주석입니다. -->

-  주석은 코딩중에 작성하는 메모라고 생각하시면됩니다.

- 웹브라우저 상에서는 보이지않습니다.

- 일부소스를 임시적으로 사용하지않을때에도 주석처리를 하기도 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>웹 페이지 제목</title>
  <link rel="stylesheet" href="css/basic.css">
  <script src="js/basic.js"></script>
  <base href="https://www.molra.com/test/" target="_blank">
</head>
<body>

</body>
</html>

① head 에 작성되는 코드는 웹브라우저상에 표시되지않습니다.

① head 에 작성되는 코드는 웹페이지의 정보를 표시합니다. (예를들면, 해당페이지를 검색엔지에 노출시킬지, 해당페이지의 설명, 스타일시트 연결, 스크립트 연결 등을 작성합니다.

① head [내부에 넣을 수 있는 태그 종류]

② body 에 작성되는 코드는 웹페이지 상에 보여지는 내용들을 작성합니다.

(1)  웹표준이란? 

- 웹에서 표준적으로 사용되는 기술이나 규칙을 말합니다.

- 표준화 단체인 W3C가 권고한 표준안에 따라 웹사이트를 작성할때 이용하는 HTML,CSS,JavaScript등에 대한 규정이 담겨있습니다.

- 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동해야함을 의미합니다.

- 표준 스펙을 잘 지키는 것 뿐만 아니라 마크업(XHTML)고 표현 및 레이아웃(CSS) 및 사용자 행위제어를 잘 분리하는 고급 홈페이지 구추방식입니다.

- 현재는 거의 사라졌지만 ActiveX, Flash, 공인인증서, 플러그인과 같은 기술은 표준이 아닙니다.

(2)  웹표준 관련 기술 

(3)  웹표준 장점 

- 컨텐츠의 수정, 운영관리가 편리해집니다. 표준화된 구조와 분리된 CSS를 제어하기 때문에 수정에 대한 편의성이 증대됩니다.

- 웹 접근성이 향상됩니다. 다양한 브라우저( 익스플로러, 크롬, 사파리, 파이어폭스 등) 환경에서도 표준화된 컨텐츠를 보여줄 수 있습니다.

- 검색엔진에 최적화 됩니다. 표준화된 페이지는 구조화가 잘되어 있기 때문에 검색엔진 색출에 대한 기회 요소가 많아집니다.

- 데이터베이스를 효율적으로 사용할 수 있습니다. 웹 표준은 소스를 효율적으로 사용하여 서버공간과 데이터 부화를 줄입니다.

- 다양한 장치에서의 호환이 가능합니다. 별도의 해상도에 맞는 홈페이지 제작 없이 하나의 홈페이지로 여러 형태로 변형이 가능합니다(미디어쿼리)

​

(4)  웹표준 관련기구 

- W3C (World Wide Web Consortium) : 월드 와이드 웹 컨소시엄은 국제적인 웹 기술 표준 기구를 말하며 정보/의견교환/아이디어 창출/가이드라인/소프트웨어 /독립적 사고 그리고 도구 및 규칙 등의 표준안을 제정함으로써 웹의 잠재력을 이끌어 내는 것을 목표로 하고 있습니다.

-URL : https://www.w3.org/

[웹프로그래밍 기초강좌 - HTML 02]

HTML 실습환경 만들기 + 아톰에디터(추천플러그인)​

(아톰에디터 설치 및 추천 플러그인)

HTML을 공부하려면 기본적으로

실습환경을 만들어 놓아야합니다.

기본적으로 운영체제에 에디터가 있어

HTML코드를 작성할 수는 있지만

좀더 편리하고 좀더 빠르게 코드를 작성하기 위해

편리한 에디터를 설치하고자합니다.

많은 사람들이 GITHUB의 아톰 또는 ADOBE의 brackets ,

Visual Studio Code 등을 사용하는데요.

우리는 아톰에디터로 실습을 하려고합니다.

원래는 실시간 미리보기의 편리함때문에

brackets를 사용하였는데,

무엇때문인지...요새 오류가 정말 많더라구요 ...

1) 아톰에디터 설치 바로가기 ☞ https://atom.io/

2) 홈페이지에 들어가면 바로 메인에 다운로드 버튼이 있습니다.

3) 다운로드 받으셔서 다른 설정도 필요없이 계속 다음다음 넘기셔서 다운받으면됩니다.

설치후, 아톰을 처음 실행하면 이것저것 많이 떠있는데 다 꺼버리시면 됩니다.영어로 마구마구 떠있어서 이게뭐얏!! 하실필요없어요 . 그냥 무시하시면됩니다.

1) 새 파일 만들기 (File - New File  또는 단축키 Ctrl+N)

- HTML파일을 만들기 위해 새파일을 만듭니다.

2) HTML파일로 만들기 ( File - Save 또는 단축키 Ctrl +S)

-  HTML파일로 저장합니다.

-  HTML을 실행하기 위해서는 확장자가 html인 파일을 만들어야합니다.

- 파일명 끝에 .html으로 끝난다고 생각하시면 됩니다.

3) 1.html파일 만들기

-  확장명을 html로 하여 html파일을 만듭니다.

-  테스트용으로 1.html을 만들었습니다.

4) 1.html을 웹 브라우저로 실행하기.

-  웹브라우저에서 1.html을 잘 불러오는지 확인하기 위해 1.html 파일에 Hello World!!를 작성하였습니다

- 아톰 본문에서 우클릭하여 Show in Explorer를 클릭하면 1.html 파일 폴더가 바로 뜹니다.

-  해당 파일을 클릭하면 웹브라우저에 HelloWorld가 쓰여있습니다.

윈도우, ios 이런 기본 운영체제에 기본 편집기(에디터)가 있는데도 왜 별도로 다운까지 받아서 써야하냐면정말 무시할 수 없는 기능들 때문이애요 ㅠ.ㅠ다양한 플러그인을 추가해서 사용할 수 있고,해당 기능들이 너무너무 완전 편리합니다.

하드코딩하라고 아무리해도 한번 사용하면 그담부터는 아톰이나 brakets같은 에디터를사용하지 않을 수가 없습니다.

수많은 플러그인들이 있지만 그중에서도 가장 필수인 플러그인 몇가지를 추천하겠습니다.

* 사실 이러한 플러그인들이 HTML 기초 강좌에서는 꼭 필요한 것은 아니니귀찮으면 패스하시면 됩니다.

ATOM(아톰) 에디터 추천 플러그인 01 - EMMET   

HTML이나 CSS를 쉽게 작성할 수 있도록 도와주는 플러그인 입니다.

EMMET에서 제공하는 특정 Syntax로 반복적인 코드를 아주 짧고 쉽게 작성할 수 있습니다.

웹 개발시 필수 플러그인으로 거의 모두가 사용하신다고 생각하시면됩니다.

ATOM(아톰) 에디터 추천 플러그인 02 - atom-beautify

제가 완전 애용하는 플러그인입니다.beautify 이름 그대로 코드를 보기 좋게 예~쁘게 만들어주는 플러그인 입니다.코드의 indentation을 이쁘게 만들어줘서 보기 쉽게 만들어줍니다.코드를 작성하다 보면 코드는 접접 길어지고 복잡해집니다.들여쓰기를 제대로 하지않으면 빠르게 찾아수정하기가 힘들어집니다.중간중간 atom-beautify로 정리하면서 작성하면 코드를 예쁘게 만들어주기에 꼭 사용하는 플러그인입니다.indentation은 코딩시 굉장히 중요한 작업입니다.

ATOM(아톰) 에디터 추천 플러그인 03 - autocomplete-html 

HTML을 공부하면서 도움을 줄 수 있는 플러그인 입니다.

HTML태그를 자동완성시켜주는 플러그인입니다.

EMMET을 사용하면 되긴하지만, 가볍게 사용하기 좋습니다.

CSS,SQL등 AUTOCOMPLETE시리즈가 있습니다.

ATOM(아톰) 에디터 추천 플러그인 04 - color-picker   

코드를 작성하는 도중에 포토샵 스포이트 처럼 색상을 찝어서 선택할 수 있습니다.색상을 보이는대로 선택하면 코드를 자동으로 작성해줍니다.CSS에 도움이 되는 플러그인으로 많이 사용됩니다.

ATOM(아톰) 에디터 추천 플러그인 05- minimap   

반응형작업(미디어쿼리)할때 유용하게 쓰이는 플러그인입니다.말그대로 화면상의 긴 코드를 미니맵으로 보여주기때문에어느정도 위치에 있는지 확인할 수 있습니다.

ATOM(아톰) 에디터 추천 플러그인 06 - atom-live-server   

Brakets에디터에서 실시간 미리보기 대신에 사용하는 플러그인입니다.브라켓에서는 정말 말그대로 실시간 미리보기이지만atom에디터의 atom-live-server은 완전 실시간은아닙니다.코드를 저장하고 확인하면 웹브라우저에서 확인이 가능합니다.atom-live-server 설치후 단축키는 Ctrl + Alt + 3입니다.저는 실시간 미리보기를 브라켓에서 너무 잘사용해왔기 때문에,이 플러그인은 필수로 설치합니다.

HTML을 본격적으로 공부하기전에, 

직접 코드를 작성하고 실습해보기위해

깃허브에서 제공하는 ATOM( 아톰) 에디터를 설치하고

사용하는 방법 및 추천 플러그인에 대해 공부해봤습니다.

순서대로 설치후에 직접 실습하시면서 공부해보시면 될 것같습니다.

[웹프로그래밍 기초강좌 - HTML 01]

코딩 그리고 HTML이란?​

HTML (Hypertext Markup Language)

코딩교육이 필수가 된지  벌써 몇년이나 지났네요

우리나라에서는 2018년부터

전국 초중고교에서

소프트웨어교육(코딩교육)이

의무화되었습니다.

​

​

그렇다면 코딩은 도대체 뭔가요?

​

프로그래밍과 같은 뜻으로 쓰이고 있습니다.

구체적으로, 코딩은 C언어,자바,파이썬,html,css등 프로그래밍 언어를 입력하는 과정이고,​

프로그래밍은 프로그래밍언어를 통해 프로그램을 만드는 일을 뜻합니다.

​

코딩이 중요한 이유는 인공지능, 사물인터넷, 지능형 로봇, 빅 데이터 분석 및 활용 등 4차 산업혁명시대를

대변하는 모든 것이 ICT(정보통신기술)을 바탕으로 한 소프트웨어를 통해 구현되기 때문입니다.

​

웹 문서를 만들기 위해서 사용하는

가장 기본적인 언어입니다.

하이퍼텍스트를 작성하기 위해 개발된 언어로

퍼블릭도메인, 즉 저작권이없는 무료 언어입니다.

①  HTML은 모든 프로그래밍 언어중 가장 쉽다고 장담할 수 있습니다.

②  HTML은 퍼블릭도메인, 즉 저작권이 없는 완전 무료입니다.

③  HTML은 가장 접하기 쉬운 프로그래밍 언어로 전문 개발자가 아니어도 배워두면 유용합니다.

웹 프로그래밍의 가장 기본이라고 말할 수 있는 HTML !!

정말 모든 프로그래밍 언어들중 가장 쉽다고 장담할 수 있습니다.

하나씩 하나씩 따라해보면 누구나 쉽게 익힐 수 있다고 생각합니다.

굉장히 직관적인 언어로 따로 이해가 필요한 언어가 아니라

하나씩 실습하면서 익히면 금방 배울 수 있는 언어입니다.

첫 코딩 공부의 언어로 가장 추천드리는 HTML!!

웹프로그래밍 세계에 오신것을 환영합니다 !!

​

​