티스토리

일상을 개발하다

검색하기

블로그 홈

일상을 개발하다

geuninote.tistory.com/m

Geuni 님의 블로그입니다.

구독자: 11

방명록 방문하기

반응형

주요 글 목록

[HTML/CSS] float, clear 속성의 활용 방법 float 속성이란? float는 레이아웃을 구성할 때 사용하는 속성 중 하나입니다. float는 해당 엘리먼트를 좌우 방향으로 띄워서 배치합니다. float 속성을 사용하면 해당 엘리먼트가 띄워지는 방향으로 다른 엘리먼트가 끼워질 수 있습니다. 또한, float 속성을 사용하면 해당 엘리먼트의 크기가 부모 엘리먼트와 상관 없이 내부 콘텐츠의 크기에 맞게 설정됩니다. clear 속성이란? clear는 float 속성을 사용한 엘리먼트의 영향을 제거하는 속성입니다. clear 속성을 사용하면 float 속성이 적용된 엘리먼트의 하단에 위치하는 엘리먼트가 float 속성이 적용된 엘리먼트의 영향을 받지 않고, 해당 엘리먼트 아래에 위치하게 됩니다. float와 clear 속성을 사용한 레이아웃 float 속.. 공감수 0 댓글수 0 2023. 3. 7.
[HTML/CSS] 박스 모델의 개념과 활용 방법 박스 모델이란? 박스 모델은 HTML 요소의 크기와 위치를 정의하는 데 사용됩니다. 각 HTML 요소는 content, padding, border, margin의 4개의 구성 요소로 구성되어 있습니다. Content는 요소의 내용을 포함하는 부분으로, 실제로 보여지는 부분입니다. Padding은 content 주위에 위치하며, content와 border 사이의 공간을 의미합니다. Border는 padding의 주위에 위치하며, 요소의 경계선을 나타냅니다. 마지막으로, margin은 border 주위에 위치하며, 요소와 다른 요소 사이의 간격을 의미합니다. 박스 모델 활용 방법 박스 모델을 활용하여 웹 페이지의 레이아웃과 디자인을 구성할 수 있습니다. 예를 들어, 다음과 같이 박스 모델의 각 구성 요소.. 공감수 0 댓글수 0 2023. 3. 6.
[HTML/CSS] font 속성을 사용한 텍스트 디자인 방법 font 속성이란? font 속성은 텍스트의 스타일을 지정하는 데 사용됩니다. 이 속성을 사용하여 텍스트의 크기, 스타일, 색상 등을 지정할 수 있습니다. 예를 들어, font-size 속성을 사용하여 텍스트의 크기를 조정할 수 있고, font-style 속성을 사용하여 텍스트의 스타일을 변경할 수 있습니다. font-size 속성 font-size 속성은 텍스트의 크기를 조정하는 데 사용됩니다. 이 속성은 픽셀, 백분율, em 등의 단위로 지정할 수 있습니다. 예를 들어, font-size: 16px;은 텍스트의 크기를 16픽셀로 지정합니다. 텍스트의 크기는 웹사이트의 가독성을 결정하는 중요한 요소 중 하나입니다. font-family 속성 font-family 속성은 텍스트의 글꼴을 지정하는 데 사용.. 공감수 0 댓글수 0 2023. 3. 5.
[HTML/CSS] 애니메이션과 트랜지션을 활용한 웹페이지 효과 구현 방법 애니메이션과 트랜지션의 차이점 CSS 애니메이션과 트랜지션은 모두 웹페이지에서 효과를 구현하기 위한 방법입니다. 애니메이션은 특정 요소에 애니메이션을 추가하기 위한 CSS 속성입니다. 예를 들어, 요소가 나타나거나 사라지거나 크기가 변할 때 애니메이션을 적용할 수 있습니다. 이러한 애니메이션은 특정 이벤트(클릭, 마우스오버 등)가 발생할 때 트리거됩니다. 반면 트랜지션은 요소가 상태 변화를 할 때 적용되는 효과입니다. 예를 들어, 마우스를 올리면 요소의 색상이 바뀌거나, 요소가 이동하거나, 크기가 변경될 때 트랜지션을 적용할 수 있습니다. 이러한 효과는 요소의 상태가 변할 때 자동으로 발생합니다. 애니메이션 구현 방법 애니메이션을 구현하는 방법은 매우 간단합니다. 우선, 애니메이션을 적용할 요소를 선택합.. 공감수 0 댓글수 0 2023. 3. 4.
[HTML/CSS] audio 태그를 사용한 음악 삽입과 디자인 방법 audio 태그란? HTML5에서는 음악과 같은 멀티미디어를 삽입하는 방법으로 audio 태그가 도입되었습니다. audio 태그는 소리를 재생하는 웹기술로, 오디오 파일을 삽입할 수 있으며, 다양한 속성을 활용하여 적절한 사운드 디자인을 구성할 수 있습니다. audio 태그의 속성 audio 태그에는 여러 가지 속성이 있습니다. 아래 예시 코드를 참고해보세요. src: 음악 파일의 URL을 지정합니다. controls: 오디오 재생용 컨트롤러를 표시합니다. preload: 오디오 파일의 로딩 방법을 설정합니다. "auto"를 사용하면 자동으로 로딩되며, "none"은 수동으로 로딩되게 합니다. audio 태그를 이용한 음악 삽입 방법 로컬 파일을 이용한 음악 삽입 먼저, 로컬 파일을 이용하여 음악을 삽입.. 공감수 3 댓글수 0 2023. 3. 3.
[HTML/CSS] video 태그를 사용한 동영상 삽입과 디자인 방법 HTML을 이용하여 동영상을 쉽게 삽입할 수 있으며, 이를 통해 사용자들이 동영상을 쉽게 시청할 수 있도록 할 수 있습니다. 이번 글에서는 HTML video 태그를 사용하여 동영상을 삽입하는 방법과 함께 디자인 방법에 대해 알아보겠습니다. video 태그란? video 태그는 HTML5에서 추가된 태그 중 하나로, 동영상을 웹 페이지에 삽입할 때 사용됩니다. video 태그를 사용하면 웹 페이지에 동영상을 쉽게 삽입할 수 있으며, 사용자들은 동영상을 보기 위해 별도의 플러그인 설치나 동영상 파일을 다운로드할 필요가 없습니다. video 태그의 속성 video 태그는 다양한 속성을 가지고 있습니다. 이 중에서도 가장 중요한 속성들은 다음과 같습니다. controls: 동영상 재생 컨트롤러를 표시할지 여부.. 공감수 1 댓글수 0 2023. 3. 2.
[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.. 공감수 0 댓글수 0 2023. 3. 1.
[HTML/CSS] Form 요소들과 디자인 방법 이번 글에서는 HTML5에서 추가된 폼 요소들을 소개하고, 그들이 어떻게 사용되는지에 대해서 알아보도록 하겠습니다. ※ 폼 요소와 폼 태그는 다른 개념입니다. 폼 요소는 사용자가 입력하는 정보를 받기 위한 요소로, 텍스트 입력란(input), 비밀번호 입력란(input), 체크박스(input), 라디오 버튼(input), 드롭다운 메뉴(select), 텍스트 에어리어(textarea) 등이 있습니다. 이러한 폼요소들은 폼 태그 내부에 위치하며, 폼 태그에 의해 관리됩니다. 반면, 폼 태그(form)는 사용자 입력을 받기 위한 폼을 정의하는 요소입니다. 폼태그에는 폼 전송 방법(method)과 폼 데이터를 전송할 URL(action)을 지정할 수 있습니다. 또한 폼태그에는 폼을 제출할 때 실행할 스크립트(.. 공감수 0 댓글수 0 2023. 2. 28.
[HTML/CSS] CSS Grid를 사용한 웹페이지 레이아웃 설계 Flexbox에 이어 이번 글에서는 CSS Grid를 사용한 웹페이지 레이아웃 설계의 예시를 소개하고, 기본 개념과 사용 방법을 자세히 알아보겠습니다. Grid란? Grid는 CSS의 레이아웃 모듈 중 하나로, 그리드 레이아웃을 만드는 데 사용됩니다. 그리드 레이아웃은 열과 행으로 구성된 그리드를 사용하여 레이아웃을 구성하는 방법입니다. 이전에는 flexbox를 사용하여 레이아웃을 구성하는 것이 일반적이었지만, Grid는 더 복잡한 레이아웃을 만드는 데 훨씬 유용합니다. CSS Grid를 사용하면 다음과 같은 이점이 있습니다. 유연한 레이아웃을 만들 수 있습니다. 레이아웃을 더 쉽게 디자인할 수 있습니다. 반응형 레이아웃을 만들기가 더 쉬워집니다. Grid의 구성 요소 Grid는 두 가지 개념을 중심으로.. 공감수 0 댓글수 0 2023. 2. 27.
[HTML/CSS] CSS Flexbox를 활용한 웹페이지 레이아웃 설계 웹페이지 디자인을 할 때 가장 중요한 부분 중 하나가 레이아웃입니다. 웹페이지 레이아웃은 전체적인 구조를 결정하며, 웹페이지의 사용성과 시각적인 효과를 결정합니다. 이번 글에서는 CSS Flexbox를 활용하여 간단한 웹페이지 레이아웃을 설계하는 방법을 알아보겠습니다. Flexbox란? Flexbox는 CSS 레이아웃 모델 중 하나로, 컨테이너와 그 안에 있는 요소들을 유연하게 정렬할 수 있도록 하는 방법입니다. Flexbox를 사용하면, 요소들을 수직, 수평 또는 그 사이에서 자유롭게 배치할 수 있습니다. Flexbox의 구성 요소 Flexbox를 구성하는 요소는 크게 두 가지로 나뉩니다. 첫 번째는 Flex Container(플렉스 컨테이너)이고, 두 번째는 Flex Item(플렉스 아이템)입니다. .. 공감수 0 댓글수 0 2023. 2. 26.
[HTML/CSS] CSS 선택자의 종류와 활용 방법 CSS는 스타일과 레이아웃을 결정하는 데에 사용되며, 선택자는 CSS에서 가장 중요한 개념 중 하나입니다. 선택자는 원하는 HTML 요소를 선택하는 데에 사용됩니다. 이번 글에서는 CSS 선택자의 종류와 사용 방법에 대해 다뤄보도록 하겠습니다. 기본 선택자 가장 기본적인 선택자는 태그 선택자입니다. 태그 선택자는 HTML 요소의 태그 이름을 사용하여 스타일을 지정합니다. 다음은 h1 태그를 선택하는 태그 선택자의 예시입니다. h1 { color: red; } 또 다른 기본 선택자는 클래스 선택자입니다. 클래스 선택자는 클래스 이름을 사용하여 HTML 요소를 선택합니다. 클래스 이름은 .으로 시작합니다. 다음은 클래스 이름이 "example"인 HTML 요소를 선택하는 클래스 선택자의 예시입니다. .exa.. 공감수 0 댓글수 0 2023. 2. 26.
[HTML/CSS] 자주 쓰이는 HTML 태그 이번 포스트에서는 HTML 태그 중에서 웹 디자인에서 자주 쓰이는 태그에 대해 알아보겠습니다. 제목과 문단 태그 HTML에서 제목과 문단은 중요한 역할을 합니다. 제목 태그는 페이지의 구조를 파악하기 쉽게 해주며, 문단 태그는 페이지의 내용을 구조적으로 나누어 줍니다. 제목 태그 HTML에서 제목 태그는 에서 까지 총 여섯 개의 태그가 있습니다. 각 태그는 제목의 크기를 나타내며, 숫자가 작을수록 큰 제목입니다. 대부분의 웹 페이지에서는 과 를 가장 많이 사용합니다. 웹 디자인에 자주 쓰이는 HTML 태그 제목과 문단 태그 HTML에서 제목과 문단은 중요한 역할을 합니다. 제목 태그는 페이지의 구조를 파악하기 쉽게 해주며, 문단 태그는 페이지의 내용을 구조적으로 나누어 줍니다. 문단 태그 HTML에서 문.. 공감수 0 댓글수 0 2023. 2. 25.
[HTML/CSS] 웹 페이지에서 이미지와 비디오 사용하기 컴퓨터 화면에서 보여지는 웹 페이지는 이미지와 비디오를 포함한 다양한 미디어 요소들을 활용하여 사용자에게 보다 풍부한 시각적 효과를 제공합니다. 이번 블로그 포스트에서는 HTML/CSS를 사용하여 웹 페이지에서 이미지와 비디오를 사용하는 방법에 대해 알아보고, 간단한 예제도 함께 보겠습니다. 이미지 사용하기 이미지 파일 포맷 웹 페이지에서 사용하는 이미지는 다양한 파일 포맷으로 제공됩니다. 그 중에서도 주로 사용되는 파일 포맷은 다음과 같습니다. JPEG(Joint Photographic Experts Group): 사진 등의 복잡한 이미지를 저장할 때 사용되며, 용량이 큰 편입니다. PNG(Portable Network Graphics): 그래픽 등의 간단한 이미지를 저장할 때 사용되며, 용량이 작은 .. 공감수 0 댓글수 0 2023. 2. 24.
[HTML/CSS] HTML과 CSS로 반응형 웹 페이지 만들기 반응형 웹 페이지 반응형 웹 페이지는 모바일, 태블릿, 데스크탑 등 다양한 디바이스에서 웹 페이지가 제대로 보이도록 만드는 것을 말합니다. 반응형 웹 페이지를 만드는 가장 일반적인 방법은 미디어 쿼리를 사용하는 것입니다. 미디어 쿼리는 특정 디바이스의 화면 크기, 해상도 등을 확인하여, 그에 따라 다른 스타일을 적용하는 방법입니다. 미디어 쿼리를 사용하여 반응형 웹 페이지를 만들면, 하나의 웹 페이지에서 모바일, 태블릿, 데스크탑 등 다양한 디바이스에서 동일한 사용자 경험을 제공할 수 있습니다. 예제 코드 이번 포스트에서는 간단한 예제 코드를 사용하여 반응형 웹 페이지를 만들어 보겠습니다. 이 예제 코드는 Python을 사용하여 작성된 Flask 애플리케이션입니다. Flask 설치 먼저 Flask를 설치.. 공감수 0 댓글수 2 2023. 2. 23.
[HTML/CSS] HTML5와 CSS3에서 추가된 기능 HTML5에서는 새로운 폼 요소, 콘텐츠 모델 등이 추가되어 웹 문서의 레이아웃을 만들 때 주요 태그들이 표준화되어 유지보수 및 가독성에 용이해졌습니다. 또한 CSS3에서는 그리드 레이아웃, 변환과 전환, 그림자와 경계선 등의 기능이 추가되어 기존보다 풍부한 시각적인 효과를 줄 수 있게 되었습니다. HTML5 시맨틱 태그 HTML5에서는 시맨틱 태그(semantic tag)가 새롭게 추가되었습니다. 시맨틱 태그는 의미론적인 구조를 가진 태그로, 기존의 div와 span 태그 대신 사용될 수 있습니다. 시맨틱 태그를 사용하면 웹 페이지의 구조를 더욱 명확하고 의미 있는 구조로 작성할 수 있습니다. 예를 들면, header, nav, section, article, aside, footer 등의 태그는 각각.. 공감수 0 댓글수 0 2023. 2. 22.
[HTML/CSS] HTML과 CSS 기초 문법과 구조 HTML은 웹 페이지의 구조를 정의하며, CSS는 해당 구조를 디자인합니다. 이번 글에서는 HTML과 CSS의 기초 문법과 구조에 대해 알아보고, 간단한 예제 코드를 통해 학습해보겠습니다. 1. HTML 기초 문법 1.1. HTML 문서의 기본 구조 HTML 문서는 기본적으로 다음과 같은 구조를 가집니다. 문서 내용 : 문서의 형식을 정의합니다. HTML5를 사용한다는 것을 나타냅니다. : HTML 문서의 시작을 알립니다. 이 문장은 빨간색입니다. 외부 스타일 시트 CSS 파일을 따로 만들어 HTML 문서에서 불러와 사용하는 방법입니다. 2.3. CSS 예제 코드 /* 제목 스타일 */ h1 { color: blue; font-size: 30px; text-align: center; } /* 단락 스타일.. 공감수 1 댓글수 1 2023. 2. 21.

728x90

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.