반응형

 

 

 김춘장이의 위키백과 - 나만의 공부 기록 Tistory ❤ 

 

 


 

 

 

웹 페이지의 구조

화면에 보여주는 것 : 브라우저
Html : 웹 구조화 언어
Css : 시각
JavaScript : 기능

 

 


Html

정의

구조화시키는 언어
어떻게 구조화가 되어있는지 브라우저가 알 수 있도록 하는 마크업 언어이다
markup 정의 : 텍스트들의 표시 및 지정 표기이다.
텍스트 크기를 진행하는 거라고 보면 된다.
현재 사용하는 Html 버전은 5
공간을 만들고 무엇으로 채울지 설정해 주는 언어이다
태그가 있고 태그 안에 내용을 기재한다

<tag> //시작태그  welcome to 코드캠 // 내용 </tag> // 종료태그 

한 줄의 코드를 요소 또는 Element라고 한다
태그는 약속된 명령어이며 고유한 기능을 가지고 있다.

<h1> 안녕하세요 여러분 </h1> 

시작 태그를 h1으로 했다면 닫는 태그도 h1으로 해야 한다.

꾸며주는 태그

strong : 굵게
u : 밑줄
i : 이탤릭체 태그 / 기울어진 글씨체

빈 태그

태그 하나만 쓰는 것
br : 줄 바꿈 태그
두 칸 이상 공백, 이나 엔터로 인한 부분은 피씨에서 무시하게 된다
스페이스나 엔터는 별다른 조치가 필요하다
hr : 밑줄 라인을 그려주는 태그

기능이 있는 태그

button : 버튼 태그
textarea : 입력창 태그
img src=" image.png" : 이미지 불러오는 태그
sourc src = " video.mp4 " : 비디오 불러오는 태그

태그 속성 변경

input : 무엇인가를 입력받는다 라는 의미
input type로 원하는 사용을 정의한다
placeholder = input과 합께 개발자가 중첩으로 사용 가능한 기능

태그의 특징 : Inline / Block

Pasted image 20230929155144.png


한 라인을 모두 다 차지하는 게 Block
일정 부분만 차지하는게 Inline

태그의 특징 : 종속 태그

다른 태그와 함께 상호 작용을 해야만 작동하는 태그.
혼자서는 작동하지 못한다
선택박스, 목록태그, 표 태그가 대표적이다
선택박스 태그 : select , option, optgourp
목록 태그 : ol , ul , dl
태그로 감싼 뒤 li태그를 넣는다

태그의 특징 : HTML문서 구조

head 태그
검색 엔진을 위한 영역
body 태그
실제 브라우저를 통해서 볼 수 있는 영역

head 태그엔
title과 meta 태그로 되어있다
head태그는 탭이나 웹페이지 상단에 있는 영역
meta는 head태그의 설명이다
header / nav / sestion

body

Pasted image 20230929160643.png

위치에 맞게 목적에 맞게 잘 써줘야 한다

html 언어의 정리

공간을 만들고 그 안에 어떤 내용으로 채울지 결정지어주는 언어
시작 태그와 종료태그 안에 내용을 넣어서 만들어주고,
태그는 약속된 명령어이고 약속된 명령어는 고유의 기능을 가지고 있다
약속된 명령어는 속성과 값으로 기능을 구현할 수 있으며
이 속성과 값은 중첩해서 사용할 수 있다.

주석 처리방법

Cmd +?

 

 

 


개발공부 중인 개린이의 포스팅입니다📝

반응형
유리쯔의일상