전체 글37 var, let, const 차이점 비교 한 눈에 확인하기 var, let, const 비교 var let const 변수명 중복 O X X 호이스팅 O X X 재할당 O O X 변수 선언 후 할당 O O X 변수명 중복 호이스팅 재할당 변수 선언 후 할당 2023. 12. 4. 반응형 웹을 만드는 주요 기술 중 하나 '미디어 쿼리(media query)' 반응형 웹 웹브라우저의 크기, 접속하는 기기 등등 상태에 따라 웹페이지가 반응하여 변경하는 것 이러한 반응형 웹을 만드는 주요 기술 중 하나가 미디어 쿼리(media query) 이다. 뷰포트(viewport) 웹 페이지가 접속한 기기에서 보이는 실제 영역의 크기 vscode의 빈 파일에 ! 로 html의 기본 틀을 만들 수 있는데, 중간에 보이는 meta 태그의 viewport가 접속하는 기기마다 뷰포트를 최적화해준다. content="width=device-width" 이 부분이 뷰포트의 넓이를 접속하는 기기 넓이로 최적화한다. ⭐️ 최소한 width, initial-scale 을 사용해줘야 다양한 기기에서 최적화된 화면을 보여줄 수 있다 ⭐️ 미디어 쿼리 사용하기 @media only|not 미디어.. 2023. 11. 30. 구글 폰트(Google Fonts) 사용법 ⬇ 구글 폰트에서 원하는 글꼴 찾기 ⬇ Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 사용한 글꼴 : Inconsolata @import 로 글꼴 적용하기 ⭐️ import 부분은 반드시 style 태그의 최상단에 위치해야 함 ⭐️ Welcome, Ellie Programming World Ellie Trip World 도 놀러오세요 Ellie Trip World 바로가기 HTML 삽입 미리보기할 수 없는 소스 로 글꼴 적용하기 Welcome, Ellie Programming World Ellie Trip World 도 놀러오세요 Ellie Tr.. 2023. 11. 29. 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. 이전 1 2 3 4 5 다음 반응형
