이전 포스트는 문단에 대한거라면!

이번 포스팅은 순서에 관한거야

 

글이라면 순서,목록이 있잖아?

학습지에서도, 동영상에서도 말이야

 

그래서 한번 정리해봤어.

 

이번에도 쉽게 한번 접근해보자!

 

소스를 쳐보자아아아


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>목록만들기!</title>  
  </head>
  <body>
    <h1>거인국 축구의 법칙</h1>
    <!-- 순서없는 목록 -->
    <ul>
      <li>주연
          <!-- 순서가 있는! 1, 2, 3 ... 기본 순서 -->
        <ol>
          <li>김병만</li>
          <li>이수근</li>
        </ol>
      </li>

      <li>조연
        <!-- 순서가 있는! I, II, III ... 순서 -->
        <ol type="I">
          <li>스머프</li>
          <li>가가멜</li>
          <li>베어그릴스</li>
        </ol>
      </li>

      <li>스태프
        <!-- 순서가 있는! A,B,C ... 순서 -->
        <ol type ="A">
          <li>카메라감독</li>
          <li>오디오감독</li>
          <li>조명감독</li>
          <li>박항서감독</li>
          <li>분장팀</li>
        </ol>
      </li>
      <li>협찬
        <!-- 순서가 있는! a,b,c... 순서 -->
        <ol type ="a">
          <li>나</li>
          <li>너</li>
          <li>우리</li>
        </ol>
      </li>
      <li>적
        <!-- 순서가 있는! i, ii, iii 순서-->
        <ol type="i">
          <li>코로나</li>
          <li>아읍신조</li>
        </ol>
      </li>
      <li> 지난이야기
        <!-- 
          설명을 위해 사용 하는 목록
          dl로 감싸주고 
          dt는 제목
          dd는 내용 설명
        -->
        <dl>
          <dt> 1화 ) 맛은 지독하군요 우웨엑</dt>
          <dd> 고립된 병만, 수근 , 베어그릴스는 식량을 찾아 나선다</dd>
        </dl>
      </li>
    </ul>
  </body>
</html>

 

 

어떄? 정신없지? 

<!-- 내용 --> 이 부분은 '주석'이라고 해서

주로 메모를 남기지.. 프로그래밍 언어에서도

이와같은 마크업 언어에서도 주석문은 있어,

 

프로그램에 영향을 주지도 않고 

뷰를 구성하는데 영향을 주지도 않아!

 

근데 왜쓰냐!?

보려고, 보라고 쓰는거지!

그럼 위에 소스들의 실행 화면을 볼까 ?

 


이제 확실히 느껴져 ?

 

간단 정리 해주지!


ul 태그

 

●주연 이렇게 나오는 녀석있지? 그것처럼 순서 없이 표현을 해줘 


ol 태그

 

1,2,3 a,b,c A,B,C I,II,III 등으로 순서를 표현하는 녀석이야

 

ol type = "A" 로 해주면 대문자

ol type = "a" 로 해주면 소문자

 

ol type = "I" 로 해주면 대문자 로마숫자

ol type = "i" 로 해주면 소문자 로마숫자

 

ol만 써주면 기본타입으로 아라비아 숫자가 들어가


li 태그 

 

리스트가 되는 친구인데 ul 안으로 들어가면 ●로 되는 녀석이고

li안으로 들어가면 순서가 되는 친구지


dl 태그

 

주로 설명을 하는 역할로 사용이 되는 친구고 주로 아래 친구들을 감싸


dt 태그

 

대부분 그에 대한 제목을 쓰고


dd 태그는

 

내용을 쓰는거야


이게 오늘의 정리인데 어때?

항상 말했지만 외우지마! 

 

어떻게 쓰는지 아는게 중요한거야

 

이 친구들은 대괄호 중괄호 소괄호처럼의 프로세스를 가져

큰상자 안에 중간 상자, 중간 상자 안에, 작은 상자 처럼 말이야

{ [ ( ) ] } 

 

이런식으로 해서 그들이 약속하고 구성하는 구성을 지켜주니까 

태그를 못외울지는 몰라도 이건 알아두길 바래!


예 )

<dl>
  <dt>
    <dd>
    	내용
    <dd>
  </dt>
</dl>
<ul>
	<li> 내용 1 </li>
	<li> 내용 2 </li>
</ul>
<ol>
	<li> 내용 1 </li>
	<li> 내용 2 </li>
</ol>

 


텍스트 빼고나니 무지 쉽지?

간단하고 말이야

 

접근하기는 정말 쉬운 언어니까 이해만 해도

나중에 가서는 소스를 보면

"아, 여기서 여기까지가 하나의 구성이구나!"

라고 할 수 있으니 차근차근 잘 따라와주길바래!

 

모르는게 있다거나, 내가 틀린 부분이 있다면 언제든지 

댓글로 날 때려 패주길 바래!

 

그럼 20000!

  1. Favicon of https://lubutler.tistory.com BlogIcon 루집사 2020.02.10 17:20 신고

    소스만 적혀 있는거 보고 머리가 아팠는데.. ㅋㅋ
    밑에 간단하게 설명해주셔서 쉽게 알 수 있을거 같네요 : )

    • Favicon of https://kecoz.tistory.com BlogIcon kecoz 2020.02.10 17:22 신고

      앞으로 점점 더 쌓아서 모든 사람들이 참고할 수 있는 블로그를 만드는게 목적입니다 : ) 천천히 공유하고 함께해 보아요! : ) 감사합니다 ㅎㅎ

  2. Favicon of https://html6.tistory.com BlogIcon HTML6 2020.02.10 20:19 신고

    오늘도 친구처럼 잘 설명해주셔서 잘 보고갑니다!^^

    • Favicon of https://kecoz.tistory.com BlogIcon kecoz 2020.02.10 21:57 신고

      오늘도 방문해 주셔서 너무 감사해요 ㅎㅎ : )

  3. Favicon of https://wendytour.tistory.com BlogIcon 웬디투어 2020.02.10 21:48 신고

    소스가 많이 생소했는데 이해하기 쉬운 말로 적어 주셔서 보면서 이해되는 신기한 경험하고 갑니다. ol 태그가 방법이 정말 신기하네요~ 감사합니다.

    • Favicon of https://kecoz.tistory.com BlogIcon kecoz 2020.02.10 21:52 신고

      감사합니다 : ) 보면서 이해가 되셨다면 저는 소기의 목적을 달성했습니다 ㅠ_ㅠ ㅎ 방문해주셔서 많이 감사합니다 ㅎㅎ

  4. Favicon of https://freesia1092.tistory.com BlogIcon 예쁜엄마♡ 2020.02.10 23:18 신고

    🙄

    • Favicon of https://kecoz.tistory.com BlogIcon kecoz 2020.02.10 23:28 신고

      ㅎㅎㅎ 천천히 읽어보시면 편하실거에요 !ㅎㅎ

  5. Favicon of https://sudml4.tistory.com BlogIcon JY_B 2020.02.11 17:28 신고

    코딩의 코자도 모른데 블로그도 꾸미고 한다고 코딩도 많이 찾아보는데 좋은 정보를 알고 가요 ^^
    구독하며 자주 소통해요 ^^

    • Favicon of https://kecoz.tistory.com BlogIcon kecoz 2020.02.11 17:37 신고

      JY_B님 방문해주셔서 감사합니다 : ) 항상 좋은글 많이 남겨서 처음 접하는 분들도 쉽게 접할 수 있도록 더 노력하고 있습니다. 우리 자주 소통해요 ㅎㅎ !