클로리셔 작은 공간

1. 애니메이션 효과 01 라인이 계속 떨어지는 효과로 싱글홈페이지 스크롤 표시에 표현하기 좋음. 예시) HTML S C R O L L CSS .scroll_block { width: 300px; height:300px; border: 1px solid #dfdfdf; } .scroll_block .letters span { display: block; padding: 2px 0; font-size: 12px; text-align: center;} .scroll_block .liner { width: 1px; height: 100px; position: relative; margin: 12px auto 0; overflow: hidden;} .scroll_block .liner::before { cont..

1. 텍스트 쉐도우 [text-shadow] 그림자 효과 만들기 예시) HTML The western spiral arm The western spiral arm The western spiral arm The western spiral arm CSS p{ font-size: 30px; color: #333;} .txt_shadow1{text-shadow: 3px 3px;} /* 같은색상, 레이어드 효과 */ .txt_shadow2{text-shadow: 13px 8px #aaa;} /* 가로, 세로 , 색상 */ .txt_shadow3{text-shadow: 3px 3px 2px pink;} /* 가로, 세로, 블러 */ .txt_shadow4{text-shadow: 2px 3px 0px #ff8a00..

Skip Menu / Skip Nav를 왜 사용하는가? - 사용자 편의 및 웹 접근성을 위해서다. 웹접근성이라하면 마우스가 고장났다던가, 키보드를 사용 못하는 경우 등 정상적으로 쓸 수 없는 상황에 대해서 편의를 고려해서 제작하는 방법이다. 엄청난 컨텐츠 영역을 가지고 있는 홈페이지에서 원하는 영역에 도달하고 싶을때 Tab 키를 수 없이 눌러야 할것이다. 그런 불필요한 액션을 없애기 위해 스킵메뉴(Skip menu)를 제작한다. 스킵 메뉴를 만들면 해당 영역으로 즉시 갈 수 있는 라고 생각하면 된다. 웹접근성 맞게 스킵메뉴 만들어보기 - 스킵네비게이션은 다음으로 나오는 것이 가장 적절합니다. 본문 바로가기 #skipNav{position:relative;z-index:9999;} #skipNav a{po..

웹사이트를 퍼블리싱 하다보면 이미지 태그를 사용해야할때가 자주 나온다. 이미지를 표현하는 방법 HTML에서 로 경로를 연결해서 사용하는 방법 CSS에서 background-image{ url(...)}로 경로 연결해서 불러오는 방법 작업을 하다보면 이 이미지가 HTML 태그로 이미지를 넣어야할지 CSS 속성으로 백그라운드를 넣어야할지 고민하게 되는데 어떤 경우에 어떠한 방법을 사용해서 퍼블리싱을해야 더 시멘틱하게 작업하는건지 알아보도록 하자. 그 전에, 배경 이미지는 무엇인가? 이 용어는 용어 그대로 배경 이미지기에 에러가 나든 말든 상관이 없는 것이다. 즉, 이미지가 사용자에게 컨텐츠 이해에 도움을 더 준다고 생각하면 SEO, 성능 등 많은 면에서 효율적인 태그를 쓰고, 그렇지 않으면 backgroun..

리셋(reset) 개념 reset = 재설정 이라는 의미. 모든 브라우저에서 통일된 화면을 볼 수 있도록 기본값을 처음부터 초기화를 시킨다는 의미. 대표적인 브라우저로는 IE(익스플로러), Firefox(파이어폭스), Chrome(크롬), Safari(사파리), Opera(오페라)가 있다. 각 브라우저를 코드 작성에 화면을 띄우게 되면 table / body 등의 태그들의 margin, padding을 적용했을 때 브라우저마다 기본값이 다르기때문에 사용자가 화면을 보았을때 간격들이 브라우저마다 다르게 보이게 된다. 그래서 리셋(reset)을 통해서 모든 브라우저에서 통일된 화면을 볼 수 있도록 margin / padding 등의 값을 기본값으로 초기화를 시킨 후 작성을한다면 어떤 브라우저에서도 동일한 결..

CSS selector 개념 잡기 CSS(Cascading Style Sheets)는 HTML 요소의 스타일(design / layout)을 정의해요. 이때 필요하게 되는 것이 Selector 입니다.. 즉, style을 적용하고자하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것이다. 1. 기본 셀럭터 선택 CSS Hello World! This paragraph is styled with CSS. - - result - - Hello World! This paragragh is styled with CSS. 2. 태그 셀렉터 Heading paragraph 1 paragraph 2 paragraph 3 - - result - - Heading paragraph 1 paragra..

GNB ( Global Navigation Bar ) 사이트 전체에 동일하게 적용되는 최상위 전체 공통네비게이션. 메인메뉴, 대분류 메뉴, 전체 사이트에서 사용되는 공통메뉴바 LNB ( Local Navigation Bar ) GNB 메뉴의 서브 메뉴형식으로 나오는 형태의 네비게이션. 서브메뉴, 중분류 메뉴, 각 서브분류 별 사용되는 특정 지역으로 가는 네비게이션 바 SNB ( Side Navigation Bar ) 일반적으로 왼쪽에 많이 위치해있으며 메인메뉴, 서브메뉴를 제외한 나머지 사이드메뉴, 기타메뉴바 FNB ( Foot Navigation Bar ) 하단메뉴, 하단로고, 주소, 카피라이팅 영역

See the Pen Clipping gif background to text by ShireeenTaj (@TajShireen) on CodePen.

1. SVG 이용해서 사각형 태그 그리기 x 와 y 는 사각형의 왼쪽 위쪽 위치를 정의 ( X축 150픽셀에서 사각형 만들어라./ Y축 100픽셀에서 사각형 만들어라.) width: 가로 픽셀 넓이 height: 세로 픽셀 길이 2. SVG 이용해서 모서리 둥근 사각형 태그 그리기 rx와 ry는 사각형 모서리의 둥글기를 정의합니다.