본문 바로가기

728x90
반응형
SMALL

css

(6)
마우스 오버 버튼 만들기 실습_css https://2myona.tistory.com/220 css_선택자 정리 CSS에서 스타일링 해줄 요소는 '선택자'로 결정한다. 우리가 이미 알고 있는 것들부터 시작해서, 또 어떤 선택자들이 있는지 살펴보자! 태그 이름 /* 모든 태그 */ h1 { color: orange; } 클래스/아이디 /* 2myona.tistory.com 마우스 오버에 대한 간단한 설명은 위를 참고 - html 코드 - CSS 코드 이것도 가능하다!' (input -> submit-bin 으로 바꾼 형태)
css_선택자 정리 CSS에서 스타일링 해줄 요소는 '선택자'로 결정한다. 우리가 이미 알고 있는 것들부터 시작해서, 또 어떤 선택자들이 있는지 살펴보자! 태그 이름 /* 모든 태그 */ h1 { color: orange; } 클래스/아이디 /* 'important'라는 클래스를 갖고 있는 모든 태그 */ .important { color: orange; } /* 'favorite'라는 아이디를 갖고 있는 태그 */ #favorite { color: blue; } 자식 (children) /* 'div1' 클래스를 갖고 있는 요소의 자식 중 모든 태그 */ .div1 i { color: orange; } 직속 자식 (direct children) /* 'div1' 클래스를 갖고 있는 요소의 직속 자식 중 모든 태그 */ ...
border 꾸미기_radius, background, shadow Border 모서리 설정 border-radius라는 속성을 사용하면 요소의 모서리를 둥글게 만들 수 있습니다. 더 큰 값을 쓰면 더 둥글게 되는 거죠! %로 써줄 수도 있습니당 예를 들어 50%로 적어주면 동그랗게 border가 설정됩니다! .div1 { border: 1px solid green; border-radius: 5px; margin-bottom: 20px; } .div2 { border: 1px solid green; border-radius: 30px; } 개별 설정 그냥 border-radius 속성을 사용하면 모서리 네 개 모두 똑같이 둥글게 되는데요. 각 모서리를 개별 설정할 수도 있습니다. h1 { border: 1px solid green; border-top-left-radi..
boder(테두리) 설정 다른 속성들과 마찬가지로, 테두리를 설정해주는 방법도 다양하다. 한 줄에 끝내기 가장 일반적인 방법은 border 속성으로 한 줄에 다 쓰는 것 이 방식을 사용하면 위, 아래, 왼쪽, 오른쪽 모두 같은 테두리가 생긴다. 값을 쓰는 순서는 굵기, 스타일(실선, 점선 등), 색이다. 명확하게 나누기 다른 방법은 border-style, border-color, border-width 속성을 써서 테두리의 스타일을 하나씩 지정해주는 것 다채로운 테두리 지금까지는 4면의 테두리가 모두 같았는데, 다 다르게 설정해주고 싶으면 이렇게 하면 된다. 테두리 없애기 어떤 요소들(예: 태그)은 기본적으로 테두리가 설정되어 있다. 이런 요소들의 테두리를 없애고 싶으면 직접 border 속성을 설정해주면 되는데. 두 가지 방..
CSS 기본 속성 정리_스타일링 종류_폰트 크기, 여백, 색, 정렬 일단 CSS 스타일을 입혀주기 위해서는 태그를 사용해야 한다. 이제 기본적으로 스타일링할 수 있는 종류를 알아보자. - 폰트 크기 : px(픽셀)을 가장 많이 사용 - 텍스트 정렬 : 글을 왼쪽, 가운데, 오른쪽으로 정렬 가능 각각 left, center, right 로 써주면 됨 - 여백 : margin 속성 이용 여백의 크기도 px 단위로 설정 여백의 위치는 위, 아래, 왼쪽, 오른쪽 가능 각각 top, bottom, left, right 으로 써주면 됨 - 글씨 색 : color 속성 이용
HTML과 CSS_CSS 기본 문법_VS Code로 실습 해보기 오늘은 이전까지 실습했던 HTML에 추가로 CSS를 배워보자. 간단히 얘기하면, HTML = "내용" CSS = "스타일" 사이트에 CSS 스타일을 입혀주기 위해 태그를 사용할 수 있다. 위의 기본 문법을 참고해서 이전의 실습에 스타일링을 추가해보자. CSS 스타일링 종류 https://2myona.tistory.com/200 CSS 기본 속성 정리_스타일링 종류_폰트 크기, 여백, 색, 정렬 일단 CSS 스타일을 입혀주기 위해서는 태그를 사용해야 한다. 이제 기본적으로 스타일링할 수 있는 종류를 알아보자. - 폰트 크기 : px(픽셀)을 가장 많이 사용 - 텍스트 정렬 : 글을 왼쪽, 가운데, 2myona.tistory.com 이전의 실습 참고 https://2myona.tistory.com/181 H..

728x90
반응형
LIST