반응형

html 6

[HTML] HTML 데이터 입력받기 / 버튼, 체크박스 생성하기 : <form>, <input>

#HTML ​ ​ 데이터 입력받기 HTML에서 데이터를 입력받고 전송하기 위해서는 태그를 사용한다 ​ 표시할 내용들(버튼, 체크박스 등등) ​ 위 형식을 따라 사용하며 action 속성에는 입력 데이터를 받아서 처리할 페이지의 URL을 넣으면 되고 method 속성에는 post, get, dialog 세 가지를 사용할 수 있다. ​ ​ ​ ​ post 방식은 데이터를 별도로 첨부하여 전달하는 방식이며 보안성 및 활용성이 뛰어나다. get 방식은 주로 중요도가 낮은 데이터를 전송할 때 사용된다. dialog는 양식이 태그 내부에 위치한 경우 제출하는 동시에 form 대화상자를 닫는 속성이다. ​ ​ ​ ​ ​ 다양한 데이터 입력 형식 : 태그 사용하기 ​ form 내부에 태그를 사용하여 다양한 데이터 입력..

개발/웹개발 2022.09.06

[CSS] 선택자 응용 20가지 : 여러 가지 요소, 요소 내부의 요소 등등 . .

#CSS ​ ​ ※ Ctrl+F로 키워드 검색이 가능합니다. ​ ​ ​ 선택자 응용 ​ ☆ 특정 요소 내부의 요소 : 상위요소 하위요소{property:value}. 단순히 한 칸 띄워서 작성한다. ​ ​ ★ 특정 id를 가지는 특정한 요소 : 요소#id{property:value}. 위 문서에서 단순히 #fancy로 를 선택할 수 있지만 #fancy를 가지는 다른 요소가 있는 경우 만을 선택하고 싶다면 plate#fancy를 사용한다. ​ ​ ☆ 특정 class를 가지는 특정한 요소 : 요소.id{property:value}. 특정 id를 가지는 경우와 유사. ​ ​ ★ 특정 요소 내부에 있으며, 특정 class를 지니는 경우 : 상위요소 하위요소.class{property:value}. bento 내..

개발/웹개발 2022.09.05

[CSS] 선택자란?, 선택자가 적용되는 우선순위(Selectors)

#CSS ​ 선택자는 HTML 내에서 어떤 Tag들에 스타일을 적용할 지 고르는 데 사용되며 그러한 규칙을 규정하는 '문법'이다. 선택자의 종류에는 크게 6가지가 있으며 다음과 같다. ​ 1. 모든 Tag에 적용하고자 할 때는 *를 사용 ​ 2. 특정 Tag에 적용하고자 할 때는 Tag이름을 사용 (h1태그에 적용하려면 h1{스타일} 형식을 사용) ​ 3. 특정 ID에 적용하고자 할 때는 #id를 사용 ​ 4. 특정 Class에 적용하고자 할 때는 .class를 사용 ​ 5. 특정 상태일 때 스타일을 적용하려면 tag:state{스타일} 형식을 사용 ​ 6. 특정 속성값(attribute)을 가지는 요소들에 적용하려면 tag[attribute=""]{스타일} 형식을 사용 ​ ​ CSS 문서는 선택자를 사..

개발/웹개발 2022.09.03

[CSS] CSS란?, CSS3를 HTML5에 적용하기

#HTML #CSS ​ ​ ​ CSS란 무엇인가? ​ Cascading Style Sheets(CSS)는 HTML이나 XML로 작성된 문서의 표시 방법(스타일)을 기술하기 위한 스타일 시트 언어이다. CSS는 요소(element)가 화면, 종이, 음성 등 다른 매체 상에 어떻게 렌더링되는지 지정한다.(색상, 크기, 모양 등) ​ 간단히 말해 웹페이지를 꾸미기 위해 작성하는 코드이다. ​ ​ HTML과 유사하게 CSS는 프로그래밍 언어가 아니다. 하지만 HTML과 같은 마크업 언어(markup)도 아니다. CSS는 Style sheet 언어인데 HTML 문서 내에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 뜻이다. subprofessor 결과화면 HTML 삽입 미리보기할 수 없는 소스 ​ 위와 같..

개발/웹개발 2022.08.31

[HTML] 항목, 리스트 만들기 : <ul>, <li>, <ol>

#HTML ​ ​ 웹 페이지에서 항목이나 데이터를 순차적으로 나열하는 것을 List(리스트)라고 한다. 리스트에는 크게 세 가지 종류가 있다. ​ : 순서가 없는 리스트 (unordered list) : 순서가 있는 리스트 (ordered list) : 정의 리스트 (definition list) ​ 이 글에서 정의 리스트는 다루지 않는다. ​ ​ 동그라미 리스트 : 검은색 동그라미로 항목을 표시하는 리스트로, 다음과 같은 형식으로 사용한다. ​ 1번째 항목 2번째 항목 . . . k번째 항목 ​ 과 내부에 들어갈 각 항목들은 태그를 사용하여 표시한다. ​ ​ 예시 코드는 다음과 같다. subprofessor HTML5 subprofessor CSS5 Java script subprofessor subp..

개발/웹개발 2022.08.28

[HTML] HTML 기본구조, 기본태그

#HTML ​ ​ ☆ html은 프로그래밍 언어가 아니다 ★ html은 연산이나 통신같은 기능을 수행할 수 없다 ☆ html은 단순히 웹페이지의 겉모습과 구조를 담당한다 ​ ​ ★ visual studio code에서 html파일을 열고 ! + TAB 또는 ! + ENTER 입력시 html 의 기본 구조 템플릿을 생성한다 ☆ 기본 구조는 내용 형식을 가지며 html은 이러한 태그들을 순서에 맞게 조합한 문서임 ★ html 문서는 문서의 특성을 명시하는 태그와 로 끝난다 ☆ html에서 태그는 크게 head 태그와 body 태그로 나눌 수 있다 ★ 외부자료에 대한 참조(CSS, JS), 웹사이트에 대한 정보는 head 태그에 들어간다 ☆ 실제 화면의 내용은 body 태그에 들어간다 ​ ​ HTML Basi..

개발/웹개발 2022.08.26
반응형