Button A .a-button { background-color: rgb(20, 40, 192); color: white; border: none; border-radius: 30px; cursor: pointer; margin-right: 10px; margin-left: 30px; padding-top: 20px; padding-left: 16px; padding-right: 16px; padding-bottom: 16px; transition: all 3s ease-in; /*모든 transition은 3초동안 일어나며 ease-in 방식이다.*/ } .a-button:hover { /*mouseover*/ opacity: 0.7; background-color: black; } .a-butto..
Float & Clear
Float CSS 컨테이너의 왼쪽/오른쪽에 element를 배치해 text 및 inline element가 주위를 둘러쌀 수 있게 함. 예전에는 float을 통해 Side bar와 Main Content 간의 레이아웃을 구성했으나, 현재는 Flexbox 및 Grid를 사용하는 추세. Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore suscipit ipsa blanditiis deleniti cumque voluptates numquam beatae nesciunt, sit natus ipsam, velit animi mollitia hic at quaerat tempora obcaecati ipsum? Clear CSS float의 ..
Pseudo
pseudo-class 별도의 class를 지정하지 않고도 class를 지정한 것 처럼 요소를 선택할 수 있다. :hover 마우스를 위에 올렸을 때 CSS값 :first-child(last-child) 해당 부모 컨테이너의 차일드 중 첫번째(마지막) 요소 :first-of-type(last-of-type) 해당 부모 컨테이너의 차일드 중 조건 요소를 만족하는 첫번째(마지막) 요소 Mouse Hover 이렇게 html의 body를 구성하고, header에 style을 내부 서식으로 아래와 같이 작성한다. HTML 삽입 미리보기할 수 없는 소스 Pseudo Element 가상 클래스처럼 선택자에 추가되는데, 존재하지 않는 요소를 존재하는 것처럼 부여해 문서의 특정부분을 선택함 :: 로 표현 before와 ..
CSS 적용 방법 1. 인라인 스타일 : 태그 안에 Style 속성을 통해 사용하는 방법 2. 내부 스타일 시트 : HTML 파일 안에 css style sheet를 선언하는 방법 3. 외부 스타일 시트 : 외부에 css 파일을 만들고, html에서 해당 css 파일을 링크 걸어 로드하는 방법 겹치는 경우 스타일 적용 우선 순위 인라인 > 내외부 스타일 시트 > 웹 브라우저 기본 스타일 기본 구조 Selector : CSS를 적용시킬 위치의 HTML element ex) h1, h2, h3 Property : Selector가 지정한 위치에서 '무엇'을 바꿀지. ex) font-size: Value : Property가 얼마나 어떻게 바뀌게 할지 지정하는 값 ex) 100px 색 표현 방법 RGB rgb..