반응형 HTML & CSS12 [CSS] 부모의 Opacity설정 무시하기 부모 요소에 opacity(불투명도) CSS속성이 적용되어있을때, 자식요소 또한 영향을 받게 된다. HTML 삽입 미리보기할 수 없는 소스 테스트를 해보면 알겠지만, 자식요소에 opacity를 별도로 주어도, 부모요소로 인해 적용된 불투명도를 무시할수는 없다. 이때, 부모요소의 opacity를 삭제하게되면 문제가 해결된다. 부모요소에 불투명도를 적용하는 방법이 꼭 opacity만 있는것은 아니니, rgba()색상값을 통해 불투명도를 적용하게 되면 문제가 해결된다는 의미이다. 코드의 예시와 그 결과는 아래와 같다. HTML 삽입 미리보기할 수 없는 소스 2023. 5. 26. [CSS] 애니메이션 주기, cubic-bezier 자연스러운 애니메이션을 주기 위해 방법을 모색하던 중 cubic-bezier이라는 개념을 발견하게 되었다. 그에 대한 내용을 담은 많은 포스팅 가운데에 본인 기준으로 하여 가장 이해가 쉬웠던 게시글을 아래 참조하였다. https://kutar37.tistory.com/entry/CSS-cubic-bezier%EB%9E%80 CSS : cubic-bezier란? cubic-bezier란?cubic-bezier() function은 CSS에서 transition 속성 혹은 transition-timing-function 속성에서 전환 시작과 끝까지의 효과를 제어하는데 쓰인다. #target{transition: all 0.5s cubic-bezier(0.25, 0.25, 0.75, 0.75);}Colo ku.. 2023. 3. 13. [CSS] padding 사용 시, 부모 벗어나는 문제 padding을 사용하게 되면 간혹 해당 스타일을 부여한 요소가 부모요소를 벗어나는 상황이 발생하곤 한다. 타 블로그에서 원인에 대해 설명하는 바로는 다음과 같다.자식 요소에 위치값이나 크기(%)를 주면,부모를 벗어나는 경우가 있다. - 부모 요소에 있는 padding 때문에부모를 벗어날 수 있다.이 부분을 해결하기 위해, padding을 부여한 자식 요소에 box-sizing: border-box; 속성을 추가로 부여한다면 간단히 문제를 해결할 수 있다. 이 게시글은 아래의 블로그 포스팅을 참고하여 작성되었다.https://dewworld27.tistory.com/entry/padding-%EB%B6%80%EB%AA%A8-%EB%B2%97%EC%96%B4%EB%82%A8-%EC%82%AC%EC%9D%.. 2023. 3. 13. [CSS] 그라데이션 버튼 생성 그라데이션 버튼을 만들어주는 사이트를 통해 손쉽게 button요소에 그라데이션 속성을 추가할 수 있다. https://www.colorzilla.com/gradient-editor/ Ultimate CSS Gradient Generator from ColorZilla A powerful Photoshop-like CSS gradient editor www.colorzilla.com 1: 기본 그라데이션 스타일(색상 등)을 선택할 수 있다. 2: 그라데이션의 방향을 지정할 수 있다. 3: 그라데이션 point를 설정할 수 있으며, 각 point별로 색상과 불투명도 등을 정의 할 수 있다. 4: text박스의 내용을 copy하여 버튼요소에 css를 적용하면 해당 그라데이션 스타일이 적용된 버튼요소를 생성할 .. 2022. 11. 21. [CSS] 문자열 선택자 해당 게시글은 css 선택자를 조금 더 구체적으로 명시할 수 있는 방법에 대한 내용을 다루었다. id, class, 요소명 등으로 선택하는 방법 외에 "특정 문자열을 포함하거나, 특정 문자열을 포함한 요소를 제외한"등의 조건을 제시하여 선택할 수 있다. 목차는 다음과 같다. 1. 특정 문자열을 포함하는 요소 1) 대소문자 구분 O 2) 대소문자 구분 X 2. 특정 속성을 가진 요소 3. 다중 문자열을 포함하는 요소 4. 특정 속성을 가지지 않은 요소 1. 특정 문자열을 포함하는 요소 1) 대소문자 구분 O 특정 요소를 선택하기에 앞서 대략적으로 아래와 같은 요소들을 포함하는 html문서가 있다고 가정해보자. 소개말 섹션1 섹션2 섹션3 /* 사용 방법 */ [속성명*='검색할 문자열'] /* 예시1. 클.. 2022. 9. 29. [CSS] 상대경로, 절대경로 작업을 진행하다보니 CSS에 사용하고자 하는 이미지의 경로를 작성해주어야하는 일이 발생하였다. 이때, 경로를 작성하는 방법에 대해 정확히 알지 못해 필요한 이미지 소스를 참조하지 못하는 경우가 생겼다. 이런 경우를 방지할 목적으로 해당 포스팅을 작성한다. 우선 절대경로와 상대경로의 대략적인 의미는 아래와 같다. 경로 작성 방법을 간단히 정리하면 아래와 같다. 1. 폴더명 뒤에 슬레쉬(/)를 붙여 구분한다. 2. 참조하려는 소스와 작업중인 파일이 동일한 디렉토리에 있다면, 소스명 만으로 참조가 가능하다. 3. 참조하려는 소스가 상위폴더에 있다면 구분자(../)를 통해 상위 디렉토리를 의미할 수 있다. 이때 구분자는 연달아서 작성 가능하다. 아래에 해당 참고한 블로그 링크를 통해 더 자세한 내용을 확인할 수.. 2022. 9. 27. 이전 1 2 다음 반응형
