console.log("CAPABLE");

justify-content 메인축을 기준으로 요소와 콘텐츠를 어떻게 배치할지 결정하는 속성이다. 디폴트는 flex-start로 입력되어있다. flex-start는 속성의 이름이다. 항상 왼쪽으로 정렬되는건 아니다. 그러나 메인 축이 왼쪽에서 오른쪽 방향이면 요소도 왼쪽에서 오른쪽정렬이다. body { font-family: 'Merriweather', serif; } h1 { text-align: center; } #container { background-color: #6c757d; width: 90%; height: 500px; margin: 0 auto; border: 5px solid #6c757d; display: flex; flex-direction: row; } #container div ..

Let's Play With Flexbox 컨테이너 개념을 포함하는 평범하고 전형적인 섹션이다. body { font-family: 'Merriweather', serif; } h1 { text-align: center; } #container { background-color: #6c757d; width: 90%; height: 500px; margin: 0 auto; border: 5px solid #6c757d; } display 속성 #container div { width: 200px; height: 200px; } 각각의 는 블록 레벨 요소로서 하나의 섹션안에 존재한다. 이 컨테이너의 diplay를 flex로 설정하면 어떻게 될까? #container { background-color: #6c..

Flexbox flexbox는 items을 금 긋기(열, 행을 긋기) 위한 표면적인 레이아웃 방법이다. 페이지의 콘텐츠 상자 안에 아이템을 배치하는 데 사용된다. 페이지의 콘텐츠 상자 안에 아이템을 배치하는 데 사용된다. flexbox는 1차원 레이아웃을 만드는데 사용할 수 있는 CSS 속성의 집합 flexbox의 주요 아이디어는 conatiner 요소 내부의 빈 공간이 자식 요소에 의해 자동으로 나눔 flexbox를 사용하면 부모 container 내부에서 수평 및 수직으로 항목을 자동으로 정렬 가능 flexbox는 수직 정렬 및 동일한 높이의 열 생성과 같은 일반적인 문제를 해결한 flexbox는 floats를 바꾸는데 완벽하고, 더 적은 코드와 HTML과 CSS를 깔끔하게 작성 float에 대해서 ..

CSS를 활용해 background 특성들을 적어볼 것이다. 일단 그렇게하려면 background 설정을 한다. I am heading section { width: 80%; height: 880px; background-color: palevioletred; max-resolution: 0 auto; } h1 { font-size: 100px; color: white; } background-image 주로 URL을 이용해 적용한 이미지 경로를 지정하는데 이미지가 있는 폴더 위치나 온라인 주소를 넣을 수 있다. section { width: 80%; height: 880px; background-image: url("https://images.unsplash.com/photo-1661956602868-..

JUMPING으로 적혀있는 버튼을 페이지 중앙에 flex box를 사용해야 한다. body { font-family: 'Roboto', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; background-color: #151b29; } 위의 코드와 같이 입력했더니 버튼이 중앙에 위 치하게 되었다. 호버 효과를 주기 전 상태의 버튼에 기본스타일을 추가해보겠다. 일단 그렇게 하기 위해서 버튼의 기존 배경을 제거해 준다. button { background: none; color: #ffa260; border: 2px solid; padding:1em 2em; font-size: 1em; } backg..

Transform(변형) 사물을 회전시키고 원근도 왜곡할 수 있다. 확대, 축소, 늘리기, 기울이기 등도 할 수 있다. h1 { background-color: #2a9d8f; border: 5px solid #264653; color: #eae2b7; padding: 0.7em; width: 300px; font-size: 1.8em; text-align:center; margin: 20px auto; font-family: Courier New; font-weight: lighter; } h1:nth-of-type(2n) { background-color: #fb5607; } h1:nth-of-type(3n) { background-color: #ff006e; } h1:nth-of-type(4n) {..

Transition(전환) Keyword: Property Name | Duration | Timing Function | Delay Transition은 CSS 특성이다. border가 속기법으로 쓸 수 있는 하나의 특성이면서 한 개이상의 특성이 지닌 것처럼 전환도 하나 이상의 특성으로 이루어져있다. 한 특성값에서 다른 값으로 변화할 때 전환으로 애니메이션 효과를 주는 것이다. .circle { width: 300px; height: 300px; background-color: magenta; } .circle:hover { background-color: cyan; border-radius: 50%; } (아직 전환은 사용하지 않았다.) 페이지 혹은 한 요소에서 변하는 특성들이 여러개 있는 상태이다...

위치 특성 위치 특성은 문서 내에서 요소의 위치를 설정하는 것이다. 중요한 점은 이 특성이 설정한 위치에 따라서 4개의 다른 특성인 top, right, bottom, left이 결정된다는 것이다. 위치 특성으로 사용하는 특성 값은 static, relative, avsolute 등 이다. "static" div { width: 100px; height: 100px; background-color: #3d405b; border: 2px solid black; margin: 10px; display: inline-block; } #middle { background-color: #81b29a; } 가운데의 위치 변경 확인을 위해 다른 컬러를 넣었다. 디폴트는 static이다. 지금까지 다뤘던 모든 요소의 ..

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%를 차지하게 하고 싶다면 %를 사용하면 된다. 굳이 픽셀값을 계산할 ..