Ch 8. CSS 속성-3

🎯이번 챕터는

CSS를 구체적으로 배우는 과정이었다.

어떻게 작동시키며 어떤 부분을 수정해야 브라우저에 뜨는지 등을 확인하고

마지막으로 HTML과 CSS만을 이용해서 오버워치 캐릭터 선택 화면을 만들었는데

이 두가지만 가지고도 이렇게 만드는 것을 보면 정말 기초에 충실한것도 중요하다고 

생각이 든다.

---

⭕21. 전환

📌강의 정리

• 전환 효과에 대해 알아보자.
• html에 div를 주고
• css에서 div:hover로 로얄블루를 주면
• div에 마우스를 대면 전상태와 후상태를 나눌 수가 있다.
• 이때 div선택자에 transition: 1s;이면 전환과정을 1초에 보이게 지정할 수 있다.
• 전상태와 후상태를 자연스럽게 해주는 것을 전환효과라고 한다.
• transition은 속성명 지속시간 타이밍함수 대기시간이다.
• 요소의 전환(시작과 끝)효과를 지정하는 단축 속성이다.
• 단축속성일때 필수 포함 속성이다. 지속시간이.
• transition-property는 전환 효과를 사용할 속성 이름을 지정한다.
• 기본값은 all로 모든 속성에 적용한다.
• 속성이름을 적으면 전환효과를 사용할 속성 이름을 명시하면 된다.
• div:active를 하면 클릭했을때의 속성을 지정해줄 수 있는데
• 그냥 div에 transition: width 1s이면 가로너비는 자연스럽게 늘어나지만 색깔은 바로 변하게 된다.
• transition-duration은 전환효과의 지속시간을 지정한다.
• 기본은 1초이다.
• 0.5초로 바꾼다면 좀 더 빠르게 변화 할 수 있다.
• 이렇게 단축속성을 쓸때 줄바꿈을 통해 여러가지를 쓸 수 있는데 위드스 .5초 백그라운드컬러는 2초 이렇게 도 할수 있다.
• transition-timing-function은 전환효과의 타이밍(Easing)함수를 지정한다.
• 기본은 느리게 빠르게 느리게 이다.
• linear는 일정하게 바뀐다.
• ease-in, ease-out은 각각 느리게 - 빠르게, 빠르게 - 느리게이다.
• 이걸 섞으면 느리게-빠르게-느리게가 균일하게 작동한다.ease-in-out
• 구글 검색창에 easing function을 치면 다양한 함수그래프들이 보여진다.
• easing function mdn을 치면 실제 css에 적을수 있는 코드들이 나오게 된다.
• tweenMax greensock를 검색하면 이징함수의 그래프에 따라서 어떻게 움직이는 지 알 수 있다. 심지어 커스터마이징도 할 수 있다.
• transition-delay는 전환효과가 몇 초 뒤에 시작할지 대기시간을 지정한다.
• 기본은 대기시간이 없는 것이다.
• 코드펜으로 가서 transition에 시간이 두개이면 두번째는 대기시간이다.
• 1s .5s이면 .5초뒤에 작동한다는 뜻이다.
• 트랜지션프로퍼티 속성의 기본값은? all이다.
• 트랜지션 단축속성의 필수포함속성은? 트랜지션듀레이션이다.

📌느낀점

제일 효과적으로 눈에 돋보이는 전환효과에 대해 배웠다.

단축속성에 대해서도 좀 더 잘 알게 되었으며 비교적 편리하게 사용할 수 있을 것 같아 기대가 된다.

---

⭕22. 변환 (1)

📌강의 정리

