CSS5

• [쿠키 및 CSS 보안 설정] 외부 침입자를 막기 위한 방법 1. CSS를 이용한 보안 문제CSS 인젝션CSS 인젝션 공격은 공격자가 악성 CSS 코드를 삽입하여 웹 애플리케이션의 디자인을 조작하거나 사용자 데이터를 노출할 수 있는 공격입니다.예방 방법:사용자 입력 검증: 사용자 입력이 CSS 코드로 해석되지 않도록 항상 검증하고 필터링합니다.CSS 파일의 정적 로딩: 가능한 한 사용자로부터 직접 CSS를 받아서 처리하지 않도록 하세요. 정적 CSS 파일을 사용하는 것이 좋습니다.콘텐츠 보안 정책 (CSP): CSP를 설정하여 외부 CSS를 포함시키지 않도록 제한할 수 있습니다. 2. 쿠키 관련 보안 문제쿠키 변조사용자가 쿠키 값을 조작하여 애플리케이션의 보안에 영향을 줄 수 있습니다.예방 방법:쿠키 암호화: 쿠키 값을 암호화하여 클라이언트 측에서 변조되더라도 의.. 코딩ㆍ개발 정보/HTML 연습 2024. 8. 29.

• [CSS] Position: Relative - Absolute 다중 구성 처리 방법 스타일링을 할 때, 여러 레벨의 컨테이너와 서브 요소가 포함된 경우, 상대적(position: relative) 및 절대적(position: absolute) 위치를 설정하여 원하는 레이아웃을 만들 수 있습니다. 예시를 통해 이를 설명해보겠습니다. 우선, HTML 구조를 가정해봅시다: 내용  위의 구조를 가지고 SASS로 스타일을 잡아보겠습니다:.container { position: relative; .sub-container { position: absolute; top: 10px; // 원하는 위치 left: 10px; // 원하는 위치 .sub { position: relative; .sub-sub-c.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 31.

• [CSS] 스타일가이드에서 블록 단위 표현 웹 페이지의 스타일가이드를 만들려고 하는데, 블럭 단위로 만들어서, 필요한 부분에 레고 블록 처럼 끼워 넣어 사용하고 싶어. 그러려면 이름이 중복이 되지 말아야 할텐데, 예를 들어보자면 표도 있고, 이미지도 있고, 텍스트도 있고, 본문도 있고, 제목도 있고, 인용도 있으면서 그리고 각각에 유형들도 몇가지 있다고 치면 어떤 규칙을 가지는게 좋을까? 설명해주고, 예를 들어줘 스타일 가이드를 블록 단위로 만들어서 레고 블록처럼 재사용하려는 접근은 훌륭한 생각입니다. 이를 위해 각 블록에 고유한 이름을 부여하는 명명 규칙이 중요합니다. 다음은 명명 규칙을 제안하고, 이러한 규칙을 통해 스타일 가이드를 구성하는 방법을 설명하겠습니다.명명 규칙접두어 사용:각 블록 유형에 접두어를 사용하여 블록의 목적을 명확히 합니.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 25.

• [CSS] position 속성 예제 position을 사용하는 방법에 대해서 예를 들어 설명해줘 CSS에서 position 속성은 요소의 위치를 제어하는 데 사용됩니다. 이 속성에는 여러 값이 있으며, 각 값에 따라 요소의 배치 방식이 달라집니다. 아래는 각 position 값에 대한 설명과 예제입니다. 1. static기본값입니다. 요소는 문서의 정상적인 흐름에 따라 배치됩니다. 특별한 위치 지정이 필요 없는 경우에 사용됩니다.This is a static box. 2. relative:     요소는 문서의 정상적인 흐름에 따라 배치되지만, top, right, bottom, left 속성을 사용하여 자신의 원래 위치를 기준으로 이동할 수 있습니다.This is a relative box. 3. absolute:     요소는 문서의 .. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 25.

• [CSS] em, ex, small, smaller 기준 1. em과 ex의 사이즈 계산 기준em:em은 요소의 폰트 사이즈를 기준으로 상대적인 크기를 나타냅니다. 예를 들어, 부모 요소의 폰트 사이즈가 16px일 때, 자식 요소에서 1em은 16px, 2em은 32px이 됩니다.em은 상속됩니다. 즉, 부모 요소의 폰트 사이즈를 기준으로 자식 요소에서 em의 크기가 결정됩니다.ex:ex는 소문자 x의 높이를 기준으로 한 상대적인 크기입니다. 폰트의 x-height는 폰트에 따라 다르며, 일반적으로 폰트의 크기의 약 절반 정도가 됩니다. 하지만 폰트에 따라 다를 수 있기 때문에 폰트마다 ex의 실제 크기가 다를 수 있습니다.2. em 또는 ex의 기준이 되는 사이즈 변경 방법CSS를 사용한 변경:em과 ex의 기준은 폰트 사이즈에 따라 달라지므로, 폰트 사이즈.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 23.