멋쟁이 사자처럼 <HTLM> 수업하기!

250x250

Notice

Recent Posts

Recent Comments

Link

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

Tags more

Archives

Today

Total

관리 메뉴

Ch.Covelope

멋쟁이 사자처럼 <HTLM> 수업하기! 본문

HTML

멋쟁이 사자처럼 <HTLM> 수업하기!

Chrysans 2021. 11. 3. 08:11

728x90

계속해서 연습과 복습으로 구조와 시멘틱에 대해 이해하기.

멋사 2일 차 수업 때 html 수업 후 각자 http://www.paullab.co.kr/about.html 해당 주소의 페이지를 보고 html로 구조를 생각하면서 시멘틱 한 마크업을 작성하는 과제를 받았다. (수업에서 배운 내용 한도에서 최대한)

처음에는 <div> 로만 사용해서 작성하는줄 알고 금방 해버렸는데 내가 잘못 이해했다는 걸 알고 다시 처음부터 작성했는데 다 하고 나서 강사 님하고 비교해보니 너무나도 많은 부족함이 눈에 보였다.

About 페이지의 최상당 부분

내가 작성한 html

    <h1>
      About
    </h1>
    <p>
      " 기술의 교육 기회를 누구나 차등없이 받을 수 있게 대중화, 보편화, 시스템화 하는 것 "
    </p>
    <p>
      우리는 교육 특권의 대중화, 고급 IT 기술의 상용화를 도모합니다.
      또한 지역적 특성을 극복하고 ICT 지식에 대한 갈급함을 해소할 수 있도록 노력하고 있는
      ICT 연구 및 (코딩)교육 기관이며 다양한 사회 공헌 활동을 하고 있습니다.
    </p>

강사님이 작성한 html

    <header>
        <h1>
            회사 소개
        </h1>
        <h2>About</h2>
        <p>
            <strong>" 기술의 교육 기회를 누구나 차등없이 받을 수 있게 대중화, 보편화, 시스템화 하는 것 "</strong>
            우리는 교육 특권의 대중화, 고급 IT 기술의 상용화를 도모합니다.
            또한 지역적 특성을 극복하고 <abbr title="Information & Communications Technology">ICT</abbr> 지식에 대한 갈급함을 해소할 수 있도록 노력하고
            있는
            ICT 연구 및 (코딩)교육 기관이며 다양한 사회 공헌 활동을 하고 있습니다.
        </p>
    </header>

이미 시작부터 다르다 선생님은 <header> 를 이용해서 페이지의 헤더 부분을 알리고 <strong> 과<abbr>를 사용해서 <p>의 내용을 더 의미 있고 힘 있게 만드셨다.

다음으로 내려와서

내가 작성한 html

 <h2>
      About us
    </h2>
    <div>
      <div><img width="100px" src="img/logo_paullab.png" alt="">바울랩 </div>
      <div><img width="100px" src="img/logo_weniv.png" alt="">위니브 </div>
      <div><img width="200px" src="img/logo_jejucodingbasecamp.png" alt="">제주코딩베이스캠프 </div>
    </div>

강사님이 작성한 html

 <main>
        <section>
            <h2>About us</h2>
            <a href="#cont-paullab">
                <figure>
                    <img src="http://www.paullab.co.kr/images/logo_paullab.png" alt="">
                    <figcaption>바울랩</figcaption>
                </figure>
            </a>
            <a href="#cont-weniv">
                <figure>
                    <img src="http://www.paullab.co.kr/images/logo_weniv.png" alt="">
                    <figcaption>위니브</figcaption>
                </figure>
            </a>
            <a href="#cont-jecoba">
                <figure>
                    <img src="http://www.paullab.co.kr/images/logo_jejucodingbasecamp.png" alt="">
                    <figcaption>제주코딩베이스캠프</figcaption>
                </figure>
            </a>
             <section id="cont-paullab">

내가 짠 마크업은 허전하기 짝이 없는데 강사님은 해당 부분부터 <main>으로 감싸고 페이지에서 메인이 되는 내용이라는 걸 알려준다 그리고<section>으로 한 번 더 감싸주고 이미지와 글이 들어가는 부분은 이미지에 캡션을 줄 수 있는 <figure>, <figcaption>을 사용해서 구성하셨다. 무조건 길고 많은 게 좋은 건 아니지만 용도와 의미에 맞는 태그 사용은 굉장히 중요한 거 같다.

