2. HTML 태그

1. <span> 태그

<span></span> 태그는 <div></div> 태그처럼 특별한 기능을 갖고있지 않고 CSS와 함께 쓰인다. 

<div> 태그와 차이점은 display 속성이 block이 아닌 inline이라는 것이고

이는 CSS display 항목에서 세부 정보를 알 수 있다. 

요약하자면 <div>는 줄 바꿈이 되지만, <span>은 줄 바꿈이 되지 않는다. 

<div id="u_skip">
    <a href="#newsstand"><span>뉴스스탠드 바로가기</span></a>
    <a href="#themecast"><span>주제별캐스트 바로가기</span></a>
    <a href="#timesquare"><span>타임스퀘어 바로가기</span></a>
    <a href="#shopcast"><span>쇼핑캐스트 바로가기</span></a>
    <a href="#account"><span>로그인 바로가기</span></a>
</div>

2. <option> 태그

option 태그는 옵션 메뉴를 제공하는 드롭다운 리스트에서 사용되는 하나의 옵션을 정의할 때 사용한다. 

<option>요소는 <select>요소나 <datalist>요소 내부에만 위치하고 <option>요소는 아무런 속성도 명시하지 않은 채 사용할 수 있지만, value 속성은 명시하는 것이 일반적이다. 

<fieldset>
    <legend class="blind">검색</legend>
    <select id="where" name="where" title="검색 범위 선택" class="blind">
        <option value="nexearch" selected="selected">통합검색</option>
        <option value="post">블로그</option>
        <option value="cafeblog">카페</option>
        <option value="cafe">- 카페명</option>
        <option value="article">- 카페글</option>
        <option value="kin">지식iN</option>
        <option value="news">뉴스</option>
        <option value="web">사이트</option>
        <option value="category">- 카테고리</option>
        <option value="site">- 사이트</option>
        <option value="movie">영화</option>
        <option value="webkr">웹문서</option>
        <option value="dic">사전</option>
        <option value="100">- 백과사전</option>
        <option value="endic">- 영어사전</option>
        <option value="eedic">- 영영사전</option>
        <option value="krdic">- 국어사전</option>
        <option value="jpdic">- 일본어사전</option>
        <option value="hanja">- 한자사전</option>
        <option value="terms">- 용어사전</option>
        <option value="book">책</option>
        <option value="music">음악</option>
        <option value="doc">전문자료</option>
        <option value="shop">쇼핑</option>
        <option value="local">지역</option>
        <option value="video">동영상</option>
        <option value="image">이미지</option>
        <option value="mypc">내PC</option>
        <optgroup label="스마트 파인더">
            <option value="movie">영화</option>
            <option value="auto">자동차</option>
            <option value="game">게임</option>
            <option value="health">건강</option>
            <option value="people">인물</option>
        </optgroup>
        <optgroup label="네이버 랩">
            <option>긍정부정검색</option>
        </optgroup>
    </select>
    <input type="hidden" id="sm" name="sm" value="top_hty"/>
    <input type="hidden" id="fbm" name="fbm" value="0"/>
    <input type="hidden" id="acr" name="acr" value="" disabled="disabled"/>
    <input type="hidden" id="acq" name="acq" value="" disabled="disabled"/>
    <input type="hidden" id="qdt" name="qdt" value="" disabled="disabled"/>
    <input type="hidden" id="ie" name="ie" value="utf8"/>
    <input type="hidden" id="acir" name="acir" value="" disabled="disabled"/>
    <input type="hidden" id="os" name="os" value="" disabled="disabled"/>
    <input type="hidden" id="bid" name="bid" value="" disabled="disabled"/>
    <input type="hidden" id="pkid" name="pkid" value="" disabled="disabled"/>
    <input type="hidden" id="eid" name="eid" value="" disabled="disabled"/>
    <input type="hidden" id="mra" name="mra" value="" disabled="disabled"/>


    <div class="green_window" style=''>
        <!-- [AU] data-atcmp-element 에 해당하는 attribute를 추가해주세요. -->
        <input id="query" name="query" type="text" title="검색어 입력" maxlength="255"
               class="input_text" tabindex="1" accesskey="s" style="ime-mode:active;"
               autocomplete="off" placeholder="검색어를 입력해 주세요."
               onclick="document.getElementById('fbm').value=1;" value=""
               data-atcmp-element>
    </div>
    <button id="search_btn" type="submit" title="검색" tabindex="3" class="btn_submit"
            onclick="window.nclick(this,'sch.action','','',event);" style=''>
        <span class="blind">검색</span>
        <span class="ico_search_submit"></span>
    </button>
</fieldset>

3. <input> 태그

<input> 태그의 value 속성은 input 요소의 초깃값을 명시한다. value 속성은 input 요소의 type 속성값에 따라 다른 용도로 사용된다. 

- “button”, “reset”, “submit” : 버튼 내의 텍스트를 정의함.

- “hidden”, “password”, “text” : 입력 필드의 초깃값을 정의함.

- “checkbox”, “image”, “radio” : 해당 입력 필드를 선택 시 서버로 제출되는 값을 정의함.

 

또한, <input> 요소의 type 속성값이 “file”인 경우에는 value 속성을 사용할 수 없다.

 

4. <label> 태그

label은 폼의 양식에 이름 붙이는 태그이다. 주요 속성은 for이다. 

label의 for의 값과 양식의 id의 값이 같으면 연결된다. 

아래 예시에서는 label의 for와 input의 id가 같을 경우

 

	<p>
		<label for="jb-input-text">Input - Text</label>
		<input type="text" id="jb-input-text">
	</p>

5. <b>, <strong> 태그

<b>태그와 <strong> 태그는 텍스트를 굵게 표현할 때 사용하는 인라인 태그이다. <b>태그는 화면에 표시되는 텍스트를 굵게 효과만 주는것, <strong>태그는 화면에 표시되는 효과뿐 아니라 해당 텍스트가 중요한 텍스트라는 의미도 내포한다.

6. <i>, <em> 태그

두 태그는 텍스트에 기울임(이탤릭)효과를 주기 위해 사용하는 인라인 태그이다. 단, <i> 태그는 화면에 표시되는 텍스트에 기울임 효과만을 주는 태그이고, <em> 태그는 해당 텍스트가 중요한 텍스트라는 의미도 내포하는 태그

<div>
    <a href="https://news.naver.com/main/tv/index.naver?mid=tvh" class="card_news"
       data-clk="squ.line1">
        <i class="news_badge type_live">LIVE</i>
        <span class="news">저녁방송 메인뉴스 보기</span>
    </a>
</div>

7. <img> 태그

<img /> 태그는 이미지를 삽입하는 태그로, src 속성을 통해 이미지 경로를 지정합니다.

이미지 파일이 src 속성에서 지정한 경로에 없을시, 이미지는 출력되지 않거나 엑스박스가 뜨게 됩니다.

 

속성

• src: 이미지의 경로
• width: 이미지 가로 크기
• height: 이미지 세로 크기

사용법

<img src="my_profile.png" width="500" height="300">

출처: http://tcpschool.com