반응형 쪄늬 블로그54 CSS 속성의 상속과 우선순위 적용 CSS 속성 상속가능과 불가능- 상속하는 속성은 자식에게 영향을 줌속성상속 가능width/heightnomargin/paddingnobordernobox-sizingnodisplaynovisibilityyesopactiyyesbackgroundnofont/coloryesline-heightyestext-alignyeswhite-spanceyespostionnooverflowno 상속되는 속성 자식에도 적용CSS Cascading- css를 사용하다보면 한 태그에 여러 스타일이 겹치는 경우가 발생하여 우선적용에 대해 결정하는 것을 캐스케이딩이라 함- 캐스케이딩에는 1. 스타일 우선순위 2. 명시도 3. 선언순서 세가지 규칙이 있음1. 스타일 우선순위 - css가 어디에 선언 되었는지에 따라 우선순위.. 2024. 11. 26. CSS 기초 CSS란?- Cascading Style Sheet의 약자로 HTML,XHML,XML같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어- 웹페이지를 꾸며주는 역할CSS 기본문법- 선택자{특성:값;}CSS 적용방식1) html요소의 style속성을 직접 작성하는 방식 직접 스타일을 작성 2) html의 3) 링크(link) 방식 4) @import 방식 2024. 11. 25. UIUX 기초용어(2/2) 브레드크럼 (Breadcrumbs)- 사이트의 이동 경로- 현재 사용자의 위치를 시각적으로 보여줌 텍스트 입력 필드 (Text Input Field)- 키보드로 직접 텍스트를 입력하는 공간 플레이스홀더 (Placeholder)- 사용자가 입력하기 전에 도움을 줄 수 있는 힌트를 input 박스 안에 표시- 사용자가 값을 입력하게 되면 힌트는 사라짐 스플래시 (Splash)- 모바일 앱을 접속할 때 로딩 되는 시간 동안 표시되는 화면- 일반적으로 로고 이미지나 애니메이션을 삽입 플로팅 버튼 (Floating Action Button)- 약자로 FAB라고 많이 불림- 앱의 핵심 부분을 호출할 수 있는 아이콘 형태- 특정 행동을 유도- 예시) 배달의 민족 장바구니 버튼 프로그레스 인디케이터 (Progress .. 2024. 11. 22. UIUX 기초용어(1/2) GNB / LNB / SNB / FNB1) GNB (Global Navigation Bar)- 글로벌 내비게이션으로 최 상단에 고정되어 있는 메뉴2) LNB (Local Navigation Bar)- 로컬 내비게이션으로 선택된 메뉴에 따라 선택적으로 표시하는 세부 내비게이션- GNB 하위 메뉴3) SNB (Side Navigation Bar)- 사이드 내비게이션으로 LNB의 한 종류이며 화면 한쪽 구석을 차지4) FNB (Footer Navigation Bar)- Footer에 해당되는 내비게이션으로 화면 최 하단에 위치Combo Box- 콤보박스는 "드롭다운리스트+입력필드"의 결합Drop-down List- 밑으로 쏟아지는 리스트 형태- 보통은 List Box라고 함Check Box / Radio Bu.. 2024. 11. 21. id & class 태그의 차이점 1. id 태그- 한 요소에만 사용이 가능- #으로 선택- 고유하게 전체 페이지에서 단 한가지에만 적용이 가능(고유 영역 식별자)- label과 input 컨트롤 연결 식별자- 표와 표 설명을 연결하기 위한 식별자 메인id 텍스트 표 설명 표 제목 2. class 태그- 여러 영역에서 중복 정의를 허용하여 재사용이 가능한 식별자- 동일한 값을 갖는 요소가 많음- .으로 선택 버튼 읽기 ... ... idclass#으로 선택.으로 선택고유하게 전체 페이지에서 단 한가지에.. 2024. 11. 18. div & p & span 태그의 차이점 비교 1. div & p & span 태그 설명▼ 태그- 태그는 body 문서 안에서 각 영역을 구분할 때 사용- block 요소- layer을 구분하거나 틀을 만들어주는 컨테이너 역할 ▼ 태그- 와 같이 block 요소- 같은 경우는 하위에 블록요소가 포함되지만 는 하위에 블록요소가 포함되어선 안됨 ▼ 태그- inline 요소 - HTML 문서 내에 자신에게 주어진 공간만 차지하는 태그 2. div & p & span 차이점 비교1) block / inline- , 는 block 요소로 가로줄 전체를 다 차지※ 는 문서태그이긴 하지만 영역을 나눌 때 주로 사용하며 를 문서 내용을 작성할 때 사용함- 은 inline 요소로 주어진 공간만 사용 2) 하위태그 포함 요소- 태그는 , 태그가 하위(자식.. 2024. 11. 15. 이전 1 2 3 4 ··· 9 다음 LIST