내가 작성한 html ( 단락의 내용은 길어져서 짧게 수정해서 올렸음)

  <section>
        <header> 
         <h4>
          Paul Lab
         </h4>
        </header>
        <p>
        바울랩은 제주도에 위치한 ICT 연구 및 (코딩)교육 기관으로 연구원, 학원, 출판사를 함께 운영하고 있습니다.
         .......................
       
        </p>
      </section>
  
      <section>
        <header>
          <h4>WeNiv(위니브)</h4>
        </header>
         <p>
         위니브는 "기술의 교육 기회를 누구나 차등 없이 받을 수 있게 대중화, 보편화, 시스템화 하는 것"에 설립 취지를 가지고 있습니다.
         ......................................
         
        </p>
      </section>
  
      <section>
        <header>
          <h4>제주코딩베이스캠프</h4>
        </header>
         <p>
         제주코딩베이스캠프는 제주에서 가장 큰 ICT 교육 행사로 카카오, 구름, 제주산학 융합원 등 기업 및 지자체와 함께 진행하고 있습니다. 13기까지 진행된 이 행사는 경쟁률 10:1에 약 400여 명이 참여하였고 도내뿐만 아니라 도외에서도 주목받고 있는 무료 캠프입니다.
         .........................................................
         
         </p>
         <span><a href="#">커리큘럼 보러가기!</a></span>
      </section>

나는 여기서부터 <section>으로 총 세 개를 구분하고 그 안에서<header>, <p>로 나누어서 작성했다. 3개로 나는 것을 한 번 더 감싸주는 게 더 나을 거 같다.

강사님이 작성한 html

 <section id="cont-paullab">
                <h3>
                    Paul Lab
                </h3>
                <p>
                    바울랩은 제주도에 위치한 ICT 연구 및 (코딩)교육 기관으로 연구원, 학원, 출판사를 함께 운영하고 있습니다.
                </p>

                <p>
                    진취적인 청년들이 경제적으로도 여유를 가지며 하고 싶은 연구를 할 수 있는 <strong>'연구의 場'</strong>, 연구의 경험과 결과를 열정과 책임으로 교육하는
                    <strong>'교육의 場'</strong>, 이로 인한 이익과 지식을 사회를 위하여 나누는 <strong>'나눔의 場'</strong>으로 회사와 학생, 사회의 상생을
                    도모합니다.
                </p>
            </section>
            <section id="cont-weniv">
                <h3>
                    WeNiv(위니브)
                </h3>
                <p>
                    위니브는 "기술의 교육 기회를 누구나 차등 없이 받을 수 있게 대중화, 보편화, 시스템화 하는 것"에 설립 취지를 가지고 있습니다.
                </p>

                <p>
                    지역 기반 ICT 대안 교육 플랫폼, 유료와 무료 ICT 영상 콘텐츠를 제작하며, 지역 교육 기회의 불평등, 접근성의 한계 등 기존 교육의 한계를 극복하기 위한 다양한 시도를 하고
                    있습니다.
                </p>
                <p>
                    또한 지역 혁신을 위한 사회 공헌 활동을 지속적으로 진행 중에 있으며 대표적으로 "선선하다 프로젝트", "We 드림(We Dream)" 프로젝트를 제주에서 진행 중에 있습 니다.
                </p>
                <p>
                    선선하다 프로젝트는 각 학교 ICT 분야를 선도하고 있는 학생을 초청하여 무료로 ICT 교육, 교재 지원, 동영상 강의 지원을 통해, 학생이 학생을 가르치도록 독려하는 비영리
                    프로젝트이며 We드림은 가정 형편이 어려우신 분들을 위해 매년 100명을 선발하여 온라인 강좌를 제공하는 프로젝트입니다.
                </p>
            </section>
            <section id="cont-jecoba">
                <h3>
                    제주코딩베이스캠프
                </h3>
                <p>
                    제주코딩베이스캠프는 제주에서 가장 큰 ICT 교육 행사로 카카오, 구름, 제주산학 융합원 등 기업 및 지자체와 함께 진행하고 있습니다. 13기까지 진행된 이 행사는 경쟁률
                    10:1에 약 400여 명이 참여하였고 도내뿐만 아니라 도외에서도 주목받고 있는 무료 캠프입니다.
                </p>

                <p>
                    또한 인프런, Edwith, 구름, 유튜브, 에듀캐스트 등의 교육 플랫폼에서 35개의 동영상 강좌를 제공하고 있으며 21년 2월 총 30,000명 이상의 수강생이
                    제주코딩베이스캠프의 강좌를 수강하고 있습니다.
                </p>
                <p>
                    수료증 제도를 통한 나노디그리 시스템이 도입되어 있고, 수료를 한 학생에게는 취업 매칭, 콘텐츠 공동제작의 기회를 제공하고 있습니다.
                </p>
                <a href="">커리큘럼 보러가기!</a>
            </section>

여기서 강사님은 3개의 <section>을 다시 하나의<section>으로 감싸주고 <header>는 사용하지 않으셨는데 <h3>으로만 표현해도 됐기 때문에 불필요한 태그는 사용 안 하신 거 같다. 그리고 문단에서 줄 바꿈이 되는 부분마다 하나의 문단으로 <p>를 사용해 구분하고 그 안에 중요한 부분은 <strong>으로 강조하셨다.

내가 작성한 html

  <header>
        Weniv
      </header>
      <div>
        <img src="#" alt="1">
        <img src="#" alt="2">
        <img src="#" alt="3">
        <img src="#" alt="4">
        <img src="#" alt="5">
        <img src="#" alt="6">    
      </div>
    </section>

