$$config title: HTML, CSS JSq기초 기본 keywords: - cy $$ 깃허브 실전압축 https://slog.gg/p/9161 === 영타 200타 이상 https://slog.gg/p/11441 JSQ 스와이퍼 gsap 웹 직군 웹 디자이너 - 정적 이미지 화면 + 디자인 위주 웹 퍼블리셔 - 동적 이미지 화면 + 코딩 위주 프론드 엔드 개발자 백엔드 개발자 웹 3대 구성요소 HTML : 문서의 내용 글 + 이미지 CSS : 문서의 꾸밈 JS : 인터랙티브 ( 웹 사이트에 동적인 효과 부여) 크롬사용법 Ctrl t :새탭 생성 Ctrl w : 탭닫기 Ctrl up : 탭 이동 Ctrl dn :탭 이동 테일윈드 방식과 뱀타입이 있다! ----- 자주 쓸거같은 단어 div : 아무것도 없는 영역 만들때 section : 부분 nav : 네비게이션 a : 링크 걸때 header : 헤더 메뉴그런거 만들때 article : 글 본문 넣을때 footer : 전화번호 같은거 넣을때 color : 컬러 background : 백그라운드 font-size : 글씨 크기 height : 높이 width : 넓이 ----- 불러오기 모음 폰트어썸 무료 ----- HTML 사용 Ctrl + / 주석 전체 드래그 후 Shift + Tab 줄 정렬 > <- 여는 태그 안녕하세요 <- 구성요소 <- 닫는 태그 여는태그, 구성요소, 닫는 태그 합쳐서 엘리먼트라고함

안 녕

// 글자사이 공백을 줌

// div 와 nav의 관계는 부모 자식 관계 // nav와 nav는 형제 관계 // div와 td는 후손관계 , 자식관계가 아님 // nav와 td는 자식 관계

자기안에 있으면 자식포함 후손관계 // 이미지 넣는방법 img하고 탭

// alt는 이미지 설명부라고 보면됨 이미지 주소를 첨부해서 넣으면됨

// 클래스 a 생성

// 클래스 a b 처럼 한개의 엘리먼트에 여려개의 클래스를 갖는게 가능함

// 아이디 q 생성 // 어떤경우든 아이디는 같을수 없음 div에 q 가 있다면 section에 가능할것같지만 절대아님

// 큰제목

// 부제목 . .

