console.log("CAPABLE");

CSS 색상 1. RGB 표기법 빨강, 녹색, 파랑에 대해 단순히 값을 지정한다. rgb(0, 255, 255) 투명도가 있고 투명도를 알파라고 한다. RGBA라고 부른다. rbba(0, 255, 255, 0.4) 0.4의 경우 투명도가 부여된다. 2. 16진수 표기법 불투명도와 알파채널은 투명도와 관련있지만 다른 특성이다. 알파채널 RGB(RED, GREEN, BLUE) + A(ALPHA) = RGBA 알파채널은 색상이 비치는 정도이다. 투명도를 결정한다. 모든 단일 색상 표현가능하다. rgb의 값은 0 ~ 255까지이다. 그러나 a의 값은 0에서 1사이이다. 0은 완전히 투명하고 1은 전혀 투명하지 않다는 뜻이다.

상대적인 단위 EM(엠이라 발음) CSS 전부터 쓰인 오래된 용어이다. 대문자 M의 높이, 너비 그리고 타이포그래피와 연관이 있다. em은 rem처럼 상대적 단위이며 다른 값에 영향을 받는다. 특성에 따라 다른 값이 바뀐다. 글꼴 크기를 1em으로 설정하면 부모의 요소와 똑같은 크기가 된다. (2em은 부모 요소보다 2배 큰거다.) 항상 다른 값과 상대적이다. (무언가의 퍼센티지란 의미이다. 설정하는 특성이 그 무언가이다.) width를 요소의 50%로 설정하면 부모 요소의 절반 너비를 설정하는 것이다. 페이지 중앙에 컨테이너가 있다고 가정을 해본다. 블로그 포스트이다. width는 800px이다. 다른 요소가 그 너비의 40%나 80%를 차지하게 하고 싶다면 %를 사용하면 된다. 굳이 픽셀값을 계산할 ..

디스플레이 속성은 많은 기능을 갔고 있다. h1 { background-color: palegoldenrod; border: 1px solid black; } 요소가 알아서 최대한으로 길어졌다. 이런 경우는 전체가 바디인것이다. 모든 헤딩 요소는 블록 레벨 요소가 되었다. 헤딩은 문단이나 디폴트 블록 레벨 같은 다른 요소이다. span { background-color: paleturquoise; border: 1px solid black; } span은 기본 값이 인라인이다. 줄 전체를 차지하지 않았기 때문이다. 다른 요소나 내용을 밀어내지 않는다. 그러나 디스플레이 특성으로 이것을 바꿀 수 있다. h1의 디스플레이를 인라인으로 설정할 수 있다. h1 { background-color: palegold..

Margin(여백) Margin은 바깥 공간을 다루는 거다. 여백은 기본적으로 요소 사이의 공백이다. margin도 마찬가지로 4개의 개별 특성이 있다. margin-left margin-right margin-bottom margin-top Margin shorthand property (속기법 특성) 패딩의 속기법과 같은 원리로 작성하면 된다. 4개의 개별 특성을 한번에 작성하는 것이다. 속기법 특성에는 4가지 방법이 있다. padding값을 적기 전 모습이다. 1. 하나의 값으로 전체를 적용한다. 1번은 여백을 넣기 전이고 2번은 여백을 50px로 설정해 넣었다. #one { background-color: #DDB892; border-width:10px; border-color: indianred..

Padding(패딩) padding은 콘텐츠 박스와 요소를 둘러싼 테두리 사이의 남은 공간이다. (콘텐츠와 테두리 사이의 공간) 또한 padding은 요소 내부에 있는 공간이다. padding-left padding-right padding-bottom padding-top #one { background-color: #DDB892; border-width:10px; border-color: indianred; border-style: solid; padding-right: 50px; /* box-sizing: border-box; */ } 녹색 부분이 padding이다. padding shorthand property (속기법 특성) 4개의 개별 특성을 한번에 작성하는 것이다. 속기법 특성에는 4가지 ..

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갸의 상반되는 스타일이 있다. 하나는 빨강, 하나는 보라이다. 우선은 빨강이 먼저 적용된다. 하지만 캐스케이드로 인해 보라색으로 대체된다. 순서는 하나 이상의 스타일시트가 있을 경우에도 중요하다. 순서의 영향은 브라우저의 페이지를 따라 내려가며 모든 스타일을 순서대로 만나고 다음 링크된 이 스타일시트로 넘어간다잉. 서로 충돌하는 스타일이 동일한 요소에 적용된다면 어떻게 될..