html 시작을 했다.
한 10년도 전에 잠깐 배웠었는데 메모장에 head, body, 글자 색상 바꾸는 걸 배웠었던 기억이 난다.
배우던 초창기에 취업이 됐었어서 그만뒀었었나.. 기억이 잘 안 나지만 뭔가 좀 지루하고 어려웠던 기억이 남아있다.
그래서 html을 나간다고 조금 걱정이 됐었는데 이제는 메모장이 아니라 Visual Studio Code(이하 VSCode)라는 프로그램 안에서 html을 작성한다고 한다.
우선 확장 탭에 들어가서 저 한국어 버전으로 VSCode를 돌릴 수 있게 해주는 Korean Language Pack for Visual, VSCode에서 작성한 웹페이지를 웹브라우저로 열어주는 Live Server, 코드를 정리해 주는 Prettier 이 세 가지를 설치하고 시작했다.
우선 작성하기 전에 html에 작성하는 tag에 대하여 배웠다.
html은 tag가 모여서 문서가 완성된다.
tag는 <요소>내용</요소>로 이뤄진다.
여기서 /는 끝을 의미 앞은 열린태그 뒤는 닫힌태그(/붙은거)
반드시 태그를 열었으면 뒤에서 닫아줘야한다.
[ 인라인 태그 ]
태그 출력시 가로방향으로 출력
너비 높이값을 가질 수 없다.
여러개 출력시 출력된 태그 사이 1칸의 공백이 생긴다.
[ 블록 태그 ]
태그 출력시 세로 방향으로 출력
너비 높이 값을 가질 수 있다.
[ 인라인 블록 태그 ]
태그 출력시 가로방향으로 출력
너비 높이값을 가질 수 있다.
여러개 출력시 출력된 태그 사이 1칸의 공백이 생긴다.
[ commit ]
내가 작성하거나 생성한 소스를 배포 할 때 사용하는 작업
커밋한 작업은 반드시! 로그를 남겨야 한다.
그리고 중요한 백업 필수!★ ★ ★ ★ ★
깃허브에서 내가 만든 소스코드를 보관할 수 있다.
새 html 파일을 생성해 보자.
폴더를 하나 만들고 VSCode에 넣으면 왼쪽에 폴더가 뜨고 그 안에 새 파일을 만들어 주면 된다.
파일 또는 폴더 만들거나 저장 시 이름 사이에 공백 없이 만들고(공백 필요할 경우'-''_'하이픈 또는 언더바만 사용가능)
숫자로만 만드는 거 No! 한글명 No! 영문은 소문자로만 구성, 숫자와 혼용할 시 영문보다 숫자가 먼저 나와서는 안된다.
이렇게 파일명을 정하고 파일명. html으로 반드시 '. html' 확장자를 넣어줘야 제대로 된 새 파일을 생성할 수 있다.
그 후에 오른쪽에 기입하는 공간에!+엔터를 치면 html 기본 구조가 출력된다.
기본 구조에 있는 태그를 알아보자.
<!DOCTYPE html> : html문서를 웹 표준으로 작업하겠다고 선언하는 선언문. (★★★★★ 반드시 외워두자!)
<html lang="ko"> : html태그는 문서의 시작을 알리며 html문서 전체를 의미한다. lang속성을 이용해 문서에서 사용할 언어를 선언할 수 있음. 선언만 하는거지 쓰고 못쓰고 하는건 아니다.
<head> : html 문서의 두뇌와 같은 역할을 하는 태그로 브라우저에 실제 표현되지는 않지만 다른 외부 파일(css, java script 등...)을 연결하거나 언어의 인코딩, 화면비율 등등을 정의하는 태그이다.
<meta> : html 문서의 정보가 들어있는 태그. "데이터에 대한 데이터"를 정의하는 태그. 단독 태그이자 열린 태그.
charset="UTF-8"속성을 이용해 전세계 언어를 인코딩(해석)해주고, name="viewport"를 이용해 디바이스에 따른 영역을 설정하기도 하며, 검색엔진에 해당 페이지를 노출시키는 역할도 한다.
<title> : 브라우저 탭에 표시되는 이름. 보통 회사의 이름이나 사이트명 등을 적는다.
<body> : 실제 브라우저에 표현되는 영역으로 다양한 태그를 이용해 웹 구조를 설계하는 공간이다.
그리고 문서 안에 단축키: ctrl+/ 으로 주석을 달 수 있는데 이건 웹브라우저에 노출 되지 않는다.
[ block속성을 가진 글자 태그 ]
태그의 성격(속성) 중 하나로 박스의 형태를 가지고 있는 태그를 말한다.
css를 이용해 넓이와 높이를 설정할 수 있고 여러개를 출력하면 위에서 아래로 출력된다.
1. 제목 태그 (heading의 약자)
제목을 나타내는 태그로, h1~h6까지 있다.
h1이 가장 크고, 숫자가 높아질수록 크기는 점점 작아진다.
기본적으로 제목에 대한 강조를 표시하기 위해 글자가 굵게 표현된다.
h1은 보통 로고 자리로 html문서 한개당 1번만 출력할 수 있다.
2. 단락태그인 p태그
단락, 긴 글을 나타내는 태그로 긴글을 입력할 때 사용한다.
3. 줄바꿈 태그 <br>
단락이나 제목 등, 내용 안에서 줄바꿈이 필요한 부분에 <br>태그를 사용하면 줄바꿈을 할 수 있다.
단독태그로, 닫힘 태그 없이 사용하는 태그. <br> 또는 <br />형태를 사용하고 둘다 기본 웹 표준 문법이다.
추가) 공백 앞뒤로 넣은 스페이스도 1칸씩 공백, 태그 1칸 공백처리된다.
4. 정의 태그 <dl>,<dt>,<dd>
어떠한 단어를 정의하고 정의에 대한 내용을 설명하는 태그.
실무에서는 보통 매장 이름과 해당 매장의 정보들을 나열할 때 주로 사용한다.
반드시 dl(부모태그)로 안에 있는 dt와 dd(자식 태그들)를 감싸주어야 하고 dt는 제목으로 1번만 쓸 수 있고
dd는 제목에 대한 설명으로 여러 번 사용 할 수 있다.
5. 목록 태그 <ul>,<li>★사용빈도 높음, 실제 메뉴 만들 때 많이 씀, 앞에 붙는 동그라미는 불릿bulit이라 불리우고 보통 없애고 쓰나 속성으로 모양을 바꿀 수 있다.(squre, circle, disk-기본 채워진 동그라미)
/ <ol>,<li>-사용빈도 적음 alt+shit+방향키 누르면 한줄씩 복제 (속성값 기본은 숫자, a, A, i, I 등등 있음)
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<ul>,<li>는 순서를 정의할 수 없는 항목을 나열할 때 사용하는 목록 태그로 보통 웹사이트 작업을 할 때 메뉴 부분에 사용됨. 사용빈도가 굉장히 높다.
<ol>,<li>는 순서가 있는 항목을 나열할 때 사용하는 목록 태그로 보통 책이나 문서의 목차 등에 활용한다. 사용빈도는 낮은 편이다.
[ inline 속성을 가진 글자 태그 ]
inline 속성을 가지고 있는 태그들은 여러개 출력시 가로로 출력되며, 출력된 결과물 사이에 공백이 1칸씩 생긴다.
line 즉, '줄'이기 때문에 넓이 높이를 가질 수 없다.
block 속성과는 다르게 내용이 포함된 부분까지만 영역을 가진다.
1. 글자를 굵게 표현하는 <b>, <strong>
b와 strong 모두 글자를 굵게 강조하는 태그. 출력 시 눈에 차이점이 보이지는 않지만 b태그는 문장의 이루를 단순 강조할 때 사용하고, strong 태그는 시각장애인들을 위한 웹접근성을 고려한 태그로 화면 낭독기(글자 읽어주는 프로그램-센스리더)에서 구분 할 수 있다.
사용자들이 반드시 알아야하는 경고의 의미를 담은 내용은 strong태그를 이용하는 것이 좋다.
2. 글자를 기울여 표현하는 <i>, <em>
글자를 강조할 때 사용하는 태그로 적용시 기울임서체(이탤릭체)로 표현해준다.
em태그의 경우 문장의 흐름에서 특정 부분을 강조할 때 사용하고, i태그의 경우 마음속의 생각이나 용어, 관용구 등에 사용한다.
하지만 사전적인 의미일 뿐, 엄격하게 구분해서 사용하지는 않는다.
3. 취소선을 나타내는 <s> <del> 태그, 밑줄을 나타내는 <u>태그
s태그는 글자 중앙에 취소선을 그어서 내용이 취소됐음을 나타내는 태그이고 u태그는 글자 밑에 내용을 강조하기 위해 밑줄을 나타내는 태그이다.
4. <sup>: 윗첨자
5. <sub>: 아래첨자
6. 글자의 특정 부분을 꾸며주는 <span> 태그 ★★★★★
글자의 일부분을 꾸밀 때 주로 사용하는 태그로, inline 속성의 대표 태그이다.
단순 글자를 꾸미는 용도 이외에도 햄버거 버튼을 만들거나 디자인 요소를 만들 때 많이 사용한다.
'Web > HTML & CSS' 카테고리의 다른 글
| div태그와 css의 border 속성 (2) | 2024.06.03 |
|---|---|
| css를 사용하여 웹 폰트 연결, 스타일 속성 적용 (2) | 2024.06.01 |
| table 태그 / css 수업 시작 (0) | 2024.06.01 |
| html 문서 작성 기초 (a태그, 이미지태그) (0) | 2024.06.01 |
| 포토샵 활용_웹페이지 와이어프레임 구성 (0) | 2024.05.26 |
