[220502 / Day 1] HTML 웹표준과 웹접근성 & 기본 HTML 태그 / CSS 기초 문법

🌱 SeSac/공부 기록 (복습하며 업데이트 중)

[220502 / Day 1] HTML 웹표준과 웹접근성 & 기본 HTML 태그 / CSS 기초 문법

Jane K 2022. 6. 16. 17:11

HTML

1. html이란

hypertext markup languege의 줄임말로 하이퍼텍스트를 마크업하는 언어

하이퍼텍스트=웹사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능

마크업=태그를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 것

즉, 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어가 HTML

2. 준비

웹페이지에서 마우스 오른쪽 클릭, 요소 검사 = 개발자들이 보는 화면

Extensions = 편리하게 쓸 수 있는 기능 추가, 기본적으로 Live server, color highlight, Material Icon Theme 설치

효율성 있게, 의미있게(시멘틱) html 만들기 힘듦

html은 구조를 만들고 위치, 컬러 등 꾸며주고 표현해주는 것은 css

html5 버전 기준

3. 태그

대소문자 구분 안하고, 보통 소문자로 통일

<html> 여는 태그, </html> 닫는 태그, 단독 태그 있음

단톡 태그는 <br>, <br /> 두가지 방법 있음 html5는 / 없이 해도 됨

4. HTML 파일 만들기

파일명은 한글x, 띄어쓰기x, 띄어쓰기 사용하고 싶으면 _ - 사용

회사마다 쓰는 파일명 규칙 다름

대소문자 섞어 쓰지 말고 소문자로 통일, 영문숫자 섞어 써도 됨

확장자는 .html

5. 기본 태그

태그 = element 요소

속성=값 / attribe=”value” -> 예: <html lang=”ko”> 한글로 표시

<!doctype html> = html5 버전으로 작성되었다는 것을 알리는 것

<html> = 웹 문서 시작을 알리는 태그, lang 속성을 사용해 문서에 사용할 언어 지정

<head> = 문서 정보 지정하는 태그이자 기본적인 문서의 제목. 그 안에 <title> 로 문서 제목과 <meta> 로 문자 세트 지정.

<mata charset="utf-8"> 이걸 해줘야 한글이 표시됨. charset = 글자, utf-8 = 다국어가 지원

<body> = 문서의 내용, 본문.

*teb 쳐서 꼭 들여쓸 것.

예:

<!doctype html>

<html>

<head>

</head>

<body>

</body>

</html>

*브라우저에 반영된 것을 바로 확인하려면 비주얼 스튜디오 코드 프로그램 하단의 go live 버튼

※가장 기본적인 문서구조:

<!doctype html>

<head>

</head>

<body>

</body>

</html>

*비주얼 스튜디오 코드에서는 웹 문서의 태그를 자동으로 입력해주는 Emmet 기능이 있음

html:5 + 엔터 키 or ! + tab or enter 키 누르면 아래의 기본 태그 자동 작성

Emmet 이란! HTML 소스 코드를 빠르게 입력할 수 있도록 해주는 플러그인 기능, 예전에는 젠코딩이라고 함.

*<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

*여기서 view port는 시작 화면을 말함, device-width는 기본형, 1.0는 기본형

6. 텍스트 관련 태그

<h1>~<h6> = 제목 태그, 숫자가 높을수록 글씨 작아짐, 제목 안에 단락을 만들 수는 없음

예: <h1><p>제목</p></h1>

<p> = 단락 만들기

<br> = 줄 바꾸기, 단독 태그

<hr> = 수평 줄 넣기, 거의 안 씀

<blockquote> = 인용문 넣기

<pre> = 입력하는 그대로 화면에 표시함 따라서 안에 있는 본문 공백도 모두 표시. 거의 안 쓰지만 어쩔 수 없을 땐 사용. 음성 파일에서는 건너뛰기 해버려 시각장애인의 경우 <pre> 안에 중요 내용 넣는다면 확인 어려움. 웹표준에는 맞지만 접근성(누구나 똑같이 이용했을 때 똑 같은 내용을 확인할 수 있어야 함)에 맞지 않음

<strong>, <b> = 텍스트 굵게 표시. strong 은 시멘틱, b 는 디자인적(물리적)으로 굵게. 중요 내용이라 강조할 때는 strong 쓸 것, 화면 낭독기가 알려줌.

<em>, <i> = 이탤릭체(기울게). 중요 내용은 em, 단순 표시는 i

<q> = 인용 내용 표시(quote). blockquote 는 블록 레벨 태그로 줄 바뀌고 들여 써지지만, q 는 인라인 레벨 태그로 줄바꿈 없고 내용 구별할 수 있도록 “따옴표” 붙여 표시

