HTML 이란? 

Hyper Text Markup Language의 줄임말로 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어이다.

시간이 흐르면서 자주 사용되지 않는 용어들은 사라지고 필요에 따라 새로운 신조어가 등장하기도 한다.

 

HTML 태그 구성 요소

 

<열린태그 속성 - "속성값"> 컨텐츠 </닫힌 태그>

 

태그명: HTML의 고유 기능. <열린 태그> </닫힌 태그> 형태로 입력 

컨텐츠명: 열린 태그와 닫힌 태그 사이에 있는 내용물

속성: HTML 태그가 갖고 있는 추가 정보

속성값: 수행할 구체적인 명령

 

<!DOCTYPE html> 				<!-- HTML5 문서 선언-->
<html> 							<!-- HTML 문서의 시작과 끝 -->
<head> 							<!-- 문서와 관련된 요약 정보 정리 -->
	<meta charset="UTF-8"> 		<!-- 문자 코드 -->
    <title>제목</title>			<!-- 웹사이트 제목 -->
</head>
<body> 						<!-- 웹사이트의 내용 -->
</body>
</html>

<!DOCTYPE html> : HTML5라는 신조어로 문서를 선언하는 태그

<html>...</html> : HTML 문서의 시작과끝을 의미

 

<head>...</head> : 웹사이트의 간단한 요약 정보를 담는 영역 

<body>...</body> : 웹사이트의 눈에 보이는 정보를 담는  영역, 이미지나 텍스트처럼 출력되는 정보 

<meta charset="UTF-8"> : Character setting의 약자인 문자코드, UTF-8을 기본 값으로 써야한다. 모든 문자를 웹브라우저에서 깨짐없이 표시하겠다는 의미? 

<title>...</title> : 웹사이트 탭에 나타나는 제목을 적는 태그

 

<a href= "http://www.naver.com" target= "_blank"> 넥슨 </a>

<a>...</a> : 글자나 이미지 클릭 시 다른 사이트로 이동 시키는 태그. 열린 태그와 닫힌 태그 사이에 컨텐츠 입력

href 속성 : hypertext reference의 약자로 참조를 의미. HTML 연결할 페이지의 주소 지정

target 속성: 어떤 방식으로 페이지로 이동할지 결정.

target속성값:

_blank   링크된 문서를 새로운 윈도우나 탭(tab)에서 오픈함.
_self   링크된 문서를 링크가 위치한 현재 프레임에서 오픈함.
기본값으로 생략 가능.
_parent   링크된 문서를 현재 프레임의 부모 프레임에서 오픈함.
_top   링크된 문서를 현재 윈도우 전체에서 오픈함.
프레임 이름   링크된 문서를 명시된 프레임에서 오픈함.

출처: https://tcpschool.com/html-tag-attrs/a-target

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

<img src="logo.png" alt="회사로고">

<img> : 정보성을 갖고 있는 이미지를 삽입. 닫힌태그 없음. 

<src> : 삽입할 이미지 파일 경로. 웹상 이미지 주소도 된다.

alt : 웹사이트가 이미지를 출력하지 못했을 경우, 텍스트 정보로 대체.

 

<h1>태그

<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>

 Heading의 약자로 제목이나 부제목을 표현. 숫자 값이 클수록 폰트 사이즈가 작다. 숫자는 정보의 중요도를 나타냄. <h1> 태그는 가장 중요한 정보를 담기에 한 html문서에 한 번만 사용  

 

<p> 태그 

<p>Hi I love halloween.</p>

:  Paragraph의 약자. 본문 내용 표현. 웹사이트의 정보를 담는 태그. 표시할 내용을 열린 태그와 닫힌 태그 사이에 입력한다. 

 

 

<ol>, <li> 태그

<ol>
	<li>메뉴1</li>
	<li>메뉴2</li>
	<li>메뉴3</li>
</ol>

 

<ol> 태그 : Orderd list의 약자. 순서가 있는 리스트 생성 

<li> 태그 : <ol>과 <li>의 각 항목을 나열할 때 사용

 

<ui> 태그 

<ul>
	<li>메뉴1</li>
	<li>메뉴2</li>
	<li>메뉴3</li>
</ul>

