console.log("CAPABLE");

Border(테두리) border border(테두리)는 다양한 특성이 있다. 일단 border-width, border-color, border-style을 이용해보겠다. 테두리의 굵기, 스타일, 색상같은 특성이다. 과연 저 3가지만 할 수 있을까? 아니다. 테두리의 상하좌우, 모서리의 곡률도 조정할 수 있다. border은 요소를 둘러싸고 있는 박스 모델의 테두리를 말한다. 일단 3개의 요소를 구별하기 위해 다른 색상을 입력한다. #one { background-color: #DDB892; } #two { background-color: #B08968; } #three { background-color: #7F5539;} 픽셀 단위를 이용해 테두리의 두께를 정한다. #one { background-c..

CSS Box Model Box Model이란 뭘까? Box Model은 요소가 웹 페이지에 표시된 방식 그리고 크기를 조정하는 방법이다. box model에서는 웹 페이지의 모든 요소로 된 직사각형 상자를 볼 수 있다. 각 상자에는 콘텐츠가 있다. 경계, 그 안팎의 공간 그래서 모든 조각을 정의하면 상자 하나에 한개의 box model이 있는거다. 사진의 중앙에 핵심 콘텐츠가 있다. 박스 중앙에는 단락의 첵스트와 같은 실질적인 정보가 위치한다. 그 주변에는 패딩이 있다. 테두리가 둘러져 있고 박스 사이에는 여백이 있다. 콘텐츠 레이아웃에 매우 중요한 특성이고 콘텐츠의 크기나 모양, 테두리 간격을 바꿀때 필요하다. Width(가로) & Height(세로) 콘텐츠 박스에 관여하는 가로와 세로부터 설명 시작..

CSS 상속 구체적인 특성을 지정하지 않은 하위 요소에 상위 항목 특성이 적용되는 것이다.

Inline Styles(인라인 스타일) Inline Styles는 ID,class, 요소보다 더 명시적인 선택자이다. 별로 사용하지는 않지만 요소를 스타일링하는 하나의 방법이다. Sign Up .html 코드 안에 적은 거지만 인라인 스타일은 되도록 사용하지 않는게 좋다. 스타일 시트에서 분리되어 혼란을 일으키기 때문이다. !important !important 규칙은 개별 스타일 지정에 사용할 수 있는 선택자이다. 이것또한 되도록 사용하지 않는게 좋다. button { background-color: orangered !important; } 특이도와 상관없는 선택자이다. 하지만 매우 명시적이다. !important;를 붙여서 sign up의 색도 오렌지 컬러로 바뀌었다. (!important를 사용..

Cascade (캐스케이드) 적용된 스타일의 순서가 중요하다. 스타일의 최상단부터 출발한 폭표(cascade)가 아래로 쭉 흘러서 스타일시트 최하단이나 다음 스타일 시트로 넘어가는 것이다. 순서는 중요하며 맞닥뜨린 순서가 브라우저의 표시에 반영된다. h1 { color: red; } h1 { color: purple; } 위의 코드는 2갸의 상반되는 스타일이 있다. 하나는 빨강, 하나는 보라이다. 우선은 빨강이 먼저 적용된다. 하지만 캐스케이드로 인해 보라색으로 대체된다. 순서는 하나 이상의 스타일시트가 있을 경우에도 중요하다. 순서의 영향은 브라우저의 페이지를 따라 내려가며 모든 스타일을 순서대로 만나고 다음 링크된 이 스타일시트로 넘어간다잉. 서로 충돌하는 스타일이 동일한 요소에 적용된다면 어떻게 될..

Persudo Elements(가상 요소) Pseudo element는 본질적으로 html에 존재하지 않는 요소이다. 그러나 CSS에서 여전히 선택하고 스타일을 지정할 수 있다. 의사 요소는 두 개의 콜론(::)을 사용하여 작성하면 된다. ➡️ 가상 요소도 모디파이어나 선택자처럼 덧붙일 수 있는 요소 그러나 선택된 요소의 특정 부분만 선택한다. (어떤 요소의 첫 줄의 첫 글자에만 스타일을 넣을 수 있다. = 모든 단락이나 모든 스팬의 첫 글자에 선택할 수 있다.) 모디파이어? fist line 이나 first letter을 쓸때는 세미콜론 두개를 붙여야 하는가? ::first-letter? 페이지 내에 있는 모든의 첫 글자 h2::first-letter { font-size: 50px; } ::first..

Pseudo Classes (가상 클래스) ➡️ 선택자 끝에 붙여 상태를 특정하는 키워드 이것을 통해 체크된 체크박스나 커서를 올려둔 요소 등을 선택한다. 모디파이어 혹은 키워드는 :로 시작한다. 가상 클래스를 사용한다는 걸 알려면 :를 입력해야한다. 하이퍼링크 스타일링 /* Styling links */ a { color: #3a86ff; } 단순히 앵커 태그를 지정해서 하면 안된다. 대신에 앵커의 가상 클래스를 지정해서 하면 된다. 그래야 다른 상태를 타겟팅할 수 있기 때문이다. 스타일을 지정하려면 3가지 방법 link pseudo class (링크 가상 클래스) a:link { color: #3a86ff; } 기본적으로 모든 앵커 요소를 대상으로 한다. href 속성을 가지고 있다. 실제로 앵커를 ..

Init 현재 디렉토리를Git 레포지터리로설정하는 명령어 $ git init Git 리포지터리로 설정되면 숨긴 디렉토리로 .git 디렉토리가 생성이된다. .git 디렉토리에 git에서 필요한 파일들이 자동으로 생성 그리고 관리가 된다. 사용자는 .git이라는 디렉토리를 특별히 관리하지는 않는다. $ cd를 입력하면 mingw64 옆에 ~로 표시된다. 그것은 사용자 user 홈으로 돌아갔다는 뜻이다. $ mkdir git_test 임시 디렉토리를 생성하는 것 $ cd git_test/ Bash shell에서 자동완성은 Tab키 만약에 중복되는 file이 있을 경우 $ git init 입력후 bash shell을 보면 괄호 안에 master라고 적혀있다. 이때 master은 현재 경로 브랜치 명을 뜻한다. ..

Git Workflow Init Git의 리포지터리를 초기화하는 명령어 Status Git의 리포지터리에 현재 상태를 조회하는 명령어 Add Working 디렉터리에 있는 파일들을 staying area로 추가하는 명령어 Commit 스테이징 에어리아에 있는 파일들을 리포지터리 영역에 추가하는 명령어 Log 이전에 작성한 커밋이나 파일의 변경을 추적하는 명령어이다. Diff 이전 커밋과 현재의 디렉터리의 비교 등 특정 두개의 커밋을 비교하는 명령어 Branch 개발을 병렬적으로 진행하기 위해 필수적으로 필요한 branch (마지막 변경을 추적한다.) Tag branch와 유사하지만 특정 부분을 테깅처리 한다. Checkout branch를 이동하거나 특정파일을 내려받는것 Merge 병렬적으로 진행한 br..

https://git-scm.com/downloads Git - Downloads Downloads macOS Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several third-party tools for users looking for a platform-specific exp git-scm.com Git 사이트에 들어가 윈도우 운영체제면 모니터 안에 있는 "Downloads for windows"를 누른다. 기존 디렉토리에 설치하는 경우에는 특..