본문 바로가기

CSS

(15)

[프론트엔드 입문] 스벅 랜딩페이지 PJT . Section(복습필요)_ Day+19~ 보호되어 있는 글입니다.

[프론트엔드 입문] 스벅 랜딩페이지 PJT . Badge 보호되어 있는 글입니다.

[프론트엔드 입문] 스벅 랜딩페이지 PJT . header _ Day+13~16 보호되어 있는 글입니다.

[프론트엔드 입문] 자바스크립트 JS Prev. _ Day+11 개요 1) 표기법 dash-case(kebab-case) snake_case camelCase ParvelCase dash-case(kebab-case) html css 에서 사용 the-quick-brown-fox-jumps-over-the-lazy-dog 컴퓨터는 이 문장을 그냥 하나의 단어로 읽지만, 이걸 보는 사람은 문장 띄어쓰기를 이해할 수 있음\ snake_case) html css 에서 사용 the_quick_brown_fox_jumps_over_the_lazy_dog camelCase JS (대부분 자바스크립트에서의 표기법) theQuickBrownFoxJumpsOverTheLazyDog PascalCase JS (new 생성자 사용 시 등의 특이상황에 사용) TheQuickBrownFox..

[프론트엔드 입문] CSS Properties 속성(3) - transition__Day+9 전환 transition: 속성명 지속시간 타이밍함수 대기시간; (단축형으로 작성 시, '지속시간' 속성은 필수 포함) (요소의 전환(시작과 끝) 효과를 지정하는 단축 속성) 1. transition-property (전환 효과를 사용할 속성이름을 지정) all : 모든 속성에 적용 속성이름 : 전환 효과를 사용할 속성 이름 명시 (e.g. 가로너비만 전환 효과 적용 희망 시→ width 명시) 2. transition-duration (전환 효과의 지속시간을 지정) 0s : 모든 속성에 적용 시간 : 지속시간(s)을 지정 3. transition-timing-function (전환 효과의 타이밍 함수(Easing function)를 지정) ease : 느리게-빠르게-느리게 = cubic-bezier(0..

[프론트엔드 입문] CSS Properties 속성(2) - position / flex 배치 1. position (요소의 위치 지정 기준, 모두 음수 사용 가능) → top, bottom, left, right, z-index static : 기준 없음 absolute : 위치 상 부모 요소를 기준 (부모요소 위치 꼭 확인! 위치상 부모요소여서, 부모요소에 위치가 꼭 들어있어야함. 없을 경우 뷰포트를 기준으로 적용됨. 부모요소에 position: relative; 입력. 위치상 부모요소보다 더 상위 부모요소에 기준 맞추고 싶으면, 직전 부모요소는 position: static;, 그 상위 부모요소에 position: relative; 적용해야 함. 적용할 수 없는 대상이 없게 되면 relative부모요소 > html body > html 뷰포트 로 기준 이동. 다른 아이템과 상호관계 신경..

[프론트엔드 입문] CSS Properties HTML 속성 : Attributes CSS 속성 : Properties JS 속성 : Properties 박스 모델 Font(size, weight), 문자 배경 (색상, 이미지) 배치 (위치) 플렉스 (위에서부터 아래로 쌓이는 레이아웃 외 여러 요소를 수평정렬할 때 사용하는 개념, 수평정렬만을 위한 띄움의 최신 기능) 전환 (이전상태에서 나중 상태로 자연스러운 애니메이션 처리하는 기능) 변환 (회전, 이동, 크기 조정 등 요소의 변화를 주는데, 2D변환과 3D 변환이 있음) 띄움 (CSS 이전에는 수평정렬에 플렉스 전에 띄움 사용, 요소를 공중에 띄우는 효과. 요소 주변에 여백 만들어주는, 사진 주변에 글자들이 떨어져서 자연스럽게 흐르는 구조를 만드는 기능) 애니메이션 (전환효과는 ①전 ②후 만 있다..

[프론트엔드 입문] 스타일 상속, 우선순위 Day+7 (3) 1. 스타일 상속 모든 글자/문자 관련 속성들! (모든 글자/문자 속성은 아님 주의) font-style : 글자 기울기 font-weight : 글자 두께 font-size : 글자 크기 line-height : 줄 높이 font-family : 폰트(서체) color : 글자 색상 text-align : 정렬 ... e.g. html 생태계 동물 호랑이 사자 식물 식물 css .animal { color: red; } 를 적용하면 '동물, 호랑이, 사자, 코끼리'에 모두 스타일 적용됨 ① 강제 상속 inherit html css : 의도적으로 자식요소 높이를 부모요소 높이와 동일하게 하고 싶을 때 inherit을 스타일 속성의 값에 작성 .parent { width: 300px; height: 200..

이전 1 2 다음

티스토리툴바