본문 바로가기

전체 글105

Flex Box Flex Box : Flex Box는 효율적을 HTML 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다. 복잡한 계산없이 요소의 크기와 순서를 유연하게 배치할 수 있다. 별도의 분기 처리를 줄일 수 있으며 CSS만으로 다양한 레이아웃을 구현할 수 있다. Flex 구성 : flexbox는 우리가 배치하고 싶은 HTML 요소인 flex item과 이것을 감싸는 flex container로 구성된다. flex container : flex item을 감싸는 요소 flex item : flex conainer의 자식 요소 flex box 만들기 .flex-container { display: flex; } 부모요소가 inline인 경우 inline-flex를 지정한다. .. 2024. 1. 25.
Responsive Web 반응형 웹 | Viewport | 미디어 쿼리 반응형 웹사이트 : 웹사이트는 PC 화면 뿐만 아니라 모바일, 태블릿, 노트북 등 여러가지 디바이스의 해상도에 반응하여 최적의 화면을 보여준다. 뷰포트(viewport) : 웹 브라우저에서 실제 내용이 표시되는 영역. 반응형 웹에서는 각 디바이스의 viewport에 맞는 화면을 보여줘야 한다. 이때 사용하는 메타 태그가 "뷰포트 메타 태그" 이다. 메타 뷰포트 태그 메타 뷰포트 태그 속성 width height user-scalable : 사용자 확대/축소 가능 여부 initial-scale : 초기 화면 비율 maximum-scale : 최대 화면 비율 minimum-scale : 최소 화면 비율 일반적인 사용법 : 뷰포트의 너비를 디바이스 화면 너비에 맞추고 초기화면 배율을 1로 지정한다. 뷰포트 단.. 2024. 1. 25.
Animation Animation : 요소에 적용되는 CSS 스타일 다른 CSS 스타일로 부드럽게 전환시켜주는 것을 말한다. 이때 CSS 스타일 이 변화되는 중간 지점을 Keyframe이라고 말하며, @keyframes은 애니메이션의 중간 상태라고 할 수 있다. 애니메이션은 트랜지션보다 훨씬 더 규모가 크고 복잡하며, 다양한 능력을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있다. 참고 사이트 : CoolCSSAnimation Keyframes 정의하기 @keyframes으로 애니메이션을 정의할 수 있다. 📌 from (시작) ~to (끝) 를 잉용한 애니메이션 shape 생성 : @keyframes shape { from{ border: 1px solid transparent; } to { border: 1p.. 2024. 1. 25.
Transform, Transition Transform : Transform 속성은 HTML 요소의 회전, 크기 조절, 기울이기, 이동 효과를 나타낼 때, 사용한다. : Transform 속성을 사용하기 위해서는 display 속성이 block 혹은 inline-block 이어야 한다. ex) transform: translateX(20px); Transform 함수 translate(x, y) : 지정한 값 만큼 x축, y축으로 이동한다. scale(x, y) : 지정한 값 만큼 x축, y축으로 확대 및 축소 한다. rotate( 30deg ) : 지정한 각도만큼 회전한다. (+ 시계방향, - 반시계방향) skew(x, y) : 지정한 각도만큼 x축과 y축을 왜곡한다. Transition : 속성값이 변할 때 더 부드럽게 전환되도록 도와준.. 2024. 1. 25.
Pseudo Class & Element Pseudo Class 가상클래스 : 선택하고자 하는 HTML 요소의 특별한 상태 (state)를 명시할 때 사용한다. 문법 선택자 : 가상클래스이름 {속성: 속성값} >>> a: hover { color : orange; } 대표적인 CSS Pseudo Class :link - 아직 방문하지 않은 요소를 나타낸다. href 속성을 가진 중 방문하지 않은 모든 요소를 선택한다. :visited - 사용자가 방문한 이력이 있는 링크를 나타낸다. :active - 사용자가 활성화 한 요소(버튼 등) 를 나타낸다. :hover - 사용자의 마우스 포인트가 요소 위에 올라가 있으면 활성화 된다. :focus - 양식의 입력 칸 등 포커스를 받는 요소를 나타낸다. 보통 사용자가 요소를 클릭 또는 Tab 키로 선택.. 2024. 1. 24.
Background DOCTYPE html> Backgound .red { background-color: #ff0000c9; width: 120px; height: 120px; } .image { background-image: url('../assets/images/floral.jpg'); background-repeat: repeat; background-position: top right; width: 200px; height: 400px; border: 1px solid black; display: inline-block; overflow-y: scroll; } .attachment-scroll { background-attachment: scroll; } .attachment-fixed { background-a.. 2024. 1. 24.
Float 속성 | Position 속성 Float 속성 : HTML 요소에 float 이 적용되면 HTML 요소는 원래 흐름에서 벗어나 둥둥 떠다니듯이 배치가 된다. 인접한 텍스트 또는 인라인 요소가 그 주위를 자연스럽게 감싸게 한다. 자주 사용하는 float 속성 none : 기본값으로 요소를 띄우지 않음 left : 왼쪽에 띄움 right : 오른쪽에 띄움 inherit : 부모요소로부터 상속함 intial : 기본값으로 설정함 clear 속성 float: left; 혹은 float: right; 값을 취소한다. clear: none; - 기본값 clear: left; - 왼쪽을 취소 clear: right; - 오른쪽을 취소 clear: both; - 왼쪽, 오른쪽 둘 다 취소 Position : position 속성은 HTML 요소를 .. 2024. 1. 24.
Display 속성 Display 속성 : HTML 요소를 어떻게 표시할지 결정한다. display: block → Block Level Element display: inline → Inline Level Element 기본 4가지 값 none : 요소를 보이지 않게 설정한다. visibility 속성을 hidden으로 설정한 것과 달리, 영역을 차지하지 않는다. block : 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보이니다. 문서에서 문단을 표시할 때 주로 사용한다. width, height 속성을 지정할 수 있다. div, p , h1~h6 태그 등이 해당한다. inline : 컨텐츠만큼 영역을 차지한다. block과 달리 줄바꿈이 되지 않고, width와 he.. 2024. 1. 24.

티스토리툴바