웹 개발에 있어서 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
🔡➡️💻➡️🤓👍
내가 정확하게 이해하기 위해 복습에 시간을 많이 투자하고 있지만,
어디까지가 학습을 해야하는지 감이 잡히지를 않는다.
무작정 시간을 투자하기에는 효율성이 떨어질 거 같아 첫 주동안은
내가 어떻게 공부하며, 어디에 시간을 많이 할애하는지,
정규 학습 시간동안 학습 스케쥴대로 따라가는지,
다른 사람들과 달리 학습 속도는 어떠한지 등을 체크해야겠다.