[프론트엔드] 4. 핵심 요소 정리
[ 1 ] Inline
<img />
: 이미지를 삽입하는 요소 (Image)
예시 )
<img src="http://here.link.img" alt="대체텍스트" />
<a></a>
: 페이지를 이동하는 하이퍼링크를 지정하는 요소 (Anchor)
: 링크를 새탭에서 열게 해주는target="_blank"
와 함께 쓰이기도 함.예시 )
<a href ="https://www.naver.com" target="_blank">네이버</a>
<span></span>
: 구분을 위한 요소.
예시 )
<p> <span>이 단어만</span>따로 구분해줄 때 사용하지요. </p>
<br/>
: 줄바꿈 (Break)
예시 )
<p> 이제 여기서 <br/> 줄바꿈을 할거에요! </p>
<label></label>
: 라벨 가능 요소의 제목을 붙여주는 요소.
예시 )
<label> <input type="checkbox" />hello </label> <label> <input type="checkbox" />hi </label>
[ 2 ] Block
<div></div>
: 구분을 위한 요소 (Division)
예시 )
<div> <h1> hello world! </h1> </div>
<h1></h1>
: 제목을 의미하는 요소 (Heading)
: 1 부터 6 까지 있음. 숫자가 높을수록 중요도 하락.예시 )
<h1>가장 중요한 제목</h1> <h2>중요한 제목</h2> <h3>덜 중요한 제목</h3> <h4>안 중요한 제목</h4> <h5>더 안 중요한 제목</h5> <h6>더더 안 중요한 제목</h6>
<p></p>
: 문장을 의미하는 요소 (Paragraph)
예시 )
<p>이것은 문장입니다. 내가 임의로 줄바꿈을 넣어도 적용되지 않아요.</p>
<ul></ul>
<ol></ol>
<li></li>
<ul></ul>
: 순서가 필요없는 목록의 집합 (Unordered List)
<ol></ol>
: 순서가 필요한 목록의 집합 (Ordered List)
<li></li>
: 목록 내 각 항목 (List Item)예시 )
<ul> <li>마우스</li> <li>모니터</li> <li>키보드</li> </ul> <ol> <li>가</li> <li>나</li> <li>다</li> </ol>
[ 3 ] Inline-block
<input/>
: 사용자가 데이터를 입력하는 요소.
: 인라인요소를 베이스로 블록요소의 특징을 일부 가지고 있다.
: 너비와 높이, 여백 위아래 설정 가능.
: 입력받을 데이터 종류에 따라 type의 속성과 함께 사용한다.예시 )
<input type="text" /><br/> <input type="text" value="미리입력!" /><br/> <input type="text" placeholder="여기에는 이걸 입력할거에요!" /><br/> <input type="text" disabled /><br/> <label> <input type="radio" name="greeting" />hello </label> <label> <input type="radio" name="greeting" />hi </label>
[ 4 ] Table
<table></table>
: 표 요소.
: tr (table row) 와 td (table data) 로 구성된다.예시 )
<table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table>
Author And Source
이 문제에 관하여([프론트엔드] 4. 핵심 요소 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hello9721/프론트엔드-4.-핵심-요소-정리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)