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

선택자 복습 페이지 바로가기 마켓컬리 복습 페이지 바로가기 👍복습 목표 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 만 가져오기 [마켓컬리 상단바 구현해보기] 상단바 구현 코드펜 이동하기

[앵커태그(하이퍼링크) 복습] 1. a+(tab) 2. 하이퍼링크 이름 3. 하이퍼링크 이름 * target=_blank 는 새로운 탭 열기 [폰트 적용하기] 1. 검색창에 "구글 폰트" 검색하기 2. 첫 번째 구글 폰트 접속 3. 왼쪽 사이드바가 나오지 않을 경우, 클릭 ▲영/한문의 기본적인 서체 영문-Roboto 한문-noto sans(위아래 행간의 거리가 다름) -. 옛날부터 지금까지 많이 사용한 폰트 -. 예쁘긴 하나 위아래 행간(line-height) 수치가 달라 아이콘과 텍스트 중앙정렬이 맞지 않음 -. 위 단점을 보완해 나온 폰트들은 프리텐다드와 스위트 폰트가 있다 [ 1. 폰트 가져오기 ] Get embed code = html에서 쓸 코드를 가져오겠다 Download all = 컴퓨터에 ..

✔️ [클래스 선택자 복습]~ 젠코딩 수업 내용 바로가기 div.div-${div-$}*7 + (tab) = div-1 ~ div-7 까지의 코드 완성. ✔️ [클래스 선택자 그룹화 복습] 수업 내용 바로가기 다른 자리에 있는 두 가지 문자를 한번에 선택할 땐 ctrl+원하는 문자 마우스로 클릭 + shift+좌방향키로 조절 ✔️ [inline- block 여백 제거 복습] 수업 내용 바로가기 div.inline-block-box _ (tab) .inline-block-box { border: 1px solid red; } ▼ 겉에 박스 선 칠하고, 작은 박스 색 칠하기 하지만 여기서는 색 박스가 한 줄에 같이 배치되지 않음. 그럼 어떻게? ▼위 코드에서 박스를 한 줄에 같이 배치되게 하기 display..

✔️ [상위 및 하위 표시에 대한 명칭] ✌ 관련 코드펜 바로가기 TIP 한 엘리먼트를 기준으로 위 : 부모엘리먼트 아래 : 자식엘리먼트 위위 : 조상엘리먼트 아래아래 : 후손엘리먼트 ✔️ [css 선택자] ✌ 관련 코드펜 바로가기 ** ">"는 자식을 나타내고, " "는 후손을 나타낸다 > : 자식 선택자 띄어쓰기 : 후손 선택자 + : 인접 동생 선택자 ㄴ 인접동생 선택자는 바로 밑에 붙어 있는 동생(엘리먼트)만 선택한다 ✔️ [상속되는 텍스트 속성] ✌ 관련 코드펜 바로가기 ✔️ [인접 동생 선택자 활용] ✌ 관련 코드펜 바로가기 바로 밑에 붙어 있는 엘리먼트만 선택됨 ✔️ [클래스 선택자] - 젠코딩(복잡한 html을 한 코드로 정리해주는 것) ✌ 관련 코드펜 바로가기 젠코딩 : " div{div..

[공통사항] 디자인을 구현하기 위해 존재하는 Html과 css. (Block과 Inline은 레이아웃을 구분해주기 위한 속성값임) Block은 한줄로 표현하기 위해 inline은 한 블럭에 작은 표현을 하기 위해 Block에 inline이라는 속성을 넣은 것이다. 한 줄에 하나씩 표현하기 위함** ** 네이버 검색창으로 보는 Block과 inline의 차이 네이버 로그인창의 나뉜 영역 부분은 Inline(나뉜 영역으로 표시됨) 상단 페이 ~ 알림 부분은 Block(한줄로 표시됨) - 한줄씩 ex. - 한줄에 같이 나오는 ex. 정리하는 방법 : 공통사항을 나열한 후 세부 사항을 적고 , 세부사항의 디테일들을 적어 나가는 연습하기 [Block과 Inline의 차이점?] Block 코드펜 바로가기 상위 엘리..