8/27 학습

HTML

• 웹 페이지 구조를 담당하는 마크업 언어
• tag들의 tree구조

HTML 주요 태그

• <div> Division : 한 줄을 차지

<div>content</div>
<div>content2</div>

• <span> Span : 컨탠츠 크기 만큼 공간을 차지

<span>content</span>
<span>content2</span>

• <img> Image
  • src : 속성(attribute), 키
  • src에 할당된 값 : attribute value

<img src=”https://abc.com/abc.jpg”>

• <a> Link
  • 새 창에서 띄우고 싶으면 target="_blank"속성을 추가

<a href=””>name</a>

name

• <ul> & <li> Unordered List & List Item
  • 순서 있는 리스트는 <ol>

<ul>
    <li>element1</li>
    <li>element2</li>
    <li>element3</li>
</ul>

• element1
• element2
• element3

• <input> Input(text, Radio, Checkbox)
  • “radio”박스는 여러개 중 하나만 선택 가능(“name”속성으로 그룹 설정 가능)

<p><input type="text" placeholder="type here"></p>
<p><input type="password"></p>
<p><input type="checkbox"></p>
<p>
  <input type="radio" name="radioBox">
  <input type="radio" name="radioBox">
  <input type="radio" name="radioBox">
</p>

• <textarea> Multi-line Text Input
  • input과 다르게 줄바꿈이 가능한 입력 from

<textarea>
first line
second line
</textarea>

• <section>
  • 큰 의미단위 구분
  • 시맨틱 엘리먼트(태그명을 보고 내용을 유추 가능)의 일부
  • <div>로 큰 구역을 구분하기 위하여 사용하는 것은 지양하기

CSS

• 디자인 구조를 시각화하는 스타일시트 언어

JavaScript

• 유저와 웹 페이지를 상호작용 할 수 있게 하는 프로그래밍 언어