Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
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 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

동아리 활동 정리

HTML 기초 I 본문

동아리/TeamLog

HTML 기초 I

소라님 2021. 7. 23. 15:28

웹

웹은 World Wide Web의 약자로 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 말합니다.

줄인말로 WWW, W3, Web이라고 불립니다. https://www.naver.com의 www부분이 이에 해당됩니다.

또, HTML 언어를 사용하여 작성된 문서를 웹페이지라고 부르며, 웹페이지들의 집합을 웹사이트라고 부릅니다.

Web의 구성요소

 

  • HTML
    웹의 뼈대 역할을 해주며, 내용, 구조, 컨텐츠를 만들 때 사용됩니다.
  • CSS
    웹에서 디자인과 같은 시각적인 요소를 표현해주는 역할을 합니다.
  • JavaScript
    웹에서 기능, 동작, 동적인 화면을 구현하는 역할을 합니다. 

HTML 기본태그

 

  • html
    웹의 시작과 끝
    <html>
    ~
    </html>
    위 사진에서 2번째 줄부터 12번째 줄까지 위치해 있습니다.

 

  • head
    웹의 페이지 정보, 문서에서 사용할 외부파일들 가져오기
    <head>
    ~
    </head>
    위 사진에서 3번째 줄부터 8번째 줄까지 위치해 있습니다.

 

  • body
    브라우저에 표시 될 내용
    <body>
    ~
    </body>
    위 사진에서 9번째 줄부터 11번째 줄까지 위치해 있습니다.

 

  • !DOCTYPE
    HTML 5버전으로 지정
    <!DOCTYPE html>
    위 사진에서 1번째 줄에 위치해 있습니다.

 

  • meta
    문자 인코딩 및 문서 키워드, 요약정보
    <meta ~="~">
    위 사진에서 4번째 줄, 5번째 줄과 6번째 줄에 위치해 있습니다.

 

  • title
    문서의 제목, 탭의 제목
    <title>~</title>
    7번째 줄에 위치해 있습니다.
    title

*!+Enter를 하면 사진의 명령어를 다 불러올 수 있다.

HTML 텍스트태그

 

  • hη
    헤드라인, 제목 태그를 쓸 때 사용
    숫자가 작을 수록 중요도와 크기가 큼
    <hη>~</hη>
    위 사진에서 8번째, 9번째, 10번째, 11번째에 위치해 있습니다.

 

  • p
    단락태그
    <p>~</p>
    위 사진에서 12번째에 위치해 있습니다.

 

  • hr/br
    hr은 수평가로선 태그
    <hr>
    br은 줄바꿈 태그
    <br>
    위 사진에서 hr은 13번째, br은 14번째, 16번째, 17번째, 18번째에 위치해 있습니다.

 

  • strong/b
    둘 다 볼드체로 지정할 때 사용
    strong은 의미 강조를 내포
    <strong>~</strong>
    <b>~</b>
    위 사진에서 strong은 14번째, b는 15번째에 위치해 있습니다.

 

  • em/i
    둘다 이탤릭체로 지정할 때 사용
    em은 강조의 의미를 내포
    <em>~</em>
    <i>~</i>
    위 사진에서 em은 16번째, i는 17번째에 위치해 있습니다.

 

  • mark
    하이라이트 태그
    <mark>~</mark>
    위 사진에서 18번째에 위치했습니다.

 

*파일을 열면 위에 사진처럼 나옵니다.

HTML 목록태그

 

      • ul
        순서 없는 목록 태그
        <ul>
        ~
        </ul>
        위 사진에서 8번째부터 13번째까지 위치해 있습니다.

 

      • ol
        순서 있는 목록 태그
        <ol>
        ~
        </ol>
        위 사진에서 14번째부터 18번째까지 위치해 있습니다.

 

      • li
        리스트의 아이템 태그
        <li>~</li>
        위 사진에서 9번째, 10번째, 11번째, 12번째, 15번째, 16번째, 17번째에 위치해 있습니다.
        li*η을 치면 한번에 η개의 li를 생성할 수 있습니다.

HTML ol태그의 속성

  • start
    순서 시작 번호 지정(기본값 : 1)
    <ol start="~">
    ~
    </ol>
    위 사진에서 19번째부터 24번째까지 위치해 있습니다.

 

  • reversed
    순서 역순
    <ol reversed>
    ~
    </ol>
    위 사진에서 25번째부터 30번째까지 위치해 있습니다.

 

  • type
    순서 표현 방식(기본값 : 1)[A, a, I, i]
    <ol type="~">
    ~
    </ol>
    위 사진에서 31번째부터 36번째까지 위치해 있습니다.

*파일을 열면 위에 사진처럼 나옵니다.

HTML 하이퍼 링크 태그

  • a
    하이퍼링크 태그
    <a>~</a>
    위 사진에서 8번째, 9번째, 10번째, 11번째, 12번째, 13번째에 위치해 있습니다.

 

  • href
    a태그의 속성
    이동할 경로 지정
    <a href="~">~</a>
    위 사진에서 8번째, 9번째, 10번째, 11번째, 12번째, 13번째에 위치해 있습니다.

 

  • traget
    a의 태그
    링크를 여는 방법 [_self: 현재페이지, 기본값][_blank: 새 탭]
    <a href="~" traget="~">~</a>
    위 사진에서 8번째, 9번째에 위치해 있습니다.

 

  • #Lorem
    Lorem의 위치로 이동시켜준다.
    <a href="#lorem">~</a>
    위 사진에서 10번째에 위치해 있습니다.

*파일을 열면 위에 사진처럼 나옵니다.

 

절대 경로와 상대 경로

 

  • 절대 경로
    최상위 디렉토리에서부터 시작하는 고유의 경로
    ex) C:\Users\username\Desktop\teamlog.html

 

  • 상대 경로
    현재 파일의 위치를 기준으로 상대적인 파일의 위치를 나타냄
    .\ : 현재폴더
    ..\ : 상위폴더
    ex)..\..\teamlog.html
저작자표시 비영리 변경금지 (새창열림)

'동아리 > TeamLog' 카테고리의 다른 글

HTML 기초 III  (0) 2021.07.29
HTML 기초 II  (0) 2021.07.25
트러블 슈팅  (0) 2021.06.20
Server  (0) 2021.06.13
캡슐화 & 역캡슐화  (0) 2021.06.01
'동아리/TeamLog' Related Articles more