본문 바로가기

Dev. Front-End/HTML

(13)
[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순..
[HTML] img태그 (이미지넣기) 사용법 ▶ img태그 (이미지넣기) 사용법 우선, 이미지를 넣기를 실습하기위해서 사진을 .jpg 또는 .png 등을 로컬 바탕화면에 저장한후, 위처럼 "WebContent"디렉토리에 해당 사진파일을 드래그해서 올려놓습니다! 하고나면 위사진처럼 test.jpg가 "WebContent"디렉토리안에 위치하게됩니다. 이미지 삽입하기 글자도 써 봅니다. 그림을 기준으로 글자가 중앙에... alt속성은 만약에 이미지가 오류 or 경로가 잘못되었을때 등을 대비하여 이미지를 대신해서 텍스트가 삽입됩니다. 현재는 문제발생이 되지않아 정상적으로 화면에 사진이 출력됩니다.
[HTML] a태그 (주소 링크 달기) 사용법 및 속성 ▶ a태그 (주소 링크 달기) 사용법 및 속성 네이버 네이버 네이버 문서에 링크한다. 빈 링크를 만들고싶다면, 빈 링크 사용해주면됩니다. 이미지를 넣는 방법을 모르신다면, 아래 " 태그 "편을 참고해주세요.
[HTML] table / caption / tr / td / th / colspan / rowspan / cellpadding / cellspacing 테이블만들기 ▶ table / caption / tr / td / th / colspan / rowspan / cellpadding / cellspacing 테이블만들기 테이블에 대한 제목 할일 영어국어미술 과학영어