24년 08월 23일

오전

display : flex

박스안의 요소들을 가로로 배치하는 속성.

여기에 보통 같이 많이 사용하는게

justify-content : 축 수평방향 정렬

• flex-start : flex 방향 시작점 기준 (기본값)
• flex-end : flex 방향 끝점 기준
• center : 중앙 정렬
• space-between : flex 방향 양 끝점 기준 (양 끝에 붙혀서)
• space-around : flex 방향 중앙점과 양 끝 기준 (양 끝과도 간격을 둠)

---

align-items : 축 수직 방향 정렬

• stretch : 수직 방향에 최대한 늘려서 (기본값)
• flex-start : 수직 방향에 위쪽
• flex-end : 수직 방향에 아래쪽
• center : 수직 방향 가운데
• baseline : 컨테이너의 기준선에 배치

flex-wrap

자식 요소들의 수가 많아져서 개수가 꽉찼을 때

부모요소에

flex-wrap: wrap

을 적용하면 자동 줄바꿈을 해줍니다.

---

transition

css 속성을 변경할 때 애니메이션의 속도를 지정하는 속성

        div{width:100px;height:50px;margin:10px;background-color: orange;}
        div:hover{
            width:800px;
        }
        div:nth-child(1){transition: .5s;
        background: linear-gradient(to right,red,orange,yellow,green,blue);}
        div:nth-child(2){transition: 1s;}
        div:nth-child(3){transition: 5s;}

div 안에서 요소들이 천천히 변화하도록 설정함.

        img{
            width:100%;height:100px;border:1px solid gray;
            position: relative;
            left:0;
            top:0;
            transition: 3s;
        }
        div:hover img{
            top:400px;
            transition: .2s;
        }
        
        //img 에서 3s를 지정하면 돌아올 때를 뜻하는 것

    /* 위치이동 */
    /* transform: translate(200px,100px); */
    /* transform: translateX(200px); */
    /* transform: translateY(200px); */

    /* 크기조정 ,, 크기 서서히 커짐*/
    /* transform: scale(2,2); */
    /* 기울이기 */
    /* transform: skew(60deg); */

    /* 동시에 적용 */
    transform:translate(400px,400px) rotate(360deg) scale(1.5);
    
    //transform : 이미 만들어진 태그를 늘리거나 회전시킬 때 사용

:focus : 요소를 사용(클릭) 했을 때 지정

---

나머지 시간엔 계속 홈페이지를 만들기를 진행.

 

배운걸 토대로 만들어본 fifa 홈페이지

 

홈페이지를 적당히 만들어봤는데 아쉬운점 :

• 아래 header 부분에 아무 메뉴에 커서를 갔다 댔을 때 그 밑에 부메뉴가 또 여러개 뜨도록 구현해야 했어야 했는데 못했음
• NEXON 글자가 가운데로 제대로 오지 못함
• mid-section 에서 오른쪽 부분에 또 메뉴가 작게 더 있었는데 못만듬
• 맨 아래 footer 부분을 따로 분리해서 위치시킬지 , main 아랫부분에 겹치게 해서 위로 올릴지 못정하였음.

웹페이지 만들때 배너 부분을 한 화면에 잘 보일 수 있도록 화면에 꽉차게 안만들고

가운데로 약간 몰아서 만듬 요새

 

div class 이름 띄어쓰기의 의미 : 서로 다른 클래스를 사용하게 하는것 = 각각 따로 적용된다

---

ipconfig/flushdns : 인터넷 캐쉬 삭제 명령어 (하면 인터넷 약간은 빨라질지도)

역시 프론트엔드가 재밌긴 하다. 그렇다고 적성에 잘 맞냐? 그것도 맞는것 같긴한데

 

일단 모든걸 다 열심히 , 재밌게 배우도록 해보자.

 

처음처럼 끝까지 !