강의30 패스트캠퍼스 챌린지 6일차 - Part 1. CSS 개요(2) 5. 선택자 _가상 클래스(1) 동작을 나타내는 가상 클래스 선택자 ABC:hover : 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택. .box{ width: 100px; height: 100px; background-color: orange; transition: 1s; } .box:hover{ width: 300px; background-color: royalblue; } input{ } input:focus{ background-color: orange; } ABC:active : 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택. ABC:focus : 선택자 ABC 요소가 포커스되면 선택. (포커스가 가능한 요소만 가능) 포커스가 가능한 요소만 가능. 포커스가 가능하지 않은 요.. 2023. 2. 25. 패스트캠퍼스 챌린지 5일차 - Part 1. CSS 개요(1) 1. 기본 문법, 주석 선택자 { 속성 : 값; } 주석 /* 설명 작성 */ div{ font-size: 50px; color: blue; text-decoration: underline; } /* 주석 */ 2. 선언 방식 내장 방식 : 의 내용으로 스타일 작성 (head 내에) 유지보수 측면 단점 인라인 방식 : 요소의 style 속성에 직접 스타일을 작성하는 방식 css 우선순위가 높기 때문에 유지보수에 악영향 링크 방식 import 방식 @import url("./box.css"); CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식 앞서 연결된 파일이 먼저 해석이 끝나야 연결되므로 연결을 지연시킴. 링크 - 병렬 (빨리 해석이 끝난 파일 먼저 연결) import - 직렬 (순서대로.. 2023. 2. 24. 패스트캠퍼스 챌린지 4일차 - Part 1. HTML 핵심 정리 1. 핵심 요소 정리 : 특별한 의미 없는 구분 위한 블록 요소. (Division) : 제목 의미하는 블록 요소. 숫자가 작을수록 더 중요한 제목 의미. (Heading) : 문장을 의미하는 블록 요소. (Paragraph) : 이미지 삽입하는 인라인 요소. (Image) : 순서가 필요없는 목록의 집합. (Unordered List) : 목록 내 항목. (List Item) : 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소. (Anchor) : 특별한 의미 없는 구분 위한 인라인 요소. 글자 범위 잡을 때 많이 사용. : 줄바꿈 요소. (Break) : 사용자가 데이터 입력하는 요소. 인라인 요소이자 블록 요소. 베이스는 인라인 요소인데 사이즈 지정 가능한 블록 요소의 특징도 가짐. type.. 2023. 2. 23. 패스트캠퍼스 챌린지 3일차 - Part 1. 웹에서 시작하기 / HTML 개요 1) 웹에서 시작하기 1. Codepen.io 소개 코드 새로 열 필요 없이 쉽게 테스트해볼 수 있음. HTML에 바로 태그에 있는 내용만 쓰면 됨. CSS, JS 연결 필요 없이 바로 쓰면 적용 됨. 2. 브라우저 스타일 초기화 body 부분에 생기는 margin. 하지만 이런 기본적인 스타일은 브라우저마다 다르게 나타날 수 있어서 초기화해주는 것이 좋음. reset.css cdn 검색 - 파일명.min.css(경량화버전) 코드 복사 https://www.jsdelivr.com/package/npm/reset-css * 내 css파일 연결보다 앞에 쓰기 3. Emmet HTML과 CSS를 빠르게 단축시켜주는 확장 기능. 태그 이름만 명시하고 tab키 누르면 자동완성되는 기능도 여기 포함되어 있음. CS.. 2023. 2. 22. 이전 1 ··· 4 5 6 7 8 다음
