월횽

CSS는 HTML로 만든 웹 페이지를 스타일링하여 보기 좋게 꾸며주는 언어입니다. 외부 스타일과 내부 스타일을 사용하여 CSS를 적용할 수 있습니다. 1. CSS의 의미와 사용 이유 CSS는 "Cascading Style Sheets"의 약자로, HTML로 작성한 웹 페이지의 디자인을 꾸미는 역할을 합니다. 2. 외부 스타일 적용하기 외부 스타일은 별도의 CSS 파일을 만들고 HTML 파일에서 해당 CSS 파일을 불러와 사용합니다. 아래와 같은 형태로 사용됩니다. 이때, "파일명.css"에는 원하는 스타일을 작성합니다. 3. 내부 스타일 적용하기 내부 스타일은 HTML 파일 내에서 CSS를 직접 적용하는 방식입니다. 아래와 같이 위의 예시에서는 태그에 빨간색으로 텍스트를 스타일링하는 내용을 작성했습니다...

CSS를 처음 배우는 분들이 이해하기 쉽도록 설명해 드릴게요. 혹여나 html에 모르고 계신다면 이전 수업들을 참고해 기본적인 개념들을 익히고 오시는 것을 추천해 드립니다. 1. CSS는 무엇인가요? CSS는 Cascading Style Sheets의 약자로, 웹 페이지의 스타일과 레이아웃을 꾸미는 언어입니다. HTML은 웹 페이지의 구조를 담당하고, CSS는 이를 꾸며주는 역할을 합니다. 즉, HTML은 건물의 구조를 만들고, CSS는 그 구조에 따라 외관을 꾸며주는 역할을 합니다. 2. CSS의 역할은 무엇인가요? CSS를 사용하면 텍스트의 색상, 폰트, 크기 등을 지정하거나, 배경색이나 이미지, 여백 등을 설정할 수 있습니다. 또한 웹 페이지의 레이아웃을 조정하여 요소들의 위치와 크기를 조절할 수 ..

안녕하세요! 프로그래밍 도구에 대해 소개하려는 "월횽입니다. 초보자들에게 추천하는 세 가지 무료 도구를 소개하고, 장단점에 대해 설명해드릴게요. 3위 - 메모장(NotePad): 윈도우 사용자에게 무료로 제공되는 간단한 프로그래밍 도구입니다. · 장점: 프로그래밍 기초를 접할 수 있습니다. 윈도우 사용자에게 무료로 제공됩니다. · 단점: 기능에 제한이 있습니다. 코드의 색상 구분이 없어 긴 코드를 작성할 경우 구분이 어렵습니다. 코드 애니웨어(CodeAnyWhere) 공식 홈페이지 2위 - 코드애니웨어(CodeAnyWhere): 웹사이트에서 접속해서 사용할 수 있는 무설치형 프로그램입니다. · 장점: 설치 필요 없이 간편하게 사용할 수 있습니다. 저장공간을 사용하지 않습니다. · 단점: 사용 시 홈페이지..

안녕하세요! 저는 "진로상담&진로 강연"을 하는 박진형입니다. 오늘은 17강에서 **타이틀 (Title)**에 대해 알아보겠습니다. 타이틀이란 웹사이트의 이름을 나타내는 요소입니다. 매장에 들어갈 때 매장 이름을 아는 것처럼, 사용자는 타이틀을 통해 사이트 이름을 알 수 있습니다. 타이틀 사용 방법 타이틀은 이렇게 사용하면 사이트 제목이 "자스트"라는 것을 알릴 수 있습니다. 검색창에 "자스트"를 입력하면 만든 홈페이지 또는 블로그가 나옵니다. 오늘 수업을 따라오시면서 어려운 점이 있다면 댓글로 알려주세요. 오늘 하루도 복습하시고 좋은 하루 보내세요!

안녕하세요! 진로 상담 및 강연을 하는 월횽(박진형)입니다. 오늘은 Iframe 수업을 진행할 예정입니다. Iframe이 무엇인지, 어떻게 사용하는지 예제를 통해 살펴보겠습니다. Iframe이란? Iframe은 웹페이지의 HTML 코드 안에 다른 HTML 페이지를 삽입하는 방법입니다. 또 다른 HTML 프레임을 포함하는 것이기 때문에 인라인 프레임이라고도 합니다. Iframe 사용 방법 Iframe을 사용하려면 HTML 코드에서 다음과 같이 작성합니다: 1. 태그를 사용하여 Iframe을 열어줍니다. 2. src="" 속성에 표시할 웹 페이지의 URL을 넣습니다. 3. 태그로 Iframe을 닫습니다. 예를 들어, https://jast.tistory.com/ 라는 웹 페이지를 표시하려면 다음과 같이 작성..

