728x90 반응형 SMALL 웹 사이트11 [Website] Columns / TextBox / Flexbox Columns / TextBox / Flexbox 컬럼 (Column) 컬럼을 사용하면 긴 텍스트를 더 쉽게 읽을 수 있는 형식으로 나눌 수 있다. 기사, 블로그 글 등의 콘텐츠를 여러 개의 컬럼으로 분할하여 가독성을 높이고, 모던한 디자인을 구현할 수 있다. CSS의 column-count와 column-gap 속성을 사용하여 컬럼의 개수와 간격을 조절할 수 있다. 텍스트 박스 (Text Box) 텍스트 박스는 사용자 입력을 받기 위한 공간을 제공한다. CSS를 사용하여 텍스트 박스의 모양, 크기, 테두리, 그리고 배경색 등을 조절할 수 있다. 또한, resize와 outline 속성을 사용하여 텍스트 박스의 크기 조절 가능 여부와 외곽선 스타일을 설정할 수 있다. 플렉스박스 (Flexbox) 플렉스박.. 2023. 5. 26. [Website] 트랜지션 (Transition) 트랜지션 (Transition) CSS 트랜지션과 애니메이션은 웹 페이지에서 요소의 스타일 변경에 부드러운 효과를 적용하는 데 사용된다. 트랜지션은 요 소의 두 가지 상태 간의 스타일 변경을 부드럽게 처리하는 반면, 애니메이션은 여러 키 프레임에 따라 요소의 스타일을 변경할 수 있게 해준다. 이 두 기능은 웹 페이지에 독특한 효과와 동적인 요소를 추가하는 데 도움이 된다. html 2023. 5. 26. [Website] 그림자 (Shadows) 그림자 (Shadows) 그림자는 웹 페이지에서 요소에 깊이와 입체감을 추가하는 데 사용되는 CSS 효과이다. 그림자는 주로 text-shadow와 box-shadow 두 가지 유형으로 사용된다. text-shadow는 텍스트에 그림자를 적용하고, box-shadow는 요소의 경 계 상자에 그림자를 적용한다. html Hello World Hello World Hello World 1 This is a card 2023. 5. 26. [Website] 그레디언트 (Gradients) 그레디언트 (Gradients) 그레디언트는 둘 이상의 색상 사이의 점진적 전환으로 구성된 특수 유형인 데이터 유형으로 표현된다. 선형, 방사형 및 원추형의 세 가지 그레디언트 유형을 선택할 수 있다. 또한, 함수를 사용하여 반복 그레디언트을 만들 수도 있다. html Rounded Corners Rounded Corners Rounded Corners This div uses an image border Welcome Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mi metus, imperdiet eu vehicula ut, pulvinar vitae mauris. Nunc fringilla accumsan enim, id vestib.. 2023. 5. 26. [Website] 가상 클래스 (Pseudo Classes) 가상 클래스 (Pseudo Classes) 가상 클래스 (Pseudo Classes)는 웹 페이지 요소의 특정 상태에 따라 스타일을 적용하는 CSS 기능이다. 가상 클래스는 요 소 이름 뒤에 콜론(:)을 사용하여 표시하며, 가상 클래스에 따라 다양한 상태에 스타일을 적용할 수 있다. 예를 들어, :hover, :active, :focus, :first-child, :last-child, :nth-child() 등의 가상 클래스를 사용할 수 있다. html Pseudo click List Item List Item List Item List Item List Item List Item List Item List Item css a:hover { color: red; font-weight: bold; } ... 2023. 5. 26. [Website] CSS 위치 지정 및 배경 위치 (Position) CSS에서 위치 지정은 웹 페이지의 요소들을 원하는 위치에 배치하는 데 사용되는 기능이다. position 속성을 사용하여 위치를 지정할 수 있으며, static, relative, absolute, fixed, sticky와 같은 값을 가질 수 있다. 또한 top, bottom, left, right 속성을 사용하여 위치를 더 정확하게 조절할 수 있다. 배경 (Background) 배경 스타일은 웹 페이지의 요소에 배경 색상, 이미지, 반복, 위치 등을 적용하는 데 사용되는 CSS 기능이다. background-color, background-image, background-repeat, background-position 등의 속성을 사 용하여 배경 스타일을 정의할 수 있다... 2023. 5. 26. [Website] HTML 태그 (1) HTML 태그 HTML의 요소를 나타내는 꺽쇠 괄호 ()로 둘러싸인 명령어이다. 대부분의 태그는 시작 태그와 종료 태그로 구성되어 있다 (ex: 내용). 일부 태그는 단독으로 사용 가능하다 (ex: ). 자체 닫기 줄 바꿈 태그는 이다. 텍스트 관련 태그 , , ..., 제목 (heading) 태그, 중요도에 따라 h1부터 부여 문단 (paragraph) 태그 굵은 글씨 (bold)로 표시 기울임꼴 (italic)로 표시 줄바꿈 미리 서식이 지정된 텍스트를 표시, 공백과 줄바꿈을 그대로 유지 리스트와 표 순서 없는 리스트 (unordered list) 생성 순서 있는 리스트 (ordered list) 생성 리스트의 항목 (list item) 지정 표 (table) 생성 표의 행 (row) 생성 표의 열 .. 2023. 5. 25. [Website] 웹 데이터 웹 데이터 HTTP는 웹 문서 전송을 위한 프로토콜이었지만 웹 문서뿐만 아니라 웹 데이터를 전송한다. 브라우저를 통해 사용자에게 문서를 보여준다. 자바스크립트를 통해 데이터를 웹 문서에 렌더링한다. JSON (JavaScript Object Notation) JSON은 속성-값 쌍, 배열 자료형 또는 기타 모든 시리얼화 가능한 값 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 자바스크립트 객체의 표현이고 웹의 데이터 교환 형식 중 하나이다. Number (숫자) 정수와 실수 String (문자열) 큰 따옴표로 이루어진 문자들의 나열 Boolean true와 false를 가지는 값 Array (배열) 값들의 나열 Object .. 2023. 2. 13. [Website] HTML 프로토콜 HTML 프로토콜 서버와 클라이언트가 웹 문서를 주고 받는 방식은 HTTP이다. 여기서 데이터는 HTML, JSON이 해당된다. URL (Uniform Resource Locator) URL (Uniform Resource Locator)은 인터넷에서 웹 페이지, 이미지, 비디오 등 리소스의 위치를 가리키는 문자열이다. HTTP 맥락에서 URL은 "웹 주소" 또는 "링크"라고 불린다. URL은 웹 리소스를 나타낸다. HTML 메서드 (Method) GET 해당 리소스 (URL)에 대한 조회에 대한 메서드 POST 해당 리소스의 사용, 생성, 변경에 대한 메서드 PUT 해당 리소스의 변경에 대한 메서드 PATCH 해당 리소스의 부분 변경에 대한 메서드 DELETE 해당 리소스에 대한 삭제 상태 코드 4XX.. 2023. 2. 13. [Django] URL's / Views URL's 인터넷의 모든 페이지에는 고유한 URL이 필요하다. 프로그램은 해당 URL을 여는 사용자에게 무엇을 표시해야 하는지 알 수 있다. 장고에서는 URLconf (URL 구성)라는 것을 사용한다. URLconf는 장고가 올바른 보기를 찾기 위해 요청한 URL과 일치하도록 시도하는 패턴의 집합이다. 프로젝트 이름으로 생성한 폴더에서 setting.py에 다음을 추가한다. # Application definition INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.con.. 2023. 2. 1. 이전 1 2 다음 728x90 반응형 LIST