// 까지 존재 ul 과 li // ul 순서없는 목록 자식은 오직 li만 가능함 div같은거 넣으면 안됨 ol 과 li // ol 순서있는 목록 "" ----- 코드 빠르게 만들기 (잼코딩) table>tr2>td3 << [위 코드에서 이 부분에 커서를 두시고 tab키] 하면 코드가 써짐 이것을 잼코딩 이라고함 잼코딩 구성요소 코드만들기 관계 - 갯수 +형제관계 \> 부모, 자식관계 ^ 형제관계 ----- table 개념 - table 태그 -> 웹사이트 표를 만들 때 사용 table border="1" --> table 테두리 스타일 th = table head(부수적인 정보를 표현할 때) tr = table row td = table date(메인데이터) 규칙상 tr 엘리먼트는 table 바로 다음에 올 수 없다. 머리 부분은 thaed 로 감싸고 몸통 부분은 tbody 로 감싼다. br 태그 개념 - br 태그는 '셀프 클로징' 태그로 다른 태그와 달리 닫는 태그가 존재하지 않는다. 단독적으로 사용하는 태그이다. 역할 : 한줄로 출력되는 문구를 한줄 띄어서 출력하고 싶을 때 사용된다. ----- 링크만들기 구글 바로가기 링크 a 하고 Tab 누르면 됨 target="_blank" 새창에서 열리게함 %띄어쓰기 하면 안됨 주의% ----- 읽어보면 좋은 자료 div 등 영어관련 색 공유 사이트 position 속성정리 상속여부 참고 사이트 flex-grid 136강 꼭 보기 * ----- Css 사용 /* 폰트적용 / // g마켓센스 폰트임 /폰트/ @font-face { font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; } html > body { font-family: "GmarketSansMedium"; } Exam1 { color : Blue; // 글씨 컬러 background-color : orange; // 글씨 백그라운드 컬러 font-size : 50px; // 글씨 크기 } /폰트/ //3rem; <- 기본 폰트 사이즈의 세배! Exam2 { background-color : red; height :50px; // 높이 설정안해주면 안나옴 width : 500px; //넓이 설정안해주면 최대한으로 뻗음 display : inline-block; // 디스플레이를 인라인을 로바꿈 } Exam3 { font-size : 600px; letter-spacing: -100px; // 글자 자간 맞추는거 color: rgba(76,202,237,1); // 글씨색 RGB로 넣는거 // 인자 ( R, G, B, 투명도) 순 0~255 투명도는 0.0~ 1 까지 가능 color : #FF09999F; // 해쉬코드로 색 넣는거 text-align : center; // 텍스트 가운데로 맞춤 left, center, right font-weight:bold; // 글자 폰트 볼드체 } table { border : 20px soild blue; // 선굵기, 선 스타일, 선 색 일반적인 표처럼 만들어짐 padding : 3rem; top; bobttom; left; right; // 박스안 공간 확보 margin : 20px; // 블럭 밖 공간 확보 } img { width : 200px; // 높이나 넓이 하나만 넣는걸 추천 height : 300px; object-fit : contain; // cover 와 contain이 있음 } section > div : first-child // section안에 있는 div 첫번째 자식 section > div : nth-child (2) // 앞에서부터 부터 두번째 자식 section > div : last-child // 마지막 자식 section > div : nth-last-child(2) // 끝에서 두번째 section > div : nth-child (2n) // 두번째 자식 마다 ~ div.a {} // div중 class 이름이 a인 엘리먼트 선택 div#a {} // div중 id 이름이 q인 엘리먼트 선택 Exam5{ border-radius : 10px 20px 30px 40px; // 좌측 상단부터 완만하게 깎임 border-radius : 30px; // 전체 30 px 깎음 border-radius : 20% // 완만하게 깎임 퍼센트만큼 border-radius : 50% // 원임 50이상은 의미없음 } height :50vh // 화면크기 50퍼만큼! 이럴꺼면 100%쓰지 왜,..? border:0 solid black; border-width: 0 1px; // 보더 상하 좌우 넣는거 border-width: 0 2px 0 1px; // 보더 시계방향으로 넣기 width :calc(100% / 7); // 100을 7로 나눈것만큼 나눠가짐 calc 개념 칼큘레이터 white-space:nowrap; // 줄바꿈 없음 overflow-x : hidden; , auto; , scroll; // 히든은 넘친 글을 숨김처리 , // 스크롤은 넘친글을 스크롤바를 만들어서 보게해줌 // 오토는 넘치지 않으면 보여주고 넘치면 스크롤 생성 text-overflow: ellipsis; // 글씨가 오버플로우 즉 넘치게 되면 ... 처리해줌 ul > li::after { content : "이것은"; } ul > li::before { content : "입니다"; } .popup__btn-close:hover { // 회전시키기 transform: rotate(5deg); } cursor: pointer; // 커서 바꾸기 opacity : 0; // 팝업할때 참고 애니메이션 먹게 하는 방법임 transition: visibility 1s, opacity 1s; visibility : hidden; .popup.active { display :flex; opacity : 1; visibility : visible; } css 선택자 [class = "popup"] 클래스에 popup이 "포함" 되어있으면 [class ^= "popup"] 클래스에 popup이 "시작" 되면 [class $= "popup"] 클래스에 popup이 "끝" 나면 > : 자식선택자 (띄어쓰기) : 후손선택자 + : 인접 동생선택자 ----- flex 개념 justify-content: //X축 -flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. -flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. -center: 요소들을 컨테이너의 가운데로 정렬합니다. -space-between: 요소들 사이에 동일한 간격을 둡니다. -space-around: 요소들 주위에 동일한 간격을 둡니다. align-items: //Y축 -flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다. -flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다. -center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다. -baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다. -stretch: 요소들을 컨테이너에 맞도록 늘립니다. flex-direction: // 진행방향 -row: 요소들을 텍스트의 방향과 동일하게 정렬합니다. -row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다. -column: 요소들을 위에서 아래로 정렬합니다. -column-reverse: 요소들을 아래에서 위로 정렬합니다. .red { //빨강선택 order:-1 //자리를 뒤로 한칸 보냄 but 자리를 선택안했으면 모두 디폴트값임 } ----- css 노말라이즈 모음 a{ color : inherit; // a 노멀라이즈 작업 최상단에 위치함; text-decoration: none;// 링크 걸면 밑줄 생기는게 사라짐 } body { margin:0; } ul, ol, li { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { margin:0; } ----- 라이브러리 // 만들어두고 클래스로 부여 인라인 그리드 라이브러리 / 노멀라이징? // 인라인그리드란? .inline-grid { font-size:0; } .inline-grid > * { font-size:1rem; display:inline-block; vertical-align:top; box-sizing:border-box; // } .img-box > img { //이미지 공백없애기 width : 100%; display : block; } ----- 커스텀 ----- ul > li::before { content:"이것은 "; } ul > li::after { content:" 입니다."; } ----- 미디어 사용법 @media (min-width : 1200px) { div > div { background-color : yellow; width : 1000px; } } @media (max-width : 1200px) and (min-width : 1000px) { div > div { background-color : green; width : 800px; } } @media (max-width : 1000px) and (min-width : 800px) { div > div { background-color : blue; width : 600px; } } @media (max-width : 800px) and (min-width : 600px) { div > div { background-color : gold; width : 400px; } } @media (max-width : 600px) { div > div { background-color : black; width : 200px; } } ----- 변수선언과 관례 // 변수선언 모든 엘리먼트에서 사용하고싶으면 루트에 담는다 , 자신의 후손까지 변수 사용가능 :root{ --site-width : 1200px; } //변수적용 var이 변수라는 뜻임 width :var(--site-width); ----- ----- -상속여부 참고 사이트 font-size : 기본값(medium), 상속여부(o) font-weight : 기본값(normal), 상속여부(o) letter-spacing : 기본값(normal), 상속여부(o) color : 기본값(inherit), 상속여부(o) background-color : 기본값(transparent), 상속여부(x) width : 기본값(auto), 상속여부(x) height : 기본값(auto), 상속여부(x) margin : 기본값(0), 상속여부(x) padding : 기본값(0), 상속여부(x) display : block, inline, inline-block; // 각 태그마다 display 속성 기본값이 다르다. border : 상속여부(x) border-radius : 기본값(0), 상속여부(x) cursor : 기본값(auto), 상속여부(o) text-aligh : 상속여부(o) text-decoraition : 기본값(none), 상속여부(o) ----- ----- -JSQ 문법? -html 구역에 작성해넣는거 // jsq 불러오기 HTML 구역에 생성해야함 // html 온클릭 속성이 있음 ------ jsq 구역에 작성하는거 //콘솔 클리어 console.clear(); //html선택과 적용 $('.popup-1').css('display','block') // 함수 생성 function popup1_show() { } //버튼관련 단어 // 클릭click, 가져다놓기mouseenter, 마우스 떠나기 mouseleave $('.btn-popup').click(popup1_show); $('.btn-popup').mouseenter(popup1_show); $('.btn-popup').mouseleave(popup1_show); // 실무 코드 준하는 문법 , 함수 이름 생략가능 함수와 바로 정의 $('.btn-1').click(function() { }); // Class 부여add, 삭제remove, ~있다 has. $('body').addClass('active'); $('body').removeClass('active'); $('body').hasClass('active'); // false, frue 반환 객체 만들기 선언과 실행 this let a홍길동 = { "이름":"홍길동", "키":178, "인사":function() { let name = this.이름; console.log("안녕하세요. 저는 " + name + " 입니다."); } }; console.log(a홍길동.키 + "cm"); // 178cm a홍길동.인사(); // 안녕하세요. 저는 홍길동 입니다. a홍길동.이름 = "홍길순"; a홍길동.인사(); // 안녕하세요. 저는 홍길순 입니다. next() : 인접동생(1 or 0) '+' , '+'(그 다음에 있는 어떤 것이든) prev() : 인접형(1 or 0) 'x 없다' parent() : 부모(1) '없다' children() : 자식들( n or 0 ) '>' -> '>'(자식 전부 다) find() : 후손( n or 0) ' ' -> '> *'(자식 전부 다) siblings() -> 나를 제외한 형제자매 function FaqBoxinit() { $('.faq-box > ul > li').click(function() { let $this = $(this); $this.siblings('.hover').find('> .faq-boxanswer').slideUp(300); $this.siblings('.hover').removeClass('hover'); if ( $this.hasClass('hover') ) { $this.find('> .faq-boxanswer').stop().slideUp(300); $this.removeClass('hover'); } else { $this.find('> .faq-boxanswer').stop().slideDown(300); $this.addClass('hover'); } }); $('.faq-boxanswer').click(function() { return false; }); } FaqBoxinit(); 스와이퍼 라이브러리