ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • <BoostCourse> Part 1. 웹 프로그래밍 기초 - 2. Front-End -HTML
      BoostCourse -풀스택 2021. 3. 19. 23:36

      2. Front-End-HTML

      *Front-End는 추후 올라올 HTML과 CSS를 참조하여 공부하면 더욱 좋습니다.

       

      ㅇ. tag

      - 태그는 그 의미에 맞춰서 사용한다

      - 왜냐하면 시각 장애인 분들을 지원하는 스크린 리더기 이런 것들이 올바르게 작동하도록.

      - 검색 엔진이 정보를 찾기 때문이기도 하다.

       

      ㅇ. tag의 종류

      - 링크, 이미지, 목록, 제목 etc

       

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>  <!--의미 없는 블록 태그 -->
        <h1>반갑습니다.</h1> <!--첫번째로 큰 제목태그-->
        여기 여러분들이 좋아하는 과일이 있어요
        <ul> <!--UnOrdered List : 순서가 없는 리스트-->
            <li><a href=https://www.naver.com>사과</a></li> <!--UL태그의 자식으로서 같이 꼭 다니는 태그 / a태그는 anchor 태크로 링크를 연결한다.-->
            <li>바나나</li>
            <li>메론</li>
            <li>귤</li>
        </ul>

    </div>
</body>
</html>

       

       

       

      html 실행 결과_1

       

      ㅇ. 레이아웃을 위한 HTML 태그

      - 레이아웃을 구성하는 태그도 역시 그 의미에 맞춰서 쓴다

      - 종류

      1) <header>~</header> // 상단

      2) <section>~</section> // 별도 영역 지정

      3) <nav> ~</nav> // 네비게이션

      4) <footer> ~</footer> // 하단

      5) <aside> ~ </aside> // 사이드에서 추가적인 정보

      6) <article> ~ </article> // 본문

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>header</header><!--헤더-->
    <div id ="container"> <!--본문 영역-->
        <nav> <!--네비게이션-->
            <li>home</li>
            <li>news</li>
            <li>sports</li>
        </nav>
        <aside> <!--사이드 바-->
            <ul>
                <li>로그아웃</li>
                <li>오늘의 날씨</li>
                <li>운세</li>
            </ul>
        </aside>
    </div>
    <footer>footer</footer> <!--footer-->
</body>
</html>

       

       

      html 실행결과 2

       

      * HTML은 구조를 잡는 언어이기에 이렇게 나온 것이고 CSS를 사용하면 디자인을 적용할 수 있다.

       

      - 대부분 PC버전은 header, nav , footer를 class로 주어 설정하는 경우가 있음

      - 모바일의 경우는 이를 준수해서 작성하는 경우가 많다.

      * html5에 등장한 것들도 있기에 호환성 문제로 아직 적용이 안된 것이 있을 수 있다.

      ㅇ. HTML 구조와 설계

       

       

      HTML의 구조

       

       

       

      Html로 구현하기 위한 목표

       

      위에 대한 구조를 Html로 만든 예시를 볼 것이다.

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>Company Name</h1>
        <img src="~~~~" alt="~~">
    </header>
    <section>
        <nav>
            <ul>
            <li>HOME</li>
            <li>HOME</li>
            <li>About</li>
            <li>Map</li>
            </ul>
        </nav>
        <section>
            <button>버튼</button>
            <div><img src="~~" alt="~~"></div>
            <div><img src="~~" alt="~~"></div>
            <div><img src="~~" alt="~~"></div>
            <button>버튼</button>
        </section>
        <section>
            <ul>
                <li><h3>About us</h3></li>
                <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis accusamus maiores nostrum, beatae sequi vel facilis exercitationem possimus voluptatibus consequuntur fugiat nesciunt fugit assumenda libero harum officiis nobis dolores. Velit!</div>
                <li><h3>What we do</h3></li>
                <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid magnam, excepturi iusto dicta perferendis cum id doloribus temporibus, et officiis vitae, mollitia aut dolorum dolor dolore? Similique voluptatem harum mollitia.</div>
                <li><h3>Contact us</h3></li>
                <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio explicabo optio distinctio et qui, inventore non quibusdam magnam nulla. Magnam ea nostrum expedita soluta inventore qui dolores, neque maiores mollitia.</div>
            </ul>
        </section>
    </section>
    <footer>Coptright @codesquad</footer>
</body>
</html>

      Html로 인터넷 창을 만들면 좀 안쓰럽다할 정도만 할 수 있지만 후에 접하게 될 CSS, JavaScript를 더한다면 그럴싸한 WebSite를 만들 수 있다.

       

      Html로 만들려고 했던 목표 구현 완료

       

      ㅇ. ID와 CLASS

      - id : identifier의 줄임말로 고유한 값으로 하나만 써야함.

      <div id="~~">~~</div>

      - 하나만을 제어하고 싶을 때 주로 사용된다.

      * 하나 이상만 써도 에러가 발생하지는 않음.

       

      - class

      <div class="~~">~~</div>

       

      <ul>
     <li class="our_description"><h3>About us</h3></li>
<div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis accusamus maiores nostrum, beatae sequi vel facilis exercitationem possimus voluptatibus consequuntur fugiat nesciunt fugit assumenda libero harum officiis nobis dolores. Velit!</div>
     <li class="our_description"><h3>What we do</h3></li>
<div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid magnam, excepturi iusto dicta perferendis cum id doloribus temporibus, et officiis vitae, mollitia aut dolorum dolor dolore? Similique voluptatem harum mollitia.</div>
     <li class="our_description"><h3>Contact us</h3></li>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio explicabo optio distinctio et qui, inventore non quibusdam magnam nulla. Magnam ea nostrum expedita soluta inventore qui dolores, neque maiores mollitia.</div>
</ul>

       * 전 chapter의 코드를 보면 ul와 li태그가 여러번 사용되었는데 이를 Style하거나 Control할 때 좀 더 세부적으로 하기위해 CLASS와 ID를 명시한 것이고 팀단위에서 룰을 정해 결정하는 것이 좋다.

      'BoostCourse -풀스택' 카테고리의 다른 글

      <BoostCourse> Part 1. 웹 프로그래밍 기초 - 1. WEB 개발의 이해  (0) 2021.03.17

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바