WEB/CSS
Navigation barGNB (Global Navication bar)메인메뉴어느 페이지에 들어가든 공통적으로 사용할 수 있는 메뉴최상위 메뉴 보통 상단에 위치 LNB (Local Navigation Bar)GNB를 누를 경우 소제목 형식으로 나오는 메뉴네비게이션을 통해 특정 지역으로 가는 네비게이션 바 SNB(Side Navigation Bar)일반적으로 왼쪽에 많이 있기 때문에 LNB(Left Navigation Bar)라고 부르기도 함메인메뉴와 서브메뉴를 제외한 나머지 사이드 메뉴 FNB (Foot Navigation Bar)하단 메뉴 ⚒️ 예제index.htmlmain.cssreset.css웹 페이지 만들기 (HTML, CSS 만) Skip NavigationSkip Navigatio..
@keyframes1. 개념@keyframes로 어떤 모양에서 어떤 모양으로 변할지 지정IE는 버전 10 이상에서 사용 가능@keyframes animationName { 0% { /* 애니메이션의 시작 상태 */ } n% { /* 중간 상태 */ } 100% { /* 애니메이션의 끝 상태 */ }} .element { animation-name: animationName; /* 정의한 애니메이션 이름 사용 */ animation-duration: 2s; /* 애니메이션의 지속 시간 */} 2. 단계0%시작할 때의 모양 지정0% 대신 from을 사용 가능n% n% 일 때의 모양 지정100%끝날 때의 모양 지정100% 대신 to를 사용 가능 3. 예제CSS\webapp\08_cssDynamic ..
Shadow 1. values;text-shadow: offset-x ;그림자의 수평 거리 지정 (필수)offset-x의 값을 증가시키면 그림자의 위치가 오른쪽으로 이동text-shadow: offset-y;그림자의 수직 거리 지정 (필수)offset-y의 값을 증가시키면 그림자의 위치가 아래로 이동text-shadow: blur-radius; 흐림 정도 지정 (선택 : 값을 정하지 않으면 0)blur-radius의 값을 증가시키면 그림자가 흐려짐text-shadow: color;색 지정 (선택 : 값을 정하지 않으면 브라우저 기본값)text-shadow:none ;글림자 효과 제거text-shadow: initial; 기본값으로 설정text-shadow: inherit; 부모 요소의 속성값을 상속 받..
목록(List) 스타일list-style-type 1. 비순차적 목록 타입 지정list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: none;마커 삭제 2. 순차적 목록 타입 지정css로는 ul, ol 관계없이 적용 가능하며, 로마숫자, 그리스, 알파벳, 넘버링 형태를 제공list-style-type: decimal; list-style-type: lower-roman; list-style-type: upper-roman; list-style-type: lower-greek; list-style-type: lower-alpha; list-style-type: upper-alpha; li.ha..
display, visibility 속성display 속성1. 기본 속성HTML 요소를 block 혹은 inline 혹은 inline-block 으로 지정한다block inline inline-block전체 너비 차지기본 위아래 여백 있음콘텐츠 크기만큼만 공간 차지inline 처럼 같은 줄에 나란히 배치 가능게시판 하단의 페이징(1, 2, 3 ...) 부분을 꾸미는데 유용width, height Owidth, height Xwidth, height O text-align Otext-align X 인라인 요소가 포함된 블록 요소에는 text-align 속성을 적용 가능text-align O 이 텍스트는 정렬되지 않습니다.이 텍스트는 정렬되지 않습니다.">이 텍스트는 정렬되지 않습니다. 이 텍스트는 가..
