본문 바로가기
AI ／ DL/엘리스 SW 코딩 훈련 트랙

[SW 코딩 훈련] 핵심 HTML/CSS 기초 01. 웹사이트 만들기

by bri9htstar 2022. 10. 11.

프로그래밍이란?

  • 컴퓨터와 소통하는 방법을 의미
  • 컴퓨터에게 전달하는 정보를 어떻게 보여주고 제어할지 결정 가능
  • 웹 개발을 하기 위한 언어로 브라우저와 소통

웹을 구성하는 요소

  • HTML : 웹페이저의 정보 또는 설계도
  • CSS : 웹페이지의 디자인 또는 스타일링(SS를 Style Sheet라고 한다)
  • JavaScript : 웹페이지의 기능과 효과

어떤 건물을 지을 때 건물 설계도를 HTML라 할 수 있고, 인테리어 디자인은 CSS, JavaScript는 엘레베이터의 기능과 효과 등으로 비유할 수 있다. 웹사이트를 만드는 건 건물을 짓는 과정과 비슷하다고 할 수 있다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- 아래 코드를 완성하고 제출 버튼을 눌러보세요! -->
    <h1 style="color:navy">출력하고자 하는 문구</h1>
</body>
</html>

태그 : 열린 태그 <h1>와, 닫힌  태그 </h1>로 이루어져 있다. 열린 태그는 시작 머리에, 닫힌 태그는 코드 입력이 끝난 후에 사용한다.

속성 : 텍스트를 꾸며주는 style 속성을 갖는다.

속성값 : 텍스트 색상을 네이비로 설정하는 color:navy 속성값을 받는다.

컨텐츠 : 태그의 컨텐츠를 **출력하고자 하는 문구**로 설정한다.

 

HTML이란?

Hyper Text Markup Language의 약자로, 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어다.

태그라는 단위로 구성되어 있는데, 세부 설명은 다음과 같다.

HTML 태그 구성 요소

<열린태그 속성 = "속성값"> 컨텐츠 </닫힌태그>

 

  • 태그명 : HTML이 갖고 있는 고유의 기능. <열린태그> </닫힌태그> 형태로 입력
  • 컨텐츠 : 열린 태그와 닫힌 태그 사이에 있는 내용물
  • 속성 : HTML 태그가 갖고 있는 추가 정보
  • 속성값 : 어떤 역할을 수행할지 구체적인 명령을 진행하는 것

HTML 문서의 기본 구조

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <title>웹프로그래밍</title>
</head>
<body>
</body>
</html>
  • <!DOCTYPE html> : HTML5라는 신조어로 문서를 선언하는 태그. 선언된 페이지의 HTML 버전을 웹 브라우저에 알려주는 역할을 한다.
  • <html> … </html> : HTML 문서의 시작과 끝을 의미. 모든 HTML 태그들은 <html> 태그 안쪽에 입력
  • <head> … </head> : 웹사이트의 간단한 요약 정보를 담는 영역. 웹사이트에서 노출되지 않는 정보.
  • <body> … </body> : 웹사이트에서 눈에 보이는 정보를 담는 영역. 이미지나 텍스트처럼 출력되는 정보.
  • <meta charset="UTF-8"> : character setting의 약자를 나타내는 문자 코드. 모든 문자를 웹 브라우저에서 깨짐 없이 표시하겠다는 의미
  • <title> … </title> : 웹사이트 탭에 나타내는 제목을 적는 태그

 

<a> 태그

<a href = "https://www.naver.com" target = "_blank"> 네이버 </a>
  • <a> … </a> : 글자나 이미지 클릭시 다른 사이트로 이동 시키는 태그. 열린 태그와 닫힌 태그 사이에 컨텐츠 입력
  • href 속성 : HTML 연결할 페이지의 주소 지정
  • target 속성 : 어떤 방식으로 이동할지 결정
  • "_blank" : 새 탭을 띄워서 웹사이트를 전환
  • "_self" : 현재 탭에서 웹사이트를 전환 (디폴트 값)

 

<img> 태그

<img src="logo.png" alt="회사로고">
  • <img> 태그 : 정보성을 갖고 있는 이미지를 삽입. 닫힌 태그 없음.
  • src 속성 : 삽입할 이미지 파일 경로
  • alt 속성 : 웹사이트가 이미지를 출력하지 못했을 경우, 텍스트 정보로 대체.

 

<h> 태그

<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>

Heading의 약자로 제목이나 부제목을 표현한다. 숫자 값이 클수록 폰트 사이즈가 작다. 즉, 숫자는 정보의 중요도를 나타낸다. <h1>태그는 가장 중요한 정보를 담으므로, 하나의 html 문서에서 한 번만 사용된다.

 

