![]()
사용자 인터페이스 사용자가 요소의 크기나 아웃라인 등을 마음대로 변경 가능 사용자 인터페이스를 위해 제공되는 속성 resize 사용자가 해당 요소의 높이나 너비를 변경 resize 속성이 설정된 요소에는 오른쪽 하단에 크기 조절 핸들 생성 핸들을 마우스로 드래그해서 사용자가 직접 요소의 크기를 조절 가능 outline-offset 해당 요소의 테두리(border)와 아웃라인(outline) 사이에 공간(offset)을 추가 아웃라인(outline)과 테두리(border)의 차이 아웃라인은 테두리의 바깥쪽에서 요소를 둘러싸고 있는 라인 아웃라인은 HTML 요소의 크기에 포함되지 않음 아웃라인은 사각형이 아닐 수도 있음 box-sizing css 테두리 영역의 크기 결정 box-box 지정한 CSS widt..
![]()
float 속성을 이용하여 버튼으로 메뉴 버튼 태그 뿐만 아니라 태그와 태그로도 만들 수 있음 button 타입의 input 요소에서 내부에 표시될 문자열은 value 속성값으로 설정 가능 button 태그 a 태그 transition-duration 속성 : 배경색과 글자의 색상까지 변경 box-shadow 속성 : 버튼에 실제와 같은 그림자 효과를 간단히 설정 disabled 속성 : 버튼을 사용하지 못함 반투명하게 보이며, cursor 속성의 속성값을 not-allowed로 설정하면, 사용이 금지된 버튼을 더욱 그럴싸하게 표현 가능 float 속성 : 버튼으로 메뉴 제작 등등 다양한 버튼 제작 가능! https://www.tcpschool.com/css/css3_expand_buttons
![]()
변형(Transform) HTML 요소의 동작, 회전, 크기 변경, 기울기 조절 2D 변형(transform)과 3D 변형(transform) CSS 좌표 체계 기준점 :브라우저의 왼쪽 상단 Z축은 : 입체적인 방향, 모니터를 바라보는 방향을 가리키는 좌표축 2D 변형(transform) 2D transform 속성 transform 요소에 2D 또는 3D 변형(transform) 적용 transform-origin 요소에 변형(transform)을 적용하는 변환 중심 설정 2D transform 메소드 translate() 현재 위치에서 해당 요소를 주어진 x축과 y축의 거리만큼 이동 주어진 거리가 양수이면 해당 축의 양의 방향으로, 음수이면 해당 축의 음의 방향으로 이동 matrix(n,n,n,n,n..
![]()
CSS 링크 link 링크의 기본 상태 사용자가 아직 한 번도 해당 링크를 통해 연결된 페이지를 방문하지 않은 상태입니다. visited 사용자가 한 번이라도 해당 링크를 통해 연결된 페이지를 방문한 상태. hover 사용자의 마우스 커서가 링크 위에 올라가 있는 상태 active 사용자가 마우스로 링크를 클릭하고 있는 상태 focus 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태 CSS 리스트 list-style 모든 list-style 속성을 이용한 스타일을 한 줄에 설정 list-style-type 리스트 요소의 마커(marker)를 설정 list-style-image 리스트 요소의 마커로 사용할 이미지를 설정 list-style-posi..
![]()
CSS 배경 background background 속성을 이용한 스타일을 한 줄에 설정 background-color 해당 HTML 요소의 배경색을 설정 background-image 해당 HTML 요소의 배경으로 나타날 배경 이미지를 설정 설정된 배경 이미지는 기본 설정으로 HTML 요소 전체에 걸쳐 반복되어 나타남 배경 이미지를 사용할 때에는 이미지가 본문의 텍스트를 방해하지 않도록 주의 하나의 요소에 여러 개의 배경 이미지를 설정 가능 각각의 배경 이미지는 쉼표(,)로 구분되며, 스택(stack)처럼 차례대로 쌓임 배경 이미지들 간의 순서는 가장 처음 명시된 이미지가 가장 위에 나타남 즉 가장 나중에 명시된 이미지가 가장 아래쪽에 위치 background-repeat 배경 이미지를 수평이나 수직 ..
![]()
그림자 효과 text-shadow 텍스트에 그림자 효과 그림자가 시작할 x축과 y축의 상대 위치를 명시하고, 그림자의 흐린 정도를 나타내는 blur 값을 명시 text-shadow: 그림자의x축값 그림자의y축값 blur값 색상값; box-shadow HTML 요소에 그림자 효과 그림자가 시작할 x축과 y축의 상대 위치를 명시하고, 그림자의 흐린 정도를 나타내는 blur 값을 명시 box-shadow: 그림자의x축값 그림자의y축값 blur값 색상값; https://www.tcpschool.com/css/css3_module_shadows
![]()
그래디언트 선형 그래디언트(linear gradients) 적용된 HTML 요소에 선형으로 그래디언트(gradient) 효과를 적용 최소한 두 개 이상의 색상 지정점이 필요 색상 지정점에는 그래디언트 효과로 그 사이의 색상 표현을 부드럽게 전환해주고 싶은 색상을 명시 가장 먼저 정의된 색상 지정점이 시작점이 되며, 그 후로는 마지막 지정점까지 차례대로 그래디언트 효과가 적용 background: linear-gradient(진행방향, 색상지정점1, 색상지정점2, ...); 진행방향 top, right, bottom, left 뿐만 아니라 대각선으로도 설정 가능 기본 진행 방향 : 위쪽에서 아래쪽으로 진행 각도로 명시하여 설정할 경우 기준 각도인 0도는 아래쪽에서 위쪽으로의 진행을 의미 각도가 양수일 때는..
![]()
조건부 그룹 at-규칙 공통 구문을 공유하고 그 각각은 중첩 문(규칙 집합(ruleset) 또는 중첩 @-규칙 중 하나)을 포함 모두 일반 semantic 의미를 전달 모두 언제라도 참 또는 거짓 중 하나로 평가하는 어떤 유형의 조건을 링크 -> 조건을 참으로 평가하면, 그룹 내 모든 문이 적용 됌 @규칙(at-rule) 식별자가 뒤따르는 at 기호('@' )로 시작하는 CSS문 세미콜론(';' ) 또는 다음 CSS 블록 중 먼저 오는 쪽까지 모든 것을 포함 @import 다른 스타일 시트에서 스타일 규칙을 가져올 수 있는 규칙 스타일 시트에 사용되는 문자 인코딩을 지정하는 @charset 규칙을 제외하고 모든 다른 규칙보다 앞서 명시 추가하는 CSS 파일의 개수가 늘어날수록 웹 서버의 부하도 같이 커지..
![]()
form 요소 CSS를 이용하면 사용자의 입력을 받는 input 요소에도 다양한 스타일을 설정 가능 [input 요소] 크기 설정 width 속성 [input 요소] 테두리 설정 border 속성 border-radius 속성 [input 요소] 배경색 적용 background-color 속성 color 속성 [(포커스를 가지고 있는) input 요소] 스타일 적용 :focus 선택자를 이용하여 해당 input 요소가 포커스를 가지고 있을 때의 스타일을 별도로 설정 [input 요소] 아이콘 / 이미지 삽입 background-image 속성 : 아이콘(icon)이나 이미지를 삽입 background-position 속성 : 아이콘이나 이미지가 나타날 위치를 설정 [textarea 요소] 크기 조절 re..
![]()
툴팁(tooltip) 효과 해당 요소에 마우스를 올리면 추가적인 정보가 나타나게 하는 효과 ex) visiblility 속성을 이용하여 툴팁 효과를 구현 CSS의 상대적 위치를 나타내는 top, right, bottom, left 속성을 이용하여 툴팁의 상대 위치를 설정 가능 ex) 툴팁이 해당 요소의 아래 쪽이 아닌 왼쪽에 나타나도록 구현 ex) 툴팁 말풍선 모양 https://www.tcpschool.com/css/css_advanced_tooltip
![]()
드롭다운(dropdown) 효과 해당 요소에 마우스를 올려서 다른 요소나 텍스트가 나타나게 하는 효과 display 속성을 이용하여 드롭다운 효과를 구현 사용자가 마우스를 올리면 나타날 요소의 display 속성값을 none으로 설정 처음에는 보이지 않지만 특정 요소에 마우스를 올리면 해당 요소의 display 속성값이 블록-으로 변경 되어 보이게 됌 드롭다운(Dropdown) 메뉴 메뉴에 마우스를 올리면 하위 메뉴가 나타나게 하는 메뉴 해당 요소의 display 속성을 이용하여 드롭다운 메뉴를 구현 드롭다운 메뉴 Dropdown HTML CSS JAVA C++ 드롭다운 네비게이션 제작 https://dev-scratch.tistory.com/103 [CSS - Hover, Display] 드롭다운 네비..
![]()
내비게이션 바 웹 사이트의 메뉴 링크를 사용한 리스트 메뉴 가장 기본적 방법 HTML에서 링크는 태그로 표현 Home HTML CSS 자바스크립트 수직 내비게이션 바 링크를 사용한 리스트 메뉴에 display 속성값을 block으로 설정 메뉴의 어느 곳을 클릭하더라도 바로 연결된 페이지로 넘어가게 설정 + 클래스 내비게이션 바에서 현재 메뉴의 위치도 표현 가능 :not 선택자를 이용하여 현재 메뉴를 나타내는 current 클래스와 그 외의 메뉴의 배경색을 구분 + border 속성 내비게이션 바에 경계선을 표현 가능 수평 내비게이션 바 display 속성의 inline 속성값을 이용한 방법 링크를 사용한 리스트 메뉴에서 요소의 display 속성값을 inline으로 설정 블록 요소였던 요소가 인라인 요소..
