목록티스토리 (214)
EverGiver

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

태그 html에서 처음 사용하는 용어 및 정보 기타 여러 가지 용어를 정의해줄 때 사용하는 태그 특징 - 사용하면 글자가 오른쪽으로 기울어진다. - 혼자 사용하는 태그는 아니며 abbr 태그와 함께 사용한다. dfn태그 입니다 dfn태그는 정의태그입니다 태그 time태그를 작성한 html파일이 날짜와 시간 정보를 입력받아서 컴퓨터가 이것을 인식할 수 있도록 만들어주는 시간 정보를 가지고 있는 태그 - YYYY : 연도 - MM : 월 - DD : 날짜 - T : 날짜와 시간을 구분해주는 경계선 기능 - hh : 시간 - mm : 분 - ss : 초 구글이나 여러 브라우저에서 무언가를 검색해보면 누군가가 작성한 글이 뜨는 걸 확인할 수 있다 이 글들의 특징은 작성된 날짜가 언제인지 우리가 확인할 수..

입력 양식 태그 사이트를 이용하는 사람이 정보를 입력하면 이 정보를 프론트엔드 분야 쪽으로 토스(넘겨주기) 위한 태그 태그 - ul태그와 비슷한 개념 - 입력양식태그들을 작성하기 전 기본적으로 작성해주는 태그 여러 폼 요소 - 속성 ⅰ) method : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정 (사용할 수 있는 속성 값은 get과 post입니다.) ⅱ) name : 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정 ⅲ) action : 태그 안의 내용을 처리해 줄 서버 프로그램을 지정 ⅳ) target : action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 한다. // 입력한 폼을 서버로 보내기 /* 여러 폼 요소 */ - autoc..

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

태그 외부에 있는 여러 가지 내용을 자신의 html 파일에 가져오기 해주는 태그 (보통 요즘은 유튜브 동영상을 가져올 때 많이 사용하는 태그) 가져오는 방법 1. 원하는 유튜브 영상 클릭 2. (광고 진행 시) 광고 끝난다음에 마우스 우클릭 3. 소스코드 복사 4. 자신의 html body부분에 붙여넣기 video태그와 다르게 태그 자체에 가로와 세로 값을 조절해주는 구문이 있기 때문에 태그 안에 width , height로 값을 조절해주면 됩니다. (별도로 css에서 조절할 필요 X) display:inline-block 성질 → video태그와 동일하게 중앙정렬 시키고 싶다면 display:block 속성으로 변경해서 margin:0 auto 사용하거나 display:block 태그로 감싸준다음 똑같..

태그 동영상을 출력시켜주는 태그 옵션을 태그 자체에 적어주는 방식을 사용하고 있는 특별한 태그이다, 태그 속성 1. controls : 재생, 일시정지, 음소거, 전체 화면, 기타 버튼들을 동영상에 출력시켜주는 옵션 (자주 사용하는 옵션은 아니기 때문에 특별한 경우를 제외하면 사용하지 않는 게 좋다) 2. autoplay : 동영상을 자동으로 재생시켜주는 옵션 3. muted : 음소거 ★ 구글 및 웹브라우저 정책 변경으로 인해서 음소거가 되어있는 경우에만 비디오가 자동재생이 되도록 업데이트되었다. 그래서 반드시 autoplay는 muted 함께 사용을 해야지만 자동재생이 실행이 될 수 있다. 4. loop : 동영상에 시간이 다 되었을때 다시 처음부터 반복 재생을 시켜주는 옵션 (웹사이트에서 동영상을 ..