반응형

전체 글 20

10강 - 주석 태그 (Comment Tag)

안녕하세요! "진로상담&진로 강연"하는 남자 "월횽(박진형)”입니다. 오늘은 10강 주석 태그 (Comment Tag) 에 대해서 알아보는 시간을 만들었는데요. 오늘 수업도 여러분에게 유익한 수업이 되었으면 좋겠습니다. 그럼 오늘 수업을 지금 바로 시작하도록 해보겠습니다. 주석 태그 (Comment Tag) 란..? 주석 태그는 우리가 웹사이트를 다른 사람들에게 보여줄 때 보여주고 싶지 않은 부분이 있죠? 그 부분을 코딩으로 웹사이트야 여기부터 여기까지는 다른 사람들이 볼 수 없게 만들어줘! 라고 말하는 태그 라고 생각하시면 조금 수월하게 이해가 가능합니다. 주석 태그 (Comment Tag) 사용법 주석 태그의 사용 방법은 매우 간단합니다. 내가 보여주고 싶지 않은 부분의 맨 앞 부분에 이 표시를 해주..

9강 - 리스트(list)를 나타내는 태그 (li, ul, ol tag)

안녕하세요! "진로상담&진로 강연"하는 남자 "월횽(박진형)”입니다. 오늘은 9강 리스트를 나타내는 태그의 수업을 진행해보려고 하는데요. 리스트를 타나내는 태그에 대해서 수업을 바로 같이 진행해보겠습니다. 리스트를 나타내는 태그란..? 리스트를 나타내는 태그란 우리가 리스트를 나타낼 때 사용하는 태그입니다. 예를 들어서 수업의 목차를 작성할 때 1. 기초 2. 초급 3. 중급 4. 고급 이런 방법으로 리스트 목록 형태를 만들지 않나요? 이렇게 리스트 형태를 만들 때 사용하는 태그가 , , 태그 입니다. 하지만 3 가지의 태그가 약간씩 다르기 때문에 3 가지의 리스트 태그에 대해서 알아보도록 하겠습니다. 우선 태그에 대해서 알아보겠습니다. li Tag 는 자식 태그라고 생각하시면 됩니다. 때문에 자식은 부..

8강 - 이미지 태그 (img tag)

안녕하세요! 진로강연 & 진로교육을 진행하고 있는 강연하는 남자 “월횽”입니다. 오늘은 이미지 태그에 대해서 알아보는 시간을 만들었는데요. 이미지 태그 (img tag) 에 대해 알아볼까요? ​​​이미지 태그 (img tag) 란..? ​​이미지 태그는 웹사이트 또는 블로그에 텍스트 이외에 꾸며줄 수 있는 태그인데요. 이미지 태그를 통해서 텍스트를 조금 더 빛나게 만들어주고 소비자의 이해력을 더 높여줄 수 있는 이미지를 삽입할 수 있는 태그라고 생각하시면 됩니다. ​​​이미지 태그 (img tag)는 어떻게 사용하나요? ​​​이미지 태그 (img tag) 사용 방법은 우선 기본적으로 이미지가 있다는 상황에 예시를 통해 보여드리겠습니다. 혹여나 이미지가 없다면..? 예시를 위해 직접 제작한 아래 이미지를 ..

7강 - 줄바꿈 태그 (br tag)

안녕하세요! "진로상담&진로 강연"하는 남자 "월횽(박진형)”입니다. 오늘은 줄바꿈 태그 tag 에 대해 알아보는 시간을 만들었습니다. 그럼 지금 바로 시작해보겠습니다. ​​​줄바꿈 태그란...? 말 그대로 우리가 문장을 사용하며, 사용하는 문장이 길어지는 경우에 아래로 엔터(Enter)를 눌러서 현재 문단에서 하단 문단으로 넘어가는 방법을 사용하는 것과 같은 것입니다. ​​​줄바꿈 태그는 어떻게 사용하나요? 줄 바꿈 태그 tag 는 기존에 배웠던 p, head, body 와 조금 다른 점이 있다면 시작하는 태그가 없이 끝나는 태그 하나로 동작하는 태그입니다. ​​​​​​​예시를 통해서 같이 확인해볼까요? 예시) 안녕하세요. 진로 교육을 진행하는 강연하는 남자 “월횽”입니다. 코딩 수업을 진행하게 되어서..

6강 - 단락 태그 (p tag)

안녕하세요! "진로상담&진로 강연"하는 남자 "월횽(박진형)”입니다. 오늘은 6강 단락을 의미하는 태그 태그에 대해서 알아보려고 합니다. 그럼 지금 바로 시작하도록 하겠습니다. 앞으로 코딩을 진행하게 되면 p tag를 많이 사용하시게 됩니다. 우선은 p 태그를 어디에 사용하는지 같이 확인 해볼까요? p tag는 홈페이지 또는 블로그에 많이 사용하는 태그 중 하나 인데요. 예를 들면 개인 블로그를 만들어서 블로그에 내용을 작성하는 예시를 들어보도록 하겠습니다. 단락 태그를 사용하는 방법 (개인 블로그) 블로그 예시 ) 안녕하세요. 강연하는 남자 "월횽"입니다. 오늘은 p 태그에 대해서 알아보려고 합니다. p 태그는 이렇게 사용한다고 생각하면 됩니다. 단락 p 태그를 사용하는 방법은 열어주는 태그를 사용하고..

