본문 바로가기
반응형

[R&D] 프로그래밍/Web (HTML, CSS)16

[HTML/CSS] table 태그를 활용한 표 만들기 방법 table 태그란? table 태그는 웹사이트에서 표를 나타낼 때 사용하는 태그입니다. 행(row)과 열(column)의 구조를 가지고 있으며, 각 셀(cell)에는 데이터를 입력할 수 있습니다. 표는 웹사이트에서 다양한 용도로 사용되며, 주로 테이블, 차트, 일정표 등을 나타낼 때 사용됩니다. table 태그의 구조 table 태그는 다음과 같은 구조를 가지고 있습니다. 열 1 열 2 열 3 행 1, 열 1 행 1, 열 2 행 1, 열 3 행 2, 열 1 행 2, 열 2 행 2, 열 3 행 3, 열 1 행 3, 열 2 행 3, 열 3 HTML 삽입 미리보기할 수 없는 소스 : 표 전체를 감싸는 태그입니다. : 표의 제목 부분을 감싸는 태그입니다. : 표의 내용 부분을 감싸는 태그입니다. : 제목(tit.. 2023. 3. 1. 00:50
[HTML/CSS] Form 요소들과 디자인 방법 이번 글에서는 HTML5에서 추가된 폼 요소들을 소개하고, 그들이 어떻게 사용되는지에 대해서 알아보도록 하겠습니다. ※ 폼 요소와 폼 태그는 다른 개념입니다. 폼 요소는 사용자가 입력하는 정보를 받기 위한 요소로, 텍스트 입력란(input), 비밀번호 입력란(input), 체크박스(input), 라디오 버튼(input), 드롭다운 메뉴(select), 텍스트 에어리어(textarea) 등이 있습니다. 이러한 폼요소들은 폼 태그 내부에 위치하며, 폼 태그에 의해 관리됩니다. 반면, 폼 태그(form)는 사용자 입력을 받기 위한 폼을 정의하는 요소입니다. 폼태그에는 폼 전송 방법(method)과 폼 데이터를 전송할 URL(action)을 지정할 수 있습니다. 또한 폼태그에는 폼을 제출할 때 실행할 스크립트(.. 2023. 2. 28. 00:21
[HTML/CSS] CSS Grid를 사용한 웹페이지 레이아웃 설계 Flexbox에 이어 이번 글에서는 CSS Grid를 사용한 웹페이지 레이아웃 설계의 예시를 소개하고, 기본 개념과 사용 방법을 자세히 알아보겠습니다. Grid란? Grid는 CSS의 레이아웃 모듈 중 하나로, 그리드 레이아웃을 만드는 데 사용됩니다. 그리드 레이아웃은 열과 행으로 구성된 그리드를 사용하여 레이아웃을 구성하는 방법입니다. 이전에는 flexbox를 사용하여 레이아웃을 구성하는 것이 일반적이었지만, Grid는 더 복잡한 레이아웃을 만드는 데 훨씬 유용합니다. CSS Grid를 사용하면 다음과 같은 이점이 있습니다. 유연한 레이아웃을 만들 수 있습니다. 레이아웃을 더 쉽게 디자인할 수 있습니다. 반응형 레이아웃을 만들기가 더 쉬워집니다. Grid의 구성 요소 Grid는 두 가지 개념을 중심으로.. 2023. 2. 27. 00:27
[HTML/CSS] CSS Flexbox를 활용한 웹페이지 레이아웃 설계 웹페이지 디자인을 할 때 가장 중요한 부분 중 하나가 레이아웃입니다. 웹페이지 레이아웃은 전체적인 구조를 결정하며, 웹페이지의 사용성과 시각적인 효과를 결정합니다. 이번 글에서는 CSS Flexbox를 활용하여 간단한 웹페이지 레이아웃을 설계하는 방법을 알아보겠습니다. Flexbox란? Flexbox는 CSS 레이아웃 모델 중 하나로, 컨테이너와 그 안에 있는 요소들을 유연하게 정렬할 수 있도록 하는 방법입니다. Flexbox를 사용하면, 요소들을 수직, 수평 또는 그 사이에서 자유롭게 배치할 수 있습니다. Flexbox의 구성 요소 Flexbox를 구성하는 요소는 크게 두 가지로 나뉩니다. 첫 번째는 Flex Container(플렉스 컨테이너)이고, 두 번째는 Flex Item(플렉스 아이템)입니다. .. 2023. 2. 26. 12:34
[HTML/CSS] CSS 선택자의 종류와 활용 방법 CSS는 스타일과 레이아웃을 결정하는 데에 사용되며, 선택자는 CSS에서 가장 중요한 개념 중 하나입니다. 선택자는 원하는 HTML 요소를 선택하는 데에 사용됩니다. 이번 글에서는 CSS 선택자의 종류와 사용 방법에 대해 다뤄보도록 하겠습니다. 기본 선택자 가장 기본적인 선택자는 태그 선택자입니다. 태그 선택자는 HTML 요소의 태그 이름을 사용하여 스타일을 지정합니다. 다음은 h1 태그를 선택하는 태그 선택자의 예시입니다. h1 { color: red; } 또 다른 기본 선택자는 클래스 선택자입니다. 클래스 선택자는 클래스 이름을 사용하여 HTML 요소를 선택합니다. 클래스 이름은 .으로 시작합니다. 다음은 클래스 이름이 "example"인 HTML 요소를 선택하는 클래스 선택자의 예시입니다. .exa.. 2023. 2. 26. 00:51
[HTML/CSS] 자주 쓰이는 HTML 태그 이번 포스트에서는 HTML 태그 중에서 웹 디자인에서 자주 쓰이는 태그에 대해 알아보겠습니다. 제목과 문단 태그 HTML에서 제목과 문단은 중요한 역할을 합니다. 제목 태그는 페이지의 구조를 파악하기 쉽게 해주며, 문단 태그는 페이지의 내용을 구조적으로 나누어 줍니다. 제목 태그 HTML에서 제목 태그는 에서 까지 총 여섯 개의 태그가 있습니다. 각 태그는 제목의 크기를 나타내며, 숫자가 작을수록 큰 제목입니다. 대부분의 웹 페이지에서는 과 를 가장 많이 사용합니다. 웹 디자인에 자주 쓰이는 HTML 태그 제목과 문단 태그 HTML에서 제목과 문단은 중요한 역할을 합니다. 제목 태그는 페이지의 구조를 파악하기 쉽게 해주며, 문단 태그는 페이지의 내용을 구조적으로 나누어 줍니다. 문단 태그 HTML에서 문.. 2023. 2. 25. 00:30
728x90
반응형

티스토리툴바