본투비곰손

transform 1. transform:rotate (deg 값) 입력한 각도 값 만큼 회전 시켜주는 css속성 시계방향으로 45º 회전한다. 2. transform:scale(가로배수값,세로배수값) 입력한 배수값만큼 대상태그의 크기를 조절하는 css속성 width,height 값으로 크기를 조절하면 한방향으로 길이가 늘어 나지만 scale를 사용하면 양방향으로 크기가 늘어난다. 또한 width,height값으로 크기를 조절할 경우 다른 태그가 밀리거나 당겨지는데 scale를 사용하면 태그를 무시하고 늘어나거나 줄어든다. 기존의 크기보다 작게 조절하고 싶다면 배수의 값이기 때문에 -값이아닌 소수점 단위를 사용하면 된다. 3. transform:skew(x축deg값,y축deg값) transform:ske..

Front-end/HTML 2023. 6. 5. 23:25

z-index html을 작성하게되면 고유의 z축 값을 가지게 된다. 눈에 보이지는 않지만 나중에 작성되는 태그의 경우 그값이 높아진다. (쉽게 포토샵의 레이어같이 나중에 작성되는 태그가 먼저작성된 태그에 쌓인다고 생각하면 된다.) z-index값이 고유의 값이긴 하지만 css속성이기때문에 임의로 값을 수정 할 수 있다. z-index는 종류와 상관없이 position과 사용해야 적용된다. 1번상자 2번상자 3번상자 1번 상자를 맨위쪽으로 위치시키기위해 z-index값을 역순서대로 주었다. ※position 속성은 종류와 상관없이 태그에 사용 할 경우 z-index값은 최상위 값으로 변경된다. 1번상자 2번상자 3번상자 2번째 태그와 3번째 태그위로 position:absolute를 적용한 1번째 태그가..

Front-end/HTML 2023. 6. 4. 23:39