<mark> = 형광펜

<spen> = 구분. 의미는 없지만 단락이나 영역 안에서 일부 텍스트만 묶어줄 때. 가장 많이 씀

*그 외 <abbr> = 약자표시, <cite> = 참고 내용 표시, <code> = 컴퓨터 인식을 위한 소스코드, <kbd> = 키보드 입력이나 음성 명령 같은 사용자 입력 내용, <small> = 부가 정보처럼 작은 텍스트, <sub> = 물의 화학식은 h20 같은 아래 첨자, <sup> = 5의 2승 같은 위첨자, <s> = 취소선, <u> = 밑줄

7. 목록 태그

■ <ul> = 순서가 필요하지 않은 목록, <ol> = 순서가 필요한 목록

-문서의 7-80% 목록 태그 씀

-그 안의 자식태그는 li 밖에 못 씀

-<li> 안에는 <p> 등 다른 태그 가능

-중첩 리스트: 원뎁스, 투뎁스 등으로 부름

(예: <ul>1일차<ol><li>해녀박물관</li><li>낚시체험</li></ol></ul>

-type 속성은 목록 앞의 숫자나 기호를 바꿔주는 것, css로 하기 때문에 거의 쓰지 않음

■ <dl>, <dt>, <dd> = 설명 목록 만들기

-<dl> = 주제, <dt> = 제목, <dd> = 설명

-순서대로 해야함 주제, 제목, 설명 순으로 꼭! dt 안에 여러 dd가 있을 수 있음

-목록 태그는 기본으로 들여쓰기가 됨

8. 링크 만들기

<a> = anchor 앵커 -> 예: https://www.naver.com/”>네이버</a>

-주소창을 local, 그 안의 속성을 href 라고 함

-속성과 속성 사이는 한칸 띄워주기 안 띄워주면 유효성 검사에 걸림

-target 속성: 새 탭에서 링크 열기. _blank(새탭, 새창), _self(현재탭) 등

■ 링크를 거는 경로로 절대 경로, 상대 경로가 있는데

-절대 경로: 인터넷 상 주소, 웹서버의 주소로 연결 (http~)

-상대 경로: 현재 만들고 있는 문서를 기준으로 연결할 문서나 이미지의 위치 지정

■ 상대 경로를 표시하는 방법

-같은 폴더 위치: 같은 디렉토리 상에 위치 (같은 폴더에 위치) (예: 파일명.확장자, 앞에 ./ 쓰기도 하지만 안 써도 됨)

-상위에 위치: 상위 디렉토리에 위치 (예: ../파일.확장자)

-하위에 위치: 하위 디렉토리에 위치 (예: 폴더명/파일명.확장자)

한 페이지 안에서 이동하기

-이동하고 싶은 위치마다 id 속성 이용해 앵커 만들고 각각 다른 이름 지정, 링크 만들 때처럼, <a> 태그의 href 속성을 사용해 링크. 다만 앵커 이름 앞에 #붙여야 함

예: 해당 글 앞쪽에 <p id=”a1”> 이런 식으로 적고, <a href="#a1">본문1</a> 하면 이동

9. 이미지 넣기

-예: <img src=”경로” [속성=”값”]>’

-alt 속성: 이미지를 설명해 주는 대체 텍스트. 컨텐츠에 대해 정확히 설명하기. 빈칸을 해도 표준은 통과하지만 내용을 넣어야 접근성 좋음

-width, height 속성은 css로 대체하기 때문에 잘 안 씀. px 안 넣어도 픽셀 값으로 함

*lorem 숫자 = 숫자만큼의 자동으로 글이 생성

CSS

1. style

style 이란 html 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용들을 가리킴.

html은 웹 사이트의 내용을, css는 웹 문서의 디자인을 구성. 따라서 사이트의 내용을 수정하더라도 디자인에 영향을 미치지 않고 내용만 수정 가능.

■ 스타일 형식 = 선택자{속성:값;속성:값} -> 예: p{text-align:center;}

■ 스타일 시트

- 인라인(inline) : 간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시하는 것. 한 줄 안에 집어넣음. (예: <p style=””>)

그 사이에 다시 다르게 하고 싶으면 spen으로 분리, 인라인으로 들어가는 경우는 많지 않음

- 내부 스타일 시트 : <head> </head> 태그 사이에 <style> </style> 태그 넣고 작성. 셀렉트 표기법(태그 선택자, 클래스 선택자, 아이디 선택자) 여기서 클래스랑 아이디는 이름을 만들어주는 것 / 선택자{속성:값;속성:값} -> 예: <style> p{font-size:20px;color:blue} </style>

- 외부 스타일 시트: 외부에 파일을 만들어 스타일을 작성. <link> 로 불러오면 됨. 파일명은 파일이름.css

2. 주요 선택자 종류 및 표기법

위에서 스타일 속성을 적용하는 요소를 선택자(selector) 라고 했음.

- 태그 선택자 : 특정 태그가 쓰인 모든 요소에 스타일 적용. (예: 태그{스타일} / p{font-size:20px;color:blue} )

- 클래스 선택자 : 특정 부분에 스타일 적용. 숫자 시작 안됨, 한글 안됨, 영문소문자, 특수문자 안됨, _- 가능, 영문숫자 조합 가능. 예를 들면 .text1 = text1이라는 class를 말함 (예: .클래스명{스타일} / .text1{letter-spacing:5px;} )

*텍스트 일부에만 스타일 적용: <spen class=””> 사용.

- 아이디 선택자 : 특정 부분에 스타일 적용. 중복적으로 줄 수 없음 (중복 가능하지만 문법적으로 맞지 않음) (예: #아이디명{스타일} / #point{font-style:italic;color:rgba(166,200,0,0.5)} )

* 단어와 단어 붙을 때 구분하기 위해서 대문자 표시 = 카멜표기법 (예: txtLine) 문제없지만 보통 이렇게 함

3. 텍스트 관련 스타일 (속성)

■ font-family : 글꼴 지정하기. (예: font-family:<글꼴 이름>[,<글꼴 이름>, <글꼴 이름>] ) 컴퓨터에 있는 서체로 하기 때문에 맨 앞의 글꼴 즉 기본형의 글꼴이 없으면 [ ] 안의 글꼴로 대체한다는 뜻(기본형의 옵션)

* 보통 웹 폰트 많이 사용, 서버에 연결에서 가져다가 화면에 랜더링 할 수 있음

다시! 216p

■ @font-face : 웹 폰트 사용하기. 구글 웹 폰트 이용 (예: @font-face{font-family:글꼴 이름;src:url(글꼴 파일 경로) format(파일 유형);}

■ font-size: px, em, rem, %, vh, vw

■ font-weight: 폰트마다 굵기 정해져 있음 그러나 보통 400~700이지만 다 다름

■ color: 예를 들면 rgb(256,0,0) / 실제로는 색명 보다는 rgb 값, 16진수 표현한 값으로 많이 함, 투명도 알파값은 0~1 rgb 뒤에 a / 색상환은 hsl(0,100%,80%) / 16진수는 #ff3929 이런 식으로 쓰고 rgb 괄호 안에 숫자를 16으로 나누고 나온 값, 나머지 값 순으로 정렬. 256p 16진수 표 안의 표기법으로 계산함 예를 들어 rgb(12, 119, 164) = #0c77a4 이것을 헥사코드라고 함 f~0 까지 높을수록 농도가 높다는 것

■ line-height : 행간 즉, 한 줄의 높이

■ letter-spacing : 글자 사이의 간격

■ text-decoration : 텍스트에 선으로 꾸며줌 밑줄, 취소선 같은 것

■ font-style : 글자의 모양을 정해주는 것 기울림 같은 것

■ text-transform : 대문자 또는 소문자로 바꿔주는 것 uppercase 는 대문자

■ word-break : 컨텐츠 밖으로 텍스트가 빠져나갔을 때 줄바꿈, 철자별로 또는 단어별로 나누는 옵션 있음

■ text-align : 글자 정렬, 왼쪽 오른쪽 가운데

■ text-indent : 들여쓰기

4. 주석

- html 주석은

- css 주석은 /* 주석내용 */ 단축키는 alt+shift+a

- 주석은 요구사항, 서명, 수정사항 등 에 사용

5. 우선순위

- 위에서부터 아래로, 아래에 있는 것에 우선순위 적용

- 경로가 있는 것이 경로가 없는 것보다 우선순위가 높다.

- 스타일시트 : 인라인 > 내부스타일 > 외부스타일 순으로 우선순위 높음

- 선택자 : 아이디 > 클래스 > 태그 순으로 우선순위 높음

* 위에서부터 아래로 적용이더라도 위에 아이디가 있으면 아이디가 먼저 적용하기 때문에 위에 있는 아이디로 적용함

* h1#title → h1 태그의 title 아이디를 불러온 것, 붙여야 종속

!정리!

h, p, br, q, a 등 태그, 이미지, 속성 지정, 컬러 지정,

css 폰트, 컬러, 지정하는 방법, 기본 문법, 속성 표기법, border 적용법

w3schools 레퍼런스 확인할 것!