<p> 태그

<p>Nice to meet you</p>

Paragraph의 약자로 본문 내용을 표현한다. 웹사이트의 중요 정보를 담는 태그로 나타내고자 하는 내용을 열린 태그와 닫힌 태그 사이에 입력한다.

 

<ol>, <li> 태그

<ol>
    <li>메뉴1</li>
    <li>메뉴2</li>
    <li>메뉴3</li>
</ol>
  • <ol> 태그 : Ordered list의 약자로, 순서가 있는 리스트를 생성한다.
  • <li> 태그 : <ol>과 <ul>의 각 항목을 나열할 때 사용한다.
  • <ul> 태그 : Unordered list의 약자로, 순서가 없는 리스트 생성한다. 메뉴 버튼을 만들 때 사용되는 태그다.

HTML 구조

HTML은 목차, 본문, 부록의 구조로 나타나있다. 목차에는 로고, 본문에는 관심 있는 메인 내용들, 부록에는 사업자 등록 번호나 연락처, 언어, 메일 등이 있다. 이런 구조를 지정하는데 사용되는 태그는 다음과 같다.

<header>, <nav> 태그

<header> <!-- 상단 영역 -->
  <nav>  <!-- 메뉴 영역 -->
  …
  </nav>
<header>
  • <header> 태그 : 웹사이트의 머리글을 담는 공간
  • <nav> 태그 : 메뉴 버튼을 담는 공간. <ul>, <li>, <a>와 함께 사용한다.

 

<main>,  <article> 태그

<main role="main"> <!-- 본문 영역 -->
    <article>	<!-- 정보 영역 -->
    …
    </article>
</main>
  • <main> 태그 : 문서의 주요 내용을 담는 태그. IE는 지원하지 않으므로 role="main" 속성을 필수로 입력해야한다.
  • <article> 태그 : 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그다. 태그 내에 구역을 대표하는 타이틀 <h> 태그가 존재해야 한다.

 

<footer> 태그

<footer> <!--하단영역-->
   <div> <!--엘리스정보-->
      <p>주소: 대전광역시유성구문지로193 KAIST</p>
      <p>이메일: contact@elice.io</p>
   </div>
   <div> <!--전자상거래소비자보호법필수정보-->
      <p>사업자등록번호: 000-00-00000 | 대표: 엘토끼</p>
      <p>통신판매업신고번호: 제0000-토끼굴-0000호</p>
   </div>
</footer>

가장 하단에 들어가는 정보를 표기할 때 사용한다. <div>는 임의의 공간을 담는 공간이다.

 

HTML 태그의 두 가지 성격

HTML은 공간, 구역을 지정할 수 있었다. 공간을 점유하면서 나타나는 두 가지 특징이 있다.

HTML은 Block 요소와 Inline 요소로 구분된다. 두 요소를 구분 짓는 세 가지 주요 특징이 있다.

바로 줄바꿈 현상, 가로·세로, 상·하 배치이다.

좌 : Block 요소 / 우 : Inline 요소

Block 요소는 y축 정렬 형태로 출력된다. 줄바꿈 현상이 나타나기 때문에 말그대로 특정 공간을 점유한다.따라서 공간을 만들 수 있고, 상하 배치 작업이 가능하다.

Block 요소

 

Inline 요소는 x축 정렬 형태로 출력된다. 어떤 요소가 종료되고 다른 요소가 들어올 때 줄바꿈을 하지 않아 한 줄에 출력된다.따라서 공간을 만들 수 없고, 상하 배치 작업이 불가능하다.

Inline 요소

웹사이트의 정보와 디자인

HTML/CSS에 입문하신 여러분을 환영합니다 🤗
첫 장부터 굉장히 많은 내용을 학습했어요!
이럴 때 복습은 필수! 이번 장에서 배운 내용을 되돌아봅시다~

 

 

1. 웹을 구성하는 요소

Point I
웹 구성 요소

Point II
웹 제작시 고려 사항

  1. 웹 표준: 웹사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격
  2. 웹 접근성: 장애의 여부와 상관 없이 모두가 웹사이트를 이용할 수 있게 하는 방식
  3. 크로스 브라우징: 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법

 

 

2. HTML 기본 태그

HTML이란 Hyper Text Markup Language의 약자로, 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어입니다.

Point I
HTML 태그 기본 구조

