클라우드 교육/html,css
-
CSS클라우드 교육/html,css 2023. 2. 6. 16:58
CSS에는 여러가지 이벤트를 넣을 수 있는데, 보통 마우스가 올라가있을때, 클릭하고있을때, 클릭했을때 등등 마우스로 할수 있는 짓은 대부분 이벤트를 적용하게 할 수 있다. 간단하게 몇가지만 알아보자. hover라는 옵션은 마우스가 그 태그 위에 위치할때 변경하게 바꿀 수있다. 아래처럼 div안에 마우스가 위치할때 색상을 aqua로 바꾼다. 아래처럼 마우스가 캡쳐에는 안보이지만 올라가면 색상이 바뀌어진다. 아래는 기본적으로 div내부에 마우스가 올라갈때 aqua로 바뀌어지지만, h1태그는 bisque로 바뀌어진다. h1태그만 색상이 바뀌었다. active라는 마우스를 올렸을때 색상이 바뀌게 할 수 있다. 마우스를 올리기 전 마우스를 올리면 바뀐다. 아래 사이트에서 여러가지 방법을 배울 수 있다. https..
-
CSS클라우드 교육/html,css 2023. 2. 6. 15:50
html이 컴퓨터 언어이면 css는 html의 스타일을 정해둔 시트이다. css로 적용시키는 방법은 총 3가지가 있는데, 범위에 따라 엘레멘트 스타일 : html의 태그를 지정해 사용한다. class : 그룹으로 묶어서 사용할때 사용한다. id : 독립적인 id로 특정한 조건만 부여할 때 사용할 수 있다. 로 나뉠수 있다. 1. 엘레멘트 스타일 보통 갈색 글처럼 html 태그를 지정한다. 그리고 괄호 안에 스타일을 지정해 넣어둔다, 아래처럼 두곳을 지정해두고, 아래처럼 지정되지않은 h5를 제외한 나머지의 색상이 바뀌었다. 2. class 스타일 .로 class로 만들 것을 지정해 넣어둔다. 그리고 아래처럼 적용할 태그에 class="" 을 넣어 적용시킨다. 결과값 3. id # 으로 지정해 사용하는 방법..
-
HTML 태그 2클라우드 교육/html,css 2023. 2. 6. 11:13
P 태그 새로운 라인으로 바꿔준다. 이미지 태그 사진을 보여줄때 사용한다. 로컬의 위치를 지정해줘도 되고, 사이트의 링크를 지정해 줘도 된다. 아래처럼 이미지 주소를 복사해서 src에 붙여넣는다. 아래처럼 이미지가 나온다. 사진 크기 조정도 가능한데, width는 가로 / height는 세로 크기 이다. 링크 누르면 링크로 이동되는데 target="_blank" 태그는 현재 탭이 아닌 새로운 탭에 링크를 띄워준다. 위의코드는 아래처럼 만들어지고, 클릭하면 새로운탭에 생성된다. target를 지정하지않으면, 현재 탭에서 뜬다. 버튼 누를수 있는 버튼을 만들수 있다. 텍스트 입력 가로세로 크기를 조정가능하고, 아래처럼 글자도 쳐진다. 내부에 태그를 남기고 싶으면, placeholder를 사용하면 된다. Se..