공부/Html OR CSS
-
[HTML/CSS] CSS Sass(Syntactically Awesome Stylesheets)란?공부/Html OR CSS 2024. 1. 20. 20:57
1. 정의 CSS의 확장된 버전으로, 스타일 시트를 더 효율적으로 작성할 수 있게 해주는 스타일 시트 언어 2. 기본 문법 변수 (Variables) 문법을 이용하면 다음과 같은 형태로 변수를 생성해서 사용가능하다. $primary-color: #3498db; $font-size: 16px; body { background-color: $primary-color; font-size: $font-size; } 중첩 규칙(Nesting)을 사용하면 시각적으로 부모-자식관계를 확인하기 편해 가독성이 좋은 CSS를 작성가능하다. nav { ul { margin: 0; padding: 0; list-style: none; li { display: inline-block; margin-right: 10px; a {..
-
[HTML/CSS] Shadow DOM (쉐도우 돔) 이용한 디자인공부/Html OR CSS 2024. 1. 17. 20:53
1. Shadow DOM 웹 요소의 스타일과 구조를 캡슐화하기 위해 사용하는 기술 *캡슐화 : 외부로 부터 웹요소를 보호하고 독립적으로 유지하기 위해 DOM으로 감싼 과정을 의미 2. 왜 쓰는걸까? DOM API는 자체적으로 캡슐화를 지원하지 않는다. 즉, 캡슐화를 하지않으면 다른 요소간 겹쳐서 충돌이 발생할 수도 있다는 점이 있어 이를 개선하기 위해? 사용하는것 같다. Shadow DOM을 이용하면 외부 스타일과 격리되기 때문에 컴포넌트 내부에서 스타일을 정의하고 보수가 가능하다. 3. 기타 용어 Shadow host : shadow DOM이 부착되는 일반적인 DOM 노드 Shadow tree : shadow DOM 내부의 DOM 트리 Shadow boundary : shadow DOM이 끝나고, 일반..
-
[HTML/CSS] 컨텐츠 요소 가운데 정렬하는 방법공부/Html OR CSS 2024. 1. 13. 20:38
1. Margin을 이용해서 수평 가운데 정렬하기 //수평 가운데 정렬 display: block; margin-top: 30px; margin-left: auto; margin-right: auto; 2. text-align 속성을 이용한 가운데 정렬 (인라인 요소 정렬) .center { text-align: center; } /* */ 3. Flexbox 속성을 이용한 가운데 정렬 display flex 속성을 사용하면 여러 상황에서 중앙 정렬이 매우 편리하다. .container { display: flex; justify-content: center; align-items: center; } 4. div 요소 안의 div 가운데 정렬 .outbox{ text-align: center; } .in..
-
[HTML/CSS] 기존 CSS 파일(속성) 수정하기공부/Html OR CSS 2024. 1. 13. 18:56
기존의 레거시 코드를 수정할 때 원본파일을 건들지 못하는 경우 같은 클래스명 하단에 쓰기 우선순위 높이기 Specificity(특이성) 다음과 같은 방법을 택해서 수정하게된다. (1). 같은 클래스 명 하단에 쓰기 같은 클래스명이라도 하단에 정의한 클래스 명/스타일을 우선 적용한다. 따라서 하단에 명시해서 수정하도록 한다. See the Pen Untitled by 익명계정 (@puwifgaj-the-vuer) on CodePen. (2). 우선 순위 높이기 해당 순으로 왼쪽부터 제일 우선순위가 낮다. tag
-
[HTML/CSS] Flex 속성(align-items,align-content,align-self, justify-content)공부/Html OR CSS 2024. 1. 13. 00:23
Flex : flexbox의 레이아웃을 설정하는데 사용하는 속성 1. flex-drirection : flex-item의 방향을 설정하는 옵션 ( 명시하지 않으면 기본적으로 row 배치다.) .container { flex-direction: row; /* 기본값, 아이템들이 수평으로 배치 */ /* flex-direction: column; */ /* 아이템들이 수직으로 배치 */ } 2. justify-content : flex-item을 정렬시키는 옵션 .container { justify-content: flex-start; /* 기본값, 시작 부분으로 정렬 */ /* justify-content: center : 가운데 정렬 */ /* justify-content: flex-end : 끝 부분으..
-
[HTML/CSS] 색상 그라이데이션 넣기 (linear-gradient)공부/Html OR CSS 2024. 1. 11. 01:50
linear-gradient : 그라데이션 색상을 넣고 싶을 때 사용하는 옵션이다. 1. 예시 background-image: linear-gradient(blue,pupple); 기본적으로 방향을 생략하면 to bottom이 적용된다. 따라서 위에서 부터 아래로 이어지는 형태로 색상이 만들어진다. 예시 2. background-image: linear-gradient(80deg, yellow 20% ,blue 80%); deg : 방향을 오른쪽으로 진행한다. (+인 경우) yellow 20% ,blue 80% : 노랑을 20% 지점까지 표시, 블루를 80% 지점부터 표시 예제3. background-image: linear-gradient(-45deg, green 20%, red 20% 50%, gre..
-
[HTML/CSS] overflow / overlay / opacity 속성공부/Html OR CSS 2024. 1. 9. 16:52
overflow : 요소내의 컨텐츠가 너무 커서 요소(상자)안에서 다 보여주기 힘들 때 그것을 어떻게 웹브라우저에서 보여줄지 지정하는 속성으로 응용하여 아래에서 차오르는 듯한 애니메이션 효과를 만들 수도 있다. 속성 visible : 내용이 박스를 벗어나도 가려지지 않고 전부 표시됨. hidden : 내용이 박스를 벗어나는 부분을 전부 가림 scroll : 내용이 박스를 벗어나면 스크롤 바가 생겨서 나머지 내용을 볼 수 있음 auto : 내용이 박스를 벗어나면 스크롤 바가 나타남 / 벗어나지 않으면 나타나지 않음 #예시 .testdiv { overflow: auto; } overlay : 요소 위에 나타나는 요소, 주로 애니메이션 이벤트에 사용되는 속성 (1번박스 위에 2번박스를 오버레이한다.) over..