5강 - 굵은 글씨 태그 (strong tag)

안녕하세요! "진로상담&진로 강연"하는 남자 "월횽(박진형)”입니다. 오늘 수업 5강에서는 굵은 글씨를 사용할 수 있는 strong tag 에 대해 알아보는 시간을 만들었습니다. 그럼 간단하게 태그에 대해서 알아볼까요? 우선 우리가 일반적으로 사용하는 태그 얇은 글씨가 기본으로 적용되어 있는데요. 저번 시간에 배웠던 제목 태그는 제외입니다. 아래 예시를 통해서 차이점을 확인해보까요? ​​​ ​strong tag 사용 vs strong tag 미사용 차이 예시) strong tag 사용 전 - 안녕하세요. “월횽” 입니다. ​​strong tag 사용 후 - 안녕하세요. “월횽” 입니다. ​​strong tag 사용하는 이유 ​이렇게 굵은 글씨와 기본 글씨의 차이점이 분명하게 육안으로 확인이 가능한 태그입..

4강 - 제목 태그 (h1, h2, h3, h4, h5, h6)

안녕하세요! "진로상담&진로 강연"하는 남자 "월횽(박진형)”입니다. 오늘 진행할 수업은 html 본문에서 사용하는 제목 태그 , , , , , 총 6 가지 제목을 사용하는 방법에 대해서 알아보려고 하는데요. 지금 바로 수업을 진행하도록 해보겠습니다. 제목 태그의 종류는 총 6 가지의 종류로 나눠져있으며, 차이점은 뒤에 어떤 숫자를 사용하는가에 따라서 글자의 크기가 크거나 또는 작습니다. 사용방법은 아래 예시를 통해서 확인해볼까요? 제목 태그 사용법) 적용 예시) h1 제목 태그 h2 제목 태그 h3 제목 태그 h4 제목 태그 h5 제목 태그 h6 제목 태그 위와 같이 h1 태그 ~ h6 태그까지 알아봤는데요. h1 태그에서 h6태그로 갈 수록 점점 크기가 작아지는 것을 볼 수 있습니다. 가장 많이 사용..

제 3강 - 메타 태그(meta tag) 종류 & 의미

안녕하세요! 진로교육 & 진로상담을 진행하고 있는 “월횽”입니다. 오늘은 html 수업 제 3강 meta tag 종류와 모음 그리고 의미에 대해서 알아보려고 합니다. UTF-8은 유니코드를 위한 가변 길이 문자 인코딩 방식입니다. UTF-8은 Universal Coded Character Set + Transformation Format – 8-bit 의 약자입니다. —— 이하 생략 —— 키워드는 SEO 검색엔진에 노출되고 싶은 키워드를 작성하는 공간이라고 생각하시면 됩니다. 개인적으로 가장 글의 주제와 흡사한 내용을 앞에서부터 작성하는데요. 본문 또는 제목과 관련없는 내용은 제외하는 것을 추천해드리는 방법입니다. 사용 방법은 아래 예시를 통해서 확인해보시죠! —— 이하 생략 —— author 속성은 작..

제 2강 - 메타 태그 (meta tag) 기본

안녕하세요. 진로강연 & 진로교육을 진행하는 강연하는 남자 "월횽"입니다. 오늘은 html에서 head 부분에 들어가는 meta 태그에 대해서 알아보려고 합니다. 어제 진행했던 수업은 기본적인 html 기본 구조와 사용법을 진행했으며, 오늘은 그 구조에 들어가는 태그입니다. 아래 예시를 확인해볼까요? 예시) 메타태그(Meta tag)란? 우선 meta tag는 한글로 '메타 태그' 라고 하며, 사용하는 이유는 SEO 라고 해서 우리가 검색엔진에 노출을 시키기 위해서 사용하는 태그입니다. 웹사이트를 돌아다니며, 웹사이트를 확인하는 봇이 크롤링이라는 것을 하는데요. 우리가 제작한 웹사이트는 이런 웹사이트야! 라고 알려주는 용도입니다. 메타태그(Meta tag)는 하이퍼 텍스트(Hyper text) 생성 언어..

제 1강 - html 기본 태그

안녕하세요. 진로강연하는 남자 [월횽]입니다. 오늘은 제 1강 html의 기본태그 "!DOCTYPE html, html, head, body"에 대해 알아보겠습니다. 1. DOCTYPE html 의미: html 기본태그 'DOCTYPE html'은 우리가 브라우저에게 지금부터 내가 Doc에서 사용하려는 타입의 언어는 html5 언어를 사용할 것이야!라고 알려주는 방법입니다. html5 선언 - html5 이전 선언 방법 html 4.01 Strict 선언 html 4.01 Strict4.01 Transitional 선언 html 4.01 Strict4.01 Frameset 선언 XHTML 1.0 Strict 선언 XHTML 1.0 Transitional XHTML 1.0 Frameset XHTML 1.1..

반응형