2 분 소요

HTML 태그 기초

img 태그, 이미지

  • < img > 로 사용하며, 빈 태그이다. (내부 리소스 방법)

    <!-- src속성은 이미지의 위치경로를 찾는다 -->
<img src="./images/example.png" width="100" height="100">

    ./는 현재경로이며 /는 폴더 구분자이다. 즉, images폴더 안의 example.png 이미지를 가져오는 것이다.

    ./ -> 현재 폴더

    ../ -> 상위 폴더

    ../../ -> 상위 폴더의 상위 폴더

    위치 기준은 항상 html파일 위치가 기준이다.

    image-20220108112501490

  • 이미지가 깨져보인다면?

    alternative의 약자인 alt속성을 이용하여 이미지의 설명을 적어놓는다.

    <img src="../images/example.png" width="100" height="100" alt="ex라는 글자가 적힌 이미지">

    image-20220108112414864

  • 이미지의 크기 조정

    width와 height 속성을 사용하여 높이와 넓이를 맞춘다 단, 두 속성의 수치를 너무 막 주면 사진의 비율이 이사해진다.

    단순히 숫자로 정할 수도 있고, %를 사용하여 해당 비율만큼 축소해서 사용할 수 도 있다.

    <img src="./images/example.png" width="100" height="100">
<img src="./images/example.png" width="10%" height="10%">

  • 외부 리소스 방법

    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

    이 처럼 외부 사이트에서 주소를 가져와 사용하는 것이 외부 리소스 방법이다.

  • a태그와 같이 쓰기

    만약 a태그안에 img태그를 사용하면 어떻게 될까?

    <a href="https://google.com" target="_blank">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</a>

    이렇게 같이 사용한다면 해당 Google이미지를 클릭하면 href에 적힌 주소로 이동하게 된다.

왜 HTML 태그를 배우고 익혀야 하는가?

대충 배우고 CSS태그로 다 처리하면 되는거 아닌가?

하지만 a태그는 링크, h태그는 제목, img태그는 이미지를 삽입하는 각각의 의미를 가지고 있는데,

상황과 의미에 맞지 않는 태그를 사용하게 되면 내가만든 HTML문서를 파악하기 어려워진다.

그리고 파악하기 힘든 만큼 가치도 낮아지게 될 것이다.

가치가 낮아지면 사람입장에서는 유지보수가 힘들어지고, 검색엔진 입장에서는 저품질 HTML이라고 생각하기

때문에 검색엔진 노출 순위에 악영향을 주게된다.

텍스트 강조

  • strong태그를 사용하여 중요한 텍스트를 표시한다.

    em태그를 사용하면 텍스트가 기울임으로 표시된다.

  • strong은 중요도, em은 강조로 사용이 나누어진다.

    사용할때 텍스트가 중요하다면 strong을 사용하고, 강조만 하고싶다면 em을 사용한다. 문맥적 의미를 잘 생각

  • strong태그와 b태그 / em태그와 i태그의 차이점

    strong태그는 문법적 의미로 중요도를 의미하는것이라면,

    b태그는 단순히 시각적으로만 굵게 해주는 효과이다.

    em태그는 strong과 b태그의 차이점과 마찬가지로 문법적 의미로 강조하는것이라면,

    i태그는 단순히 시각적으로만 하는 차이가 있다.

    <p>
<strong>중요:</strong>
<em>임산부, 어린이, 노약자</em><br>
<strong>중요하면서<em>강조</em></strong><br>
<em>강조하면서도<strong>중요한 텍스트</strong></em><br>
<!--strong을 중첩하면 가장 안쪽에 있는 strong속성이 가장 중요도가 높다.-->
<strong>중요한 텍스트인데<strong>이건 더 중요한 텍스트</strong></strong><br>
<!--em을 중첩하면 가장 안쪽에 있는 em속성이 가장 중요도가 높다.-->
<em>강조하고 싶은 텍스트인데<em>이건 더 강조하고 싶은 텍스트</em></em>
<br>
<br>
<b>중요:</b>
<i>임산부, 어린이, 노약자</i>
</p>

    image-20220108133401171

목록 태그

  • ul태그는 비순서형 목록 태그이다. (unordered list)

    순서없이 차례대로 목록을 만들기에 좋다.

    li태그는 list item의 약자로 ul태그는 li태그를 이용하여 추가를 해줘야한다.

    자동적으로 들여쓰기와 기호가 붙여져서 나온다.

  • ol태그는 순서형 목록 태그이다. (ordered list)

    속성 type을 주고 속성값을 변경하면 그 속성값으로 순서가 변한다.

  • dl태그는 정의형 목록 태그이다. (definition list)

    하위 자식태그로 dt태그와 dd태그가 있다. (definition title / definition data)

    dt태그는 용어의 정의 / dd태그는 용어의 설명 으로 사용한다.

            <h1>오늘의 할일</h1>
        <ul>
            <li>고양이 목욕 시키기</li>
            <li>숙제하기</li>
            <li>운동하기</li>
        </ul>
        <ol type="A">
            <li>고양이 목욕 시키기</li>
            <li>숙제하기</li>
            <li>운동하기</li>
        </ol>
        <dl>
             <dt>한글</dt>
             <dd>가나다라</dd>
             <dt>영어</dt>
             <dd>abcd</dd>
             <dt>숫자</dt>
             <dd>1234</dd>
        </dl>

    image-20220108154414458

댓글남기기

참고