본문 바로가기

웹코딩 배우기/· CSS121

CSS - 배경 그라디언트(그라데이션) See the Pen 배경 그라디언트 by nilgi (@nilgi) on CodePen. .g1 {background-image: linear-gradient(0deg, red, white);} .g2 {background-image: linear-gradient(45deg, red, white);} .g3 {background-image: linear-gradient(90deg, red, white);} .g4 {background-image: linear-gradient(180deg, red, white);} .g5 {background-image:-webkit-linear-gradient(left top, blue, white);} .g6 {background-image:-webkit-linear.. 2022. 9. 20.
가로 메뉴바 스크롤 시 특정 위치 고정 See the Pen 메뉴바 스크롤 특정위치 고정 by nilgi (@nilgi) on CodePen. position: sticky; /* 특정 위치에 멈춤 */ top: 5px; /* 위에서 5px 떨어진 곳에 */ 2022. 8. 1.
가로 메뉴바 - 메뉴 구분선 만들기 See the Pen 메뉴바 구분 선 by nilgi (@nilgi) on CodePen. .ul1 li { float: left; border-right: 1px solid #fff; } .ul1 li:last-child { // 메뉴의 마지막 자식 요소에는 border-right: none; // 오른쪽 테두리를 넣지 않는다. } 2022. 7. 26.
메뉴바 고정 - position: fixed; position: fixed;를 사용하여 왼쪽 메뉴바를 고정한다. 그럼 오른쪽 내용 영역만 스크롤된다. 직업 패스파인더 아델 호영 히어로 왼쪽 사이드바 메뉴를 특정 위치에 고정합니다. position : fixed; 태그를 사용합니다. overflow: auto; 를 사용하여 영역을 벗어나는 부분의 스크롤 유뮤를 자동으로 합니다. 화면을 스크롤해보면 왼쪽 메뉴바는 그대로 있고 오른쪽 내용만 스크롤됩니다. .... .... .... .... .... 참고 글 nilgi.tistory.com/455 CSS position position: static; 특정 지정 값에 영향을 받지 않고 문서의 정상적인 흐름에 따라 배치된다. position: relative; top, right, bottom, left 값.. 2022. 7. 6.
마우스에 반응 하는 메뉴바 - li a:hover See the Pen 마우스 반응 메뉴 목록 by nilgi (@nilgi) on CodePen. MENU#1 MENU#2 MENU#3 MENU#4 2022. 5. 11.
CSS <a> 에 display를 걸었을 때 차이 See the Pen a display by nilgi (@nilgi) on CodePen. a에 display를 걸면 width를 적용할 수 있고 글자뿐 아니라 지정한 가로 크기도 링크 영역으로 잡힌다. 단순하지만 아주 중요한 기능이다. 2022. 4. 28.
외곽선 애니메이션 See the Pen 외부선 애니메이션 by nilgi (@nilgi) on CodePen. ▶ HTML // css 마침 외부선 애니메이션 ▶ CSS .outbox { // 클래스 outbox animation: ob 4s infinite; // 애니메이션 이름은 ob고 애니메이션 총길이 4초며 반복 } @keyframes ob { // 애니메이션 ob에 키프레임 추가 50% { // 4초중 50% 지점에서 outline: 24px solid tomato; // 외곽선 굵기24 실선 토마토 색으로 변형 } } ▶ 비교 [웹코딩 배우기/· CSS] - 굵어지고 색이 변하는 border 2021. 11. 5.
투명도가 변하는 애니메이션 만들기 See the Pen 투명 애니메이션 by nilgi (@nilgi) on CodePen. ▶ HTML OPACITY ANIMATION // div 클래스 이름 op와 op1, 배경색 토마토; 테두리 둥글기 50%; 정렬은 중앙에; 안쪽여백 상하 60px 좌우 0px; 콘텐츠 박스 크기는 테두리까지 모두 포함한 값으로 지정 // div 클래스 이름은 op와 op2며 배경색은 #333(먹색); 테두리 둥글기는 50% ▶ CSS .op2 { // 클래스 op2에 animation: op2 4s infinite; // 애니메이션 이름 op2 지정. 4초. 반복 } @keyframes op2 { 애니메이션 op2에 키프레임 추가 50% { // 4초 중 50% 지점에 opacity: 0; // 투명도 0으로 변.. 2021. 11. 5.
큰 이미지의 보여지는 위치가 바뀌는 애니메이션 See the Pen 이미지 위치 변경 by nilgi (@nilgi) on CodePen. object-fit: cover; // 비율을 유지하고 컨테이너보다 콘텐츠가 크면 잘린다. object-position: 0% 0%; // 콘텐츠가 보여지는 위치의 시작점 x% y% animation: op 6s infinite; // 애니메이션 이름은 op며 6초간 진행되고 반복 @keyframes op { // 애니메이션 op의 키프레임 지정 0% { object-position: 0% 0%; // 6초중 0% 지점에서 콘텐츠의 위는 0% 0% } 25% { object-position: 25% 0%; } 50% { object-position: 50% 0%; // 6초중 50% 지점에서 콘텐츠의 위는 50%.. 2021. 11. 4.
커지는 글자 만들기 See the Pen 커지는 글자 by nilgi (@nilgi) on CodePen. 공부하면서 느낀점. 이걸 어따 써먹어? 아~ 블로그 글 수가 늘어나는구나. 워~ 참신한데? 2021. 11. 3.