잰니의 성장블로그✈

메인 페이지 구조 만들기 index.html 나 95년생 재은쓰 내 안에 숨어있는 직업캐 찾기! 본캐 찾으러 GO! 주변에 알리기 home.css body{ background-color: #f6fcff; background-image: url("../images/main_bg.jpg"); background-position: top center; background-repeat: no-repeat; } .character { width: 100%; max-width: 364px; margin-left: auto; margin-right: auto; margin-bottom: 40px; } common.css - 여러 번 사용하는 코드들을 따로 만들기 - css 를 활용하여 애니메이션 효과주기 body ..

파비콘(favorite icon) 이란? 즐겨찾기(favorites)와 아이콘(icon)의 합성어 주소 창에 표시된 작은 아이콘. * png, jpg, gif 등의 이미지를 ico 확장자로 변환하여 사용 보통 루트경로에있는 ico 파일을 찾아서 가장 먼저 사용을 하게 되어있고, 가끔 아이콘을 찾아올 수 없는 경우가 있으니 png 파일을 준비해 link 코드를 활용하여 강제로 아이콘을 삽입. 내 안에 숨어있는 직업캐 찾기! Reset.css 브라우저의 기본 스타일을 초기화하는 법 웹 브라우저는 굉장히 다양해서 화면에 출력되는 글씨의 간격, 크기 등등이 다르게 출력된다. 각 브라우저가 제공하는 css 부분이 다를 수 있기때문에 이 부분들을 해결하기 위해 초기화를 시켜준다. https://www.jsdeliv..

transform/ transition 속성 .container { height: 100px; border: 4px solid black; } .container .item{ width: 100px; height: 100px; background-color: rgb(247, 218, 165); transition: 1s; /* 1초 동안 변형되면서 애니메이션처럼 자연스럽게 변환 */ } .container .item:hover{ /* 커서를 가져다 놓으면 */ transform: rotate(45deg); /* 45도로 변환 */ background-color: orange; border-radius: 50%; }

플렉서블 박스(Flexable Box) 플렉서블 박스는 간단히 플렉스 박스(FlexBox)라고도 하는데 박스를 쉽게 가변적으로 만들어 주고 동시에 반응형 웹을 위한 몇 가지 기능도 제공해주는 최신 기술이다. 플렉스 박스는 컨테이너(Container)와 아이템(Item)이라는 두 개의 개념이 필수적으로 존재해야 한다. 아이템이 컨테이너 안에 들어 있게 된다. Flex Box 장점 콘텐츠를 수평 방향으로 쉽게 중앙 정렬할 수 있다. 뷰 포트의 너비에 따라 요소의 배치 순서를 달리 할 수 있다. 박스 내 요소의 여백과 배치를 자동으로 조절 할 수 있다. Flex Direction의 속성 값 row 기본 값, 플렉스 박스의 아이템을 수평 방향으로 배치(좌->우) row-reverse 속성 값 row와 동일하나 ..

CSS란? CSS는 HTML을 보좌하여 웹 페이지를 디자인적으로 꾸미고 페이지의 요소를 화면에 배치하는 역할을 한다. CSS는 기본 구조를 가지고 있으며, HTML에 문서를 삽입하는 세 가지 방법, 웹에서 사용되는 RGB 색상의 사용법, 글자 스타일 지정 방법, 글자에 그림자를 넣는 방법 등이 포함된다. CSS가 나오기 전에는 HTML로 디자인적인 요소들도 만들어 쓰게 했는데 본연의 HTML이 변색되었기 때문에 웹 표준 국제기구인 W3C.에서 1996년 웹의 뼈대를 담당하고 디자인적 요소는 CSS 사용도록 규제했다. CSS의 기본 구조 CSS는 HTML 속에 태그 내의 고양이 개요 표유류 식육목 고양이과에 속하는 대표적인 동물이다.

이미지(IMG) 웹 페이지에 이미지를 사용하려면 태그를 사용한다. 이미지를 삽입할 때 태그와 이미지의 너비와 높이를 설정하는 width와 height속성도 지정해야한다. 이미지 경로는 절대경로(무조건 최상위 위치)와 상대경로(html파일과 같은곳)로 입력하면 된다. 상대경로는 ./~로 시작되지만 ./를 생략해도 된다. 상대경로에서 현재 경로는 ./ 이고 하나 위 경로는 ../, 두 개 위 경로는 ../../ ~로 위치를 나타낸다. 이미지 파일 종류와 설명 포맷 설명 jpg 24비트 트루컬러, 사진 이미지, 파일크기를 줄일 수 있음 png 24비트 트루컬러, 무손실 압축, 휴대폰 등에서 고화질 유지, 최근 널리 사용 gif 8비트(256컬러), 무손실압축, 그래픽 이미지에서 널리 사용, 파일크기 작음 sv..