[HTML&CSS] 04. 메가박스 영화 예매 페이지 만들기 (feat. input 과 label 태그, 형제 관계, sibling, 선택자의 중요성)

 

transform 태그

1. 기능

• 위치, 크기, 각도 등을 변경할 수 있어
• 위치변경은 position 과 비슷한 기능일 수도. 차이점은 뭘까 ?? #❓❓❓_질문하고싶음_모르겠음

• 기본 코드

/* box 클래스 안에 있는 img 에 대해 transform 속성 주기 */

.box img {

    /* transform : translate(x축, y축)

            해당 태그의 위치를 이동시켜준다. */

    transform: translate(50px, 100px);

}

• transform 결과

    -

• 하나의 축 으로만 이동하게 할 수 있음. ⭐️⭐️⭐️⭐️⭐️ #🤟_배운것_WIL

.box2 img {

    /* y축 없고, x 축만 이동  */

    transform: translateX(100px);

}

  

.box2 img {

    /* y 축으로만 이동! */

    transform: translateY(100px);

}

• 2개의 css 를 먹이면 -> 밑에 있는 속성이 들어감 - 예를 들어, 동일하게 x축 이동을 2번하면 -> 뒤에 것이 적용됨.

2. scale

• 기능

    - 사이즈 자체를 축소, 확대 할 수 있음

• 인자

    - 첫번째 인자 = x축 스케일, 두 번째 인자 = y축 스케일. 두 번째 인자는

    - 비율 조정을 안 하면, 이렇게 찌그러짐

    -

• 예제코드

.box3 img {

    /* scale 은 1이 기본 크기

            크기를 조절할 수 있음.

            ex) 0.5 = 50% 사이즈로 변함

        두 번째 인자 = y 축 비율임 */

    /* x,y 기본 조절 */

    transform: scale(0.1);

    /* y 축을 0.1 로 */

    transform: scale(0.1, 1);

    /* 2배 크기 */

    transform: scale(2);

  

}

3. rotate

• 기능

    - 회전하게 한다. 돌려준다.

-

• 인자

    - 이건, deg 라는 단위로 각도를 설정한다.

.box4 img {

    /* rotate 속성

            deg : 회전 각도

            ex) 45 deg = 45도 회전  */

    /* 45도 회전 */

    transform: rotate(45deg);

    /* 90도 회전 */

    transform: rotate(90deg);

}

---

transition - keyframe

• 어떤 transform 을 정의해둔 곳이 있으면, 그 transform 이 얼마간의 시간을 거쳐서 변경될지를 지정
• '시간' 을 줘서 -> 애니메이션 처럼 느끼게 함.
• 애플코딩에도 강의가 있음,
• 예제코드도 쳐보자 #📛📛📛_보완필요_잘모르겠음

/* ❓❓ transition

            스타일이 변화하면서 -> 효과를 줄 수 있음.

            transition 에 대해서 변화하는 1) 시간 2) 변화 방법을 설정할 수 있음. */

.box5 img {

        /* 읽어보면

                1) transform 속성이 3초 동안 변화하고 (태그가 돌아가는 것)

                2) border 가 1초 동안 변화 (테두리가 생기는 것)

                3) border radius 역시 1초 동안 변화 (둥글게 모서리가 깎이는 것)

            포인트

                1) 밑에서 hover img 태그에 대해서 css 정의한 부분이

                2) 어떤 속도로, 어떤 곡선의 모양으로, 움직일 것 인가! 를 여기에서 정의*/

    transition: transform 5s linear, border 5s ease-in-out, border-radius 5s ease-in-out;

  

}

  

/* 위에 작성한 'ani' 를 먹여주기 */

.box5 img{

    /* animation 속성은 1) keyframe animation 이름 2) 시간 3) 변화방법 */

    /* animation: ani 1s ease; */

    /* animation: ani 2s ease; */

}

  

/* 호버했을 때(box5 img 에 올라갔을때) ->  */

.box5:hover img {

    /* 마우스를 태그에 올라갔을 때~!  */

    transform: rotate(720deg);

    border: 10px solid red;

    border-radius: 30%;

}

---

absolute relative 로 위치 변경

기본 사용법

• 부모태그에게 relative 를 먹인다. 자식태그는 absolute
• 이제 자식 태그가 위치를 정하면, 딱! 그곳에서 멈추니까 absolute
• 그러면, 부모는 상대적인 기준점이 되니까 relative

 

---

사진을 가운데로 오게 하려면

• 사진을 가운데로 오게 하려면

position: absolute;
top : 50%;
left: 50%;

#🤟_배운것_WIL #⭐️⭐️_즁요함_

/* 🔵 position relative, absolute 이용해서 -> 사진을 가운데로 오게 하기  */

.box6 {

    position: relative;

  

}

.box6 img {

    width: 150px;

    height: 150px;

  

    /* 가운데로 오게 하려면

            1) flex 로 정렬

            2) position relative - absolute

                부모에게 relative 가 있어야 함 */

    position: absolute;

    top : 50%;

    left: 50%;

  

    /* 반지름 만큼 빼서 -> 중앙으로 밀어주기 ⭐⭐

            이거 안 하면 오른쪽 귀퉁이에 있게 됨. */

    transform: translate(-50%, -50%);        

  

}

---

미니 과제

1. 해야하는 것

