Loading...
2019. 4. 23. 21:43

[CSS 수업] 2강 - CSS 적용 방법

안녕하세요! "진로상담ㅣ진로강연"을 진행하는 강연하는 남자 "월횽(박진형)”입니다. 오늘은 CSS 수업 제 2강 CSS 기본 사용법에 대해 알아보려고 합니다. CSS 뜻ㅣ사용하는 이유 CSS는 Casting Style Sheets의 약자입니다. 즉 HTML으로 제작한 웹사이트의 웹 페이지를 보기 좋게 스타일 시트 코딩을 사용하여, 꾸며주는 역할을 하는 코딩입니다. CSS 기본 적용 방법(1) CSS는 기본적으로 사이에 사용하는 방식입니다. 위와 같이 html 파일에 CSS를 적용하는 것인데요. 부분에 CSS 파일을 적용시켜줘! 라고 HTML에게 전해주는 것입니다. link rel="stylesheet" = 이 부분에 스타일 시트를 적용할 것이야라고 알려주는 것입니다. type="text/css" = 타입..

2019. 4. 9. 06:30

[CSS 수업] 1강 - CSS란 무엇일까?

안녕하세요! "진로상담ㅣ진로강연"을 진행하는 강연하는 남자 "월횽(박진형)”입니다. 오늘부터 진행할 수업은 CSS 수업을 진행하려고 합니다. CSS 수업을 진행하기 전에 HTML을 모르고 계신다면, 이전에 진행한 HTML 수업을 먼저 진행하고 CSS 수업을 진행하실 것을 추천해드립니다. 그럼 오늘은 CSS가 무엇인지 간단하게 개념을 파악하는 시간을 가져보겠습니다. CSS란 무엇일까..? CSS는 쉽게 설명하면 우리가 건물을 짓기 위해 만들어둔 철사 뼈대 위에 벽돌을 쌓아서 외관을 만들어내는 작업입니다. HTML은 단순하게 글씨(텍스트)만 작성하며, 직접적으로 꾸며주는 태그가 아니기 때문에 CSS를 사용해서 HTML을 꾸며주는 것입니다. 글씨에 색상 또는 효과를 주거나, 배경의 색상을 바꾸거나, 도형을 만..

2019. 4. 8. 06:30

[월횽]이 추천하는 프로그래밍을 위한 무료 도구 3가지

안녕하세요! "진로상담ㅣ진로 강연"하는 남자 "월횽(박진형)”입니다. 오늘은 월횽이 추천하는 프로그래밍을 위한 무료 도구를 추천해드리려고 합니다. 제가 추천하는 기준은 어디까지나 제가 이전에 올린 HTML 프로그래밍을 위한 초보자들에게 필요한 도구이며, 앞으로 진행할 HTML 수업 이외 CSS, JAVA Script, php, Ajax 등 수업에도 사용할 수 있습니다. 저 '월횽'은 맥(MAC)을 통해 작업하고 있으며, 퍼블리셔, 백엔드, 프론트엔드 관련 프로그래밍을 진행하고 있습니다. 그럼 개인적으로 3가지의 무료 프로그래밍 도구를 추천해보도록 하겠습니다. 3위 - 메모장(NotePad) 우선 3위로 선택한 메모장을 프로그래밍 도구로 추천하는 이유는 아래와 같습니다. 맥OS 또는 리눅스 OS (우분투,..

2019. 3. 19. 06:30

17강 - 타이틀 (Title)

안녕하세요! "진로상담&진로 강연"하는 남자 "월횽(박진형)”입니다. 오늘 수업은 17강 - 타이틀 (Title)에 대해 알아보려고 하는데요. 사용방법 그리고 어디에 사용하는지 같이 예시와 함께 알아보는 시간을 만들어보도록 하겠습니다. 그럼 시작하겠습니다. 타이틀 (Title) 이란..? 타이틀 (Title)은 사이트 제목을 알려주는 요소인데요. 쉽게 설명하면 우리가 어떤 매장에 들어갈 때 그 매장의 이름이 무엇인지 알아야 검색도 하고 찾아보고 할 수 있다보니 사용자에게 타이틀 (Title)을 통해 이 사이트명은 "이것"이야 라고 알려주는 것입니다. 예를 들면 원하는 사이트명이 "자스트"라면 타이틀 (Title) 속성을 사용해서 "자스트"라는 것을 사용자에게 알려주고 검색창에 "자스트"를 검색할 수 있도..

2019. 3. 18. 14:07

16강 - 아이프레임 (Iframes)

안녕하세요! "진로상담&진로 강연"하는 남자 "월횽(박진형)”입니다. 오늘은 16강 Iframe 수업을 진행해보려고 합니다. 아이프레임이 무엇인지 그리고 어떤 방법으로 사용하는지 예시를 만들고 같이 실제로 적용해보는 수업을 진행하도록 하겠습니다. 그럼 수업을 시작하겠습니다. 아이프레임 (Iframe) 란..? 아이프레임 (Iframes) 은 html 안에 또 다른 html을 보여주는 방법인데요. 내부에 있는 또 다른 프레임이라고 해서 인라인 프레임 (Inline Frames)이라고 말하기도 합니다. 그럼 아이프레임 (IFrames) 사용 방법에 대해 알아보겠습니다. 아이프레임 (Iframes) 사용 방법 아이프레임 (Iframe) 사용 방법은 우선 기본적으로 열어주는 고등어 부호를 사용해주고 < 다음에 ..

