본문 바로가기

HTML+CSS+Javascript/CSS38

[CSS3] div 사이에 공백 제거하기 스타트업 개발자다 보니 회사에서 별걸 다 개발하는데, 웹 부분 섹션 스크롤링 구현하는데 희한하게 div 사이에 공백이 생겨서 스크롤링이 희한하게 일어나는것이다...... (티스토리 오류 같은데, 움짤이 이상하게 올라갑니다. 클릭하면 정상 동작하니 동작 오류와 해결책을 불편하시겠지만 클릭해서 확인해주세요.) 아니 대체 이게 뭐시여 ㅠ 하고 찾아보다가 깨달은것은....... div가 사실 html 문서라 시각적 구현할 때 section을 지정한 div 사이에 엔터가 보이면서 생기는 현상이라는 것이다 (머리 부여잡은 토기짤) 그래서, 섹션 div에 클래스를 부여하고, 그 클래스에 font-size : 0px로 지정했다. .section { width: 100%; height: 100%; position: re.. 2021. 7. 6.
7. 마우스 커서 cursor 프로퍼티를 이용하면, 태그 위에 출력되는 마우스 커서의 모양을 제어할 수 있다. 많은 value가 있지만 많이 이용하는 커서로 예시를 쓰면, 마우스 커서 마우스커서 마우스커서 마우스커서 마우스커서 마우스커서 마우스 커서가 태그 위에 올리는 순간 변할 것이다. 크기 조절(resize) 커서는 resize 앞에 붙은 알파벳에 의해 방향이 바뀌는데, e w s n은 각각 동서남북을 뜻한다 ex) 남서로 이동하는 크기조절 커서 만들기 => cursor: ws-resize 2020. 3. 10.
6. 시각적 스타일 text-shadow 프로퍼티와 color을 적당히 이용하면 글씨에 다양한 시각적 효과를 제공할 수 있다. 다음이 text-shadow를 이용한 다양한 시각적 효과의 예시이다. 텍스트 그림자 만들기 Drop Shadow Color Shadow Blur Shadow Glow Effect WordArt Effect 3D Effect Multiple Shadow Effect 2020. 3. 9.
5. 배경 여태까지는 배경에 background-color을 이용해 색을 입히는 것만 했지만, 이미지를 제공하는 것 역시 가능하다. 이 때 사용하는 속성이 background-image이다. 배경이미지도 html에서 불러올때와 마찬가지로 url 혹은 경로를 지정하여 참조할 수 있다. 배경에도 다른 CSS와 마찬가지로 여러 프로퍼티가 존재한다. background-position : 배경이미지 위치 background-size : 배경이미지 크기 background-repeat : 반복출력 이를 이용한 예시를 보자. 박스에 배경 꾸미기 SpongeBob is an over-optimistic sponge that annoys other characters. background-size 프로퍼티를 통해 배경으로 쓰인 .. 2020. 3. 9.
반응형