EverGiver

슬라이드 쇼 이미지를 어떤 버튼을 클릭했을 때 또는 자동으로 일정 시간이 지나면 다른 이미지로 교체되면서 그 과정에서 애니메이션 효과가 발생하는 개념 overflow - 내가 선택한 태그의 가로와 세로 값을 넘어간 내용물들을 처리해주는 css속성 - overflow:auto ▷ 가로세로 값 넘어간 내용물들을 잘라내지 않고 스크롤을 만들어서 볼 수 있게 만들어줌 (딱 필요한 만큼만 스크롤 만들어줌) - overflow:hidden ▷ 내가 선택한 대상태그의 가로세로 값을 넘어간 글자 및 이미지 기타 내용들을 전부 잘라버리는 기능 - overflow:scroll ▷ 기타 내용들을 스크롤을 만들어서 볼 수 있게 해 준다. ▷ 쓸모 없는 스크롤도 생김 css속성에는 다양한 단위가 존재 - px : 고정 값 (어..

cursor 마우스 커서를 변경하는 css속성 cursor 종류 1. cursor:pointer - a태그를 사용하지 않고도 대상을 클릭할 수 있는 것처럼 마우스 커서를 변경해주는 css속성 (실제로 클릭 기능이 있는 건 아니고 커서의 형태만 변한다) 2. cursor:move - 커서가 움직일 수 있는 형태의 마우스 커서를 변경해주는 css속성 3. cursor:text - 커서가 글자를 입력할 수 있는 형태의 마우스 커서를 변경해주는 css속성 4. cursor:wait - 커서가 로딩을 기다릴 때의 형태로 마우스 커서를 변경해주는 css속성 5. cursor:help - 기존의 로딩을 커서 밑에 ?가 하나 생기는 형태로 마우스 커서를 변경해주는 css속성 (도움이 필요한 내용과 관련된 고객센터 및 ..

기타 정보 #1 - 선택자 ~ 선택자 : 앞에 있는 선택자 바로 뒤에 오는 모든 선택자를 골라주는 선택자 - 선택자 + 선택자 : 앞에 있는 선택자 바로 뒤에 오는 선택자를 골라주는 것 - first-child : 대상 선택자 중에 가장 먼저 오는 선택자를 골라주는 것 - last-child : 대상 선택자 중에 가장 마지막 선택자를 골라주는 것 안녕하세요 h2태그입니다 h3태그입니다 h2태그입니다 h3태그입니다. h2태그입니다 h3태그입니다 첫번째 li 두번째 li 세번째 li 기타 정보 #2 - background-color:red : 색상명을 단어로 적어서 표현 - background-color:#987654 ★ : hex코드를 넣어주는 방식 #과 함께 사용 필수 - background-color:..

여백 계산법 웹사이트 상에서 똑같은 간격과 똑같은 크기를 가지고 있는 부분을 만들어줄 때 사용하는 계산법 계산법 - (총 가로길이 - 여백 개수 * 임의의 여백 사이즈) / 한 줄의 내용물의 개수 ex) (1500 - 3*20) / 4 ※ 여백 개수 = 한 줄의 내용물의 개수 - 1 ※ 임의의 여백 사이즈 = 보통 10~30px 사이를 많이 주고 20px을 가장 많이 넣어준다. 여백 계산법을 완료했을 때 들어가야 하는 필수 css 속성들 1. 계산해서 나온 값을 width에 넣어줄 것 2. 여백 - margin-left 입력 (margin-right도 상관없다) 3. 가로배치 - float:left; 4. 첫 번째 태그에 들어가 있는 여백 빼주기 - ?:nth-child(1){margin-left:0px..

왼쪽이나 오른쪽으로 배치하는 float 속성 태그처럼 문단의 왼쪽이나 오른쪽에 이미지를 나란히 표시해야 할 경우가 있다. 태그는 블록 레벨 요소이므로 이미지와 나란히 한 줄에 배치할 수 없다. 이런 경우 float 속성을 사용하여 이미지를 표시하고 그 주변에 텍스트가 둘러싸도록 할 수 있다. float 속성은 웹 요소를 문서 위에 떠 있게 만든다. ('떠 있다'는 의미는 요소가 왼쪽 구석이나 오른쪽 구석에 배치된다는 것을 의미) display:block 속성에 사용하는 css속성으로 세로 배치를 가로 배치로 전환 종류 설명 left 해당 요소를 문서의 왼쪽에 배치한다. right 해당 요소를 문서의 오른쪽에 배치한다. none 좌우 어느 쪽에도 배치하지도 않는다. (기본값) float 속성을 해제하는 c..

배경색을 지정하는 background-color 속성 16진수나 rbg값 또는 색상 이름을 사용해서 지정 background-color: #008000; background-color: rgb(0,128,0); background-color: green; 글꼴이나 글자 크기 등은 태그 선택자에서 지정하면 문서 전체에 상속된다. 하지만 background-color 값은 상속되지 않는다. (기본적으로 모든 웹 문서 요소의 배경은 투명하므로 body 스타일로 지정한 문서 배경이 그대로 비치는 것일 뿐 웹 요소에 배경색이 상속된 것은 아니다.) 배경색의 적용 범위를 조절하는 background-clip 속성 배경을 넣고 싶은 요소마다 속성을 입력하면 되지만 박스 모델 관점에서 배경의 적용 범위를 조절할 수도 ..