본문 바로가기

3

[CSS] 표 스타일(Table) 목차 CSS로 웹 페이지의 표를 화려하게 꾸미기 🎨📊 안녕하세요, 디자인 애호가 여러분! 🌟 오늘은 웹 페이지에 표(table)를 아름답게 디자인하는 방법에 대해서 알아보겠습니다. 표는 데이터를 정리하고 보여줄 때 굉장히 유용하지만, 기본 디자인만으로는 부족하게 느껴질 때가 많습니다. CSS의 마법으로 표를 더욱 생동감 있게 만들어봅시다! 1. 표의 테두리(Border) 스타일링 표와 각 셀의 테두리를 디자인하려면 border 속성을 활용합니다. 아래는 표 전체와 각 셀에 테두리를 적용하는 방법입니다. /* 표 전체에 대한 테두리 */ table { border-collapse: collapse; /* 셀 테두리를 하나로 합침 */ width: 100%; border: 2px solid black; } .. 2023. 9. 8.
[HTML] 표(table) HTML 표: 데이터를 명확하게 제시하다! 안녕하세요, HTML 여행자 여러분! 🚀 웹 페이지에서 데이터나 정보를 깔끔하게 정렬하여 표현하려면 어떻게 해야 할까요? 네, 바로 '표'를 사용하면 되는데요. 오늘은 HTML에서 데이터를 표 형식으로 제시하는 방법을 알아보겠습니다. 1. 표란 무엇인가? 표는 행(row)과 열(column)로 구성된 격자 형태의 데이터 구조입니다. 표를 사용하면 복잡한 데이터도 체계적이고 가독성 좋게 표현할 수 있습니다. 2. HTML 표의 구조 HTML에서 표를 생성하는 것은 간단합니다. 주요 태그들을 알면 누구나 쉽게 표를 만들 수 있어요. 표 시작: 기본 구조: 모든 표는 태그로 시작하며 종료합니다. 표의 헤더: , , 기본 구조: 표의 제목 행을 나타냅니다. 안에 (테이.. 2023. 9. 8.
[HTML] 텍스트 태그 HTML 텍스트 태그에 대한 이해 안녕하세요, 웹 개발자를 꿈꾸는 분들! 오늘은 웹 페이지의 기본 구조를 이루는 HTML의 텍스트 관련 태그에 대해 알아보겠습니다. 1. 제목 태그: ~ 웹 페이지의 제목이나 부제목을 나타내기 위해 사용되는 태그입니다. 은 가장 큰 제목을 의미하며, 까지 점차 크기가 작아집니다. 이것은 h1 태그입니다. 이것은 h2 태그입니다. 이것은 h3 태그입니다. 이것은 h4 태그입니다. 이것은 h5 태그입니다. 이것은 h6 태그입니다. HTML 삽입 미리보기할 수 없는 소스 2. 단락 태그: 텍스트의 단락을 나타내기 위한 태그입니다. 이것은 단락입니다. 웹 페이지에서 내용을 설명할 때 주로 사용됩니다. HTML 삽입 미리보기할 수 없는 소스 3. 강조 태그: 및 텍스트를 강조할 때.. 2023. 9. 7.