Acorn Academy 11/23 HTML

Bae Seong Jun·2023년 11월 23일

Acorn academy

목록 보기
5/70

프로젝트 생성

  1. Dynamic Web Project 생성
  2. Generate web.xml deployment descriptor 체크
  3. src -> main -> webapp 파일 내에서 작업

http프로토콜 동작 원리 (HyperText Transfer Protocol)

  1. naver.com 입력 enter
  2. dns 서버 (도메인 네임서버) naver.com => 해당 ip주소 얻기
  3. ip주소의 서버에서 접속, index.html 요청(request)
  4. 서버는 서버에 저장된 index.html 파일을 찾아서 응답(response)처리 요청한 사용자에게
  5. 사용자 브라우저에서 index.html 화면에 보이기 요청에 대한 응답처리 완료
  6. 연결종료 다른 파일 요청시 1~6번 반복
  • Protocol : 복수의 컴퓨터 사이나 중앙 컴퓨터와 단말기 사이에서 데이터 통신을 원활하게 하기 위해 필요한 통신 규약.

HTML ( Hypertext Markup Language )

태그(엘리먼트, DOM(DOM: Document Object Model))로 구성됨

  • 시작태그, 끝태그가 존재
  • empty content를 가진 태그도 있다.
  • 대소문자 구별x 일반적으로 소문자 사용
  • 속성(attribute)를 가질 수 있으며 name=value의 형식을 갖는다.
  • 1 HTML = 1 PAGE
  • 태그 순서 주의 : <a> <b> </b> </a>
  • 주석 : (ctrl + shift + /)
  • 주석해제 : ctrl + shift + 역슬래시

이미지 태그

<img src="이미지파일경로/이미지파일이름.확장자" width="" height="">

경로 지정 방법

  • html 파일의 위치 기준으로 상대경로로 표현할 수 있음
    ex) src="./images/001.png"
    ex) src="../images/001.png"
    .. 은 상위폴더로 이동한다는 뜻이다.
  • 간편 복사 단축키 : ctrl + alt + 방향키

앵커태그, href태그, 링크 태그

  • 외부 사이트나 다른 html로 이동하는 링크를 적어 이동할 수 있게 해준다.

베이스태그

  • 링크에 경로가 적히지 않았을 때 base태그에 적힌 경로가 defualt로 입력된다.
    	<base href="">

문단태그

<p></p>

스타일태그 (내부)

  • css작성
    	<style></style>

링크태그 (외부)

<link rel="stylesheet" type="text/css" href="mystyle.css">

스크립트 태그

  • 자바스크립트 작성
    	<script></script>

*주의: href나 src 작성시 "/~~"이런식으로 슬래시를 맨 앞에 붙으면 root를 기준으로 찾음

profile
코딩 프로?

0개의 댓글