• 변환효과에 대해 알아보자.
• 부모로 컨테이너가 있고 자식으로 아이템이 있다.
• 컨테이너의 아이템 부분에 트랜스폼에 로테이트라는 값을 준다.
• rotate(45deg);라는 값을 주면 요소가 45도 돌며 변환되는것을 확인 할 수 있다.
• scale(1.3)을 해주면 요소가 1.3배 커진것을 알 수 있다.
• transform: 변환함수1 변환함수2 변환함수3 ...;
• transform: 원근법 이동 크기 회전 기울임;
• 요소의 변환효과이다.
• 변환은 크게 두가지로 나뉘는데 2D와 3D이다.
• 2D변환함수는 translate(x, y) 이동(x축, y축)
• translateX(x), translateY(y)둘다 이동이지만 x축으로만 y축으로만 이동하게 할 수 있다.이런 트랜스레이트들은 px로 움직일 수 있다.
• scale은 크기이다. 그냥 숫자로 배수로 설정할 수 있다.
• rotate(degree) 회전각도이다.
• skewX(x)는 기울이는데 x축으로이고 skewY(y)는 y축으로 기울인다 이들은 deg단위로 움직인다.
• matrix(n,n,n,n,n,n)이 원래 근본 작성법인데 이게 어렵기 때문에 개별적인 변환함수가 있는것이며 브라우저에서는 개별함수를 메트릭스로 바꿔서 적용한다.
• 3D변환함수는 z축을 활용할 수 있다.
• rotateX(x)는 회전(x축)이다.
• rotateY(y)는 회전(y축)이다.
• perspective(n)은 원근법(거리)인데 거리감을 준다.
• 3D 또한 matrix로 변환할 수 있지만 사용하기 어려워 변환함수들을 별칭으로 사용한다.
• 트랜스폼은 트랜스레이트를 값으로 가질 수 있는데 세부적으로 40px, 40px로 이동시킬 수 있다.
• 트랜스폼이라는 속성에 트랜스X(40px);처럼 40px를 인수로 줄 수 있다. 이러면 x축으로만 40px만큼 이동시킬 수 있다.
• 마찬가지로 트랜스폼에 scale(1.5)로 하면 배수로 크게 할 수 있다.
• scaleX(2)이면 x축으로만 2배 커진다.
• transform: rotate(45deg)이면 요소가 시계방향으로 45도 돌게 된다. 변환은 정가운데를 기준으로 바뀐다.
• 또한 기준은 다른곳으로 움직일 수 있다.
• rotateX(45deg), rotateY(45deg)는 3차원 이동이다.
• 이 회전한 요소는 원근법을 가지지 않기때문에 회전한 것처럼 보이지 않는다.
• 이제 원근법을 이용해서 3d변환을 살펴보자
• transform: perspective(500px) rotate(45deg); 이면 3d로 변환할때 원근법 즉 가까이와 멈을 얼마나 먼 곳에서 볼것이냐 라고 하며 보게 되는 것이다.
• perspective는 나중에 적으면 적용이 안된다. 먼저 적어야 한다. 펄스펙티브와 x,y동시에 쓰면 복잡하게 회전한 것을 볼 수 있다.
• skewX(45deg)를 하면 정사각형에서 45도 기울어져 평행사변형처럼 보이게 된다.
• 오버워치 케릭터선책창을 skew를 이용해서 조금 더 풍성하게 쓸 수 있다.
• 코드펜에서 확인해보면 펄스펙티브를 150px를 해주면 150px의 거리에서 바라보고 있는 것을 염두해두고 이동 크기 움직임을 잘 조절할 수 있다.

📌느낀점

변환이라는 새로운 도구를 배웠다.

어려운 개념은 아니지만 실제로 쓸때는 어떨지 모르겠다.

쓸모없어보이던 skew가 오버워치에 쓰이는 걸 보니 조금 놀라긴 했다.

---

⭕23. 변환 (2)

📌강의 정리

• perspective는 하위 요소를 관찰하는 원근 거리를 지정한다.
• px등의 단위로 지정한다.
• 이것은 함수가 아니라 css속성이다.
• perspective 속성과 함수의 차이점은
• perspective: 600px; 는 속성이다.
• transform: perspective(600px)는 함수이다.
• 속성은 관찰 대상의 부모에 적용하고
• 함수는 관찰대상 자체에 부여한다.
• 기준점은 속성은 펄스펙티브 오리진이고
• 함수는 트랜스폼오리진이다.
• 당장 중요하진 않아서 배우진 않지만 차이점은 이해해야 한다.
• 예를 들면 부모요소가 크게 있고 자식요소가 부모의 절반을 차지한다하자
• 자식요소에 함수로 y축 45도 돌리면 관찰대상에 원근거리를 직접 부여한다.
• 원근거리는 자식요소의 정 가운데에 있다.
• 부모요소에 속성으로 원근거리를 추가하면 요소에 정가운데에 원근거리를 주고 자식요소를 바라보게 된다.
• 이러면 45도는 같지만 보는 관점이 달라 조금 다르게 된다.
• 개인적으로 부모에게 부여하는 속성이 조금 더 선호한다.
• backface-visibility는 3d변환으로 회전된 요소의 뒷면 숨김여부이다.
• rotate할때 보이게 할것이냐 안보이게 할것이냐의 차이이다.
• 간단하게 rotateY로 뒤집으면 보인다.
• 하지만 백페이스비지블리티로 히든값을 주면 안보이는 구조를 가지게 된다.
• 아이템의 ‘박’을 정가운데에 정렬하려면 display를 flex값을 준다.
• justify-content를 센터로 주고
• 얼라인아이템도 센터를 준다. 그러면 정가운데 오게 된다.
• 여기서 트랜스폼 로테이트Y를 하면 그냥 찌그러진것처럼만 보이지만
• 펄스펙티브를 추가하면 원근감이 생겨 자연스러워진다.
• 속성은 부모요소에게 함수는 자식에게 부여한다.
• 자식요소를 180도 뒤집으면 좌우 변경되는데
• 백페이스비지블리티를 히든으로하면 뒤집어진 요소는 화면에 보이지 않게 된다.
• 이런 뒤집어서 안보이는 요소가 어떤 실용성이 있을까?
• 스타벅스 예제에서는 동그라미에 마우스를 대면 원래요소가 뒤집어져안보이며 안보이던것은 다시 보이게 된다.
• 트랜스폼속성의 2D회전을 지정하는 변환 함수는? rotate()이다.
• 관찰대상의 부모 요소에 원근법을 지정하는 속성은? 펄스펙티브
• skewX변환함수에서 값으로 사용하는 단위는? deg이다.
• 펄스펙티브 함수에서 원근거리가 적용되는 대상은? 관찰대상자체에게 적용한다.
• 요소의 뒷면을 숨기는 속성과 값은? 백스페이스비지블리티 와 히든값이다.

 

