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

목록과 리스트(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..

선택자 복습 페이지 바로가기 마켓컬리 복습 페이지 바로가기 👍복습 목표 1. 구글 심볼/구글폰트 정확하게 입력하기-> 폰트는 가능한데 심볼이... -. 심볼 넣는 법 모름 -. 배경 크기가 안넣어짐 -. ......

[flex 시작] 수업 코드펜 바로가기 젠코딩땐 띄어쓰기 안하기 ********* [높이] -. 모든 태그는 높이가 auto(기본값)일떄 0으로 작동한다. -. flex-item이 되면 높이가 auto(기본값)일때 100%로 작동한다 . 컨테이너의 높이 auto=0으로 설정되었으면 1~4번의 item은 auto로 설정, 5만 100으로 설정됨 하위엘리먼트로 상속받아서 어쩌구..자롬르겟ㅇ,ㅁ [flex item 세로 정렬] 수업 코드펜 바로가기 [flex container] -. 아이템을 정렬하는 코드는 전부 flex-container에 작성된다. ㄴ justify=content : 가로정렬 ㄴ align-items : 세로정렬 ㄴ flex-direction : 방향정렬 ㄴ flex-wrap : 줄바꿈 정..

신선우 마켓컬리 코드펜 바로가기 div.top-section 선이 안만들어져서 border와 solid로 선의 색을 나타냄 이후 가운데 정렬로 봐야 block이라 margin 태그로 가운데 정렬 [마켓컬리 두번째] 그리드를 만들어서 그리드를 잡아준 뒤 코딩을 짜야한 오늘 수업한 마켓컬리 코드펜 바로가기 박스사이징-패딩을 너비에 포함시키는 코드 ㅇ

[마켓컬리 상단바 구성 (틀린코드) ] 수업 내용 코드펜 바로 가기 [반응형과 고정형] 고정형 : 마켓컬리, 네이버, 다음 등 (확대 축소 했을 때 하단 바가 생김) 반응형 : 나이키 등 (확대 축소 했을 때 하단 바가 생기지 않음) ui 사용시 구글 심볼로 검색하여 코드 가져오면 됨 [폰트 가져오는 법] 구글폰트 검색- get font * html은 전부, css는 font-family 만 가져오기 [마켓컬리 상단바 구현해보기] 상단바 구현 코드펜 이동하기