2020-07-13
Git bash의 명령어
오늘 배운 명령어 중, 기존에 알지 못했던 것들을 적어본다.
1. mkdir
현재 위치한 디렉토리에 새로운 디렉토리(폴더)를 생성한다.
$ mkdir css js assets assets/media assets/images위의 명령어를 이용하면 현재 위치에서 "css", "js"와 "assets" 라는 폴더를 새로 생성하는 동시에, 생성한 폴더 "assets"디렉토리 내부에 "media"와 "images"라는 폴더를 생성한다.
2. &&
서로 다른 두개의 명령어를 동시에 입력하여 명령을 수행할 때, &&를 사용하여 묶어준다.
cd assets && lscd명령어를 통해 assets로 경로를 변경한 후, ls를 이용하여 이동한 디렉토리 내부를 표시 해준다.
3. touch
새로운 디렉토리를 생성하는 mkdir과는 다르게 touch는 새로운 파일을 생성한다.
touch index.html(현재 경로에 index.html을 생성)
4. cd.. , cd
cd ..현재 디렉토리의 상위 디렉토리로 이동한다.
cd현재 위치에 상관없이 root 디렉토리로 바로 이동한다.
5. echo
-
새로운 파일을 만들고 입력한 문자열을 바로 넣어준다.
echo -e hello > newfilenewfile이라는 새로운 파일을 생성시키고 hello라는 문자열을 넣어준다.
-
이미 존재하는 파일에 ' ' 내부의 문자열을 추가시킨다.
덮어 씌우기가 아닌 내용추가echo world >> newfile미리 생성해둔 newfile에 world를 추가시킨다.
cat newfile을 이용하여 파일의 내용을 본다면
hello
world 가 출력될 것이다.
-
단순히 터미널에 문자열을 출력시킨다.
echo 'hello world'
6. git bash 명령어
git init을 해준 후, commit을 하기 위해선 사용자 정보를 아래와 같이 남겨 주어야 한다.
$git config (--global) user.name "John Doe"
$git config (--global) user.email "JohnDoe@gmail.com"HTML기초
: DTD 문서 정의 시작, 표준 모드에 의거하여 브라우저에 렌더링을 시작하겠다는 의미이다. ( 가장 최신 문법을 적용하여.. )
-
html은 태그 대소문자 구분없이(한 태그 내에 대소문자를 섞어서 써도 괜찮았다.) 써도 될 정도로 체계가 잡혀있지 않은 마크업 언어였다.
-
내가 태그의 의미를 만들어 줄 수 있는 마크업 언어인 XML을 이용하여 HTML의 단점들을 보완하였다. -> XHTML
-
의미를 만들어 명령어의 확장이 가능해지고 HTML이 정형화 되었다.
-
doctype 내부의 주소
ex)html4는 Https://www.w3.org/TR/html4/loose.dtd 내부에 정의된 규약들을 근거로 식별한다
html4식별자
DTD (Document Type Definition)
:마크업 언어에서 문서 형식을 정의하는 것이다.
(HTML, XHTML, XML)에서 쓰인다.
DTD가 선언되지 않으면, 브라우저는 각기 다른 호환모드로 웹페이지를 렌더링해서 보여준다. 따라서 이를 선언하지 않으면 호환성이 확보되지 않기 쉽다.
HTML5는 하나의 DTD를 갖는다.
head 태그 영역 내의 태그
-
title: 페이지를 대표하는 키워드, 중복되는 이름을 갖지 않도록 하는 것이 좋다.
SEO -> 검색엔진 최적화
:표준 규약을 잘 지키고 검색 친화적 옵션을 넣는다면 특별한 유료 광고 없이도 검색결과 상위에 페이지가 노출된다.
(태그의 의미가 없는 div태그로 중요한 내용을 무분별하게 감싸면 검색결과 노출에 불리한 결과를 낳는다.)
-
<html lang="언어코드-국가코드">: 해당 문서에 주류를 이루는 언어를 입력해준다.
한국어: ko-KR | 영어:en-us , en-uk
3.<meta charset="UTF-8">
현재는 utf-8이 주로 사용된다.
과거에는 euc-kr이 주로 사용되었다. 이는 한글과 영어의 표기에는 문제가 없으나 다른 언어는 깨져서 표기되는 경우가 잦다.
이 코드를 문서에 맞게 잘 바꿔서 적용한다면 웹 접근성이 좋으며, 시각장애인을 위한 음성서비스 적용에 도움이 된다.
여기서, 비주류 언어로 작성된 title태그가 meta태그보다 위에 나올 경우, 깨져서 표기 될 수 있으므로 title이 meta태그보다 아래에 표시되도록 작성하는것이 좋다.
<body>내부 구조
웹사이트 기본골격은 3단 또는 4단을 가장 많이 사용한다.
- 3단: 헤더-메인-푸터
- 4단: 헤더-네비게이션-메인-푸터
1.내부 태그들의 의미
-
header: 헤더태그/ 주로 페이지의 상단에 위치, 메뉴탭을 구성하는 nav태그를 포함하고 있는 경우가 많다.
-
비주얼, 광고영역: 관련 태그가 없으므로 차선책으로 div태그를 이용하는 경우가 많다. 광고영역은 aside영역에 포함되는 경우도 많다.
-
main: html5.1에 새롭게 추가 된 태그이다.
<main>을 이용한다. 본문영역 내부의 컨텐츠 단위들을 article이나 section태그로 묶음지어서 배치하는 영역이다. -
footer: 페이지의 하단영역에 위치하는 태그.
-
Aside: 영역이 삭제 되어도, 본문내용을 이해하는것에 문제가 없는 내용이 포함되어 있는 영역이다.
ex) 뉴스 페이지의 본문과 관련없는 주식정보나 날씨정보
위의 구조 전체를 grouping하는 것이 일반적이다. container-> div태그를 이용한다. (배치하기 편하도록 하기 위함)
과제:
HTML에서는 속성을 "attribute", CSS에서는 "property"라고 한다. 같은 속성인데 왜 다르게 부를까? 차이점은 무엇일까?
html의 속성 attribute는 작성된 문서 내에서 값이 바뀌지 않는다.
<div id="container">
</div>위의 div태그의 attribute값 container는 한번 선언된 후에는 값이 바뀌지않음(정적)
반면 CSS의 속성 property는 입력되는 값에 따라서 값이 변할 수 있다(동적)
