Front - HTML

YOOJUN·2023년 2월 5일

Front

목록 보기
1/6
post-thumbnail

HTML & CSS

HTML이란?

HTML(HyperText Markup Language)

  • 웹 페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어

TAG

  • 부등호(<>)로 묶인 HTML의 기본 구성 요소
  • 형식
<태그 속성 = "속성값"> 내용 </태그>
  • Tag는 컨텐츠를 감싸, 정보의 성격과 의미를 정의.
  • 닫는 태그 앞에는 /가 붙는다.
  • 속성은 태그의 부가적 정보를 입력한다.

div

<div> 내용 </div>
  • 컨텐츠를 목적에 따라 묶을 때 사용하는 용도.
  • block특성이며, width, height의 영향을 받는다.
  • 새로운 라인에서 시작하며 화면 크기 전체의 가로폭을 받는다.

span

<span> 내용 </span>
  • 분할 영역을 지정하는 용도로 사용된다
  • 특별한 기능X
  • inline특성을 갖는다.
  • div와 달리 줄바꿈이 되지 않는다.

img

<img src = "이미지 경로"/>
<a href = "이미지 경로" target="새 창 링크">내용</a>
  • 이미지 삽입을 위해 사용

  • 삽입 방법

    1. 이미지를 다운로드 후 파일 경로 삽입(절대 / 상대)
    2. 다른 웹페이지의 이미지 주소를 복사해서 삽입
  • self-closing tag 닫아주지 않아도 된다.

  • lnline 특성.

  • target 속성은 새 창으로의 링크.

ul, li

<ul>
  <li>home</li>
  <li>About us</li>
  <li>Contact</li>
</ul>
  • ul : li의 부모태그로 반드시 자식태그를 갖는다.
  • Unordered list 순서가 정해지지 않은 리스트의 약자.
  • 앞의 불렛이 붙는다.
  • block특성을 갖는다.

input

  • Text, Radio, CheckBox 등을 삽입할 때 사용.
text : 텍스트 입력 가능
radio : 옵션항목 선택 가능
textarea : 텍스트 여러줄 가능
checkbox : 체크박스 체크 가능
password : 비밀번호 형식 입력 가능, 암호화되어 보여진다

button

  • form 요소 중 하나로써, 페이지에 버튼을 넣고 form을 전송할 때 사용
<button>버튼에 표시될 이름</button>

profile
거북이 개발자

0개의 댓글