본문 바로가기
  • GDSC Ewha Tech Team Blog

3-2기 스터디/HTML+CSS+JS 실전 퍼블리싱6

[6주차] before, after, 순서체크 가상클래스, 체크박스 💡Before/After 가상클래스 예제 Content attr Hover Effect body{ font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; line-height: 1.5rem; margin: 0; font-weight: 300; display: flex; justify-content: center; align-items: center; height: 100vh; } a{ text-decoration: none; } .gnb a{ width: 300px; display: block; height: 40px; position: relative; /*부모요소*/ overflow: hidden; } .gnb a:befor.. 2022. 5. 22.
[5주차] 확장선택자, 콘텐츠 slider 💡햄버거 버튼 /*주요 CSS 속성: input, label, 인접선택자, 형제선택자, 속성선택자:checked, opacity, transform, nth-child, position */ body{ display: flex; justify-content: center; align-items: center; height: 100vh; color: #222; } a{ text-decoration: none; color: #222; } /*Trigger Button*/ input[id=trigger] { display: none; } /*하나의 문서 안에 id는 하나만 사용 가능하므로 id를 사용하면 중복 안됨. */ label[for=trigger] { position: relative; /*부모요소*/.. 2022. 5. 22.
[4주차] before after 가상클래스와 순서 체크 가상클래스 💡before after 기본 형식 .gnb a {} .gnb a:before { } .gnb a: after { } 💡순서 체크 가상클래스 예제 .item p span:first-child { } .item p span:last-child { } 2022. 5. 21.
[3주차] CSS 키프레임 애니메이션과 가상클래스 hover 💡keyframes The @keyframes rule specifies the animation code. @keyframes loading { 0%, 100% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1.2); } } 💡원형 크기 변경 로딩 애니메이션 .loading span { display: inline-block; //block 요소인 span을 크기가 변하게 바꿈 width: 15px; height: 15px; background-color: gray; border-radius: 50%; animation: loading 1s linear infinite; //@keyframes 적용 } .loading.. 2022. 5. 8.
[2주차] jQuery Basics & Method 💡jQuery 링크하기 📌방식 1 마감 body tag 바로 위에 jQuery 오픈소스 파일과 내가 만드는 파일을 링크하기 이때, 오픈소스 파일이 내가 작성한 파일보다 항상 위에 있어야 한다. 📌방식 2 htmld의 head 부분에 태그를 포함하기 💡jQuery 기본 구문 만들기, 선택자 📌기본 구문 $('선택자').함수(function(){ 실행 구문; }); 📌선택자(selector)의 종류 CSS 클래스 선택자 CSS 아이디 선택자 CSS 태그 선택자 this 📌필수 함수(function) 종류 click mouseenter mouseleave 📌필수 메서드(method) 종류 slideDown() slideUp() stop() show() hide() fadeIn() fadeout() addCla.. 2022. 5. 5.
[1주차] Basic HTML & CSS Overview 💡HTML5 핵심 태그 사용법(문단, 텍스트 서식) 제목 표시하기: h1~h6 문단, 줄 바꿈: p, br 글자 굵게 표시하기: b, strong 글자 기울림 표시하기: em, i 글자 밑줄 표시하기: u 글자 취소선 표시하기: s, del 큰 글자, 작은 글자 표시하기: big, small 위 첨자, 아래 첨자: sup, sub 형광펜 배경색 글자: mark 수평선 넣기: hr html은 대소문자 구분을 하지 않는다. 💡목록 만들기 순서가 있는 목록: ol(ordered list) > li 순서가 없는 목록: ul(unordered list) > li 중첩된 목록을 만드는 경우에는 부모 리스트의 마감 태그 안쪽에 중첩된 자식 리스트를 작성해야 한다. 방콕 쇼핑 리스트 방콕에서 반드시 들러야 할 베스트 .. 2022. 5. 5.

티스토리툴바