특징 1. margin:0 auto 속성이 무시된다. 2.모든 position 속성의 공통특징으로는 이동시 left,right,top,bottom으로 태그를 이동 할 수 있다. 작성시 다른 태그와 겹치는 현상이 발생하여도 이동시 방해 받지 않고 이동이 가능하다. 속성에 따라 상대좌표 이동과 절대좌표 이동이 된다. 상대좌표이동은 현재 위치에서 이동되는것이고 절대 좌표이동은 웹사이트 화면을 기준으로 이동된다. 1. position : fixed (절대좌표이동) 웹사이트에 선택한 태그를 고정시켜서 웹사이트의 스크롤을 위아래로 이동하여도 고정시킬 수 있다.(맨위로 버튼, 상담버튼,최상단 메뉴 등) 여러태그에 사용하게 되면 웹사이트의 가독성이 떨어질 수 있으므로 가급적 필요한 태그에만 사용 한다.(보이는 영역이 ..

Front-end/HTML 2023. 6. 3. 21:38

구글 개발자 도구 크롬의 개발자도구를 이용하여 타사이트의 코딩내용을 쉽게 확인 해볼 수 있다. (단축키 F12 또는 CTRL+Shift+i ) 유용한 기능 1. 우클릭 불가한 페이지 해제 해당 사이트에서 "개발자 도구 실행" → "우측 상단 톱니바퀴 모양의 설정" 클릭 → 아래쪽 Debugger 부분에서 "diasble javascript 체크" 2. 파비콘등 아이콘이 필요할때 직접 다운 해당 사이트에서 "개발자 도구 실행" → favicon 검색 링크부분 클릭 후 아이콘창 열리면 저장 3.사이트 저장 기능 원하는 사이트에서 ctrl+ S html파일 및 사용된 이미지 및 css파일 등이 폴더와함께 저장된다. 4.사이트 전체 스크린샷 기능 개발자 도구 실행 상태에서 ctrl + shift + P 눌러서 ..

Front-end/HTML 2023. 6. 1. 22:28

7일차에서 만든 슬라이드에 사진을 넣고 ul태그에 8일차에 배운 transition 을 적용하면 아래와 같이 출력된다. 드롭다운 메뉴 마우스 커서를 올렸을때 메뉴일부 또는 메뉴 전체가 나타나는 메뉴 1. 메뉴 목록 구조 기본구조는 아래와같이 ul태그안 li태그안에 또다른 ul태그와 li태그가 있는 구조이다. 과일종류 사과 딸기 포도 복숭아 동물종류 호랑이 사자 하마 기린 운동종류 축구 배구 농구 야구 아래와같이 style 적용 후 출력하면 메뉴가 숨겨져있다가 나타나게 된다. 2. 메뉴 애니메이션 효과 주기 메뉴에도 transition을 사용하여 애니메이션 효과를 줄 수 있는다. 다만 style에 display:none ,display:block 를 사용하면 태그가 존재해야만 효과가 적용이 되는 trans..

Front-end/HTML 2023. 5. 30. 21:56

transition 내가 원하는 태그에 사용하면 대상 태그가 어떠한 동작을 실행 할 때 그 동작에 시간을 설정하여 애니메이션 효과를 발생 시키는 css속성 동작:active,hover,checked 등 원하는 태그에 {transition: #s} #은 효과가 발생되는 시간 초단위 transition은 동작구문 없이는 효과가 발생되지 않고 동작구문에 사용하는것이 아니라 효과가 필요한 태그에 사용해야한다. transition 의 추가 속성 1. transition-delay 입력한 시간값만큼 시간이 지난 후 transition 효과가 적용 된다. 아래와 같이 작성 후 비교하면 transition-delay :5s 추가 적용시 아래 도형은 5초 이후 600px 크기로 늘어나고 5초이후 다시 400px로 줄어드..

Front-end/HTML 2023. 5. 29. 23:03

1.dfn 태그 용어 및 정보등 내용을 정의 해주는 태그 글자가 기울어 지고 마우스를 올리면 "정의내용"이 아래쪽에 나타난다. dnf 태그 대표사진 삭제 정의해준 내용이 나타난다. wbr태그 특수 줄바꿈 태그 html태그는 안에 작성된 내용이 줄바꿈이 일어날때 영어단어,한글단어 상관 없이 단어 전체가 줄바꿈되는데 wbr태그를 사용하면 태그를 사용한 사용한 지점에서 부터 오른쪽에 있는 내용이 줄바꿈이 일어난다. 안녕하세요 p태그 입니다 저는 문단 단락태그이며 이글은 한글로 작성되어 있으며 훈민정음의 영어표기는 hunminjeongeum 입니다 대표사진 삭제 사진 설명을 입력하세요. 안녕하세요 p태그 입니다 저는 문단 단락태그이며 이글은 한글로 작성되어 있으며 훈민정음의 영어표기는 hunminjeongeum..

Front-end/HTML 2023. 5. 29. 22:58

cursor 마우스 커서를 바꿔주는 CSS속성 1. cursor:pointer 대상위에 마우스를 올리면 대상을 클릭 할 수 있는것 처럼 마우스 커서를 변경해주는 속성 2. cursor:move 대상위에 마우스를 올리면 이동 할 수 있는것 처럼 마우스커서를 변경해주는 속성 3. cursor:text 대상위에 마우스를 올리면 글자를 입력할 수 있는것처럼 마우스커서를 변경해주는 속성 4. cursor:wait 대상위에 마우스를 올리면 로딩을 기다리는 것처럼 마우스커서를 변경해주는 속성 대상위에 마우스커서 모양을 바꿔주거나 사이트 전체에서 마우스 커서를 바꿀 수 있는데 cursor:url(파일이름)을 사용하여 마우스커서의 모양을 바꿔 줄 수 있다. iframe 원하는 웹상의 동영상이나 유튜브 영상을 가져 올때 ..

Front-end/HTML 2023. 5. 27. 16:38