나는 단순하게 <img> 태그로만 작성하고 끝냈는데 이게 클릭이 되는 컨텐츠고 이미지를 누르면 확대가 된다. 내 생각에는 이렇게 작성하면 클릭이 된다고 생각하고 짠 거 같다.

강사님이 작성한 html

<section>
            <h2>Wenivs</h2>
            <strong>위니브 사진 목록</strong>
            <ul>
                <li>
                    <button type="button"><img src="http://www.paullab.co.kr/images/about-us/us1.jpg"
                            alt="화창한 날씨에 성산일출봉을 배경으로 한 위니브 직원들의 단체사진. 다 같이 오른손을 들어 파이팅을 외치고 있다. "></button>
                </li>
                <li>
                    <button type="button"><img src="http://www.paullab.co.kr/images/about-us/us3.jpg"
                            alt="화창한 날씨에 건물의 옥상에서 성산일출봉을 배경으로 한 위니브 직원들의 단체사진. 다 같이 두 손을 공손히 모으고 있다."></button>
                </li>
            </ul>
        </section>

예시로 2개의 사진으로 작성하셨는데 <ul>, <li>를 사용해서 사진 이미지들을 리스트화 시키고 그 안에 <button>으로 이미지를 클릭할 수 있게 만드셨다.

마지막 <footer> 부분

내가 작성한 html

    <footer>
        <div>
          <ul>
            <li>Home</li>
            <li>채용정보</li>
            <li>캐릭터 소개</li>
          </ul>
          <ul>
            <li>About</li>
            <li>커리큘럼</li>
            <li>자료실</li>
          </ul>
        </div>
        <div>
          <ul>
            <li>블로그</li>
            <li>티스토리</li>
            <li>인스타</li>
            <li>페이스북</li>
            <li>유트브</li>
          </ul>  
        </div>

        <div>
          <div>
            <dl>
              <dt>회사명</dt> <dd>(주)위니브</dd>
              <dt>대표<dd>이호준</dd></dt>
              <dt>사업자번호<dd>546-86-01737</dd></dt>
              <dt>정보</dt> <dd>정보통신원</dd>
              <dt>주소<dd>제주도 제주시 수목원길 39-1,1층</dd></dt>
            </dl>
          </div>

        <span>
          Weniv Crop.
        </span>

      </div>

    </footer>

<div>가 많이 보인다 사실 어떤 태그로 감싸야할지 몰라서<div>를 사용했는데 위 내용들 중에 <ul> 부분들은 클릭하면 해당 링크로 이동되게 되어있는데 <a>로 링크를 주는걸 모두 빼먹었다.

강사님이 작성한 html

<footer>
        <h2>회사 정보 및 관련 사이트 목록</h2>
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">채용정보</a></li>
            <li><a href="">커리큘럼</a></li>
            <li><a href="">캐릭터 소개</a></li>
            <li><a href="">자료실</a></li>
        </ul>
        <ul>
            <li><a href="">blog 바로가기</a></li>
            <li><a href="">tstory 바로가기</a></li>
            <li><a href="">인스타그램 바로가기</a></li>
            <li><a href="">페이스북 바로가기</a></li>
            <li><a href="">유튜브 바로가기</a></li>
        </ul>
        <dl>
            <dt>회사명</dt>
            <dd>(주)위니브</dd>
            <dt>대표</dt>
            <dd>이호준</dd>
            <dt>사업자번호</dt>
            <dd>546-86-01737</dd>
            <dt>업종</dt>
            <dd>정보통신업</dd>
            <dt>주소</dt>
            <dd>
                <address>제주도 제주시 수목원길 39-1, 1층</address>
            </dd>
        </dl>
        <a href=""><small>&copy;Weniv Corp.</small></a>
    </footer>

봤을 때 뭔가 내가 작성한 거와 비슷하지만 <div>가 없고 나는 뭔가는 감싸야 된다는 생각만 하고 안 써도 된다는 머릿속에 없었던가 갔다. 그리고 <a> 사용해서 클릭 시 이동할 수 있게 짜고 아랫부분에 주소부분에는<address>를 사용해서 주소란 거 알려주었다.

해당 html 은 멋.사 2일 차에 따지고 보면 첫 수업이었는데 그때 작성했던 마크업이다. 이곳에 참여하기 전에 독학으로 html을 아주 잠깐 했었는데 그때는 <div>로만 모든 마크업을 짜도 되는 건가 싶고 시멘틱 하게 짜는게 뭔지도 몰랐었다. 물론 지금도 당연히 정확하고 보기 좋게는 못한다. 그래도 강의시에 내주시는 마크업 과제나 올라오는 html 을 보면서 계속 하다보면 점점 좋아질거라고 생각한다. 일단 지금은 시멘틱하게 만들진 못해도 시멘틱 한 게 뭔지는 이해했으니까.