본문 바로가기

웹코딩 배우기/· CSS140

CSS - letter-spacing / h 글자간격 See the Pen letter-spacing by nilgi (@nilgi) on CodePen. 마이너스 값을 쓸 수 있습니다. 2022. 12. 14.
text-decoration See the Pen text-decoration by nilgi (@nilgi) on CodePen. • 위치 text-decoration-line: none; text-decoration-line: overline; text-decoration-line: line-through; text-decoration-line: underline; text-decoration-line: overline underline; text-decoration-line: overline line-through underline; • 색 text-decoration-color: red; text-decoration-color: rgb(30, 144, 255); • 모양 text-decoration-style: solid; .. 2022. 11. 17.
vertical-align 요소 수직 정렬 See the Pen vertical-align by nilgi (@nilgi) on CodePen. vertical-align: baseline; vertical-align: sub; vertical-align: super; vertical-align: top; vertical-align: middle; vertical-align: bottom; vertical-align: text-bottom; vertical-align: 28px; vertical-align: -28px; 2022. 10. 18.
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.

티스토리툴바