안녕하세요! "월횽(박진형)"입니다. 오늘은 15강에서 "아이디 속성 (ID Property)"에 대해 알아보려고 합니다. 이전 강의인 [14강 - Class (클래스)]도 함께 확인하시면 도움이 됩니다. 아이디 속성 (ID Property)란? 아이디 속성은 HTML 문서에서 요소에 고유한 ID를 지정하는 것입니다. 게임을 할 때 고유한 게임 ID를 부여받는 것과 비슷합니다. 예를 들어, 코딩 중 특정 부분에 ID를 지정해줄 수 있습니다. 이렇게 하면 이 ID를 사용하여 요소를 식별할 수 있습니다. 아이디 속성 (ID Property)의 용도 아이디 속성은 이후에 배우게 될 CSS나 JavaScript에서 지정된 ID를 사용하여 요소를 수정하거나 꾸밀 수 있습니다. CSS에서는 해시태그(#)를 사용하여..

안녕하세요! "진로상담&진로 강연"을 하는 "월횽(박진형)"입니다. 오늘은 클래스(Class)에 대해 알아보겠습니다. 클래스(Class)란 무엇인가요? 클래스는 HTML 문서에서 요소들을 그룹화하고, 스타일과 속성을 적용하는 데 사용되는 개념입니다. 클래스는 여러 요소를 하나의 그룹으로 묶어 스타일링할 수 있는 방법입니다. 클래스 사용 예시 예를 들어, 다음과 같은 div 태그들이 있다고 가정해보겠습니다. 내용1 내용2 내용3 내용4 이렇게 각각의 div 요소에 클래스 속성을 추가할 수 있습니다. 내용1 내용2 내용3 내용4 이 예제에서는 각각의 div 요소에 1반, 2반, 3반, 4반이라는 클래스를 부여했습니다. 이렇게 하면 나중에 CSS 수업에서 각 클래스에 다른 스타일을 적용할 수 있습니다. 요약 ..

안녕하세요! "진로상담&진로 강연"하는 남자 "월횽(박진형)”입니다. 오늘은 13강 인라인 엘리먼트 (Inline elements)에 대해 배우겠습니다. 혹시 블록 레벨 엘리먼트가 필요하시다면 [12강 - 블록 레벨 엘리먼트] 수업을 확인해주세요! 인라인 엘리먼트란 좌, 우 가로 영역으로 쌓아가는 태그입니다. 이 수업에서는 태그를 사용하여 인라인 엘리먼트를 배워보도록 할게요. 인라인 엘리먼트는 태그를 열어 텍스트를 작성하고, 태그로 마무리합니다. 이렇게 작성한 태그는 옆으로 정렬됩니다. 아래 예시를 함께 확인해볼까요? 내용을 입력해주세요. 위의 예시처럼 편집기에 직접 적용하거나 복사하여 사용하세요. 태그를 적용한 텍스트의 결과가 본문과 같다면 인라인 엘리먼트를 잘 사용한 것입니다. 인라인 엘리먼트와 블록..

안녕하세요. 진로강연하는 월횽입니다. 오늘은 블록 엘리먼트(Blok Elements)에 대해 간단하게 알아보도록 할게요. 블록 레벨 엘리먼트 (Block Level Elements)는 HTML 태그 중 하나로, 웹 페이지에서 블록 단위로 콘텐츠를 배치하는 요소를 말합니다. 이 요소들은 보통 전체 너비를 차지하고, 위에서 아래로 쌓이는 형태로 구성됩니다. 대표적인 블록 레벨 엘리먼트로는 , ~ , , , 등이 있습니다. 이러한 요소들은 페이지의 좌우 공간을 모두 활용하면서 세로로 콘텐츠를 배치합니다. 블록 레벨 엘리먼트의 사용 방법을 이해하기 위해 가장 일반적인 태그를 예시로 들어보겠습니다. 태그를 사용하면 다음과 같은 형태로 콘텐츠를 블록 단위로 정렬할 수 있습니다. 내용1 내용2 내용3 내용4 위 예시..

안녕하세요! "진로상담&진로 강연"하는 남자 "월횽(박진형)”입니다. 오늘은 11강 링크 태그 (Link Tag) 에 대해서 알아보는 시간을 만들게 되었습니다. 오늘 수업도 여러분에게 유익한 수업이 되었으면 좋겠습니다. 그럼 링크 태그에 대해서 알아보겠습니다. 링크 태그란? 링크 태그는 웹 페이지에서 다른 페이지로 연결할 수 있도록 하는 방법입니다. 주로 태그를 사용합니다. 링크 태그는 텍스트나 이미지를 다른 페이지에 연결할 수 있도록 합니다. 텍스트에 링크를 적용하는 방법 텍스트에 링크를 적용하려면 태그를 사용하고, 그 사이에 링크를 설명할 수 있는 텍스트를 넣으면 됩니다. 예를 들어 자스트는 "자스트" 텍스트에 자스트 공식 홈페이지로 이동하는 링크를 적용한 것입니다. 자스트 이미지에 링크를 적용하는 ..