console.log("CAPABLE");

align-items align-items는 교차축을 따라 아이템을 배열합니다. (justify-content는 메인 축을 따른다.) align-items: flext-start; 교차축의 시작점을 기준으로 한다. #container { background-color: #6c757d; width: 90%; height: 500px; margin: 0 auto; border: 5px solid #6c757d; display: flex; flex-direction: row; justify-content: center; align-items: flex-start; } #container div { width: 200px; height: 200px; text-align: center; } align-item: ..

flex-wrap flex-wrap은 메인 축이 수평일 때 새로운 행을 만들어 요소를 정렬하고 메인 축이 수직일 때 새로운 열을 만들어 요소를 정렬하는 속성이다. flex-wrap: wrap #container { background-color: #6c757d; width: 90%; height: 500px; margin: 0 auto; border: 5px solid #6c757d; display: flex; flex-direction: column; justify-content: space-evenly; flex-wrap: wrap; } 각각 위에서 아래로 정렬되었다. justify-conten:flex-start;로 설정하면 요소들 전부가 위로 촥! 붙는다. 왜냐하면 주축이 상에서 하 방향으로 한 ..

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이다. 지금까지 다뤘던 모든 요소의 ..