📌느낀점

전혀 안쓰일것같은 속성도 예제를 보면 아름답게 쓰이는 것을 보면

css에서 필요없는 속성은 없는것같다.

뭐든지 잘 활용하여 잘 만들어야겠다.

---

⭕24. Overwatch 캐릭터 선택 예제 (1)

📌강의 정리

• 간단하게 예제를 만들어보자.
• 깃헙으로 먼저 들어가야 한다.
• vanilla는 웹개발을 도와주는 프레임워크나 라이브러리 같은 모듈을 쓰지 않았다는 뜻이다.
• 오버워치 캐릭터를 선택하는 창을 만들것인데
• 캐릭터에 마우스를 올리면 캐릭터에 배경이 생기며 조금 커지고 뷰포트가 작아지면 캐릭터목록도 변환되게 된다.
• 이 이미지들을 다운받아도 되고 url을 쓸수도 있다.
• 깃허브의 코드에서 다운로드 zip를 써서 다운받으면 된다.
• 여기서는 절대경로를 사용할 것이다.
• 먼저 폴더를 overwatch로 만들것이다.
• vscode로 overwatch폴더를 열어준다.
• 우선 index.html파일을 만들고 ! 탭으로 기본을 만들고 en을 ko로 바꾼다.
• title은 Overwatch로 바꿔준다.
• reset.css CDN으로 쳐서 카피를 하고 head에 링크태그로 붙인다.
• 또한 그 밑으로 링크태그로 main.css를 연결시켜준다.
• body에서 div태그를 class container를 만들어주고
• 히어로스를 만들어주고 그 자식으로 히어로를 또 만들어 준다.
• 이후 우리는 32개의 영웅을 만들어야 하므로 복붙이 아닌
• .hero*32>.image 를 치고 tab키를 치면 히어로 클래스내에 이미지 클래스를 가지는 요소를 32개 만들 수 있다.
• css에서 클래스 컨테이너를 만들고 컨테이너안에 히어로스도 만들고
• 컨테이너 안에 히어로스안에 히어로도 만들고
• 컨테이너안에 히어로스 안에 히어로 안에 이미지도 만든다.
• 이제부터 html에서 open with live server로 브라우저를 열어본다.
• 히어로에 80px 높이84px컬러까지주고 이후 부모요소에 플렉스 값을 준다.
• 다시 히어로요소에 margin속성을 준다. 4px로
• 이후 컨테이너 히어로 속성에 flex-wrap에 wrap 값을 주어 줄바꿈을 할 수 있게 한다.
• 이제 컨테이너 영역을 구분하기위해 히어로스부분을 오렌지로 준다.
• 또한 히어로스안에서 저스티파이 컨텐츠값을 센터로 준다.
• 이제 이 히어로스를 max-width: 700px를 주면 700px이하에서는 줄어들지만 700이상이면 바뀌지 않는다.
• 이제 margin속성을 auto를 주면 가운데 정렬이 된다.
• margin 0 auto; 를 주고
• 패딩은 40 20을 줘서 좀더 여유롭게 해준다.
• 히어로들은 보더값으로 #fff로 하얀색으로 주고
• 백그라운드 컬러는 #555로 회색을 준다.
• 트랜스폼은 skewX(-14deg)를 통해 기울인다.
• 보더 레디우스로 10px를 준다.
• 박스사이징에 보더박스를 주어 안정화한다.
• 선택자를 복사하여 다시 붙여넣기 이후 :hover를 하여 마우스가 올라갈때 마다 색깔이 변하게 해준다.
• 또한 트랜스폼의 값으로 스케일을 1.3해주어 마우스올릴때 커지게 만든다.
• 이때 커질때 skewX(-14deg)를 주어 커질때도 기울임이 유지되게 한다.
• 또한 요소의 쌓임 순서를 바꿔주어야 한다. z-index를 1로 주어 마우스올린게 제일 앞으로 오게 한다.
• 마우스를 올릴때 자연스럽게 변할 수 있게 자연스럽게 커지게한다. 자식요소에 트랜지션 1s를 주어 한다.

 