<ul> 태그 : Unorderd list의 약자. 순서가 있는 리스트 생성. 메뉴 버튼을 만들 때 사용되는 태그 

'Front-End > HTML' 카테고리의 다른 글

움직이는 웹페이지 제작  (0) 2022.03.23

01. Transform

회전, 크기조절, 기울이기, 이동효과를 부여할 수 있는 속성으로 대상의 좌표공간을 변경한다.

여러줄로 작성시 마지막 줄의 속성만 적용된다.

 

rotate(45deg); 

입력한 각도만큼 시계방향으로 회전, 음수로 입력시 시계 반대방향으로 회전.

 

scale(2,3);

숫자는 비율을 의미한다.

width를 2배, height를 3배 확대.

 

skew(10deg, 20deg);

x축 y축을 기준으로 입력한 각도만큼 비튼다.

 

translate(100px, 200px)

선택한 오브젝트의 좌표를 변경한다. 

 

<!DOCTYPE html>
<html>
<head>

  <meta charset="UTF-8">
  <title>CSS Transform</title>
  
  <style>
    .transform {
       width: 100px;
       height: 100px;
       background-color: red;

       margin: 200px 0 0 200px;
    
       /* 마지막 속성만 적용된다. */
       transform: scale(2,3); /*확대 축소*/
       transform: rotate(45deg); /*회전*/
       transform: translate(100px,200px); /*위치 변경*/
       transform: skew(10deg, 20deg); /*각도 변경*/
       
  </style>
</head>
<body>
  <div class="transform"></div>
</body>
</html>

See the Pen Untitled by aingface (@aingface) on CodePen.

prefix 접두사

브라우저에 따라 transform 속성이 적용되지 않는 경우가 있다. 그럴땐 접두사를 아래와 같이 붙여줄 수 있다. 

<style>.transition {
  -webkit-transform:translate(100px,200px); /* 크롬, 사파리*/
  -moz-transform:translate(100px,200px); /* 파이어폭스*/
  -ms-transform:translate(100px,200px); /* 익스플로러9.0 */
  -o-transform:translate(100px,200px); /* 오페라*/
  }
  </style>

 

02. Transition

Transition은 특정 조건에서 애니메이션이 동작되는 과정을 보여줄 때 쓸 수 있다.

 

transition-property: width; 

효과를 적용할 css 속성, width에 효과를 적용.

 

transition-duration: 2s;

효과가 나타나는데 걸리는 시간, 2s는 2초를 뜻함

 

transition-timing-function: linear;

효과의 속도, linear는 일정하게 라는 의미 

transition-delay: 1s;

특정 조건하에서 효과 발동. 1s는 1초후.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS Transtion</title>
  
  <style>
/* transition의 속성값들을 한 줄로 작성할 때, 나머지 속성값의 순서는 상관 없지만,
 항상 duration이 먼저, delay가 나중에 작성되어야 합니다. */
    .transition {
        width: 100px;
        height: 100px;
        background-color: red;
        
        transition-property: width;
        transition-duration: 2s;
        transition-timing-function:linear;
        transition-delay: 1s;
        
        /* 옆으로 전환되게 하겠다= width
        시작부터 끝까지 일정하게 이동하게 하겠다 =linear
        */

        /* transition: width 2s linear 1s;
        transition: height 2s linear 1s; */

        /* transition-timing-function 속성은 뭐냐? */
    }
    
    .transition:hover{
        /*위에서 프로퍼티를 width로 지정해줬기 때문에 :hover 속성을 width로 일치시켜야한다.
        height로 하면 디테일한 값 적용들이 안됨
        
        둘다 적용하려면 transition:width height;
        전부 적용하려면 transition:all; 인데 property 기본값이 all이다.
        */

        width: 300px;
        height: 300px;
        
        /* width: 300px;
        height: 300px; */
    }

  </style>
  
</head>
<body>

  <div class="transition"></div>

</body>
</html>

 

결과는 아래와 같다. 

 

 

See the Pen CSS Transform by aingface (@aingface) on CodePen.

03. Animation

04. Animation 응용

'Front-End > HTML' 카테고리의 다른 글

HTML 기본 태그  (0) 2022.03.23

+ Recent posts

티스토리툴바