신선우의 블로그 신선우의 블로그

-. 아이콘none 처리하면 효과를 적용할 수 없으니 오퍼시티:0 으로 가려주기 패딩-반응형 일으켰을 때 나오기 위해 해줌1920짜리 여백 남아잇으면   -. 배너 네비 반응형 일으키기 [네비 글씨 사이즈 조정]각 li에 nav-text 클래스를 삽입해준다 1440px에서 네비 박스 안에 있는 네비 텍스트의 사이즈를 15px로 줄이겠다 반응형을 일으킬때 부드럽게 일으키기 위해 트렌지션 적용  * css 파일 순서가 중요한 이유css파일은 밑으로 내려갈수록 큰 힘을 가지기 때문에 미디어쿼리 파일이 제일 밑으로 가야한다  [배너 높이 변경]화면이 최대 1350px 일때 탑바의 높이가 130px로 바뀐다는 뜻 같은 방법으로 로고도 1260px 일때 너비 180px로 바꿔준다(=트렌지션은 또같이)  [특정한 오..

수업자료피그마 자료  -. 스와이퍼 가로형으로 변경버티컬-호리젠탈 변경 가로형으로 변경된 걸 확인할 수 있음  -. 배너 넣기확인을 위해 배경색에 투명도(a)추가 이미지 넣을 위치 확인* 이미지는 이미지 박스를 만들어 안에 넣어주는게 안전하다 이미 이미지 박스를 만들어둠 이미지를 넣어줌 슬라이드 안 이미지를 선택해준 뒤 높이를 상속받게 하고(반응), 이미지 크기 유연 변경을 위해 오브젝트 핏 커버 선택 슬라이드 2 이미지도 선택해줌 슬라이드 배너 안 사진 선택 끝  전체적인 이미지(슬라이드 1번, 2번)에 높이, 오브젝트핏이 적용될 수 있게 "-1"을 빼고, 위치를 위로 올림   -. 화면 불투명도 주기ㅇ1. 배경색을 앱솔루트로 위에 띄워줌2. 릴레이티브로 묶어 올려줌3. 레프트~바텀:0; 으로 머리끈 ..

[눈누 폰트 가져오는 법]  -. 웹폰트 긁어오기 -. 사이즈에 맞춰 커스텀해주기  -. 폰트      [kr로 변경하기] -. 폰트 찾아바꾸기컨트롤+H  -. 글자랑 구글 폰트 정렬 맞추는 법   -. 아이콘간 여백주기피그마 내 갭:28px 아이콘박스와 이미지 박스를 한 박스에 묶어 gap 처리한다  -. 폰트 사이즈/두께 변경하기  -. ㅇ [배너 삽입하고 스와이퍼 넣기] 배너 -> 스와이퍼 -> 이미지+불투명도순서대로 들어가야 함스와이퍼 중 페이지네이션만 쓸거라 나머지 지워줌 스크립트도 필요한것만 남겨두고 지워줌-> 이후 커스텀할 것 -.스크립트를 맨 아래로 내리는 이유html보다 스크립트가 나중에 실행될 경우가 있어서 -. z-index: n;f(형) : 1점+1점+*1점s(동생): 2점아래에 잇..

모작 레퍼런스 사이트 - 아테라▶ 아테라 홈페이지 바로가기  브랜드 컨셉당신의 삶을 비추는 아름다움 키워드하늘색, 맑은, 깨끗한, 빛, 환한, 미래지향적인, 멀리서 보는 구도 이미지 컨셉잔잔한, 편안한, 먼 구도 컬러화이트, 블루, 그린, 베이비블루 https://tinyurl.com/2cv9ztd8

(컬러)흰색 : 에너지는 파란색, 초록색, 주황색, 노란색처럼 알록달록한 컬러로 강조를 표시한다. 그 컬러와 잘 어울리게 디자인할 수 있는 컬러는 화이트이기 때문에 흰색으로 선정 하였다.미래를 나타내는 컬러이기도 하기 때문에 흰색으로 최종 결정하였다 GS에너지 바로가기 [1] gs에너지 로고, 아이콘 등을 저장한 후 폴더에 넣어두기 [2] 로고박스에 이미지 넣기 [3] 로고 사이즈 맞추기반응형으로 제작하기 위해 (?!!!!!!!!!!!!!)쉽게 조정이 가능하도록 로고박스 위에 이미지 박스로 감싸버리기개별커스텀하기 위해 로고이미지박스 설정 [4] 폰트 두께  라이브러리 만들기.폰트이름{font-weight: 300;

* 반응형과 고정형-. 반응형과 고정형 두가지 개념이 섞이게 되면 이도저도 아닌 사이트가 구현된다.-. 반응형 사이트는 특정한 상황을 제외하고 대부분 퍼센테이지로 구현된다. * 앱과 반응형 사이트앱 : 플레이스토어나 앱스토어에서 판매하는 상품반응형 사이트 : 플랫폼에서 판매하는 앱이 아닌 url주소로 접속하는 모바일 기기의 반응할 수 있는 사이트이다이 두가지는 개발되는 방향이 완전히 다르다( 안드로이드 개발자와 IOS개발자 준비는 완전히 다르다)언스플레시 사이트 바로가기-무료 사진 사이트   [반응형 이미지]수업 코드펜 바로가기 -. 이미지 삽입img 태그 안에 이미지 주소를 넣어준다 (alt 이름 지정 무조건 하기) -. 이미지는 우리가 직접 태그에 %를 걸어주지 않는 한 고정형으로 작동한다-. 이미지..

[복습] - 스와이퍼 반절 배치하기-. 선생님 드라이브에 올려놓은 코드 보기 1440px 밖으로 나가면 잘리게 됨 -> swiper0box가 버튼의 반절까지 와야함버튼 사이 40 , 버튼 반절 20 = 20px + 여백값 (10px) =30px x 2 = 60px그그래서 전체에서 60px 을 빼야함 버튼너비 - 반절너비 = nn + 여백값 = n2n2 x 2 = 답 [페이지네이션 커스텀(1단계:자바스크립트 코드 추가, css기본값)]수업 코드펜 바로가기 -. 스와이퍼 - 맨밑의 데모버전으로 들어가 페이지네이션 확인  -. ctrl+U 를 클릭해 자바스크립트를 확인한 후 페이지네이션에 삽입 index= 0 부터 시작 - 자바스크립트 페이지 자체의 순서return = 돌려준다 반환한다 / span 태그를  ..

[스와이퍼 복습하기]수업 코드펜 바로가기swiper-box는 스와이퍼 구조 형제로 타이틀이나 다른 상품구조가 들어올수도 있기 때문에 항상 만들어줘야 한다. -. 스와이퍼 스크롤 오류?ㄴ swiper라는 클래스에 고정 높이를 지정하지 않으면 스크롤이 무한으로 생기는 오류가 있다. * 해결방법swiper 클래스에 고정 px 높이를 지정한다그 외 상위 엘리먼트 한테는 고정 px높이를 지정하지 않아도 괜찮다. -. 개발자 모드에 상위엘리먼트ㄴ 상위선택자가 개발자모드에 선택되어있는 경우 상위선택자가 개발자모드에 선택 되어 있기 때문에 스와이퍼 공식 홈페이지에서 커스텀할 코드를 가져와서 적용해야 한다 슬라이드 펄뷰-프리뷰-컨트롤+U = 코드보기로 가져오기 slidesPerView - ㅇvertical - 세로로 정..