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

(컬러)흰색 : 에너지는 파란색, 초록색, 주황색, 노란색처럼 알록달록한 컬러로 강조를 표시한다. 그 컬러와 잘 어울리게 디자인할 수 있는 컬러는 화이트이기 때문에 흰색으로 선정 하였다.미래를 나타내는 컬러이기도 하기 때문에 흰색으로 최종 결정하였다 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 - 세로로 정..

이전 2차 구현 메뉴 - hover 적용 전 웹2 9일차 삼성디자인 구현ㄴ2차메뉴 구현 시 display: none;을 사용하면 transition을 사용할 수 없다.  개념[1]. opacitiy: 0; 만 적용했을 때 투명도만 적용된 상태이기 때문에a태그를 사용하거나 클릭이벤트를 걸었을 때 기능이 살아있게 한다.menu-2-section {   background-color: #e4f1fd;  position: absolute; left: 0; /*bottom: 0;*/  top: 100%;  width: 100%;  opacity: 0;} [2]. opacitiy: 0; 을 사용해서 구조를 멈출 경우 클릭 가능 기능은 살아 있기 때문에클릭을 방지해주는 visibility: hidden;를 사용한다...

2차 메뉴는 헷갈릴 가능성이 있어 따로 css폴더를 만들어서 2차메뉴 구성해야함2차 메뉴는 새로운 폴더를 활용하여 넣는 것이 좋다 [2차 메뉴 구현하는 순서(추천)]1. absolute가 되어야 하는 구조를 hover까지 생각하면서 html에 배치(이때 구조를 눈으로 확인할 수 있도록 문자를 함께 작성한다.)ㄴ 2차메뉴2. 상황에 맞게 absolute나 fixed를 먼저 적용하고 위치를 잡아준다.3. 크기를 설정한다.4. 상자(오브젝트) 크기가 큰 순서대로 레이아웃 구현하기- container- 왼쪽박스- nav 태그- ul 태그- li 태그- a 태그 2차메뉴 만들 때 가장 많이 하는 실수  그래서~ 상위 앨리먼트 x 부모 앨리먼트로 작성한다top:100% = 탑바의 높이만큼 밀었다는 것을 의미한다 가..

👌 웹사이트 리서칭 자료 모음1. 지디웹 바로가기 2. 디비컷 바로가기배너 이미지 위에 탑바 구현수업 코드펜 바로가기 무료이미지 사이트 바로가기 ** 얼굴은 저작권에 주의 / 원본 사진은 2차 가공을 거쳐야 한다. 1. 이미지 복사이미지 우클릭 후 주소복사 -> img코드 "" 안에 넣어주기 2. 이미지 크기 변경하기-2-1. 이미지 사이즈 조정이미지를 커스텀하려면 이미지태그를 선택 후 너비높이를 조정해줘야 한다.(미리 정해놓은 높이에 맞춰 100% 적용하는 코드를 사용했다)비율이 망가졌을 땐 object-fit: cover; 코드를 사용해 비율을 맞춰준다*** object-fit: cover;  비율 망가짐 방지 기존개념 : 이미지태그는 너비높이 중 하나만 커스텀 하면비율이 유지된 상태로 이미지가 커..