15_Sep_2021: 🐰엘리스 AI 트랙 TIL: 웹 사이트의 정보와 디자인1

유환익·2021년 9월 16일

Web Development programming python 엘리스AI트랙

Alexander Yoo의 Web Programming

목록 보기

1/4

🐰엘리스 AI 트랙 정규 과정 2일차

정규 과정이 시작하고 2 일차가 되었다. 실시간 집체 강의 다음 날인 오늘은 녹화된 동영상 강의를 들으며 스스로 학습하는 스마트혼합훈련날이다 (상당히 어려운 이름이다..).
첫 번째 Part의 주제가 웹과 컴퓨터 공학인 만큼, 웹 개발의 기본기인 HTML과 CSS에 대해 학습을 했다. 이미 익숙한 HTML과 CSS라서 큰 기대를 하지 않았었는데, 생각보다 중요한 내용들을 다룬 수업이었기 때문에(그렇지 않아도 모두 할 생각이었지만) TIL로 정리하기로 했다.

💻프로그래밍이란?

컴퓨터와 소통하는 방법을 의미한다.

프로그래밍 언어는 컴퓨터와 개발자 간 약속으로 구성되어 있는 언어. 즉, 개발자가 의도한 어떤 기능들을 컴퓨터에게 전달하려는 목적을 가지고 있다.

웹 개발을 하기 위한 언어는 HTML, CSS, JavaScript가 있고, 브라우저와 소통하는 데 필요하다.

웹을 구성하는 3요소

HTML

HTML은 웹사이트에 정보를 표시하고, 웹 사이트의 구조를 설계하는 언어이다.

CSS

CSS는 웹사이트의 외관을 꾸며주는 언어이다.
e.g. (색상 설정, 공간의 크기 설정)

JavaScript

JavaScript는 웹사이트에 동적인 효과를 부여하는 언어이다.
즉, 기능적인 측면을 담당한다.
e.g. (Sliding effect, Pop-UP effect)

웹사이트를 제작하는 과정은 집을 짓는 과정과 같다고 볼 수 있다.

설계도를 작성을 담당하는 것은 HTML
인테리어 디자인을 담당하는 것은 CSS
집의 기능적인 측면을 담당하는 것은 JavaScript 이다.

또한 웹사이트 제작 시 고려해야 할 세 가지 사항들이 있다.

웹 표준: 웹사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격 (반드시 따라야 하는 강제성은 없지만, 준수하면 포털에 노출될 가능성을 높여준다.)

웹 접근성: 장애의 여부와 상관없이 모두가 웹사이트를 이용할 수 있게 하는 방식

크로스 브라우징: 모든 브라우저 또는 기기의 버전들을 고려하여 제대로 작동하도록 하는 기법

주석 표기법

개발을 할 때에는 주석을 사용하여, 코드에 대한 설명을 기록하는 것은
미래의 나와 현재의 동료의 이해를 돕는 데 중요하다.

HTML의 주석



JavaScript 및 CSS의 주석

// 주석 내용입니다. (한 줄의 경우)
/* 이것은
주석 내용입니다.*/ (여러 줄을 묶을 경우)

HTML의 기본 구조를 만들어 보자

html 코드 예

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1 style="color:navy">Hello World!</h1>
</body>
</html>

설명

<!DOCTYPE html>: html5으로 html을 구성되었다는 약속.
과거의 사용된 언어의 일부는 사용할 수 없다.

<html></html>: html 문서를 의미하는 태그. 여기 안에 속하는 태그들은
html 태그 안에 작성되어야 한다.

<head></head>: 문서 자체에 대한 요약 정보가 들어가는 영역
(웹사이트에 노출되지 않는다.)

<meta>: charset 속성이 들어간다.
속성 값으로 UTF-8이라는 가변 길이 유니코드로 인코딩을 설정

<body></body>: 웹사이트에서 보여지는 정보가 들어가는 영역
(이미지나 텍스트처럼 화면에 출력된다)

<title></title>: 브라우저 상단 탭에 제목 설정

<h1~6></h1~6>: 중요한 제목/부제목 정보를 담는 태그.
숫자는 정보의 중요도를 나타낸다.
<h1>태그는 가장 중요한 정보를 담으므로, html문서에서 한 번만 사용된다.

<img src='' alt=''>: 정보성을 갖고 있는 이미지 (닫힌 태그가 없다.)
src: 삽입할 이미지 경로.
alt: 웹사이트가 이미지를 출력하지 못했을 경우, text로 대체한다 (웹 접근성 고려)
<p></p>: Paragraph의 약자로 본문 내용을 표현.
웹사이트의 중요 정보를 담는 태그.
<ul></ul>: Unordered list의 약자로, 순서가 없는 리스트.
순서가 없다는 것은 각각의 항목의 중요도가 동급이라는 의미.
자식으로 항상 <li></li>태그가 들어간다.
주로 메뉴 버튼을 만들 때 사용된다.

📌주의점
열린 태그와 닫힌 태그 사이에는 content가 들어가며,
content는 태그 내 태그, text등을 포함하는 태그 안의 내용이다.

HTML 기본태그

HTML을 깊게 들어가며

HTML(Hyper Text Markup Language)은 위에 언급한 것처럼, 웹사이트에 보여지는 정보나 특정 구역을 설정할 때 사용하는 언어이다.

여기서 정보에는: 텍스트, 이미지 (회사 로고, 슬로건)등이 있다.

HTML은 웹사이트의 주요 정보들을 특징별로 구역 설정을 한다.

HTML은 계속 변화하고 있으며, 공식 문서를 참고하면 현재 사용되는 태그와 그렇지 않은 태그들을 확인할 수 있다.

현재 HTML5의 태그들

HTML 태그의 구성 요소

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

태그명: HTML이 가지고 있는 고유의 기능 (열린태그와 닫힌태그 형태)

컨텐츠: 열린 태그와 닫힌 태그 사이에 있는 내용물

속성: HTML 태그가 가지고 있는 추가 정보 (별명 또는 디자인 요소 설정가능)

속성값: 어떤 역할을 수행할지에 대한 구체적인 명령

한 줄평:

이미 안다고 자만하지 말라. 기본기는 어떤 것보다 중요하다.🤔

유환익

사용자의 편의를 더 생각하고 편안한 UI/UX 개발을 꿈꾸는 프론트엔드 개발자 지망생입니다.

다음 포스트