IHS_digital_nomad

https://wsss.tistory.com/1618 모바일 하단 탭 메뉴 스타일See the Pen Animated Tab Bar v.2 by abxlfazl khxrshidi (@abxlfazl) on CodePen. 모바일 하단 탭 메뉴 스타일wsss.tistory.com https://codepen.io/trending CodePenAn online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.codepen.io

CSS 우선순위 계산 1. 동일한 속성을 적용할 경우 나중에 적용한 것이 우선 2. 외부 스타일 시트와 내부 스타일 시트의 적용은 순서에 따라 나중에 적용한 것이 우선 3. 내부, 외부, 인라인 스타일 시트 중 인라인을 우선시 적용 4. 우선순위 계산 - inline: 1000점 - id: 100점 - class, 속성 선택자: 10점 - element: 1점 5. !important를 적용하면 0 순위 CSS 우선순위 #id-style { background-color: deeppink; } #id-style2 { background-color: deepskyblue; } div { display: block; padding: 30px; margin: 30px; background-color: gold..

z-index - HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠 수 있음 - 겹쳐지는 요소들이 쌓이는 순서를 결정할 때 z-index를 사용 - 순서는 숫자의 크기가 클수록 위에 위치하고 작을수록 아래 위치하게 됨 z-index div#wrapper { position: relative; } div.box { position: absolute; width: 200px; height: 200px; border: 1px solid black; font-size: 25px; } #b1 { left: 50px; top: 50px; background-color: deeppink; z-index: 100; } #b2 { left: 120px; top: 70px; background-col..

CSS 배경 background-color: HTML 요소의 배경색을 설정 ​background-image - HTML 요소의 배경으로 나타날 배경 이미지를 설정 - 배경 이미지는 기본 설정으로 반복되어 나타남 background-image: url(파일경로) background-repeat: 배경 이미지를 수평이나 수직 방향으로 반복라도록 설정(repeat-x, repeat-y, no-repeat) background-positon - 반복되지 않은 배경 이미지의 상대 위치를 설정 - %나 px을 사용하여 상대위치를 직접 설정할 수 있음 - 상대위치를 결정하는 기준은 윈쪽 상단 left top center top right top left center center right center left bot..

CSS(Cascading Style Sheets) 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 CSS 문법 HTML 문법 사이에 요소를 사용하여 적용하는 방법 3. 외부 스타일 웹사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 적용하는 방법 ✔rel: 현재 문서와 링크된 문서 사이의 연관관계를 명시 선택자 1. 전체 선택자 - 스타일을 모든 요소에 적용 - * 기호를 사용해서 표현 - 너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있음 - 개별적으로 적용한 스타일은 전체 선택자에 적용한 스타일보다 우선순위가 높음 * {속성명1: 속성값; 속성명2: 속성값; ...} 2. 요소 선택자 - 특정 요소가 쓰인 모든 요소에..