본문 바로가기

html

(15)
[PHP] 시작 태그와 종료 태그의 종류 / HTML코드에 PHP코드 삽입하기 ▶ 시작 태그와 종료 태그의 종류 / HTML코드에 PHP코드 삽입하기
[CSS] 가상 클래스 선택자(link, visited, active, hover, text-decoration) ▶ 가상 클래스 선택자(link, visited, active, hover, text-decoration) ● 가상 클래스 선택자 : 선택자라는 것은 태그, id, class등과 같이 html문서에 존재하는것들을 지정하는것입니다. 반면에, 가상클래스 선택자는 어떤상태를 의미하고 이런 상태에는 태그, id, class처럼 html문서 상에 있는 것이 아닙니다. 예를 들어서 상태를 지정하는 가상 선택자에는 hover선택자, link선택자, visited선택자, active선택자가 있습니다. - link : 웹 문서에서 사용자가 방문하지 않았던 곳을 표시합니다. - visited : 웹 문서에서 사용자가 방문한 곳을 표시합니다. - hover : 웹 문서에서 사용자가 링크에 마우스 포인터를 올리는 순간을 나타..
[CSS] CSS의 개념이해 및 사용법 ( 간단한 실습 ) ▶ CSS의 개념이해 및 사용법 ( 간단한 실습 ) ● CSS란? : CSS라는 언어는 HTML이 기반입니다. HTML을 모른다면 CSS를 사용할 수 없습니다. 설명을 들으면서 찾아서 배운다면 문제가 안되지만, HTML의 기본적인 지식이 있으면 이해하기 수월합니다. HTML은 정보를 담고, CSS는 HTML의 정보들을 꾸며주는 디자인이라고 생각하시면 됩니다. 예를들어, 제목은 글자 크기도 크고 두껍게 표시하고 내용은 작은 글씨크기와 얇게 표시하고싶다면 HTML로 제목과 내용을 작성하고 CSS로 제목과 내용의 style을 꾸며줄수있습니다. ● CSS의 사용법 CSS는 기본 구조가 딱히 없기에, HTML의 사이에 을 넣어주고 꾸며주면 됩니다. 밑에 실습들을 통해 배워보겠습니다. Universal Select..
[HTML5] header / nav / footer / section / article / figure 의 사용법 ▶ header / nav / footer / section / article / figure 의 사용법 빨간 네모는 영역입니다. 페이지명(로고)와 다른 페이지로 이동하기 위한 네비게이션을 담고있습니다. 말그대로 '머릿글'이며, 웹 페이지영역에서 해당 부분의 머리글역할을 합니다. 태그를 담는 용도로도 사용이됩니다. 주로 메뉴들을 담는 역할을 하며 다른 페이지로 navigate(nav)해주는 역할을 합니다. 영역입니다. 다른 페이지로 이동하기 위한 네비게이션입니다. 영역입니다. 태그와 태그는 나누기가 나름이지만, 어떤 부분에 사용되는지에 대해 이해를 돕기위해서 임의로 구분을해봤습니다. 영역입니다. 본내용들이 들어가는 부분이라고 생각하시면 됩니다. 영역안에서 또 영역이 나눠지는데 밑에 사진에서 설명드리겠습니..
[HTML] div태그와 span태그의 사용법과 차이점 ▶ div태그와 span태그의 사용법과 차이점 div 공간 분할 div 첫 번째 영역입니다. div 두 번째 영역입니다. div 세 번째 영역입니다. span 공간 분할 span 첫 번째 영역입니다. span 두 번째 영역입니다. span 세 번째 영역입니다. 와 태그를 실습해보겠습니다. 구역 구별이 가능하게 style로 뒷배경을 색상을 넣어봤습니다. div는 해당 가로글이 모두 적용이 되는걸 확인할 수 있는 반면에, span은 inline으로써 옆으로 붙는걸 확인할 수 있습니다. div 공간 분할 div 영역. span 첫 번째 영역입니다. div 영역. span 두 번째 영역입니다. div 영역. span 세 번째 영역입니다. div영역에 pink를 주고 그안에 span을 넣어주고 그리고나서 로 태그..
[HTML] form태그와 fieldset / legend태그 및 속성 (method, name, action, onsubmit, target) ▶ form태그와 fieldset / legend태그 및 속성 (method, name, action, onsubmit, target) 잘 넘어오나 위 소스는 아래 태그의 속성인 action이 잘 사용되는지 확인하기위한 페이지입니다. 간단하게 "잘 넘어오나"라는 문구만 입력한 test.html입니다. 이름 주소 태그에서 action속성을 사용해보겠습니다. 안에 action속성으로 기존에 위에서 만든 test.html을 넣어줍니다. 저번시간에 실습했던 태그에서는 reset과 submit버튼이 작동하지않았는데요 이번에는 정상작동이 되는걸 확인하실수 있습니다. 그이유는 reset과 submit버튼은 반드시 태그안에 작성되어야 작동이 됩니다. 초기화 버튼 클릭시 입력된 이름과 주소가 사라지고, 전송을 버튼 클릭..
[HTML] input태그 및 속성 (type, text, password, hidden, radio, checkbox, search, number) 사용법 ▶ input태그 및 속성 (type, text, password, hidden, radio, checkbox, search, number) 사용법 태그는 에 작성하고, type은 위에서 많은 종류가 있지만, 위 소스에서는 button부터 checkbox까지를 사용해봤습니다. 어떤 type을 사용할것인지 괄호안에 작성해주고, 버튼을 사용한다면 안에 입력될 글자를 value속성을 사용해서 작성해줍니다. 지금은 submit과 reset버튼이 모두 작동이 안되고 버튼과 같아보이지만, 이 두개 버튼은 태그편에서 설명해드리겠습니다. ( 이때, 괄호는 소괄호 or 중괄호 둘중에 아무거나 사용하면됩니다. ) 10대 20대 30대 40대 이번에는 type을 redio만해서 사용해봤습니다. name속성에 age를 작성해..
[HTML] ul / li / ol / dl / dt / dd 사용법 ▶ ul / li / ol / dl / dt / dd 사용법 좋아하는 것 스포츠영화 스포츠영화 스포츠영화 스포츠영화 실험 결과를 보며 실습하겠습니다. * 순서가 매겨지지 않는 태그입니다. 단순하게 목차라고 생각하시면됩니다. 아무 속성도 주지않을경우, 기본값으로 꽉찬 동그라미가 나옵니다. type에 circle 속성을 이용하면 구멍이난 동그란모양이 나옵니다. square속성은 꽉찬 네모가 나옵니다. * ul에 들어가는 속성(문구)라고 생각하시면됩니다 좋아하는 것 스포츠 영화 스포츠 영화 스포츠 영화 스포츠 영화 * 태그는 과 달리 순서가 매겨지는 태그입니다. 위에서 보는바와 같이 기본값으로 숫자가 만들어집니다. type 으로 a를 주고 start를 3부터 주면 a,b,c순으로 c가 먼저시작되기에 c와 d순..