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

타이틀 값 및 여백 주기 마진값 주기   리스트 아이들도 여백 주기 피그마로 여백값 확인한 후 라인하이트 처리하기(라인하이트로도 여백을 줄 수 있는 것을 체크하고 지나가기)

G마켓 2차 탑바 구현(2)https://tinyurl.com/22poezy4    ㄴ css 연결 시 순서를 잘 확인하고 넣어야 한다 (특히 hover가 사용되는 코드에는 더욱) G마켓 2차 탑바 구현 ㄴ 2차 탑바에 left: 0;을 적용했더니 body를 기준으로 작용하기 때문에 맨 왼쪽에 붙는다 ㄴ position: absolute; 가 된 g-market-3 태그를 가둬주는 역할로 코드 입력ㄴ 가둬놓겠다는 뜻 [2] li너비 만큼 밀어주기ㄴ left: 0; 가 아니라 left: 100%; 로 바꿔주기 [3] 마우스를 올렸을 때 2차 메뉴 고정시키는 방법 ★ ★ ★ ★ position: relative; 위치는 container에 적용되어 있어야 한다. + 추가로 display: none; 처리 한..

이전 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;  비율 망가짐 방지 기존개념 : 이미지태그는 너비높이 중 하나만 커스텀 하면비율이 유지된 상태로 이미지가 커..

flex-item은 text-align을 사용할 수 없기 때문에 justify-content: center; 코드를 작성하여 a태그를 이동시켰다.-. 아이콘 정렬[right-box 오른쪽 정렬하기] -. 아이콘 넣기돋보기 아이콘은 다른 레이어에서 사용 가능성이 있기 때문에 div에 감싸주기 -. svg코드 가져오기1. f12를 눌러 코드를 선택한다2. 우클릭->경로 or 컨트롤+U를 이용하여 svg코드를 확인한다3. 코드를 복사한 후 svg폴더를 생성하여 붙여넣는다.(공백 및 필요없는 부분은 삭제)4. html과 연결해준다 ---. vscode 폴더 정리코드는 코드대로 새 파일(띄어쓰기, 한글 폴더 X) 생성 후 넣어준다.연결 시 "파일명/svg파일이름" 으로 연결해야 연결됨 ▲ 이미지 태그에 기본적으로..

vscode에서 로고 파일 불러오는 법ex. 디자인삼성 페이지에 있는 로고 가져오기(with. svg)[1] 디자인삼성 로고 우클릭 후 검사 [2] 이미지 코드에 들어 있는 svg 클릭하기 [3] 나온 로고의 빈공간에 우클릭 후 페이지 소스 보기 클릭 -> 소스 복사 [4] vscode로 들어와 새파일을 연 후 "logo.svg" 파일을 생성한다 [5] xml 과 주석/빈공간을 삭제한다 [6] 박스 안에 "img" 태그를 적어준 후 만들어둔 svg 파일을 적어준다** alt에 제목을 적어주는 연습을 해야 기능사 시험 시 혼란 없다html에 있는 모든 a태그를 기본상태로 커스텀- a태그를 기본 상태로 먼저 바꿔 두고 각 태그에 커스텀을 해야 에쁨번외..nav..

🦾웹2 2일차 (2024. 4. 15) 수업 내용 🦾✔️ 개구리 단계별 풀✔️ flex-grow 예제와 gap 코드 알기✔️ flex-basis 코드 예제 풀기 🐖 웹2 2일차 수업 내용 정리 바로가기 🦾웹2 3일차 (2024. 4. 17) 수업 내용 🦾✔️ 마켓컬리 하단바 구현 연습✔️ 아이콘 넣는 법 🐖 웹2 3일차 수업 내용 정리 바로가기 🦾웹2 4일차 (2024. 4. 22) 수업 내용 🦾✔️ 목록과 리스트 태그✔️ 제목 태그✔️ 제목태그, 목록/리스트 태그를 통한 삼성디자인 구현 🐖 웹2 4일차 수업 내용 정리 바로가기 🦾웹2 5일차 (2024. 4. 24) 수업 내용 🦾✔️ 삼성디자인 구현✔️ vscode에서 로고 파일 불러오기 🐖 웹2 5일차 수업 내용 정리 바로가기 ?..