html - head

2023. 11. 24. 09:53ㆍDaily Codig Reminder

절대경로 상대경로

절대 :경로전체
cd c: \a\b
cd c:\a\c

상대경로
c:a\b\d > cd..
c:\a\b

c:|a>cd b
c:\a\b> cd d
C: c\b\d


브라우저

http 프로콜의 동작 순
1. naver.com 입력 enter
2. dns 서버(도메인 네임서버) naver.com ⇒ 해당 주소의 ip 주소 열기
3. ip 주소의 서버에 접속, index.html요청 (request)
4. 서버는 서버에 저장된 index.html 파일을 찾아서 응답 (response) 요청한 사용자에게 응답처리
5. 사용자 브라우저에서 index.html 화면에 보이기 요청에 대한 응답처리 완료
6. 연결종료 다른 파일 요청시 1~6번 반복


데이터 구조는 HTML이 담당하고, 디자인과 레이아웃은 CSS가 담당하며,
동작 및 컨트롤은 Javascript와 DOM이 담당.


  • 웹은 구조(content)/표현(presentation)/동작(behavior)로 구성.
  1. 구조는 HTML 담당.
  2. 표현은 CSS 담당.
  3. 동작은 Javascript 담당

Html

  • 하이퍼 텍스트 ( Hyper Text ) : 텍스트에 하이퍼링크 설정이 가능하고 텍스트들이 서로 연결되어 있다는 의미. :
    단순한 클릭으로 다양한 정보를 접할 수 있도록 편리함을 줌.
  • 태그는 <html>과 같은 <>로 표시하며, 시작태그와 끝태그로 구성된다.
  • HTML 태그(tag)와 HTML 엘리먼트(element)는 같은 의미로 사용된다.
  • 태그는 대소문자를 구별하지 않으며 일반적으로 소문자를 사용한다.
  • 태그는 속성(attribute)를 가질 수 있으며 name=value 형식을 갖는다.
  • 주석은 <!–- 주석문 --> 이다 ctrl shift slash / ctrl shift \
  • 주석 : 프로그램의 실행에 영향을 미치지 않고 설명을 위한 목적으로 사용하는 코드
  1. 외부 csstest.css 파일의 사용
    <link rel="stylesheet" type="text/css" href="../css/csstest.css">
    <title>link 태그 실습</title>
    </head>
    <body>
    <p> 외부 </p>
    <!--외부스타일 시트파일 이용 p태그에 효과 적용-->
    <p>css의 사용</p>

  2. <!--자바 스크립트는 위치가 상관없다-->
    console.log("햄스터 카피바라");

  3. <script type ="text/javascript" src="myscript.js">
    </script>
    <script type ="text/javascript" src="../js/script.js">

  4. <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script type ="text/javascript" src="js/externalJs.js">
    </script>
    <link rel="stylesheet" type="text/css" href="css/externalCss.css">
    <title>link 태그 실습</title>
    </head>
    <body>
    <p> 햄스터 </p><!--외부스타일 시트파일 이용 p태그에 효과 적용-->
    <p>카피바라</p>
    <a href="https://www.google.com">구글</a>
    <img src= "images/001.png">
    </img>
    </body>
    </html>

  5. <img src= "/images/001.png"></img>
    <!-- / 가 붙는 경우 root 를 기준으로 찾음-->
    <img src= "/CssjsTest/images/001.png"></img>
    쓰고있는 프로젝트 주소까지 필요 / 쓸경우

    <img src= "CssjsTest/images/001.png"></img>
    이건안됨..

    <a href="sample/Test02.html">test02 로 이동하기</a>

  6. <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script type ="text/javascript" src="../js/externalJs.js">
    </script>
    <br>
    <link rel="stylesheet" type="text/css" href="../css/externalCss.css">
    <title>link 태그 실습</title><br> </head>

    <body> <p>카피바라~~~~~~~~~~~~~~~~</p>
    <img src= "/CssjsTest/images/001.png"></img>
    <a href="../Test01">test01 로 이동하기</a> <a href="https://www.naver.com/">
    <img src= "/CssjsTest/images/001.png"></img></a> </body> </html>

'Daily Codig Reminder' 카테고리의 다른 글

CSS  (0) 2023.11.28
html 마무리  (1) 2023.11.27
뷰, 시퀀스, 시노님  (1) 2023.11.23
DDL , 뷰  (0) 2023.11.22
DML DDL summary  (1) 2023.11.20

관련글

티스토리툴바