100S00

transform 속성 scale(), rotate(), translate(), skew() scale() scale은 해당 요소를 지정한 크기만큼 확대 또는 축소 시킬 수 있습니다. transform: scale(2, 0.5); 숫자만 사용할수도 있고 %도 가능합니다. rotate() rotate는 요소를 지정한 각도만큼 회전시킵니다. 회전 각도가 플러스 값일 경우 시계 방향, 마이너스 값일 경우 반시계 방향으로 회전합니다. transform: rotate(180deg); deg를 사용합니다. translate() translate 는 기본적으로 X 축과 Y 축을 따라 지정된 거리만큼 요소를 이동시킬 때 사용합니다. transform:translate(-70px, -40px) px도 가능하고 %도 가능..

CSS : 여백 속성 CSS에서 여백(margin)과 내부여백(padding),은 요소의 레이아웃을 조절하는 데 사용되는 속성입니다. Margin Margin: 요소와 주변 요소 사이의 공간을 지정합니다. margin 속성은 top, right, bottom, left 속성을 사용하여 각 방향별로 여백을 지정할 수 있습니다. h1 {margin: 10px 5px 15px 20px;} /* top-10px, right-5px, bottom-15px, right-20px */ h2 {margin: 10px 5px 15px;} /* top-10px, right & left-5px, bottom-15px */ h3 {margin: 10px 5px;} /* top & bottom-10px, right & left..

문자 관련 스타일 정리 color: 문자의 색상을 지정합니다. color: red; font-family: 문자의 폰트를 지정합니다. font-family: Arial, sans-serif; font-size: 문자의 크기를 지정합니다. font-size: 16px; font-weight: 문자의 굵기를 지정합니다. font-weight: bold; text-align: 문자의 정렬을 지정합니다. text-align: center; text-decoration: 문자의 장식을 지정합니다. text-decoration: underline; text-transform: 문자의 대소문자 변환을 지정합니다. text-transform: uppercase; letter-spacing: 문자 사이의 간격을 지정합니..

Type 선택자 타입 선택자(Type Selector)는 h1, p, div, span 등 HTML 요소(Element)를 선택하는 선택자입니다. 예를 들어 다음은 HTML 문서 안에 있는 모든 p 요소의 내용을 파란색으로 만듭니다. p { color: blue; } Id 선택자 아이디 선택자(ID Selector)는 특정 값을 id 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다. 속성값 앞에 #을 붙여 아이디임을 나타냅니다. 예를 들어 다음은 id 속성값으로 abc를 갖는 요소를 빨간색으로 만듭니다. #abc { color: red; } Class 선택자 클래스 선택자(Class Selector)는 특정 값을 class 속성(attribute)의 값으로 갖는 요소(elemen..

CSS Float 사용방법 정리 CSS Float는 요소를 좌우 방향으로 이동시켜 다른 요소들과의 배치를 조정하는 속성입니다. 이를 이용하면 웹페이지의 레이아웃을 구성하거나 이미지와 텍스트를 함께 배치하는 등 다양한 디자인을 구현할 수 있습니다. Float 속성 사용 방법 Float 속성은 CSS의 속성 중 하나로, float 값을 이용하여 설정합니다. 일반적으로 left 또는 right 값을 사용하며, none은 float 속성을 취소합니다. /* 요소를 왼쪽으로 이동시키는 예시 */ .box { float: left; } /* 요소를 오른쪽으로 이동시키는 예시 */ .box { float: right; } /* float 속성을 취소하는 예시 */ .box { float: none; } 주의사항 Fl..

CSS id & class의 차이 id 속성 id 속성은 전체 페이지에서 단 하나의 요소에만 지정이 가능합니다. class 속성 id 속성과 다르게 여러 번 반복해서 사용할 수 있습니다. 반복적으로 쓰이는 유형들을 유형별로 동일한 class로 분류하여 쉽게 관리할 수 있습니다. id 속성은 태그에 유일한 이름을 붙이고 싶을 때 씁니다. class 속성은 같은 유형으로 반복되는 태그들을 유형별로 분류하고 싶을 때 씁니다. .container { width: 1200px; height: inherit; background-color: rgba(0, 0, 0, 0.2); margin: 0 auto; 수업시간에서 사용한 class = "container" 가 예시 입니다. css에서의 차이 CSS에서 id 속성..

See the Pen 애니메이션 by hyeonbeen97 (@hyeonbeen97) on CodePen.

1. 내부 스타일 시트 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것을 '내부 스타일 시트'라고 합니다. 모든 스타일 정보는 태그 안에서 정의해야 하고 태그 사이에 작성합니다. Korea Japan China 2. 외부 스타일 시트 웹 사이트를 만들 때 하나의 웹 문서로 끝나는 경우는 거의 없습니다.사이트를 제작할 때 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용하는 것이 일반적입니다. 이렇게 따로 저장해 놓은 스타일 정보를 '외부 스타일 시트'라고 하고 '.css' 라는 파일 확장자를 사용합니다. 외부 스타일 시트를 연결할 때는 )를 사용하지 않고 스타일을 적용할 대상에 직접 표시합니다. 이런 방법을 '인라인 스타일'이라고 합니다. 스타일을 적용하..