반응형 SMALL 전체 글20 이미지에 테두리와 둥근 모서리 스타일 적용하기 웹사이트에서 이미지를 삽입할 때, 디자인을 더 예쁘게 만들고 싶을 때가 많습니다. 예를 들어 "이 이미지에만 얇은 테두리를 주고 싶어!" 혹은 "이미지의 모서리를 부드럽게 만들고 싶은데..." 같은 고민이 있을 수 있습니다.이럴 때 유용한 것이 바로 HTML의 class 속성과 CSS입니다! 1. 텍스트 폴더에 있는 .xhtml 페이지의 코드 보기입니다.2. Styles 폴더에 있는 .css 페이지의 내용입니다.3. 미리보기 내용입니다. 1. class 속성이란?class는 HTML 요소(태그)에 이름을 붙이는 역할을 합니다. 이 이름을 이용하면 CSS에서 특정 요소를 선택해 스타일을 적용할 수 있습니다.2. 이미지에 테두리와 둥근 모서리 추가하기우선, HTML에서 class="rounded-bor.. 2025. 2. 25. HTML에서 class 태그란? 쉽게 배우는 웹 개발 기초 웹사이트를 만들다 보면 "이 버튼만 색깔을 다르게 하고 싶어!" 혹은 "이 글자들만 특별한 스타일을 주고 싶은데..." 같은 고민을 하게 됩니다. 이럴 때 유용하게 사용할 수 있는 것이 바로 HTML의 class 속성입니다.1. class 속성이란?class는 HTML 요소(태그)에 이름을 붙이는 역할을 합니다. 이 이름을 이용하면 CSS에서 해당 요소를 쉽게 선택해서 스타일을 적용할 수 있습니다.2. class 속성 사용법기본 문법내용예제:이 문장은 특별한 스타일이 적용될 거예요!위 코드에서 class="highlight"라고 지정했기 때문에, CSS에서 .highlight를 이용해 스타일을 바꿀 수 있습니다.3. class 속성과 CSS형광팬 효과를 위한 class 추가하기특정 문장이나 단어에 형광팬.. 2025. 2. 25. <hr> 태그 완벽 정리 (초급자용) 태그 완벽 정리 (초급자용)📝 태그란? 태그는 HTML에서 수평선을 나타내는 태그입니다. 문서에서 구분선을 만들 때 사용됩니다.📌 태그의 특징내용이 없는 태그 (닫는 태그 없음) → 단독 사용수평선을 삽입하여 문서 내용을 구분함기본 스타일: 회색의 얇은 선CSS로 스타일 변경 가능 (색상, 두께, 길이 등 조정 가능)✅ 기본 사용법html복사편집p>첫 번째 문단입니다.p> hr> p>두 번째 문단입니다.p> 🔹 결과첫 번째 문단과 두 번째 문단 사이에 수평선이 표시됩니다.🎨 CSS를 활용한 스타일 변경html복사편집hr style="border: 2px solid black; width: 50%;"> 🔹 설명border: 선의 두께(2px), 스타일(solid), 색상(black) 지정wi.. 2025. 2. 23. 📚 전자책이 종이책보다 더 나은 5가지 이유 전자책이 종이책보다 더 나은 5가지 이유책을 읽는 방법은 시대에 따라 변하는 것입니다. 두루마리 형태의 책을 펼쳐져 있고, 인쇄 기술이 발전하면서 종이책이 세상을 지배하고 있었습니다. 하지만 이제 우리는 또 다른 혁신을 만나고 있습니다. 바로 **전자책(E-Book)**이다. 아직도 많은 사람들이 종이책의 촉감과 넘기는 손맛을 좋아하지만, 전자책이 가져온 것은 명백히 무시할 수 없습니다. 그렇다면, 전자책은 종이책보다 어떤 점에서 더 나을까요? 오늘은 전자책이 이득이 되는 몇 가지 장점을 살펴봅니다.1. 수많은 권의 책을 빌딩할 수 있는 자유로움안에는 한 책 권만 있어도 무게가 작지만, 전자책은 단 하나의 기기(스마트폰, 태블릿, 전자책 리더기)만 있으면 수많은 권의 책을 언제 가지고 있을 수 있습니다... 2025. 2. 21. 📖 시길(Sigil)에서 메타데이터 작성하는 방법 - 기본 및 추가 정보 입력 전자책을 제작할 때 메타데이터는 꼭 챙겨야 하는 중요한 요소입니다! ✅ 메타데이터는 책의 정보를 정리하여 독자와 전자책 플랫폼이 내용을 쉽게 이해할 수 있도록 도와줍니다.이번 포스팅에서는 시길(Sigil)에서 기본 및 추가 메타데이터를 입력하는 방법을 초보자도 쉽게 따라 할 수 있도록 자세히 설명하겠습니다. ✨📌 1. 기본 메타데이터 입력하기📚 기본 메타데이터는 전자책의 가장 중요한 정보들을 담고 있으며, 메타데이터 편집기(Metadata Editor)를 통해 쉽게 입력할 수 있습니다.🛠️ 메타데이터 편집기 열기1️⃣ 시길(Sigil)을 실행합니다. 2️⃣ 도구(Tools) > 메타데이터 편집기(Metadata Editor) 메뉴를 클릭합니다. 3️⃣ 메타데이터 편집기가 새 창으로 열립니다.📝 기.. 2025. 2. 18. 📌 HTML <span> 태그 완벽 가이드 📌 HTML 태그 완벽 가이드HTML 문서에서 특정 부분의 글자 크기, 색깔, 글꼴 등을 조정하거나 특정 요소에 스타일을 적용할 때 태그를 자주 사용합니다.이 글에서는 태그의 개념부터 활용 방법까지 자세히 설명해 드리겠습니다. 📝🔹 1. 태그란? 태그는 인라인 요소(inline element)이며, 문서 내 특정 부분을 스타일링할 때 사용됩니다.단독으로 의미를 가지지 않으며, CSS와 함께 스타일을 적용하는 데 활용됩니다. 🎨블록 요소인 와는 다르게 줄 바꿈 없이 텍스트 일부만 감싸는 역할을 합니다.💡 기본 문법내용🔹 2. 태그의 주요 특징특징 설명🏷 인라인 요소줄 바꿈 없이 텍스트 내부에서 사용됨🎨 스타일 적용 가능CSS로 색상, 폰트 크기, 배경색 등을 변경 가능📝 의미 없음.. 2025. 2. 17. EPUB에서 기본적인 태그: <img> (이미지 삽입 태그) II 전자책을 제작할 때 이미지를 삽입하여 가독성을 높이고 콘텐츠를 더욱 풍부하게 만들기 위해 태그를 사용합니다. 오늘은 EPUB에서 이미지를 추가하는 방법과 최적화 방법을 알아보겠습니다!1. 태그란?HTML 및 EPUB에서 이미지를 문서에 삽입하는 태그입니다.EPUB 내에서 표지 이미지, 본문 삽입 이미지, 장식 요소 등을 표현하는 데 사용됩니다.src 속성을 사용하여 이미지 파일의 경로를 지정합니다.2. 태그의 기본 사용법📌 기본 예제👉 이 코드가 하는 일:src="../Images/sample.jpg" → Images 폴더에 있는 sample.jpg 파일을 불러옴alt="샘플 이미지" → 이미지를 설명하는 대체 텍스트(스크린 리더 지원)3. EPUB에서 태그를 사용하는 방법EPUB의 각 페이지.. 2025. 2. 12. EPUB에서 기본적인 태그: <img> (이미지 삽입 태그) I 전자책을 제작할 때 이미지를 삽입하여 가독성을 높이고 콘텐츠를 더욱 풍부하게 만들기 위해 태그를 사용합니다. 오늘은 EPUB에서 이미지를 추가하는 방법과 최적화 방법을 알아보겠습니다!1. 태그란?HTML 및 EPUB에서 이미지를 문서에 삽입하는 태그입니다.EPUB 내에서 표지 이미지, 본문 삽입 이미지, 장식 요소 등을 표현하는 데 사용됩니다.src 속성을 사용하여 이미지 파일의 경로를 지정합니다.2. 태그의 기본 사용법📌 기본 예제👉 이 코드가 하는 일:src="../Images/sample.jpg" → Images 폴더에 있는 sample.jpg 파일을 불러옴alt="샘플 이미지" → 이미지를 설명하는 대체 텍스트(스크린 리더 지원)3. EPUB에서 태그를 사용하는 방법EPUB의 각 페이지.. 2025. 2. 11. 전자책을 만들어 드립니다. 문의 환영합니다! 전자책을 만들어 드립니다. 문의 환영합니다!나만의 전자책을 갖고 싶으신가요?디지털 시대에 접어들면서 책의 형태도 변화하고 있습니다. 종이책뿐만 아니라 스마트폰, 태블릿, PC에서 손쉽게 읽을 수 있는 **전자책(eBook)**이 점점 더 인기를 끌고 있습니다. 여러분의 아이디어, 지식, 경험을 전자책으로 만들어 많은 사람들에게 공유하고 싶다면, 이제 직접 고민할 필요 없이 맞춤형 전자책 제작 서비스를 이용해 보세요!어떤 전자책을 제작할 수 있나요?다양한 주제와 형태의 전자책 제작이 가능합니다.✔ 지식 공유형 전자책 – 특정 분야의 노하우, 기술, 강의 자료 등을 정리하여 전문가로서의 입지를 다질 수 있습니다. ✔ 에세이 및 자기계발서 – 자신의 경험을 담아 많은 사람들에게 동기부여를 할 수 있습니다. ✔.. 2025. 2. 4. EPUB에서 기본적인 태그: <link> (스타일시트 연결 태그)😊🚀 EPUB에서 기본적인 태그: (스타일시트 연결 태그)EPUB과 HTML 문서에서 디자인과 서식을 적용하는 필수적인 태그가 바로 태그입니다. 전자책을 만들 때, 텍스트의 스타일을 통일하고 가독성을 높이기 위해 반드시 사용해야 합니다. 오늘은 EPUB에서 태그의 역할과 사용법을 소개하겠습니다!1. 태그란?외부 스타일시트(CSS)를 문서에 연결하는 태그입니다.EPUB에서 모든 페이지의 디자인을 통일하는 중요한 역할을 합니다.CSS 파일을 통해 폰트, 글자 크기, 색상, 여백, 줄 간격 등을 설정할 수 있습니다.2. 태그의 기본 사용법📌 기본 예제👉 이 코드가 하는 일:href="../Styles/Style0001.css" → Style0001.css 파일을 불러옴type="text/css" → 연.. 2025. 2. 2. 이전 1 2 다음 반응형 LIST
