티스토리 뷰

HTML+CSS

HTML 기초배우기 / day02-04 / 25.04.02~04

one-dy 2025. 4. 6. 22:28

HTML은 (Hyper Text Markup Language)의 약자

웹페이지를 만들기 위한 표준 표시언어

  • HTML은 웹 페이지의 구조를 설명한다.
  • HTML은 일련의 요소로 구성된다.
  • HTML 요소는 브라우저에 내용을 표시하는 방법을 알려준다.
  • HTML 요소는 "this is a heading", "this 단락입니다", "이것은 링크입니다" 등
  • 월드 와이드 웹(www)의 초창기부터 HTML에는 여러 버전이 있는데, 정리된 내용은 최신 HTML5 표준을 따른다.
html문서의 기본 구조는 아래와 같다.

<!DOCTYPE html> ***HTML 문서는 문서 유형 선언으로 시작
<html>
<head>
<title>Page Title</title>***<title>는 제목을 정의, 브라우저의 제목 표시줄 또는 페이지의 탭에 표시된다.
</head>
<body>                ***<body>는 document의 본문 영역으로 제목, 단락, 이미지, 하이퍼링크, 표, 목록 등의 컨텐츠가 들어간다.

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

 

여러 단어(태그)로 이루어진 하나의 문서로 2가지 문법이 존재한다. *tag(태그) : 단어, 기능  

문법1. 일반태그

<열린태그>내용</닫힌태그> = <태그이름>내용</태그이름> = <요소>내용</요소>

/ 슬래쉬 :  문장에서 마침표 역할을 한다. 닫힌 태그에서 슬래시를 반드시 넣는다. 

 

<h1></h1> : 큰 제목, 가장 중요한 제목을 정의한다. *<h2>,<h3>,<h4>...<h6> :가장 덜 중요한 것을 정의한다.

<p></p> : 단락(paragraph) 본문태그, 단락태그, 제목보다 긴 내용을 쓸 때 

<a href="링크"></a> :링크태그 *href-링크태그의 속성으로 하이퍼링크를 정의, 페이지의 URL을 지정한다.

<div> : 비어 있는박스

<p>my first html study</p> → element  

Tag--style이라는 attribute는 element에 디자인을 입혀준다. 

<p style="font-size:50px;">I am a student</p>

<p style="color:red;"> I am red</p>

 

문법2.단독태그

<태그이름/> slash 하나로 바로 끝내버리는데, 자체 독립적 tag이다.

*시작tag 끝tag는 안에 내용이 들어갈 때 쓴다. 

 

<br /> : 줄바꿈태그, 다음 세로줄로 내려오기 때문에 블록속성을 지닌다.  

<img src="링크"/> : 이미지태그, *src, alt, width, height-이미지태그의 속성   

*src:source, 이미지의 경로를 지정한다. alt:대체텍스트                                                                                        · head안에 링크 넣을 때 <link 태그를 쓴다. <link rel="stylesheet" href="style.css"

<input type="text"/> : input 태그, combo box, select box 넣어줄 때<input type="number"/>

· 부모태그는 태그를 품고 있는 태그이다.

· 일반태그 안에 단독태그가 들어갈 수는 있다.

 

attribute(속성) : html element의 추가적인 속성을 관리하기 위한 요소

서버=땅, 홈페이지=집, 도메인=주소

HTML소스코드 보는법 : 
HTML 페이지에서 CTRL + U를 클릭하거나 페이지를 마우스 오른쪽 버튼으로 클릭하고 "페이지 소스 보기"를 선택하여 연다.
새 탭 페이지의 HTML 소스 코드를 포함한다.
HTML요소검사 :
요소(또는 빈 영역)를 마우스 오른쪽 버튼으로 클릭하고 "Inspect"를 선택하여 어떤 요소가 구성되어 있는지 확인한다.(HTML 및 CSS), HTML 또는 CSS를 즉석에서 편집할 수도 있다. 요소 또는 스타일 패널이 열린다.

