목록css (14)

개발을 해라

패스트캠퍼스 - 프론트엔드 종합반 Ch8. CSS 속성 정리

01강~10강까지 정리 박스모델 태그의 경우, 대표적인 인라인 요소! 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도 글자를 쓸 경우, 너비는 콘텐츠의 크기만큼 자동으로 늘어나며 그 이상으로 늘어나지 않는다. 높이의 경우 콘텐츠의 크기만큼 늘어나며 그 이상으로 늘어나지 않는다. 레이아웃을 작업하는 용도가 아니라 글자를 제어하는 용도이므로 인라인 요소는 가로, 세로 사이즈를 본질적으로 구현할 수 없다. 태그의 경우, 대표적인 블록 요소! 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도 글자를 쓸 경우, 너비는 부모의 요소 크기 만큼 자동으로 늘어난다.(최대한 늘어날 수 있는 구조만큼 늘어난다) 높이의 경우 콘텐츠의 크기만큼 늘어나며 그 이상으로 늘어나지 않는다. max-wi..
⛳️ 패스트캠퍼스 2023. 2. 18. 16:57
패스트캠퍼스 - 프론트엔드 종합반 CH 7. 선택자, 가상클래스 선택자 우선순위 정리

CSS 선택자 * { } - 모든 요소를 선택 ABC { } - 태그 이름이 ABC인 요소를 선택. .ABC { } - class 속성의 값이 ABC인 요소 선택. #ABC { } - id 속성의 값이 ABC인 요소 선택. ABCXYZ { } - 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택 ABC > XYZ { } - 선택자 ABC의 자식 요소 XYZ 선택. ABC XYZ { } - 선택자 ABC의 하위 요소 XYZ선택. '띄어쓰기'가 선택자의 기호! ABC + XYZ { } - 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택 ABC ~ XYZ { } - 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택. CSS 가상 클래스 선택자 ABC:hover { } - 선택자 ABC 요소에 마우스 커..
⛳️ 패스트캠퍼스 2023. 2. 16. 15:53
패스트캠퍼스 - 프론트엔드 종합반 CH 7. CSS 개요 - 선언 방식 정리

CSS 선언 방식은 총 4가지로 나뉜다. 1. 내장 방식 - 위의 코드 처럼 의 내용으로 스타일을 작성하는 방식 2. 인라인 방식 - 위의 코드처럼 요소의 style 속성에 직접 스타일을 작성하는 방식(선택자 없음) - 유지보수가 힘들다. 3. 링크 방식 - 위의 코드처럼 로 외부 CSS문서를 가져와서 연결하는 방식 - 이렇게 보게된다면 해당 연결은 병렬연결임을 알 수 있다. 4. @import 방식 여기서 main.css 파일은 @import url("./box.css"); div { color: red; margin: 20px; } - CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식 여기서 box.css파일은 .box { background-color:..
⛳️ 패스트캠퍼스 2023. 2. 13. 21:38
CSS - transition 정리(인프런 강의)

transition - 위화감 최소화하면서 UI의 퀄리티를 높여준다. transition-property - 어떤 속성(property)에 transtition을 적용할 건지 지정한다. 예) transition-property: color, transform transition-duration - transition에 걸리는 시간을 지정한다 예) transition-duration: 0.2s transition-timing-function - transition의 속도 패턴을 지정한다. 예) transition-duration: ease-in-out / linear / ease / ease-in / ease-out transition-delay - transition 요청을 받은 후, 실제로 실행되기까지..
🥁 CSS 2023. 2. 6. 16:59
패스트캠퍼스 - 프론트엔드 종합반 CH.4 웹에서 시작하기

01. codepen.io 소개 VSCode에서 프로젝트를 구성하는 불편함 없이 간단한 코드를 테스트할 때는 Codepen.io에서 코드만 작성하는 방법이 있다. 02. 브라우저 스타일 초기화 google에서 reset.css cdn이라 검색해 나오는 사이트에서 링크 복사 후 link태그 href에 붙여 넣는다. 이렇게 되면 브라우저에서 기본 제공하는 스타일이 사라지게 된다. *알아두면 좋은 것 파일명.min.확장자 -> min(Minify의 약어) 키워드는 파일이 난독화나 경령화 되었다는 것을 의미한다. 03. Emmet 태그 이름만 명시 후 tab키를 누르면 emmet의 도움으로 자동완성된다. *예시) w:200 -> width:200px; bc:orange -> background-color: or..
⛳️ 패스트캠퍼스 2023. 1. 30. 15:50
CSS - 웹폰트 적용 및 폰트 속성 정리

웹폰트 적용 방법은 2가지 1. 폰트파일을 직접 다운 받아 적용한다. @font-face를 이용한다. 확장자명은 woff/woff2/ttf/eot 등이 있으며 CSS파일에서 @font-face를 이용해 폰트 파일을 불러온다. 2. 외부 서비스에서 제공받은 링크 이용한다. @import 혹은 이용한다. 구글폰트에 접속해 원하는 폰트를 찾으면 된다. @import를 통해서 url불러 온 다음에 적용시킬 태그에 font-family를 입력해준다. @import와 font-family의 경우 구글 폰트에서 복사하면 된다. 폰트 속성 font-size : 폰트 텍스트 크기를 지정한다. font-weight : 텍스트의 두께 지정 text-decoration : underline -> 텍스트에 장식용 선 추가 (l..
🥁 CSS 2023. 1. 22. 01:29
이전 Prev 1 2 3 Next 다음