HTML&CSS 1일차

1. HTML이란?

HTML

HyperText(하이퍼링크를 통해 어떤문서에서 다른문서로 접근할 수 있는 텍스트) Markup Language
하이퍼 텍스트와 콘텐츠를 표시해주는 언어. 웹페이지의 콘텐츠 정의

렌더링

HTML 코드가 웹브라우저를 통해 해석되고 표현되는 과정

HTML 문서 만들기

TML문서는 파일확장자가 html 또는 htm
파일 수정단계

텍스트 편집기(기본메모장, Brackets, VSCode)로 열기

결과확인

웹브라우저(크롬, 파이어폭스, 사파리)로 열기

2. 개발자 도구와 코드 에디터

개발자 도구 열기

F12
우측 상단 메뉴 설정 -> 도구 더 보기 -> 개발자 도구

코드에디터

프로그래머가 프로그램 소스 코드를 편집하기위해 사용하는 소프트웨어
텍스트 자동완성 + 하이라이팅 기능이 추가된 메모장
Visual studio code

3. HTML 코드 기초 문법

태그

HTML 코드에서 정보(콘텐츠)를 정의하는 형식
<> 와 </> 기호를 사용해 콘텐츠의 시작과 끝 표시
<태그명>콘텐츠 기입</태그명>

단일 태그
<태그명/> 또는 <태그명>

속성

태그의 부가적인 기능 정의. 선택사항.
<태그명 속성명 = "속성값"> 내용 </태그명>
<태그명 속성명 = "속성값" />

태그명과 속성 정의는 공백으로 구분. 큰따음표 사용.

주석

사람에게는 보이지만 컴퓨터에는 보이지 않는 코드

4. HTML 문서 기본 구조

HTML 문서 구조

문서의 첫부분에서 문서유형을 지정하는 단일태그
문서유형: '이 문서는 ~니까 잘 처리해'라는 메시지 전달

< html> ~ < html>

문서 유형을 지정한 후 실제 문서가 시작되는 끝나는것을 나타냄

< head> ~ < head>

웹브라우저 화면에는 보이지 않지만 웹브라우저가 알아야 할 정보들은 모두 이 태그에 들어감
< meta charset = "utf-8">

문자 인코딩 및 문서 키워드 등에 대한 요약 정보
문자 인코딩: 한글을 표시하기 위해 문자 세트를 지정

< title>~< title>

문서의 제목. 콘텐츠는 브러우저 탭에 표시됨.

< body> ~ < body>

실제 브라우저 화면에 표시될 내용 입력

텍스트를 표시하는 태그
이미지를 표시하는 태그
사용자 인터페이스(버튼, 입력란, 드롭다운 메뉴 등)을 나타내는 태그

5. 텍스트 태그 사용 방법과 특징

문단(paragraph)

p태그는 문단 요소를 나타내는 태그
하나의 p태그는 하나의 문단 표현
문단과 문단 사이에는 공백이 있다

제목

h태그는 제목 요소를 나타내는 태그
숫자와 함께 사용됨. 숫자 1일때 가장 크고 6일때 가장 작음.

수평선

hr태그는 수평선을 표시하는 태그
주제 변경 또는 내용 구분을 위해 사용

HTML 텍스트의 특징

엔터 무시
스페이스를 통한 공백도 한번만 인정

줄바꿈 태그와 공백문자

br태그가 줄바꿈 담당
공백을 두번이상 표시하고자 할때는  사용

6. 태그의 구분과 인라인 텍스트 요소

태그의 구분

블록레벨 요소를 만드는 태그 vs 인라인 요소를 만드는 태그

블록레벨 요소: 자기가 속한 영역의 너비
인라인 요소: 자기에게 필요한 만큼의 공간만 차지

strong태그: 감싸고있는 콘텐츠를 굵게 표시. 인라인 요소 태그
em태그: 감싸고있는 콘텐츠를 기울여 이탤릭체로 표시. 인라인 요소 태그.
mark태그: 감싸고 있는 콘텐츠에 형관펜 표시. 인라인 요소 태그.

7. 이미지 표시하기

img태그

이미지를 표시할 때 사용
단일 태그
콘텐츠 대신 표시할 이미지에 대한 정보 속성으로 지정

src속성: 표시할 이미지의 위치정보와 파일명 입력받음. 이미지의 url

이미지 크기 조절

img태그를 통해 이미지가 표시될 크기 지정. 너비와 높이 각각 지정. 단위x
<img src = "표시할이미지파일" alt = "이미지설명" width = "너비값" height = "높이값 />
너비와 높이는 각각 픽셀(px) 단위로 적용

alt(alternative): 대체 텍스트 역할. 이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신에 대체 텍스트 표시. 이미지를 볼 수 없는 시각장애인에게 웹페이지를 서비스해야하는 상황에대한 대비 가능(음성인식기 활용)