첫 수업, 달리자!

정상희·2025년 2월 27일

html 오즈코딩스쿨

코딩공부

목록 보기

11/60

웹 개발

현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

1. 웹 개발 이해하기

웹이란? 인터넷 상의 컴퓨터들 간에 정보를 공유할 수 있도록 해주는 네트워크 시스템이다.

웹을 통해 교환되는 정보의 종류는 무척 다양하다. 글, 이미지, 동영상 등…
이렇게 다양한 정보들을 효과적으로 제공하기 위해 가장 많이 사용하는 방식은, 웹사이트를 구축하고 공유하는 방식이다.

웹 개발이란 인터넷과 웹을 통해 공유할 웹 사이트를 만드는 일과 이를 서비스하기 위해 필요한 다양한 환경을 구축하는 일을 뜻한다.
그리고 웹 사이트를 만들 때 반드시 필요한 언어가 바로 HTML&CSS다.

2. HTML이란?

웹페이지의 뼈대를 만드는 언어 HTML

HTML코드는 결국 텍스트이다. 따라서 코드를 작성할 때는 메모장으로 대표되는 텍스트 편집 전용 프로그램을 사용해 ‘HTML문서’를 만들어야 한다.
HTML문서는 응용프로그램에 따라 다른 형태로 열린다는 특징이 있다.

3. HTML 기본 문법

태그(tag)

HTML은 웹 페이지의 어느 부분에 텍스트가 있어야 할지, 어느 부분에 이미지가 있어야 할지 등을 나타내는 역할을 한다. HTML은‘태그(tag)’라불리는표기법을 사용해 맡은 역할을 수행한다. 태그의 구성 요소는 다음과 같다.

태그를 작성할 때는

• 태그 이름은 소문자로 쓴다.
• 여는 태그와 닫는 태그를 정확히 입력한다.
• 태그의 콘텐츠로 또 다른 태그가 포함될 수 있다.
• 들여쓰기를 적절하게 사용하는 것이 좋다.(적극권장)

속성(attributes)

속성은 태그의 부가적인 기능을 정의하는 것으로, 선택사항이다.
속성은 시작 태그의 내부에 정의한다. 개수 제한은 따로 없으며, 태그에 추가할 속성이 여러 개일 경우 각각을 구분하기 위해 공백을 사용해야 한다.

속성을 추가한 태그에 의해 표시되는 콘텐츠는 속성으로 인해 형태가 바뀔 수도 있다. 그러나 겉으로 드러나지 않는 속성도 여러가지 존재한다!

주석

주석은 사람에게는 보이지만, 컴퓨터(웹브라우저)에게는 보이지 않는 코드이다. 주로 코드에 대한 메모를 남기기 위한 용도로 사용된다.

실습

4. HTML 문서 기본 구조

HTML 문서는 모든 것을 태그로 표현한다!
head 내부의 코드와 body 내부의 코드는 힘을 합쳐 하나의 HTML 문서를 구성한다.
마지막으로 문서의 타입(DOCTYPE)까지 써 주면 완성! 보통의 HTML 문서는 다음과 같은 구조를 가진다. 그리고 각 태그의 안에 정보와 내용을 담게된다.

실습

p 태그

p 태그는 문단 요소를 나타내는 태그로써, 가장 많이 사용되는 텍스트 태그다.
하나의 p 태그는 하나의 문단을 표현한다. 문단과 문단 사이에는 여백이 있다.

h 태그

h 태그는 제목(표제) 요소를 나타내는 태그이다.
숫자와 함께 사용되며, 숫자 1일 때 가장 크고 6일 때 가장 작다.

hr 태그

hr 태그는 수평선을 표시하는 태그이다.
수평선은 주제 변경 또는 내용 구분을 위해 주로 사용된다.

HTML 텍스트의 특징

엔터를 이용한 줄바꿈을 무시한다.
스페이스를 이용한 공백을 한 번씩만 허용한다.

br 태그

HTML 에서는 ‘줄바꿈’을 표시하기 위해 주로 br태그를 사용한다.

공백문자

공백을 두 번 이상 표시하고자 할 때는 를 사용한다.

실습

img 태그

img 태그는 이미지를 표시할 때 사용하는 태그이다. 단일 태그로써, 닫는 태그는 필요하지 않다. 콘텐츠를 적어주는 대신 표시할 이미지에 대한 정보를 속성으로 지정해주어야 한다.

src 속성은 표시할 이미지의 위치정보와 파일명, 즉 이미지의 url을 입력받는다. 서버에 위치한 이미지 파일이어도 되고, 내 컴퓨터에 저장된 이미지 파일이어도 된다.

추가 속성 alt

alt는 alternative의 약자로 대체 텍스트 역할을 한다.
이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신에 대체 텍스트가 표시된다.

alt를 사용하면 이미지를 볼 수 없는 시각장애인에게 웹페이지를 서비스해야하는 상황에 대한 대비가 가능하다(음성인식기가 이미지 대신 이를 활용).웹 접근성!

추가 속성 width, height

img 태그를 통해 이미지를 표시할 때는 이미지가 표시될 크기를 지정할 수있다. 이 때 너비와 높이를 각각 따로 지정할 수 있으며, 단위 없이 정수 값만 지정한다.

실습

a 태그

a 태그 요소는 다른페이지, 전화번호, 이메일 주소 등 다양한 유형의 콘텐츠로 연결되는 링크(연결) 역할을 한다. 이때 href 특성이 필요하다.

a 태그에 target 특성을 추가하면 새로운 문서를 열 때 현재 탭에서 열지, 새로운 탭에서 열지 결정할 수 있다.

실습

## 5. 요소의 구분과 인라인 텍스트 요소 ### 요소의 구분 태그를 통해 표현하는 웹 요소들은 ‘블록레벨요소’와 ‘인라인요소’로 구분할 수 있다. ![](https://velog.velcdn.com/images/ella6010/post/e39240e1-9b16-432c-9d86-1abf008e593a/image.png)