2019. 3. 11. 06:30

15강 - 아이디 속성 (ID Property)

안녕하세요! "진로상담&진로 강연"하는 남자 "월횽(박진형)”입니다. 오늘은 15강 - 아이디 속성 (ID Property) 에 대해서 알아보는 시간을 가지려고 합니다. ID 수업을 진행하기 전에 이전 수업 [ 14강 - Class (클래스) ] 수업을 꼭 같이 확인해주시는 것을 권장해드립니다. 그럼 수업을 시작하도록 해보겠습니다. 아이디 속성 (ID Property) 이란..? 아이디 id 속성은 html 문서의 요소에게 고유한 ID를 지정하는 방법인데요. 우리가 게임에 접속하기 위해 게임 ID를 만들면 게임 회사에서 우리에게 고유한 ID를 허가해서 제공해주는 것과 비슷합니다. 예를 들면 우리가 코딩 마스터이고 우리는 코딩을 하면서 html 문서에서 특정 부분에 너는 이 ID 값을 사용하면 될 것 같아..

2019. 3. 8. 06:30

14강 - 클래스 속성 (Class Property)

안녕하세요! "진로상담&진로 강연"하는 남자 "월횽(박진형)”입니다. 오늘은 14강 - 클래스 (Class) 수업을 진행해보려고 합니다. 클래스 (Class) 수업에서는 클래스 (Class)는 무엇인지 사용 방법은 어떤 방법으로 사용하는지 알아보려고 합니다. 클래스 (Class) 수업을 진행하기 전에 [ 13강 - 인라인 엘리먼트 ] 또는 [ 12강 - 블록 레벨 엘리먼트 ] 수업을 먼저 진행하는 방법을 권장해드립니다. 그럼 수업을 시작해보겠습니다. 클래스 (Class) 란..? 우리가 기존에 배웠던 블록 레벨 엘리먼트 로 예시를 들어보겠습니다. 우리는 이전 예시에서 아래와 같은 예시를 사용했었는데요. 예시 1) 내용1 내용2 내용3 내용4 예시에 div 태그를 적용하는 방법은 아래와 같이 적용 했었습니..

2019. 3. 7. 06:30

13강 - 인라인 엘리먼트 (Inline elements)

안녕하세요! "진로상담&진로 강연"하는 남자 "월횽(박진형)”입니다. 오늘 진행하려고 하는 수업은 13강 인라인 엘리먼트 (Inline elements) 입니다. 혹여나 인라인 엘리먼트와 반대의 블록 레벨 엘리먼트 자료가 필요하시다면 [ 12강 - 블록 레벨 엘리먼트 ] 수업을 꼭 확인해주세요! 그럼 수업을 시작하도록 하겠습니다. 인라인 엘리먼트 (Inline elements) 란..? 인라인 엘리먼트 (Inline elements) 는 블록 레벨 엘리먼트와 다르게 좌, 우 가로 영역으로 쌓아가는 태그라고 생각하시면 됩니다. 인라인 엘리먼트는 태그를 가장 많이 사용하는데요. 우리 수업에서는 태그를 통해서 인라인 엘리먼트를 알아보는 수업을 진행하겠습니다. 인라인 엘리먼트 (Inline elements) 사..

2019. 3. 6. 06:30

12강 - 블록 레벨 엘리먼트 (Block level Elements)

안녕하세요! "진로상담&진로 강연"하는 남자 "월횽(박진형)”입니다. 오늘은 12강 - 블록 레벨 엘리먼트 (Block level Elements) 에 대해서 알아보는 시간을 만들게 되었는데요. 블록 엘리먼트에 대해 간단하게 개념을 알아보고 예시를 통해 어떤 방법으로 사용하는 것인지 알아보려고 합니다. 그리고 다음 수업에서는 블록 엘리먼트와 다른 인라인 엘리먼트에 대해 알아보려고 하는데요. 우선은 오늘 진행할 수업 블록 레벨 엘리먼트에 대해서 기본적인 이론부터 함께 알아보도록 하겠습니다. 블록 레벨 엘리먼트 (Block level Elements) 란..? 블록 레벨 엘리먼트는 말 그대로 블록처럼 아래서 위로 하나씩 쌓아 올리는 태그라고 생각하시면 이해하기 쉽습니다. 블록 레벨 엘리먼트에는 , ~ 등이 ..

2019. 3. 5. 06:30

11강 - 링크 태그 (Link Tag)

안녕하세요! "진로상담&진로 강연"하는 남자 "월횽(박진형)”입니다. 오늘은 11강 링크 태그 (Link Tag) 에 대해서 알아보는 시간을 만들게 되었습니다. 오늘 수업도 여러분에게 유익한 수업이 되었으면 좋겠습니다. 그럼 링크 태그에 대해서 알아보겠습니다. 링크 태그 (Link Tag) 란..? 링크 태그의 기본은 태그를 사용하는 방법입니다. 그리고 링크 태그에는 두 가지의 방법이 있는데요. 우리가 지금 보고 있는 텍스트에 링크를 삽입하는 방법 또는 이미지에 링크를 삽입하는 방법이 있습니다. 오늘 두 가지에 대해서 모두 알아보겠습니다. 우선 텍스트에 링크를 사용하는 방법에 대해서 알아보도록 하겠습니다. 텍스트에 링크를 적용하는 방법 우선 기본적으로 우리가 사용하는 텍스트에 링크를 사용하는 방법인데요...