본투비곰손

특징 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

시맨틱 태그란? 개발자들이 원하는 이름(id,class)으로 코딩을 진행하면 제3자가 웹사이트를 유지보수 할 때 문제가 될 수 있어서 웹사이트의 공간을 분할하여 태그화 시켜서 구분지어 누구나 유지보수 할 때 수정할 부분을 알아보기 쉽게 만든 태그이며 속성은 display:block이다. 1. header 웹사이트에서 로고를 포함한 부분으로 가장 위쪽에서 한눈에 사이트의 이름을 알 수 있어야한다. 2. nav 웹사이트의 메뉴들을 담아두는 영역 3. main header,nav,footer 을 제외한 모든 시맨틱 태그들이 있는 영역 3-1. aside 사이트 한쪽 측면에 광고등을 담아두는 영역 3-2. section 본문 내용 전체를 담아두는 영역 (ul태그와 비슷하다.) 3-3. article 본문 내용의..

Front-end/HTML 2023. 5. 26. 22:14

1. box-sizing content-box : 대상태그를 기준으로 입력해둔 width,height 값이 대상에 고정되고 padding ,border 값에 따라 전체 가로 세로 값이 늘어난다. boder-box : 대상태그를 기준으로 입력해둔 width,height 값이 전체에 고정 padding,boder 값에 따라 대상의 가로세로 값이 줄어든다. 2. 고정값 과 유동값 일반적으로 고정값인 px를 사용하여 크기의 값을 정하여 고정시킨다. 유동값은 %를 사용하여 크기가 유동적으로 변경되는데 기준이 되는 크기 값은 웹사이트의 가로 해상도 이다. 감싸고있는 태그에 가로값이 정해져있다면 유동적으로 변하며 감싸고 있는 태그 역시 %로 가로 값이 들어가 있어야 한다. 세로값은 세로값이 정확하게 정해져있지 않다면..

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