프론트 웹 개발
-HTML
: Hypertext Markup Language
: 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드
: 마크업 언어이다. (프로그래밍 언어 아님)
// 마크업 언어 : 컨텐츠의 구조를 정의하는 언어
-CSS
: Cascading Style Sheets
: 웹페이지를 꾸미기 위한 코드
: Style sheet 언어 (프로그래밍 언어, 마크업 언어도 아님)
-Java Script
: 웹과 유저가 상호작용이 가능하도록 만드는 코드
: 프로그래밍 언어
HTML과 CSS에 대한 이해
: 깊은 이해보다는 협업 혹은 프로젝트 제작에 필요한 정도의 기본적인 이해를 목표로 하자.
참고 링크
: 필요할 때마다 참고할 내용과 튜토리얼이 있음.
HTML 추가 설명
>요소(element)의 구성
: element 혹은 tag는 HTML 문서를 이루는 기본 단위이다.
태그
: < >로 감싸진 부분을 의미하며, < >안에는 태그명이 있다.
: 태그명은 해당 태그의 기능에 따라 다르다.
: 여는 태그와 닫는 태그가 한 쌍을 이루며, 여는 태그로 문장을 시작하고 닫는 태그로 문장을 마친다.
// 닫는 태그는 역슬래시를 포함한다.
속성
: 요소에 추가적인 특징을 넣어주는 정보이다.
: 등호를 기준으로 좌항에 속성명, 우항에 속성값을 넣는다. 속성값은 인용부호( " 또는 ' )감싼다.
: 태그명과 띄어쓰기로 구분하고, 속성이 여러 개인 경우에도 띄어쓰기로 구분한다.
콘텐츠
: 웹에 실제로 출력되는 내용을 담는다.
: 여는 태그와 닫는 태그 사이에 존재한다.
>빈 요소, empty element
: 닫는 태그가 없는 요소를 의미한다. (때문에 컨텐츠도 존재하지 않는다.
// 예시
// <img src="images/firefox-icon.png" alt="My test image">>요소의 중첩(nesting)
: 요소안에 요소가 있는 것을 의미.
: 여는 태그와 닫는 태그 사이에 다른 요소가 있는 것.
// 예시
// <p>이것은 외부 요소이고, <strong>이것은 내부 요소이다.</strong>여기는 다시 외부 요소이다.</p>>HTML 문서 구성
<!DOCTYPE html>
: 가장 상단의 위치함
: 구시대 유물같은 문장
: 올바르게 작동하기 위해 포함되는 정도로 사용
<html> </html>
: 페이지 전체를 감싸는 요소
: root 요소라고도 부름
: 주로 컨텐츠를 이분할하여 head와 body로 나눈다.
<head> </head>
: root 요소 내에서 상단을 차지함.
: 주로 사용자에게 보여주지 않을 컨텐츠를 포함하는 컨테이너 역할을 함.
// 예시
// 페이지 제목, 키워드, 검색 결과에 표시되길 원하는 페이지 설명, CSS, 문자 집합 선언 등
// 페이지 속성이라고 생각하면 좋을 듯.
<body> </body>
: root 요소 내에서 하단을 차지함.
: 주로 사용자에게 보여주길 우너하는 컨텐츠를 포함하는 컨테이너 역할을 함.
// 예시
// 텍스트, 이미지, 비디오, 게임 등
// 페이지 내용과 같은 부분
**추가 구성 설명**
<meta charset="utf-8">
: 빈 요소의 일종같음.
: 문서가 사용해야 할 문자 집합을 utf-8로 설정하겠다는 의미
: head에 포함함.
// utf-8 : 인간이 사용하는 대부분의 문자가 포함된 문자 집합.
<meta>태그
: 닫는 태그가 없는 empty element임.
: 브라우저나 검색 엔진, 웹 서비스에 이용되는 데이터를 제공할 때 사용.
: 무조건 head에 위치시킴.
: name이나 http-equiv 속성이 명시되었다면, content 속성도 필수로 같이 명시해주어야함.
<title> </title>
: 페이지의 제목을 설정하는 요소
: 브라우저 탭의 제목을 표시함.
: 북마크나 즐겨찾기에서 페이지를 설명하는 부분으로도 사용함.
<div> </div>
: division. 즉, 영역을 나누는 태그
: 레이아웃을 만들때 주로 사용되는 태그
: 속성으로 주로 class를 설정하여 CSS와 연관지어 사용함. (id 는 잘 안쓰는 듯)
// 와 내용이 너무 많다...
// 그냥 이해만 하고 넘어가고 싶지만, 한국인 특...다 외우고 다 보려고함 ㅠㅠ
// 다 외우고 보고싶은거 꾹꾹 참자. 괜히 멘탈만 터진다. 그냥 얼른 웹 페이지 한 번 만들어보자!
// 중요 태그들만 이해 빡하고, 필요할 때 마다 링크 찾자
// 사진과 글을 같이 보이게 하고 싶은데 길어지니까 밑으로만 길어지네...UI 신경쓰는게 굉장히 어렵구나
'코드스테이츠_국비교육 > [Section1]' 카테고리의 다른 글
| 05_Mock-up(첫 페어 프로그래밍)_22.08.25 (0) | 2022.08.25 |
|---|---|
| 04_페이지 레이아웃과 와이어 프레임_22.08.24 (0) | 2022.08.24 |
| 03_HTML과 CSS(CSS편)_22.08.23 (0) | 2022.08.24 |
| 02_Development의 기초_22.08.22 (0) | 2022.08.22 |
| 01_OT 및 교육 시작 전 준비 단계_22.08.19 (0) | 2022.08.21 |