학습 목표
-
웹 개발에 있어서 HTML, CSS, JavaScript의 역할을 각각 설명할 수 있다.
HTML(Hyper Text Markup Language)은 웹페이지에서 구조를 만드는 마크업 언어다. HTML은 태그와 속성 들의 구성요소로 이루어져 있다. 마크업 언어는 이러한 태그와 속성 등을 이용하여 문서, 데이터 등의 구조를 표기하는 언어다.
CSS(Cascading Style Sheets)는 HTML로 만든 구조에 색체, 디자인 등의 살을 붙이는 스타일 시트 언어다. 스타일 시트 언어는 웹 페이지의 디자인적 요소들을 시각화 하거나 레이아웃 등을 담당하는 언어다.
JavaScript는 HTML과 CSS를 이용해 만든 웹 페이지에 사용자와의 상호작용 등 동적인 기능을 부여하는 프로그래밍 언어다. -
VScode에서 폴더를 열고 새로운 파일을 생성할 수 있다.
새 폴더를 생성한 후, 생성한 폴더에 새 파일을 생성한다. 예를 들어, html 확장자 파일을 생성하려면 'index.html' 혹은 '실습 주제명.html'로 설정한 후, 코드창에 '!' +
tab를 누르면 'HTML 형식'이 자동으로 작성된다. -
VScode를 이용하여 작성한 HTML, CSS를 브라우저에서 확인할 수 있다.
o
-
HTML이 "구조를 표현하는 언어"라는 의미를 자신의 언어로 표현할 수 있다.
구조를 표현하는 언어란, 웹 페이지에서 배너는 어디에 넣을 건지, 검색 필드는 어디에 넣을 건지, 로그인 필드는 어디에 넣을 건지 등의 웹 페이지 내에서 구조를 나누는 기능을 하는 언어다.
-
HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.
HTML은 Tree Structure(트리구조)에 따라 엄격하게 순서대로 작성된다 <html> <head> <title>브라우저의 탭 제목을 작성하는 역할의 태그</title> </head> <body> <h1>heading의 약자로 제목을 작성하는 태그로 h1~h6까지 있다. h2부터는 소제목을 의미한다.</h1> <div>division의 약자로 컨텐츠를 담는 태그로 시맨틱하지 않으며, 컨텐츠 크기와 상관없이 컨텐츠가 포함된 줄 전체를 차지한다.</div> <span> 컨텐츠를 담는 태그로 시맨틱하지 않으며, 컨텐츠 크기 만큼만 공간을 차지한다. </span> </body> </html>
-
자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
HTML 요소란,
여는 태그 + (컨텐츠)+ 닫는 태그의 형식을 의미한다.
따라서 '자주 사용되는' HTML '요소'란 틀린 말이며,
'자주 사용되는' HTML '태그'로는h,p,div,span,img,header,footer,ul,ol,li등이 있다. -
<div>,<span>요소가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.<div>는 division의 약자로 컨텐츠가 포함된 줄 전체를 차지하며 시맨틱하지 않다.
<span>은 컨텐츠 크기 만큼만 차지하며, 시맨틱하지 않다. -
<ul>, <ol>, <li>요소가 무엇이고, 언제 사용해야 하는지 알고 있다.<ul>은 unordered list의 약자로 정렬되지 않은 목록을 의미한다. 순서가 중요하지 않으며,
검정색 동그라미(bullet mark)로 표현된다. 시맨틱하다.
<ol>은 ordered list의 약자로 정렬된 목록을 의미한다.
순서가 중요하여 숫자로 표현된다. 시맨틱하다.
<li>는 list item의 약자로<ul>과<ol>의 하위태그며,
목록 항목을 의미한다.
<ul>의 하위 태그로 작성하면, 동그라미로 표현되며,
<ol>의 하위 태그로 작성하면, 숫자로 표현된다.
부모 태그에만 영향을 받는다. -
<input>요소에 type을 설정하여 다양한 종류의<input>요소를 활용할 수 있다.<input>이란 텍스트, 패스워드, 버튼 등의 데이터를 입력할 수 있는 태그다.<input>태그에 type 속성을 추가하여 더 구체적인 기능을 부여할 수 있다. 자주 사용되는 type 속성으로는 text, password, radio button, checkbox 등이 있다. 코드 작성은<input type="text"></input>이며, 만약 type을 적지 않으면 무조건 text를 기본값으로 사용한다. -
id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미 있는(semantic) HTML 문서를 작성할 수 있다.
<id>와<class>는 selector(선택자) 중의 하나이다. 선택자란 반복되는 태그를 지정하거나 CSS를 적용하기 위해 원하는 태그를 선택하는 속성이다.
<id>란, identification의 약자로 하나의 태그를 선택할 때 사용한다. 중복될 수 없으며,'#ID명'으로 선택하여 작성한다.
예를 들어, 교실 안에 있는 각각의 학생들같이 고유한 값을 가진다.
<class>란 여러 태그를 선택할 때 사용한다. 중복될 수 있다. '.class명'으로 선택하여 작성한다.
예를 들어, 1반, 2반, 3반과 같은 교실이다. -
HTML5 시맨틱 요소를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시맨틱한 HTML 문서를 작성할 수 있다.
o
-
시맨틱 요소가 무엇인지 설명할 수 있다.
sematic element란, 의미론적인 요소를 의미한다.
즉, 구체적인 의미를 가진 요소를 의미한다.
예를 들어, div와 span은 아무 의미 없는 태그지만,
h1, section, form, header, footer, input 등은 이름에서 볼 수 있듯이 어떤 역할을 하는지가 분명한 시맨틱 태그다. -
시맨틱 요소를 사용하는 이유에 대하여 이해한다.
좀 더 명확한 검색엔진에 노출되기 위함과, 개발자 간의 분명한 상호작용과 관심사 분리를 위함이다.
-
검색을 통해 시맨틱 요소를 찾고 적절하게 적용할 수 있다.
시맨틱 요소는 검색에 있어 키워드와 같은 의미로 작용하기 때문에 중요하다.
-
HTML을 사용하여 간단한 웹 페이지의 구조를 만들 수 있다.
o
-
만들고 싶은 앱의 와이어프레임을 그려볼 수 있다.
와이어프레임이란 선으로 표시하여 입체감을 주는 건데 철사를 이어서 만든 뼈대처럼 보여 와이어프레임이라고 한다.
이는 레이아웃의 뼈대를 그리는 작업 즉, 밑그림을 그리는 작업과 같다고 이해할 수 있다. -
와이어프레임만 보고 HTML로 코딩할 수 있다.
o
와이어프레임이란 무엇을 완성할지 밑그림을 그리는 작업이다. 설계도를 그리는 작업과도 같다.
어느 부분에 무엇을 넣을지, 어떻게 구성되며, 어떻게 작동되게 할 건지를 작성하는 것이다.
이는 figma와 같은 디자인 툴을 사용하여 작성할 수도 있고, 수기로도 작성할 수 있다.
이처럼 어떤 것을 구현하고자 할 때 밑그림을 작업사는 관정을 와이어프레임이라고 한다.
(뒤의 학습 내용을 공부하고 돌아와 이해된 내용을 다시 적는다. 2023.04.18) -
<div>요소 또는<section>,<header>등의 시맨틱 요소로 영역을 구분하는 이유를 이해할 수 있다.o
-
HTML 문서에서 언제 id 혹은 class를 사용해야 하는지 이해할 수 있다.
o
소감
🔡➡️💻➡️🤓👍
내가 정확하게 이해하기 위해 복습에 시간을 많이 투자하고 있지만,
어디까지가 학습을 해야하는지 감이 잡히지를 않는다.
무작정 시간을 투자하기에는 효율성이 떨어질 거 같아 첫 주동안은
내가 어떻게 공부하며, 어디에 시간을 많이 할애하는지,
정규 학습 시간동안 학습 스케쥴대로 따라가는지,
다른 사람들과 달리 학습 속도는 어떠한지 등을 체크해야겠다.
