[ RESPONSIVE ] 06 헤더 메뉴

[ RESPONSIVE ] 06 헤더 메뉴

 

 

See the Pen [ RESPONSIVE ] 06 헤더메뉴 by larmong (@larmong) on CodePen.

 

 

 

 

 

 

 

 

 

 

GitHub에서 보기 Click!

 

 

---

background 속성

•  background 속성은 배경 속성 값을 정의합니다.
• 문법

background : background-attachment | background-blend-mode | background-clip | background-color | background-image | background-origin | background-position | background-repeat | background-size | inherit;

 

• 속성

속성 값	설명
background-attachment	배경 고정여부를 설정합니다.
background-blend-mode	배경을 혼합했을 때의 상태를 정의합니다.
background-clip	배경 적용 범위를 설정합니다.
background-color	배경 색을 설정합니다.
background-image	배경 이미지를 설정합니다.
background-origin	배경 방향을 설정합니다.
background-position	배경 위치를 설정합니다.
background-repeat	배경 반복여부를 설정합니다.
background-size	배경 사이즈를 설정합니다.
inherit	background 값을 상위요소한테 상속받습니다.

 

 

---

 

 

transition 효과

• transform 속성은 컨텐츠 요소를 이동(translate), 회전(rotate), 확대(scale), 기울기(skew) 등의 효과를 줄 수 있습니다.애니메이션 작업시 가장 많이 쓰는 요소입니다. 요소를 이동시키거나 회전 시킬 수 있으며, 원근점(perspective)를 사용하여 3D까지 구현 할 수 있습니다.
• 문법

transform : none | matrix() | translate() | translateX() | translateY() | scale() | scaleX() | scaleY() | rotate() | skew() | skewX() | skewY() | matrix3d() | translate3d() | translateZ() | scale3d() | scaleZ() | rotate3d() | rotateX() | rotateY() | rotateZ() | perspective()

 

• 속성

속성 값	예시	설명
translate(x,y)	transform: translate(10px, 20px);	X좌표, Y좌표 이동을 나태냅니다.
translate3d(x,y,z)	transform: translate3d(10px, 20px, 30px);	X좌표, Y좌표, Z좌표 이동을 나태냅니다.
translateX(x)	transform: translateX(10px);	X좌표 이동을 나태냅니다.
translateY(y)	transform: translateY(10px);	Y좌표 이동을 나태냅니다.
translateZ(z)	transform: translateZ(10px);	Z좌표 이동을 나태냅니다.

 

 

 

---

 

 

 

* container : 박스 가운데 정렬

* row : 1200px이상 화면사이즈를 1200px이하로 줄일때 여백 (부드럽고 자연스러운 여백, 미적효과)

<header id="header">
        <div class="container">
            <div class="row">
                <div class="header">
                    <div class="header_menu">
                        <a href="https://larmong.tistory.com/">Tistory</a>
                        <a href="https://github.com/larmong/wsb1">Github</a>
                        <a href="#">Webstandard</a>
                    </div>
                </div>
            </div>
        </div>
    </header>

 

 

 

---

 

 

* 반응형 사이트 강의 보는곳(WEBSTORYBOY) click!