본문 바로가기

개발자노트

 (260)
Html - 외부 폰트 사용하기 구글에 폰트를 검색하면 https://fonts.google.com/ 라는 무료폰트 제공 사이트가 있다. 이곳에서 우리가 사용할 것은 한글이니 Language를 한글로 바꿔주고 마음에 드는 글씨체를 찾았다면 들어가서 Select를 누르게 되면 우측에 네비게이션 바가 열리는데, 이 의 내용을 html의 가나다라마바사 아자차카타파하 수행결과
Html - 애니메이션 효과2 (애니메이션 프레임 , transform) 태그에 keframes "스타일시트명" 을 이용해 내가 사용할 애니메이션 효과를 만든다. 이번에 해볼 것은 시간이 지남에 %가 바뀌어 배경색을 바꾸는 것과, transform:translate(x,y); 로 해당 태그 위치 좌표를 바꾸는 것이다. 이러한 샘플 애니메이션 효과를 적용시킨 p 태그의 스타일로 animation-name : (적용할 애니메이션 이름) 에는 내가 만들 sample 애니메이션 효과를 적으면되고 animation-duration : 에는 적용될 시간을 작성하면 되고 animation-fill-mode : 에는 수행 뒤에 하게 될 내용을 쓰면 되는데, 이러한 형식들은 검색을 활용해 여러가지를 적용해보자. 애니메이션 수행내용
Html - 애니메이션 효과 (text-decoration , transition) 마우스가 호버될 당시에, block의 길이가 길어지고, 색상을 변화시키는 애니메이션을 주는 방법이다. transition와 hover를 사용해 마우스를 올릴 때 width값이 변하는 시간이 달라지고, color로 컬러를 변경시키는 시간을 설정을 할 수 있다. 쇼핑몰 메뉴 신상품 인기상품 50 타임세일!!! 고객센터 수행결과
웹 크롤링 - Jsoup을 이용한 ( CGV ) 크롤링 크롤링할 타겟 주소 : http://www.cgv.co.kr/movies/?lt=1&ft=0 영화 그 이상의 감동. CGV 큐어 예매율0.2% 92% 2022.07.06 개봉 예매 www.cgv.co.kr CGV 무비차트 탭에 있는 영화정보에 대해 크롤링 해보려 한다. Chrome 브라우저로 CGV 무비차트 탭에 접속한 뒤 키보드의 f12를 누르게 되면 DevTools 탭이 활성화 된다. 내가 크롤링 하려고 하는 정보는 영화들의 이름/ 이미지 / 장르이다. DevTools 좌측상단에 있는 화살표를 누르게 되면 웹 페이지 안에 요소들에 대한 코드로 이동이 가능하다. 저렇게 활성화가 되고 클릭을 하게 되면 다음과 같은 DevTools가 반응하여 코드에 해당위치로 이동하게 된다. 이곳에서 우리가 얻을 수 있는..
Html - 긴 문장 스크롤 처리 하기 ( overflow-x, y ) (회원가입 약관동의) overflow-y: scroll; = y축 ( 세로로 오버플로우 되는 것을 scroll 방식으로 바꾸는 것 ) overflow-x: scroll; = x축 ( 가로로 오버플로우 되는 것을 scroll 방식으로 바꾸는 것) 다음은 네이버 회원가입 약관동의의 긴 글을 사용한 예제이다. 코드가 길어서 결과창을 먼저 보여주겠다. 서비스 이용약관 여러분을 환영합니다. 네이버 서비스 및 제품(이하 ‘서비스’)을 이용해 주셔서 감사합니다. 본 약관은 다양한 네이버 서비스의 이용과 관련하여 네이버 서비스를 제공하는 네이버 주식회사(이하 ‘네이버’)와 이를 이용하는 네이버 서비스 회원(이하 ‘회원’) 또는 비회원과의 관계를 설명하며, 아울러 여러분의 네이버 서비스 이용에 도움이 될 수 있는 유익한 정보를 포함하고 있습..
Html 실습예제 메뉴 만들기 ( display, list-style-type, text-decoration ) 메일 블로그 카페 웹툰 글로벌 네비게이션바 == 메뉴 == gnb 인라인요소(li)에 block(공간)을 가질 수 있게 하는법 == display: inline-block; li의 텍스트 밑줄 제거 == text-decoration; li의 점들을 제거 == list-style-type: none;
Html 스타일시트(stylesheet) 실습예제 와일드카드 *를 사용한 전체에 대한 스타일지정 #을 이용한 id속성에 대한 스타일지정 .클래스를 이용한 class속성에 대한 스타일 지정 + div로 요소들을 묶는 방법 제목 소제목 다음과 같은 상품들이 존재합니다. 결명자차 3000원 아메리카노 2500원 프라푸치노 5500원 결과창
Html에서 가상요소 선택자 (before / after) (스타일시트) Html의 특정 태그 앞 뒤에 요소를 삽입하는 방법 상의 바지 치마 신발 결과 화면

티스토리툴바