console.log("CAPABLE");

1단계 #pond { display: flex; justify-content: flex-end; } 2단계 #pond { display: flex; justify-content: flex-end; } 3단계 #pond { display: flex; justify-content: space-around; } 4단계 #pond { display: flex; justify-content: space-between; } 5단계 #pond { display: flex; align-items: flex-end; } 6단계 #pond { display: flex; justify-content: center; align-items: center; } 7단계 #pond { display: flex; justify-con..

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-..

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) {..

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

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가지 ..

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

CSS란? CSS(Cascading Style Sheets)는 스타일을 정하고 시각적으로 보이는 형태를 만든다. 프로그램 언어는 아니지만 문서를 시각적으로 표현하고 나태나기 위한 언어 즉 페이지에 입력된 HTML 콘텐츠를 시각적으로 표현한 것 CSS는 규칙이 중요하다. selector { property: value; } (특성, 콜론, 값, 세미콜론 순서이다.) 선택자가 있고 선택자 옆에는 중괄호가 있다. ➡ 선택자를 입력하고 특성을 설정한다. ➡ 특성을 선택하면 스타일이 정해진다. CSS를 올바르게 작성하는 방법 1. Inline styles | HTML 요소에 직접 스타일을 작성하는 것 ➡ 좋은 방법 X Hello World