Hee Jun Kim🍀

바퀴를 다시 발명하는 한이 있더라도

Date:     Updated:

카테고리:

태그: ,


💡 유튜브 채널 ‘얄팍한 코딩사전’에서 제공하는 강좌를 보고 학습했습니다.
HTML과 CSS의 기초적인 내용을 웹에서 실습해볼 수 있는 강좌입니다.
강좌에서 배운 개념을 바탕으로 직접 문제를 만들고, 이를 풀어보는 식으로 독학했습니다.


속성(attribute)

앞서 태그를 배웠다. html 문서를 보면 태그만 있는 것이 아니라 그 옆에 무엇인가 따라오는 것들을 볼 수 있다.

<html>
<head>
	<link type="text/css" href="my_style.css">
</head>
</html>

위 코드에서 link 태그에는 type이란 것과 href라는 것이 존재한다. 이것들이 link의 속성이다.

속성은 태그의 동작을 설명하고 제어하는 역할을 한다. 위의 경우 link의 종류가 무엇인지 type 속성이 설명해주고, link의 파일 위치가 무엇인지를 href 속성이 설명해주고 있다.


목록을 표현하는 태그

<ul>은 unordered list로, 순서가 굳이 정해지지 않아도 되는 목록을 표현한다. 반대로 <ol>은 ordered list로, 순서가 의미가 있는 목록을 표현한다. 목록 태그를 작성할 때 자식 태그는 항상 <li>가 와야 한다. 이를 편하게 만드는 방법은 ul>li*(원하는 태그 수)를 입력하면 된다.

특히, <ol>에서는 원하는 서식을 변경할 수 있고 시작 넘버도 바꿀 수 있다. type과 start 속성으로 이를 표현하면 된다.

  <ul>
    <li>이틀치 옷</li>
    <li>세면도구</li>
    <li>수건</li>
    <li>이동경로
      <ol type="A", start="3">
        <li>회의실</li>
        <li>식당</li>
        <li>관광지</li>
      </ol>
    </li>
  </ul>

결과


용어와 정의 태그

<dl>, <dt>, <dd>는 용어와 정의를 표현하는 태그이다.

  • <dl>: 용어의 리스트를 만드는 태그
  • <dt>: 용어를 입력하는 태그
  • <dd>: 용어의 정의를 입력하는 태그
  <dl>
    <dt>노히트노런</dt>
    <dd>투수가 상대팀에게 안타나 실점을 1개도 허용하지 않고 경기를 끝내는 것</dd>
    <dt>사이클링 히트</dt>
    <dd>한 타자가 한 경기에서 1루타, 2루타, 3루타, 홈런을 모두 기록한 것</dd>
    <dt>퍼펙트게임</dt>
    <dd>9이닝 이상 한 투수가 모든 타자를 단 한 번도 1루로 내보내지 않고 승리한 것</dd>
  </dl>

위처럼 그냥 입력을 하는 것보다 <head> 부분에 아래 css를 입력하면 보다 예쁘게 출력된다.

<link rel="stylesheet" href="https://showcases.yalco.kr/html-css/01-04/05.css">


참고