• 화면이 1200 까지는 '테두리가 빨간색'
• 화면이 600 이하는 '파란색'
• 화면이 1200 이상은 '테두리가 초록색'
• div 태그 하나 만들어서, 이미지가 돌아가는 애니메이션 만들기

• 

 

2. 트러블 슈팅

• [원인] 600px 이하에서 파란색 변경이 안 되었음
• [해결] 브라우저 자체가 600px 미만이 안 되어서 그랬음
  
  

---

폰트 적용

 

• 폰트 받기

    - https://fonts.google.com/noto/specimen/Noto+Sans+KR

• 다운로드 클릭
  
• 폴더 째로 넣기     -
  
• 이렇게 확인 가능 ⭐⭐⭐⭐⭐⭐     -
  

---

중요하게 배운 것

 

1. input 태그와 label 태그를 연결

• input 태그의 id 랑, label 의 for 랑 id값을 넣어야 연결! 되는거지?

    - 여기에 id 값을 넣는게 맞지? ❓❓❓❓❓

    - 그러면 for 는 어떤 기능을 하는데? ❓❓❓❓❓

    - label 은 뭐였지

    -

#📛📛📛_보완필요_잘모르겠음

• label 을 클릭하면 -> input 이 눌린다.

2. 인접요소 선택

• p+a 가 가리키는 건?
  • p 태그 로 가 -> 형제 레벨을 찾아, 가장 인접한게 a 라네? , 거기에 적용해
• p~a
  • p 태그로 가 -> 형제 레벨을 모두 찾아 -> a 가 나오면 적용해

• 인접요소 선택에서 핵심 요인

    - 1) 형제레벨에 있어야 함 (sibiling) ⭐️⭐️⭐️⭐️⭐️     - 2) 2개의 id 를 활용하는게 좋음 ⭐️⭐️⭐️⭐️⭐️ ⭐️⭐️⭐️⭐️⭐️

 

 

3. 예제 읽기 ⭐️⭐️⭐️⭐️⭐️⭐️

• class 중에서 tab01 이름을 가진게 / checked 되면 / ~ 쭉찾아봐 / 그러다 class이름이 .item01 이면 / 뒤에 css 를 적용해

 

 

4. 가상 선택자 before

• 기능 - content 앞에 어떤 문자를 넣을 수 있음 - 지금까지 뭔가를 넣으려면, html 을 통해서 넣었음 - 그런데, 가상선택자 중 before, after 를 활용하면, 추가로 넣을 수 있음 #📛📛📛_보완필요_잘모르겠음

---

토이프로젝트

1. 만들어야 할 것

검색 만들고

내용 다 만들고

영화 12개

오늘 배운걸로 탭 만들고

탭도 5개

2. 문제가 되었던 부분

1) 클릭하면 -> 뿅 나오게 하는거

##### a) 문제 원인

1. tab 메뉴랑 뿅 튀어나오게 하는 거랑 하나의 div 에 있었어야 했음

2. labe 와 id 가 연결되어야 했고 + 각각 메뉴는 unique 한 id 을 가졌어야 했음

 

b) 한번 더 생각해보면

1. Input 태그랑 label을 제대로 활용하고
2. CSS에서 형제 선택자를 잘 활용해야 -> 뿅 나오는걸 구현할 수 있어

⭐️⭐️⭐️⭐️⭐️

 

2) 돋보기 보이게 하는거 📛📛📛📛📛

가상선택자 before

• 이렇게 css 를 넣으니까 ->
• 아래처럼 나옴

/* 검색 bar

        ❓ 왜 before 로 해야하지?

        test box 태그 '앞' 에 {이 CSS} 를 넣을거야!

        그럼, 어떤 CSS 인데?  

        */

.text-box::after {

    /* 원래는? 넣고 싶은 텍스트 있으면 넣으면 돼 */

    content: "content 부분";

  

}

• 

 

돋보기 안 보여

 

왜냐면, 음... 쏙 어딘가 박혀있었음.

 

해결책은 '붕 띄우기.' ⭐️⭐️⭐️⭐️⭐️

 

방법은 ?

 

1) 부모에게 position relativ

2) 자식에게 position absolute

• 음... 그것도 그거고 width, height 를 잡아줬어야 했음

 

3. 오늘 배운 것 핵심 기술은 '튀어나오게 하는 것'

• 왜 되는건지 반드시 알아야만 해 ⭐⭐⭐⭐⭐

4. layout 잡기의 중요성(ul, li 를 잘 쓰면, 좋을 것 같아 ⭐⭐⭐⭐⭐ )

• 이렇게 딱딱 맞는걸 만들려면, ul,li 가 훨씬 좋을거 같아
  • 

 

 

5. 이렇게 하는 걸 before 써서 해보면 좋지 않을까. 그런데 아직 모르겠음. 📛📛📛📛📛

• 

 

6. 이 부분을 맞출 때, 눈 대중으로 하는게 아니라, 뭔가 딱딱 맞추고 싶은데...  

#✅️_추가로해보면좋을것같음_

---

배운거

 

1. 돋보기 이미지는 개발자 오른쪽에 있어

• 

 

2. 꼭 손으로 익히기 ⭐️⭐️⭐️

• 손으로 오늘 배운거 100번 써보고 ⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
• 눈으로 안 보고 쓸 수 있으면 다음거 넘어가기. ⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

 

3. 커서를 올려놓고 - cvtrl c v 해도 복사 된다.