반응형 분류 전체보기51 CSS 위치속성 position 속성 HTML 요소의 위치 설정을 지정하는 스타일 속성 속성값 설명 static(기본값) 요소를 문서의 일반적인 흐름에 따라 배치하도록 설정 relative 요소를 문서의 일반적인 흐름에 따라 배치하고, 요소의 영역을 기준으로 top, right, bottom, lefe 스타일 속성의 값에 따라 오프셋을 적용하도록 설정 absolute 요소를 문서의 일반적인 흐름에서 제거하고, 조상 요소 중에 가장 가까운 위치 지정 요소를 기준으로 배치하도록 설정 (조상 요소 중 위치 지정 요소가 없는 경우, 초기 컨테이닝 블록을 기준으로 배치) fixed 요소를 문서의 일반적인 흐름에서 제거하고, 브라우저 화면을 기준으로 배치하도록 설정 HTML 요소의 배치방법 1. HTML 요소의 배치 : 기본적인 .. 2021. 8. 11. 기본적인 이미지 갤러리 기능 구현 신나는 월요일을 js와 함께 시작해볼까 합니다. 이번 주는 이미지 갤러리 기능 구현을 해볼까 합니다. 단계는 2단계로 진행할 예정입니다. 어렵지 않으니까 천천히 같이 해봅시다 이미지 갤러리란? 많은 사이트에서 볼 수 있는 이미지 갤러리 이미지 리스트가 있고 메인 이미지가 있는데, 작은 이미지 썸네일을 클릭하면 메인 이미지가 변경되는 이미지 갤러리를 만들어볼까 합니다. 시작해볼까요?? 먼저 완성작부터 확인 후 시작해봅시다. 항상 시작은 html 작성 이미지 url이 길어져서 해당 소스에서는 수정해서 올려서 해당 소스 그래도 구현할 시 작동 안 됩니다. 이미지는 픽사 베이에서 이미지 주소 복사해서 사용했습니다. html 소스는 어렵지 않게 누구나 작성할 수 있는 수준이죠?? 갤러리처럼 CSS를 입혀주기만 하.. 2021. 8. 9. CSS 목록속성과 그림자 속성 안녕하세요 : ) 오늘은 간단한 css 속성들을 정리해볼까 합니다. 바로 시작해보죠 CSS 목록 속성 HTML에서는 목록을 표시하는 태그가 , 이 존재합니다. 순서가 없는 목록과 순서가 있는 목록을 기본값이 아닌 다양한 형태의 목록을 만들 수 있습니다. 1. list-style-type : 목록의 불릿과 번호 스타일 지정 순서가 없는 목록 순서가 있는 목록 disc 채운 원 (기본값) decimal 1로 시작하는 십진수 (기본값) circle 빈원 decimal-leading-zero 앞에 0이 붙는 십진수 square 채운 사각형 lower-roman 소문자 로마 none 불릿 없음 upper-roman 대문자 로마 - - lower-alpha 소문자 알파벳 - - upper-alpha 대문자 알파벳 .. 2021. 8. 6. 향상된 뉴스티커(News ticker) 기능 구현 안녕하세여 :) 요즘 날씨가 많이 덥죠.. 진짜 에어컨 없으면 못 버틸정도의 더위 요즘 또 휴가철이여서 사람들도 많이 놀러 가고 하지만 저는 회사를 출근을 했다는 점.. 이건 저의 TMI였구여, 오늘은 저번에 이어서 뉴스티커 기능을 구현해볼 건데 지난번에 했던 뉴스티커부터 먼저 확인해볼까요?? https://chpofo.tistory.com/58 기본적인 뉴스티커(News ticker) 기능 구현 안녕하세요 :0 원래는 JavaScript도 기본부터 정리를 할까 했는데, 게으른 저 때문에 많이 지연되고 있어서 일단은 기본은 잠시 내려두고 학원에서 배운 내용과 포트폴리오에서 사용되는 기능들 위 chpofo.tistory.com 지난번의 소스는 거의 그대로 사용하고, js부분만 수정을 해서 진짜 네이버 실시.. 2021. 8. 6. 이전 1 2 3 4 5 ··· 13 다음 반응형
