See the Pen 메뉴바 구분 선 by nilgi (@nilgi) on CodePen. .ul1 li { float: left; border-right: 1px solid #fff; } .ul1 li:last-child { // 메뉴의 마지막 자식 요소에는 border-right: none; // 오른쪽 테두리를 넣지 않는다. }

position: fixed;를 사용하여 왼쪽 메뉴바를 고정한다. 그럼 오른쪽 내용 영역만 스크롤된다.  See the Pen 메뉴바 고정 - position: fixed; by nilgi (@nilgi) on CodePen.참고 글nilgi.tistory.com/455 CSS positionposition: static; 특정 지정 값에 영향을 받지 않고 문서의 정상적인 흐름에 따라 배치된다. position: relative; top, right, bottom, left 값에 따라 위치가 변경된다. position: fixed; top, right, bottom,..nilgi.tistory.comnilgi.tistory.com/456 CSS overflowoverflow 내용이 지정한 영역을 ..

See the Pen :hover:not(.class) by nilgi (@nilgi) on CodePen. li a:hover:not(.job) { // 목록 중 .job만 마우스에 반응하지 않게 한다. background-color: #333; color: #fff; } 직업 패스파인더 아델 호영 히어로

See the Pen 마우스 반응 메뉴 목록 by nilgi (@nilgi) on CodePen. MENU#1 MENU#2 MENU#3 MENU#4

See the Pen a display by nilgi (@nilgi) on CodePen. a에 display를 걸면 width를 적용할 수 있고 글자뿐 아니라 지정한 가로 크기도 링크 영역으로 잡힌다. 단순하지만 아주 중요한 기능이다.

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

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으로 변..

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%..

See the Pen 커지는 글자 by nilgi (@nilgi) on CodePen. 공부하면서 느낀점. 이걸 어따 써먹어? 아~ 블로그 글 수가 늘어나는구나. 워~ 참신한데?

See the Pen 색이 변하는 글자 by nilgi (@nilgi) on CodePen. hover 값을 추가해 글자에 마우스를 올렸을 때 색이 변하게 만들어도 좋겠다. CSS 이제 살짝 슬슬...ㅎ