Tiny Bunny HTML / CSS / JavaScript 교재 정리_1 - 솜님의 블로그
솜님의 블로그
카테고리
작성일
2024. 8. 6. 01:40
작성자
겨울솜사탕

HTML

웹 페이지 작성할 때 사용하는 프로그래밍 언어.

<html>,<head>,<body>,<p> 등의 태그를 사용해서 표현.

 

CSS

HTML 태그를 어떻게 표현할지 결정한다.

 

JavaScript

태그 등을 클릭해서  어떤 동작을 처리할 때 사용

 

 

웹 애플리케이션을 작성/실행할 수 있도록 톰캣(Tomcat) 다운로드해야 한다.

- 톰캣 == 웹 컨테이너

이클립스에서 워크스페이스의 인코딩은 utf-8로 지정한다.

(HTML 페이지와 CSS의 인코딩 역시 utf-8)

 

 

HTML 기본 태그

  • <head></head> : 인코딩, 키워드 등의 문서 정보 제공
  • <title></title> : 문서의 제목 (탭 이름)
  • <body></body> : 화면에 표시되는 문서의 내용
  • <h1></h1> : 제목 또는 주제
    • h 태그는 h1 ~ h6까지. (6으로 갈수록 크기가 작아짐)
  • <p></p> : 문단의 내용 작성

 

글로벌 속성

 - 보편적인 속성을 뜻한다.

  • class : 태그에 적용할 스타일의 이름을 지정
  • dir : 내용의 텍스트 방향 지정. 왼→오 (기본, ltr) / 오 →왼(rtl)
  • id : 태그에 유일한 ID 부여
  • style : 인라인 스타일시트 적용하기 위해 사용

 

뷰포트 설정

- 화면의 내용 확대/축소 배율 등을 지정.

- 웹 브라우저의 페이지 자동 크기 조정 기능 중단 목적으로 사용

     --> 모바일에서 웹 페이지 실행 시 화면의 크기에 따라 자동으로 축소됨. 이를 막기 위함!

<head>
 <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
</head>

 

* 뷰포트 : 브라우저에서 문서의 내용이 표시되는 영역

 

 

<P> 태그

문단과 문단 사이 구분 시 사용. 특별한 지시가 없다면 문단을 구분하지 않음.

 

<br> 태그

줄 바꿈 태그,

종료 태그 없음

 

<img> 태그

이미지 삽입시 사용하는 태그.

 

 

리스트 태그

목록을 만들 때 사용한다.

- 순서가 있는 리스트 (넘버링) : <ol> 태그 사용

- 순서가 없는 리스트 : <ul> 태그 사용

 

<a> 태그

하이퍼링크를 이용해서 이동할 페이지를 지정할 때 사용한다.

<a hrdf="b.html">b.html로 이동</a>

img 태그를 a태그로 감싸주면 이미지 클릭 시 원하는 페이지로 이동도 가능함.

 

 

<table> 태그

표 영역만을 설정하는 태그.

표를 이루려면 행, 열 표시하는 태그를 사용해야 한다.

 

<tr> 태그

표의 행을 정의하는 태그.

<table> 태그에서 지정한 것을 상속받음.

 

<td> 태그

표의 열을 정의하는 태그

 

 

'WEB > 프론트' 카테고리의 다른 글

[HTML] 웹 폰트 / 스크롤 컨트롤  (0) 2024.08.06
[HTML] style  (0) 2024.08.06
[HTML] 웹 개발에서 자주 사용하는 요소와 속성들  (0) 2024.08.06
[HTML] 이미지 넣기  (0) 2024.08.06
[HTML] HTML의 기초와 기본 태그  (0) 2024.08.06