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

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일차 수업 내용 정리 바로가기 ?..

목록과 리스트(ul, li) 리스트 태그 - 브라우저를 사용할 때 리스트를 인식하기 위하여 사용 수업 내용 코드펜 바로 가기 [ul] 목록의 역할 [li] 리스트 역할 - 제목은 재목태그(h태그)를 추가적으로 작성 해줘야 한다. [주의사항] 1. ul 태그 안에는 li태그만 사용할 수 있고, li태그 안에는 모든 태그를 사용할 수 없다. 때문에 너무 큰 구조에 ul, li를 활용하는 것은 코딩할 때 헷갈릴 수 있다. 2 ul, li 태그는 독단적으로 사용할 수 없다. ul태그 없이 li태그를 쓸 수 없고, li태그 없이 ul태그를 쓸 수 없다. (웹 표준에 어긋나는 코드이다. [개발자 모드] 1. 미리보기 화면에서 원하는 태그에 우클릭 - 검사를 누르면 관련된 css정보를 확인할 수 있다. 2. 개발자 ..

-. vscode로 마켓걸리 상단바 짜기 div->block-> 무슨 특징을 갖는지 확인하고 margin 사용 왼/오른쪽 박스(.left-box) > 선택자 네비바(nav) > 태그 ** 코드를 수정하는 방법 문제가 되는 html을 주석처리 해준 뒤 새로운 코드 입력 -> css를 수정하고 주석처리한 html을 풀어준다 기본값이 row이기 때문에 flex를 사용해서 정렬을 해야한다. container에서 상속받아야하기 때문에 flex는 container에 써야함 아이콘 넣는법 👌step.1 구글에 폰트어썸 검색 후 돋보기 클릭 아이콘 중 무료(free) 클릭 후 선택 👌 step.2 검색창에 cdnjs 검색 후 검색창에 font를 적어 라이브러리와 링크를 연결한다 link 태그를 이용해 삽입해주면 됨 직..

-. 개구리 7단계 목적 : 개구리 하단 통일여백 정렬 문제점 : 1. 세로 최상단에 정렬되어 있다. 2. 가로 좌측에 정렬되어 있다. 원인 : 1. align-items 기본값이 flex-start여서 그렇다. 2. justify-contents 기본값이 flex-start이기 때문이다. 해결 : 1. align-items 값을 flex-end 값으로 바꿔줘야한다. 2. justify-content 값을 space-around로 바꿔줘야 한다 (조건 : 양 옆에 동일한 여백이 있다.) -. 개구리 9단계 목적 : flex-items 한 줄에 하나씩 배치하기 문제점 : flex-items 한줄에 하나씩 배치 원인 : flex-direction 기본값이 row이기 때문이다 해결 : flex-directio..

-. 비쥬얼스튜디오 다운받는 법 1. 검색창에 비쥬얼스튜디오(vscode) 검색 후 다운로드 2. 우측 상단 폴더모양 클릭 후 계속 클릭(경로 확인법) 3. 체크란에 모든 부분 체크하고 다운 -. 세팅할 때 필요한 부분 -. 세팅 전 기본 개념 이해 [파일] - 확장자가 붙어 있는 것들을 파일이라고 부른다. [확장자] - .ex) jpg .psd .mp4 .html .js 들이 하나의 파일로서 사용이 된다. [폴더] - 파일을 정리하는 용도 - vs코드를 처음 실행할 때는 폴더를 열어주고 폴더 안에서 파일을 생성해야 한다. *** [서버에 파일 업로드 할 때] - 파일이나 폴더이름이 한글로 되어있으면 서버에 업로드할 수 없다. - 띄어쓰기 절대 금지!!! - 이미지 파일 이름 한글로 작성 금지xxxxxx..