HTML + CSS + 자바스크립트18 animation-fill-mode 속성값으로 애니메이션 실행 전 후 스타일 지정하기 animation-fill-mode: 속성값 ✔️ none ✔️ forwards ✔️ backwards ✔️ both ⭐️ 속성값이 달라지는 부분 ⭐️ animation-fill-mode: none ☑️ 시작지점(0%, from) 스타일(blueviolet) 적용하지 않고 대기 ☑️ 지연 시간동안도 원래 스타일(red)을 유지 ☑️ 실행 완료 후에는 원래 스타일(red)로 돌아감 animation-fill-mode: forwards ☑️ 시작지점(0%, from) 스타일(blueviolet) 적용하지 않고 대기 ☑️ 지연 시간동안도 원래 스타일(red)을 유지 ☑️ 실행 완료 후에는 종료시점(100%, to)의 스타일(green)을 적용하고 대기 animation-fill-mode: backwards ☑.. 2023. 11. 29. 다양한 transition-timing-function 속성값으로 전환 효과 진행 속도 지정하기 linear ease ease-in ease-out ease-in-out 2023. 11. 29. 다양한 border-style 속성값 활용하기 none hidden solid double dotted dashed groove ridge inset outset 2023. 11. 28. CSS 적용 우선 순위에 따라 결과가 달라진다 : 개별성 규칙 CSS 적용 우선 순위와 개별성 ✔️ 개별성 규칙의 점수 총합에 따라 최종적으로 html 요소에 적용될 css 스타일이 결정됨 See the Pen 적용 우선 순위와 개별성 순위 by Ellie-Kang (@xtvhavvj-the-builder) on CodePen. ✔️ 같은 대상에 속성을 적용 할 경우, 중복되는 속성에 한해서는 개별성 점수가 높은 쪽을 따라감 See the Pen 적용 우선 순위와 개별성 같은 대상 by Ellie-Kang (@xtvhavvj-the-builder) on CodePen. ✔️ 점수가 같을 경우, 나중에 작성된 css 코드가 적용됨 See the Pen 적용 우선 순위와 개별성 by Ellie-Kang (@xtvhavvj-the-builder) on CodePen. 개.. 2023. 11. 28. 가상 클래스 선택자가 뭐지?? 가상 클래스 선택자 요소의 상태를 이용해 선택자를 지정하는 방법 ✔️ 가상 클래스 선택자 앞에는 : 기호 붙임 기준 요소:가상 클래스 선택자{ CSS 코드 } 링크 가상 클래스 선택자 a태그에서 발생할 수 있는 링크 상태를 이용해 선택하는 방법 :link 한 번도 방문하지 않은 링크 :visited 한 번이라도 방문한 적 있는 링크 See the Pen 링크 가상 클래스 by Ellie-Kang (@xtvhavvj-the-builder) on CodePen. 동적 가상 클래스 선택자 사용자의 어떤 행동에 따라 동적으로 변하는 상태를 이용해 선택하는 방법 :hover 특정 요소에 마우스를 올렸을 때 :active 마우스 왼쪽 버튼을 누르고 있는 동안 See the Pen Untitled by Ellie-K.. 2023. 11. 27. HTML 많이 사용하는 input 태그의 type 속성값 text 한 줄 텍스트 입력 password 비밀번호 입력 url URL 주소 형식 입력 search 검색용 텍스트 입력 checkbox 체크박스 radio 라디오버튼 file 파일 업로드 image 이미지 버튼 src 속성 사용해야 함 hidden 사용자 눈에 보이지 않음 date 날짜(연, 월, 일) 선택 2023. 11. 23. HTML 필수 태그 : 텍스트, 그룹, 목록, 링크, 이미지, 텍스트 강조 텍스트 관련 태그 hn 태그 제목이나 주제와 같은 성격의 텍스트를 작성할 때 사용 h1 - h6 (⭐️ 중요도에 따라 구분) 블록 요소 실무에서는 상대적으로 h1 - h4 태그까지 자주 사용 hn 태그로 작성된 텍스트는 검색 엔진에서 키워드로 인식 (검색 엔진 최적화를 위해서 본문의 핵심이 되는 제목이나 주제를 잘 선택해서 작성해야함) 보통 하나의 HTML 확장자 파일 안에서는 h1 태그는 한 번만 사용하는 것을 권장 p 태그 단락(문단, 문장)을 구성할 때 사용 블록 요소 br 태그 줄바꿈을 할 때 사용 콘텐츠가 없는 문법 blockquote 태그 인용문을 작성할 때 사용 문장, 문단 단위로 긴 내용을 인용할 때 블록 요소 ➕ cite 속성 사용 가능 (cite="출처 URL") q 태그 문장 단위의 .. 2023. 11. 22. HTML에서 주석을 조심해서 써야하는 이유 코드에 주석으로 작성하고 👀 Live Server로 웹 브라우저를 보면 아무것도 표시되지 않는다하지만개발자 도구나 검사 혹은 ⚒️ 개발자 도구 열기 : (mac 기준) option + command + I페이지 소스 보기 페이지에서는주석 내용을 모두 볼 수 있다그러니 반드시주석에는 보안상 중요한 내용을 넣으면 안된다 ❌ 2023. 11. 21. HTML 기본 구조 알아보기 나의 첫 번째 웹 페이지! DTD 문서형 정리 HTML5 문서 형식으로 해석 html 태그 HTML 문서의 시작과 끝 모든 태그는 html 태그 안에 콘테츠로서 작성해야함 head 태그 문서 정보 정의 즉, HTML 문서의 메타데이터 정의 영역 웹 브라우저 직접 노출 ❌ meta, title, link 등 문자열, 문서 제목, CSS, 자바스크립트 참조 경로 등을 정의 (⭐️ 메타데이터 : HTML 문서에 대한 정보) 👀 viewport 👀 반응형 웹페이지에서는 필수 ✨ title 태그 ✨ 생략 불가능 반드시 1개 중복되지 않도록 주의 title 태그를 사용하지 않았을 경우, 웹브라우저는 해당 HTML문서를 웹페이지로 인식하지 않음 2023. 11. 21. 이전 1 2 다음 반응형