<열린태그 속성 = "속성값"> 컨텐츠 </닫힌태그>
  • 태그명: HTML이 갖고 있는 고유의 기능으로, <열린태그></닫힌태그> 형태로 입력
  • 컨텐츠: 열린 태그와 닫힌 태그 사이에 있는 내용물
  • 속성: HTML 태그가 갖고 있는 추가 정보
  • 속성값: 어떤 역할을 수행할지 구체적인 명령을 진행하는 것

Point II
HTML 문서의 기본 구조

Point III
HTML 기본 태그

<img> 태그: 정보성을 갖고 있는 이미지를 삽입합니다. (닫힌 태그 X)

<img src="logo.png" alt="회사로고">
  • src 속성: 삽입할 이미지 파일 경로
  • alt 속성: 웹사이트가 이미지를 출력하지 못했을 경우, 텍스트 정보로 대체

<h> 태그: heading의 약자로 제목이나 부제목을 표현합니다.

<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
  • 숫자가 클수록 폰트 사이즈가 작음. 즉, 숫자는 정보의 중요도를 나타냄
  • <h1> 태그는 가장 중요한 정보를 담으므로, 하나의 html 문서에서 한 번만 사용됨

<p> 태그: paragraph의 약자로 본문 내용을 표현합니다.

<p>Nice to meet you</p>
  • 웹사이트의 중요 정보를 담는 태그로, 나타내고자 하는 내용을 열린 태그와 닫힌 태그 사이에 입력

<ul> 태그: unordered list의 약자로, 순서가 없는 리스트 생성합니다.

<ul>
    <li>메뉴1</li>
    <li>메뉴2</li>
    <li>메뉴3</li>
</ul>

 

 

3. 구조를 잡을 때 사용하는 태그

Point I
웹사이트의 목차를 담당하는 <header>, <nav> 태그

<header> <!-- 상단 영역 -->
    <nav> <!-- 메뉴 영역 -->
        ...
    </nav>
</header>
  • <header> 태그: 웹사이트의 머리글을 담는 공간
  • <nav> 태그: 메뉴 버튼을 담는 공간 (navigation)으로 <ul>, <li>, <a> 태그와 함께 사용

Point II
웹사이트의 본문을 담당하는 <main>, <article> 태그

<main role="main"> <!-- 본문 영역 -->
    <article> <!-- 정보 영역 -->
        <h#></#h>
        ...
    </article>
</main>
  • <main> 태그: 문서의 주요 내용을 담는 태그 (Internet Explorer는 지원하지 않으므로 role="main" 속성 필수 입력)
  • <article> 태그: 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그로, 태그 내 구역을 대표하는 타이틀 <#h> 태그가 존재해야 함.

Point III
웹사이트의 부록을 담당하는 <footer> 태그

<footer> <!-- 하단 영역 -->
    <div> <!-- 엘리스 정보 -->
        <p>주소: 대전광역시 유성구 문지로 193 KAIST</p>
        <p>이메일: contact@elice.io</p>
    </div>
    <div> <!-- 전자상거래소비자보호법 필수 정보 -->
        <p>사업자 등록번호: 000-00-00000 | 대표: 엘토끼</p>
        <p>통신판매업신고번호: 제0000-토끼굴-0000호</p>
    </div>
</footer>
  • <footer> 태그: 가장 하단에 들어가는 정보를 표기할 때 사용
  • <div> 태그: 임의의 공간을 만들 때 사용

 

 

4. HTML 태그의 성격

Point I
Block 요소

  • y축 정렬 형태로 출력 (줄바꿈 현상이 있음)
  • 공간을 만들 수 있고, 상하 배치 작업 가능

Point II
Inline 요소

  • x축 정렬 형태로 출력 (한 줄에 출력)
  • 공간을 만들 수 없고, 상하 배치 작업 불가능
저작자표시 (새창열림)

'AI ／ DL > 엘리스 SW 코딩 훈련 트랙' 카테고리의 다른 글

[SW 코딩 훈련] 핵심 JavaScript 기초 02. 자바스크립트의 객체와 연산  (0) 2022.11.08
[SW 코딩 훈련] 핵심 JavaScript 기초 01. 자바스크립트 시작하기  (0) 2022.11.08
[SW 코딩 훈련] 핵심 HTML/CSS 기초 04. 웹 사이트의 레이아웃  (0) 2022.11.02
[SW 코딩 훈련] 핵심 HTML/CSS 기초 03. 웹 사이트의 디자인Ⅱ  (0) 2022.11.01
[SW 코딩 훈련] 핵심 HTML/CSS 기초 02. 웹 사이트의 디자인Ⅰ  (0) 2022.10.30

관련글

댓글

티스토리툴바