목록프론트엔드 국비교육 (98)
안녕하세요
시안을 만드는 법에 대해서 간단하게나마 알게 되었습니다. 현장에서 일어나는 일이라면 뭐든 들어 본 적이 있는 것 하고 없는 것은 차이가 클 것 같습니다. [수업 중 구현한 사이트 주소입니다.] [복습을 위해서 이전 시간에 배운 sticky 와 스크롤 이동 button을 추가로 구현했습니다.] 포토샵 세팅 방법 화면사이즈 1900px > 내용 1200px 가이드라인이 중요합니다. 라인을 1px도 틀리지 않고 정확하게 합니다. 강약을 조절합니다. text, 그림(배경) 공간은 최대한 많이 줍니다. 많은 사이트를 참고하고 익숙해진 최적의 위치를 찾아갑니다. font는 노트산스로 통일합니다. (폰트 사이즈와 두께만으로 조절합니다. 폰트 색상은 반드시 검은색.) 이상한 배경을 넣지 않습니다. (이미지나 흰 배경으..
[수업 시간에 5:5 분할 슬라이드를 구현했습니다.] filter : grayscale;을 통해서 img를 흑백으로 바꿀 수 있습니다. (0~1) brightness는 이미지 밝기를 조절할 수 있습니다. (0~1) .section03 .container figure { height: 100vh; filter: grayscale(1) brightness(0.4); } flex: 0 0 atuo; 세번째 속성 박스의 크기를 부모 기준으로 몇 % 으로 할지 정할 수 있습니다. 0 0 50%로 설정하면 부모의 절반의 크기를 갖게 됩니다. 0 0 0으로 설정하여도 이미지 외의 내용물(글자와 같은 것들)이 들어있다면 글자의 크기에 맞춰 이미지가 줄어듭니다. flex: 0 0 50%; /* 이미지 사이즈를 맞추기 위..
시험이 있었습니다. 아침부터 저녁까지는 국비교육을 받고, 집에 돌아와서 복습한 뒤에 밤과 새벽에는 시험공부를 하다보니 이번 주 내내 잠을 하루에 4시간 밖에 못 잤습니다. 낮잠을 잠깐잠깐씩 쉬는 시간에 자면서 보충하기는 했지만 정신이 몽롱해져서 수업을 잠깐잠깐씩 놓쳐버렸습니다. 오늘로 개인적으로 바쁜 일은 다 끝나고 이제 코딩에 집중할 수 있습니다. 주말에는 푹 자야겠습니다. 진짜 피곤합니다. 개인적으로 너무 배우고 싶었던 sticky가 오늘 학습목표였습니다. 그런데 저는 오전 수업 때 조금만 듣고 시험을 치러 갔기에 온전한 sticky를 배울 수가 없었습니다... 주말에 코드 따라 치면서 연습이라도 해보고 싶어서 쌤한테 github 주소 받아볼 수 있을지 연락 드렸습니다... 과연... 금방 깃허브 주..
[다단메뉴를 구현하는 방법을 학습했습니다.] tag안에 무수히 많은 tag들이 들어가기 때문에 position과 hover를 어디에 주어야 할 지 파악하는 것이 어렵습니다. [수업을 마치고 개인적으로 다단 메뉴 안의 다단 메뉴를 구현해보았습니다.] 하나의 큰 다단메뉴는 height를 조절하여 애니메이션을 적용 할 수 있지만, 다단메뉴 안의 이중 다단 메뉴를 구현하기 위해서는 display: none;이 꼭 필요하기에 애니메이션을 적용할 수 없었습니다. shortcut : 대괄호 안에 내용을 입력할 수 있습니다. ul>li*7{BOX0$} 외부 스타일 시트(External style sheet) 모듈화 외부 스타일 시트는 모듈화의 개념입니다. css 파일을 불러와 스타일을 적용시킵니다. 내부 스타일 시트(..