강좌

|  다양한 분야에 다소 전문적인 도움이 되는 강좌들입니다.

조회 수 78 추천 수 0 댓글 6
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
Extra Form

지난 시간에는 홈페이지를 만드는 수단에 대하여 알아 보았습니다.

HTML은 Hyper-Text-Markup-Language 의 줄임말입니다. 즉, 프로그래밍 언어가 아닌 마크업 언어이죠.

이제 HTML5로 구조화된 페이지를 구축할건데요, 체계적으로 착착착 하는겁니다.


일단 실전에 앞서 예제를 보고 가겠습니다.

실제로 본인 홈페이지의 모습입니다.

각 부의 명칭을 설명하자면,

H - Header

N - Nav

S - Section

F- Footer

입니다.


이외에도 aside(사이드바) 라는게 있습니다.

Section 안에는 Article이라는 개념도 있지만, 여기서는 다루지 않겠습니다.

그런데! 우리는 이것들을 하기 전에 먼저 문서 맨 위에 적어 주어야 할 것이 있습니다.


<!DOCTYPE html>  <!--HTML5 선언-->                       

한꺼번에 설명 드리겠습니다.

일단 각주에 적어드린 바와 같이 HTML5를 선언하는 부분입니다만 이걸 매우 중요하다고 하는 이유는...

이걸 안쓰면 일부 코드가 작동을 하지 않기 때문입니다.

그래서 써주실 것을 권장드립니다.


코더도 사람입니다. 자기가 짠 코드를 알아볼 수 있어야 합니다.

그래서 <!--내용-->과 같이 각주를 달아 줍니다.


그래서 이제 header로 들어가기 전에 그 상위 개념을 알아보도록 하겠습니다.

HTML의 기본 구조는 아래와 같습니다.

<html>

   <head>

      내용

   </head>

   <body>

   내용

   </body>

</html>

로 되어 있는데요. 줄여서 설명하면 아래와 같습니다.


html

┣head

└body


그런데, head 요소는 무엇일까요?

head 요소는 사이트의 설정, 그러니까 보이지 않는 부분을 담당합니다.

웹 사이트 제목이나 파비콘(브라우저에서 제목 옆에 뜨는 사이트 로고) 처럼 보이는 요소도 참견하긴 하지만,

반응형 웹페이지나 홈페이지 설명, 외부 파일 불러오기 등을 주로 담당합니다.


반응형 웹페이지에 대하여는 추후 다루게 될 예정입니다.


body 요소는 눈에 보이는 것들을 담당합니다.


이제 설명할 header 등도 모두 body 속의 요소입니다.

header는 사이트의 제목, 설명 등 간략한 것을 적어넣는 공간입니다.
사이트의 맨 위에 위치합니다.

nav는 내비게이션으로, 사이트 내를 탐색할 수 있도록 링크를 모아놓은 곳입니다.

aside는 주로 옆에 위치하는데, 각종 잡스러운 것(최근 글 목록, 광고 등)을 모아놓는 공간입니다.

section은 본문으로, 가장 중요한 곳입니다.

footer는 맨 아래 위치해서 저작권 표시 등을 해주는 부분입니다.


이상입니다


여기 얼에디터 무 불편합니다.

그글씨가 렇게 막 입력다 잘려서 나와요오오오오

안녕요 안녕히요 어 잘렸다

  • profile
    도토리묵 2019.03.26 10:47
    각주가 아니라 주석입니다.
  • profile
    협스 2019.03.26 23:35
    각주도 주석의 한 종류이니, 틀린 말은 아닌.. 읍읍..
  • profile
    도토리묵 2019.03.26 23:52
    각주는 주석에 대한 위치, 주석은 어떤 낱말이나 단어에 대한 의미를 풀이하는겁니다.
  • profile
    협스 2019.03.27 17:37
    아 그렇군요!
  • profile
    이니스프리 2019.03.28 12:27

    주석(註釋)의 종류에는 각주, 미주, 내주, 측주 등이 있습니다.

    굳이 따지자면 위와 같은 형식의 주석은 내주에 가깝다고 볼 수 있습니다.

    논문 작성할 때 주석 때문에 애로사항이 꽃피는 경우가 있죠 ㅎㄷㄷ

  • profile
    이니스프리 2019.03.26 19:29
    좋은 강좌 감사합니다 ^^
    앞으로도 기대할게요~