📌느낀점

정말 어마어마하게 빠르게 만들고 계신다...

나도 언젠가는 저렇게 될 수 있을까 싶다

다 아는 내용들이 합쳐지니 꽤 멋진 작품이 만들어지고 있다.

---

⭕25. Overwatch 캐릭터 선택 예제 (2)

📌강의 정리

• 요소는 빠르게 바뀌어도 배경은 천천히 바뀌었으면 좋겠다.
• 이럴떄는 트렌지션에 트랜스폼이라는 개별속성을 정확하게 적어주면 크기만 시간이 걸리고 배경색상은 바로 바뀌어있는다.
• 백그라운드컬러는 .6초로 바뀌게 한다.줄바꿈을 이용해서 가독성을 높인다.
• 이미지선택자를 복사해서 다시 붙여넣기한다.
• 이제 css에서 hero:nth-child(1)을 해서 가상선택자를 만든다.
• 여기다가 배경이미지를 넣는데 url(””)을 통해 절대주소를 적어준다.
• 이때 깃허브에서 제공된 절대주소를 적어준다.
• 이렇게 하면 이미지가 안나온다. 왜냐하면 가로세로값을 안적었기 때문이다.
• 그렇기에 .image선택자에 width: 140;을 주어보자.
• 이후 히어로 선택자에 히든값을 주자.
• 이후 백그라운드 포지션은 센터를 준다. 백그라운드 사이즈는 90px를 주면 이미지가 짤려서 왼쪽에 짤린이미지가 겹쳐서 나온다.
• 그러면 백그라운드리핏을 노리핏으로 주어 안나오게 한다.
• 우리는 skew를 주어 기울어졌기에 이번에는 그것을 적용하지 않기 위해 transform: skewX(14deg);를 통해 부모는 -14였으면 여기에는 14를 주어 정방향으로 해준다.
• 또한 트랜스레이트 -16px를 주어 잘보이게 해준다.
• 이제 이 선택자들을 복사 붙여넣기하여 이름들을 바꿔주면 다 이미지가 나오지만 수직으로 너무 많이 나와 어지러워 보인다.
• 이 선택자는 속성이 하나만 있고 이 선택자가 32개 반복되므로 이 선택자는 한줄로 바꾼다.
• 이제 이 한줄들을 다 복사 붙여넣기 해주고 선택자들의 이름과 이미지의 이름들을 바꾼다.
• 사실 이런 방식은 편하지는 않지만 지금은 원시적으로 html과 css만 쓰기때문에 조금 어렵고 나중에 scss를 쓰면 조금 더 편하게 할 수 있다.
• 컨테이너를 바꿔보자 패딩값을 준다.
• body태그를 width: auto이므로 건드리지 말고
• height: 100vh를 주어 전체로 만들어준다.
• 이후 배경이미지를 background-image: url(””);에 배경을 넣어준다.
• 이후 백그라운드 사이즈를 커버로해준다.
• 또한 백그라운드 리핏을 노리핏으로 해주어 반복되지 않게 한다.
• 백그라운드 어태치먼트에는 픽스드를 준다 그렇게 하면 스크롤을 해도 백그라운드 이미지는 변하지 않는다.
• .logo에 img를 삽입하고 이때 alt에는 Overwatch src에는 이미지 주소를 명시하여 넣어준다.
• 이러면 로고가 매우 크게 나온다.
• css에서 .container .logo 로 접근할 수 있다. logo는 형제 요소이다.
• img로 태그 선택자를 해준다. 이때 속성으로 width는 100%를 해준다. 이제 로고에는 margin: 0 auto를 통해 정렬을 해준다.
• 로고는 화면을 키우거나 줄이면 딱 붙어서 답답해보일수 있기 때문에 패딩값을 주어 0 20px를 주어 답답함을 해소한다.

 

📌느낀점

예제 만드는것을 보며 느낀점은 html과 css만으로도 많은 것을 만들 수 있구나 라는 것이다.

눈 앞에서 조금씩 뚝딱뚝딱 만들어지는것을 보며 이걸 나도 이렇게 만들 수 있도록 해야지 라는 생각이 많이 들었다.