A sentimental robot

웹 페이지에 이미지를 넣고 싶을 때는 이미지 태그를 이용하면 된다. 이미지 태그는 비어있으며 속성 값만을 포함한다. 그렇기 때문에 태그를 닫지 않는다. 이미지 태그의 속성에는 ... src : 이미지의 경로를 명시한다. 보통 이미지들은 따로 폴더를 만들어서 저장해 놓고 그 경로를 참조한다. alt : 느린 인터넷 연결, src 속성 에러, screen reader 사용자, 이미지 찾기 실패 등의 이유로 인해 이미지가 보여지지 않을 때 나오는 대체 문구 이다. style / width / height :속성들을 이용해 이미지의 크기를 조절한다. 하지만 HTML5는 style 속성을 사용하길 권장한다. style 속성은 가장 우선순위가 높기 때문에 스타일 시트에서도 이미지 크기를 중복으로 조절하게 되는 상황..

Link HTML 문서에서 링크는 a 태그를 활용한다. a 태그의 href 속성를 통해 링크를 걸 페이지 주소를 명시한다. url link의 상태와 CSS 속성 a:link 방문하기 전 a:visited 방문한 후 a:active 링크를 클릭한 순간 target 속성 링크된 페이지를 어디에 보여줄지를 결정한다. target 속성의 값에는 _blank : 새로운 페이지 혹은 새로운 탭에 문서를 보여준다. _self : 같은 페이지에 _ parent : 상위 프레임에 _top : 같은 페이지에 다시 로드된다. 링크는 북마크로 활용될 수 있다. 북마크를 사용하면 긴 페이지 상에서 보고싶은 특정한 부분으로 넘어갈 수 있다. here! jump to here! 링크를 걸 때 외부 경로에 대해 잘 알아두어야 한다...

CSS 스타일을 적용하는 방법은 3가지가 있다. 1. inline 태그 내에 style 속성을 사용하는 방법, 우선 순위가 가장 높다. 2. internal 태그 내에 태그를 사용하는 방법으로 하나의 html 페이지에 스타일을 정의한다. 3. external 외부 css 파일을 사용하는 방법으로 한 개 이상의 html 페이지에 스타일을 정의할 수 있다. 외부 css 파일을 적용시킬 경우, 태그 내에 를 추가한다.

기초 태그부터 정리해보자. HTML5 문서임을 선언한다. html 페이지의 최상위 요소 (root element) 문서에 대한 메타 데이터를 포함한다. 메타 데이터란 html문서에 대한 정보를 말한다. 문서의 제목, 스타일, 링크, 스크립트, 문자 인코등 같은 정보를 일컫는다. 메타 데이터는 보여지지않는다. 와 사이에 위치한다. 메타 요소는 문자 인코딩(character set), 문서 설명, 검색 엔진에 노출될 키워드, 문서의 저자 등을 정의한다. 브라우저, 검색엔진, 웹 서비스에서 메타 데이터를 사용한다. 문자 인코딩을 정의 웹 페이지에 대한 설명 검색엔진에서 노출될 키워드 문서가 30초 마다 새로 고침 된다! 이런 대박기능이? 여기서 끝이 아니다! HTML5에서 도입된 viewport가 있었으니! ..

rebase 브랜치를 병합하는 merge 이외의 또 다른 방법이다. Rebase를 하든지, Merge를 하든지 최종 결과는 같다. 단지 rebase는 커밋 히스토리를 더 단순하게 만들어 준다. Rebase의 경우는 브랜치의 변경사항을 순서대로 다른 브랜치에 적용하면서 합치고 Merge의 경우는 두 브랜치의 최종결과만을 가지고 합친다. 하지만 rebase 명령은 주의해야한다. Rebase는 기존의 커밋을 그대로 사용하는 것이 아니라 내용은 같지만 다른 커밋을 새로 만들기 때문이다. cf. $git rebase A B A브랜치에 B를 붙힌다. rebase -i --interactive의 약자이다. 이 옵션은 커밋들을 합치고 싶을 때 사용한다. 작은 커밋들을 합쳐서 하나의 큰 커밋으로 만든다. rebase를 ..

Flex box 'display : flex' defines the container flexbox. flex-direction : row (For default) the cross axis would be vertical / the main axis would be horizontal flex-direction : column the cross axis would be horizontal / the main axis would be vertical align - items controls the cross axis. 교차축 ,수직축 담당 also controls each flex item's property 'align-self 'all. 각 플렉스 아이템들이 차지하는 너비 안에서의 정렬 align -..

원격 저장소 추가하기 git remote add ->기존 워킹 디렉토리에 새 리모트 저장소를 추가한다. * 원격 저장소를 clone하게 되면 자동으로 origin이란 별명을 붙힌다. 원격 저장소의 데이터를 가져오는 방법 1. fetch 원격 저장소에 새로 업데이트 된 내역을 가져온다. 2. pull = fetch + merge fetch함과 동시에 로컬 저장소에 병합한다. 원격 저장소에 데이터를 업데이트 하기 git push 이 때 주의해야 할 사항이 있다. 바로 conflict,충돌이다. 원격 저장소의 프로젝트을 여러명이 함께 작업하는 경우 내가 작업한 내역과 팀원이 작업한 내역이 서로 충돌이 나서 원격저장소에 push가 거절될 수 있다. 이를 예방하기 위해 push하기전 로컬 저장소에 다른 사람이 작..

Git 은 프로그램 등의 소스 코드 관리를 위한 분산 버전 관리 시스템이다. git 상태 (local repo기준) tracked : git이 추적하고 있는 상태 modified : 수정한 파일을 아직 로컬 저장소에 커밋하지 않은 상태 /working dir staged : 현재 수정한 파일을 곧 커밋할 것이라고 표시한 상태 / index committed : 데이터가 로컬 저장소에 저장된 상태 / head git의 흐름 (cli 기준) git init 기존 디렉토리를 git 저장소로 만들기 (or) git clone 기존 원격 저장소 복사, 프로젝트 히스토리를 전부 받아온다. working directory에서 작업한 내용을 스테이지에 올린다. git add : modified 상태에서 staged 상..