강좌

다양한 분야에 다소 전문적인 도움이 되는 강좌들입니다.

List of Articles
번호 게시판 제목 글쓴이 날짜 조회 수
공지 호스팅 신청이 다시 가능합니다. 12 update 마스터 2019.04.18 147
공지 회원 전용 페이지가 생겼습니다. 15 file 마스터 2018.03.20 6226
219 강좌 [제르엘의 인문사회 산책] 세계사 맛보기 강의. 오리엔트 문명과 진시황 5 file title: 애프터 이펙트제르엘 2019.04.10 63
218 강좌 [제르엘의 인문사회 산책] 0. OT 7 file title: 애프터 이펙트제르엘 2019.04.04 87
» 강좌 웹디자인 第二강 html5로 구조 짜보기 6 file PRASEOD- 2019.03.25 78
216 라이츄 과학츄 23. 완충용액이츄 2 file title: 포켓몬 고-이상한 상자허니버터뚠뚜니라이츄 2019.03.24 124
215 강좌 간단한 JS 강의 #2 2 도토리묵 2019.03.20 52
214 강좌 웹디자인 第一강 홈페이지는 어떻게 만드는건가 1 PRASEOD- 2019.03.19 80
213 강좌 간단한 JS강의 #1 2 도토리묵 2019.03.02 127
212 라이츄 과학츄 22. 혈액입니츄 1 file title: 포켓몬 고-이상한 상자허니버터뚠뚜니라이츄 2019.02.05 232
211 강좌 [아미나] Basic Youtube Title Widget 1.0에서 처음에 엑박으로 뜨는 경우의 해결책 3 file 이니스프리 2018.12.15 190
210 강좌 아미나의 회원 이미지와 관련하여 x2 3 file 이니스프리 2018.12.10 145
209 라이츄 과학츄 21. 혈액형입니츄 12 file title: 포켓몬 고-이상한 상자허니버터뚠뚜니라이츄 2018.12.08 417
208 강좌 현행 저작권법 제30조(사적이용을 위한 복제)에 대하여 - 음원 다운로더의 처벌과 관련하여 6 이니스프리 2018.12.07 251
207 강좌 그누보드/아미나에서 게시글의 날짜를 최종수정일로 변경하고, 목록스킨 및 위젯을 최종수정일 순으로 정렬하기 2 file 이니스프리 2018.11.11 1859
206 강좌 [스페인어 강좌] CH1) 스페인어란? 1 file 도토리묵 2018.10.12 178
205 강좌 리뉴얼된 구글 뉴스에서 RSS 피드를 생성하는 방법 3 file 이니스프리 2018.10.07 496
204 라이츄 과학츄 20. 알레르기츄 3 file title: 포켓몬 고-이상한 상자허니버터뚠뚜니라이츄 2018.10.03 284
203 강좌 아실분들은 아실 미디어위키 웹호스팅상에서의 시각편집기 설치방법(게시판 이동) 3 file 퓨처마츠 2018.10.03 240
202 강좌 [ASP.NET Core를 이용한 웹사이트 만들기] 1. 시작하기 3 file 0x00000FF 2018.09.07 416
201 강좌 [ASP.NET Core를 이용한 웹사이트 만들기] OT. ASP.NET Core란 무엇인가?, 작업 환경 구성 5 0x00000FF 2018.09.06 382
200 라이츄 과학츄 19. 카리킨에 대해 알아보시츄 9 file title: 포켓몬 고-이상한 상자허니버터뚠뚜니라이츄 2018.08.26 357
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 11 Next
/ 11
서버에 요청 중입니다. 잠시만 기다려 주십시오...