: 동시에 쓰고 싶은 곳에 마우스 커서 넣고, 컨트롤 누르면 동시에 쓸 수 있다.  
공부할 때 참고할 수 있는 사이트
* w3schools.com → learn html, html에 어떤 element들이 있고 어떻게 작용하는지 알아야한다. 
각 element 마다 어떤 attribute style css 쓸 수 있는지 공부하자!
일일히 다 element요소에 style입혀주는 건 굉장히 비효율적이다!
그래서 CSS통해 전체 페이지 elements에 디자인을 한번에 쉽게 적용한다.
#style.css  확장자명을 css로 css file하나를 만든다. 보통은 디자이너들이 css만들어 개발자들에게 준다고 한다. 

 

속성에서 URL을 지정하는 방법두 가지 .src

  1. 절대 URL : 호스팅되는 외부 이미지에 대한 링크, 다른 웹사이트에서. 예: src="https://www.w3schools.com/images/img_girl.jpg".**외부 이미지는 저작권의 보호를 받을 수 있다. 사용 허가를 받지 않으면 저작권법을 위반할 수 있다. 또 외부 이미지를 제어할 수 없어 갑자기 제거되거나 변경되어질 수 있다.
  2. 상대 URL : 내부에 호스팅된 이미지에 대한 링크 웹 사이트. 여기서 URL에는 도메인 이름이 포함되지 않는다. URL이 시작되는 경우 슬래시가 없으면 현재 페이지를 기준으로 한다. ex) src="img_girl.jpg". URL이 슬래시로 시작하는 경우 도메인을 기준으로 한다. ex) src="/images/img_girl.jpg".★거의 항상 상대 URL을 사용하는 것이 가장 좋다. 그들 도메인이 변경되어도 중단되지 않기 때문이다.
웹 브라우저

Chrome, Edge, Firefox, Safari의 목적은 HTML 문서를 읽고 표시하는 것이다.

브라우저는 HTML 태그를 표시하지 않지만 HTML 태그를 사용하여 문서를 표시하는 방법을 결정한다.

 

목록을 만드는 태그

1. ul : 순서가 없는 목록태그, 메뉴 만드는 태그 '짜장면' '떡볶이' '우동'

 <ul>

  <li>

  <li>

 </ul>

2. ol : 순서가 있는 목록태그 

 <ol>

  <li>

  <li>

 </ol>

tag 뒤에 attribute(속성) 입력할 때 한 칸 띄고! 

***<li> list tag에 a 태그 꼭 들어가야된다!

ex) <ul type="circle"> : ○ , <ul type="square"> : ■ ,  <ul type="disc"> : ●

 

 

이벤트 속성(attribute)

우리가 만들어내는 element에 그 element 안에서 사용자가 특정한 행위를 했을 때 그걸 인지하고 인지된 내용을

갖고 특정 프로그램 코드를 만들어주는 것.

메뉴 클릭, 마우스 focus갔을 때, 스크롤 내릴때 발생하는 것을 말한다. 

HTML에는 사용자가 요소를 클릭할 때 JavaScript를 시작하는 것과 같이 이벤트가 브라우저에서 작업을 트리거할 수 있도록 하는 기능이 있습니다.

프로그래밍 이벤트에 대한 자세한 내용은 JavaScript 튜토리얼을 참조

 

<button type="button"onclick="javascript:alert......: button 은 "onclick 이라는 이벤트 설정이 가능하다

<select>

 <option> Seoul</option>        → combo box, select box라고 한다. 

 <option> Jeju</option>

</select>

 

테이블 태그

<table>

_<thead>

__<tr>

___<td>이름 

___</td>

___<td>지역

___</td>

_<tbody> 이렇게만 쳤을 때 아직 table(표)에 line이 없다. 왜 ? 디자인이 없기 때문이다. 

W3Schools <thead> example

*처음 <thead>아래<tr>아래<td>가 아니라 <th>라서 <thead>태그 아래 들어가는 태그는 <th>를 쓰는건가? 했는데 <h1>tag처럼 크기와 굵기를 크게 보여지는 태그라는 걸 알게 되었다. 

 

