전체적인 정렬이나 흐름에 관련된 속성 flex container 자식 요소의 크기나 순서에 관련된 속성 flex item flexbox를 활용한 10가지 레이아웃 사례 이 레이아웃은 기존의 display 속성이나 float 속성, position 속성 등으로 구현이 어렵거나 구현이 불가능하다. 하지만 flexbox를 사용하면 쉽게 구현할 수 있다. [순서] 스크롤 없는 100% 레이아웃 내비게이션 영역 브라우저 화면 아래에 붙는 푸터 정렬이 다른 메뉴 폼 레이블 수직 중앙 정렬 중앙 정렬 아이콘 유동 너비 박스 말줄임과 아이콘 위아래로 흐르는 목록 가로세로 비율을 유지하는 반응형 박스 1. 스크롤 없는 100% 레이아웃 전체페이지를 구성할 때 자주 사용하는 레이아웃이다. 다음 그림과 같이 콘텐츠의 길이에..

'flex를 해보자!' 라고 생각만했었는데 드디어 올린다😓 이론을 좀 배워보니 헷갈리는게 많다.. 이론 후에 응용을 꼭 해보고 이해를 하자✊ 브라우저 호환 Can I use flexible Box ? Flexible Box를 쓰는 이유 대부분 사이트는 레이아웃이 수직 구성이며 '위-아래'로 스크롤 하여 사용한다. 레이아웃을 구성할 때 가장 많이 사용하는 요소들이 기본적으로 블록(block) 개념으로 표시(display)되며 이는 뷰(view)에 수직(위에서 아래)으로 쌓이기 때문에 수직 구성은 상대적으로 쉽다. 하지만, 수평구조를 만드는 속성이 명확하지 않아 이나 float , inline-block 을 통해 만든다. 그러나 이러한 방법들은 다양한 문졔(clear, white space 등, 해결 가능하..

origin master master는 지역저장소(local repository)의 브랜치. origin/master는 원격저장소의 브랜치. ("origin"이라는 원격저장소에 있는 "master"브랜치의 local 복사본 이다. ) origin은 원격저장소이다. Example: pull의 2단계 origin/master 브랜치는 merge(병합) 할 수있다. 원격저장소 origin 의 master 를 페치(fetch)한다. origin 에서 master 브랜치를 가져온다. 원본의 master 분기를 가져오고, 지역 저장소 복사본의 이름을 origin/master로 지정한다. $ git fetch origin master origin/master를 master로 merge한다. $ git merge or..

[Git] remote에 이미 push한 파일 지우기 원격저장소에 올린 파일을 삭제한다. 파일을 삭제하는 방법에는 두가지가 있다. // lcoal $ git rm [File Name] // remote $ git rm --cashed [File Name] remote에 올라간 파일은 --cashed를 붙여 줘야 한다. // 특정 파일 삭제 $ git rm --cached include/header.html // 폴더 하위의 모든 파일 삭제 $ git rm --cashed -r .include 삭제 후 git status 로 확인하고, 이 상태를 remote에 적용해야 한다. // commit 후, $ git commit -m "Fix untracked files" // push 한다. $ git push..

[Git] 원격저장소에 올라간 커밋 되돌리기 원격 저장소에서 커밋 히스토리 제어 (reset/revert) 1. reset 후 강제 push 하기 1-1. 주의사항 아래 방법들은히스토리를 강제로 조작한다는 점에 있어서 팀과 공유하는 원격저장소라면 타격이 있을 수 있다. 본인 혼자서 작업하는 경우 아래 방법으로 강제로 되돌린 커밋을 pull 한 팀원이 없는 경우 만약 아래의 작업을 모르고 팀원이 작업 후 push 하면, 내가 강제로 삭제했던 커밋들이 다시 생성된다. 1-2. 로컬에서 되돌리고 싶은 커밋으로 간다. 아래 명령문은 원하는 커밋상태로 되돌아간다. HEAD^ 는 바로 아래 커밋으로 되돌리게 되고, HEAD~3 는 최신(헤드)부터 3개의 커밋으로 되돌리게 된다. $ git reset --hard H..

보호되어 있는 글입니다.

[HTML] HTML 그룹화 관련 요소 HTML5에 새롭게 추가된 주요 콘텐츠 영역을 의미하는 main 요소를 비롯하여, 문단을 의미하는 p 요소, 목록 콘텐츠를 위한 ol, ul 요소, 인용문 영역을 의미하는 blockquoute 요소, 특정 콘텐츠 영역에 스타일 또는 스크립트를 적용하기 위해 사용하는 div 요소 등 그룹과 관련한 다양한 요소를 알아보자. div 요소 요소는 "순수" 컨테이너로 아무것도 표현하지 않는다. 대신 다른 요소 여럿을 묶어 class 나 id 속성으로 꾸미지 쉽도록 돕거나, 의미를 가진 다른 요소(, 등)가 적절하지 않을때만 사용한다. 만약 콘텐츠 블록이 섹션의 의미를 가지고 있다면 div 요소를 사용하는 것은 적절하지 않다. : 콘텐츠 분할 요소 main 요소 요소는 HTM..

보호되어 있는 글입니다.