태그의 특징

서로가 서로를 포함할 수 있다. 태그 안에 또 다시 태그를 넣을 수는 없다. 각각의 고유한 성격이 있다.

Tag elements

    • inline : 줄, 선   inline안에는 박스(상자) 속성을 가진 태그를 넣을 수 없다. 인라인 태그 여러개 출력 시 가로방향으로 출력됨 (---) 너비 높이값을 가질 수 없다. 줄이라 방향만 가질 수 있다. 여러개 출력 시 태그 사이 1칸의 공백이 생긴다.<span> : css로 묶음 부분을 꾸미고자 할 때 쓰인다. 아이콘의 모션 효과, 일부 배경효과 줄 때 
    • block : 박스, 구역을 나눌 수 있다.  현실에서는 중력이 있어 박스를 쌓는다는 건 밑에서 위로 쌓는다고 생각하지만 인터넷 세계는 중력이 작용하지 않고 스크롤을 위에서 아래로 하기에 반대로 쌓인다고 생각해야한다. #세로방향출력 #너비높이값O.(상자라서 크기를 정할 수 있다.)  <br/> : 줄바꿈태그, 다음 세로줄로 내려오기 때문에 블록성격을 지닌다. <p> <div><h>

h태그

<h1>제목</h1> : 블록속성을 가진다. h는 heading의 약자 h1은 header의 로고역할로 css로 색상,굵기 자유롭게 변경 가능하며 html문서1개당 1번만 쓸 수 있다. h2,h3~h4 많이 쓰인다.

 

W3Schools <p>,<div> block elements example

  • <inline-Block> : 두가지 성질을 가지고 있는 태그가 있다. 대표적인 게 이미지 코드, 이미지는 저장할 때부터 사각형이다보니 블럭 속성이라고 생각하면된다. 태그 출력시 가로방향 출력, 너비 높이값 가질 수 있다. 여러개 출력시 태그 사이 1칸의 공백이 생긴다. 이 세가지 태그 고유의 성격을 알고 코딩을 해야한다. 가로로 나오면 inline 세로로 나오면 Block이다. 같은 태그를 여러번 써보면서 구분해보자! 

★박스 안에 줄을 넣을 수 있지만 줄(inline요소) 안에 박스(block요소)를 넣을 수는 없다.

ex) *<b>tag 일부 텍스트 굵게 만드는 태그, <b>오늘은 4월 6일<br />일요일이다.</b> → not ok

 css, java script쓸 때 오류발생!!!

<b>---</b><br /><b>...</b> → ok.

<div><p></p></div>  

 

주석처리 ctrl+/ 화면에서 숨길 때 

font-50{border:1px solid □#000j

 

엔티티(Entity)코드 외우지 않아도 된다. 검색해서 찾아서 쓰면 된다. &문자.숫자.; ← 기본형

 

웹 문서 만들 때(html 파일 이름 생성 시)주의점

한글 안 된다. 맨 앞에 숫자 못 쓰고, 영문 소문자로 시작한다.

띄어쓰기 안되며 언더바(_)와 하이픈(-) 사용하여 띄어쓰기를 표현한다.  

.은 확장자 앞에만 쓸 수 있다. 

 

<i>,<em> 글자를 이탤릭체로 표현함. 

Visual Studio Code : 개발자도구

다운로드 → New text file → ! enter 누르면 html기본구조가 나온다. 

'HTML+CSS' 카테고리의 다른 글

HTML+CSS / 레이아웃 만들기 / flex / day10 / 25.04.14  (0) 2025.04.15
HTML CSS 기초 / day09 /25.04.11  (0) 2025.04.14
CSS 기초 / 블록속성특징 / css박스모델 / day07 / 25.04.09.  (0) 2025.04.13
CSS기초 / day06 / 25.04.08  (1) 2025.04.08
HTML 기초배우기 / day05 / 25.04.07  (0) 2025.04.07