[CSS] 반응형 웹(viewport, 미디어 쿼리)

1. 반응형 웹 - 다양한 화면 크기의 디바이스(PC, 모바일, 태블릿 등)에서 웹 서비스를 제대로 보여주기 위한 기술 또는 개념 반응형 웹의 일반적인 조건 - 데스크탑, 태블릿, 모바일에 대해 각각의 기기에서 문제없이 동작해야 함 - 사용자가 서로 다른 기기(다양한 크기의 화면)에서 접속시 즉시 반응하여 화면의 내용을 보여주어야 함 2. 뷰포트(viewport) - 일반적으로 모바일 기기에 적용하기 위해 생성된 개념 - 가상의 윈도우(화면)에 웹 페이지를 렌더링하여 확대/축소/스크롤 등을 하기 위한 가상 렌더링 화면 - 기본적으로 데스크탑 브라우저에서는 viewport를 사용하지 않기 때문에 무시됨 데스트탑(viewport) vs 모바일(viewport) - 데스트탑 : 브라우저 창이 곧 viewpor..

[CSS] CSS Flex(Flexible Box) - Items

1. Flex(Flexible Box)의 개념 - Flex는 요소의 크기가 서로 다르거나 동적인 경우 효율적으로 요소를 정리하기 위해 고안된 레이아웃 방법 중 하나 - Flex는 Container와 Item 두가지 개념이 있다. Container Items를 감싸는 부모 요소 박스를 의미 Items 각 요소를 의미하며, 반드시 Container 자식으로 존재해야 함 2. Flex Items 요소의 속성 order Flex Item의 순서를 설정 flex-grow Flex Item의 증가 너비 비율을 설정 align-self 교차 축(cross-axis)에서 아이템의 정렬 방법을 설정 flex flex-grow, flex-shrink.. 축약형 ..... 3. order(row, column) - Flex..

[CSS] CSS Flex(Flexible Box) - Container

1. Flex(Flexible Box)의 개념 - Flex는 요소의 크기가 서로 다르거나 동적인 경우 효율적으로 요소를 정리하기 위해 고안된 레이아웃 방법 중 하나 - Flex는 Container와 Item 두가지 개념이 있다. Container Items를 감싸는 부모 요소 박스를 의미 Items 각 요소를 의미하며, 반드시 Container 자식으로 존재해야 함 2. Flex Container 요소의 속성 display 컨테이너를 수직/수평 방향으로 정렬 flex-direction 아이템들의 주축(main-axis) 정렬 방향(수직/수평)을 설정 flex-wrap 아이템들의 줄묶음(줄 바꿈) 설정 justify-content 주축(main-axis)의 정렬 방법을 설정 align-content 교차 ..

[CSS] CSS 애니메이션

1. CSS 애니메이션 - 웹 페이지를 보다 시각적으로 역동적이게 움직이게 하기 위한 스타일 기능 - 이 속성은 블록 요소(Block Element)를 기본으로 하여, 일반적으로 div 블록을 사용 * 애니메이션의 대표적인 속성 transform 트랜스폼은 요소 이동, 크기 변경, 위치, 색상 등 속성 변경 수행 transition 트랜지션은 시간 경과에 따라 하나의 속성 상태가 다른 속성 상태로 변형 transform과 transition이 짝이고, @keyframe와 animation이 짝이다 @keyframe 키프레임 애니메이션을 만들 수 있도록 해주는 블록 키워드 animation 키프레임 애니메이션 실행을 위해 CSS에 설정해주는 속성 2. transform / transition transfo..

[CSS] CSS 위치 지정 및 화면 중앙 배치

1. 가로 가운데 정렬 방법 margin 이용 가로 가운데 정렬 방법 margin-left: auto; margin-right: auto; margin: 0 auto; margin: 0 auto 0 auto; text-align 이용 가로 가운데 정렬 방법 - 부모에 스타일 적용해야 함 text-align: center; // left, right 단, 자식 박스는 반드시 display: inline-block; or inline; 여야 한다. position/transform 이용 가로 가운데 정렬 방법(박스 높이를 모를 경우) - 부모에 스타일 적용해야 함 position: relative; left: 50%; transform: translateX(-50%); display flex 가로 가운데 정..

[CSS] CSS float, clear 속성

1. float 속성 - float 사전적 의미는 뜨다, 띄우다, 뜨는 물건, 부유물 이라는 의미이다. - 태그에 플로팅 속성을 준다면, 다른 태그에 영향 없이 왼쪽 또는 오른쪽으로 정렬하여 띄운다는 기본속성을 가짐 - 단, 위 또는 아래에 태그가 있거나 부모 태그가 있다면 예상치 못한 상황이 발생할 수 있는 것에 주목 left 요소를 왼쪽으로 정렬 right 요소를 오른쪽으로 정렬 2. clear 속성 - float 속성을 적용하면 그 이후에 오는 다른 요소들까지 똑같은 속성이 전달되어 둘러싼 형태가 되거나 부유된 영역 아래(under)로 들어가게 된다. - 이러한 문제를 해결하기 위해 그 전의 상태로 돌릴 경우 사용한다. both 오른쪽/왼쪽 취소(가장 많이 사용) left 왼쪽 취소 right 오른..

[CSS] CSS 배경 이미지(background-image)

https://tadaktadak-it.tistory.com/69?category=1024176 [CSS] background(배경) 1. 배경색(background-color) - HTML 요소의 배경색을 설정 color : white(색깔명) = #ffffff(16진수) = rgb(255,255,255)(RGB코드) background-color: 색깔명 혹은 RGB코드; 2. 배경 이미지(background-image) -.. tadaktadak-it.tistory.com 1. 배경이미지 스타일(background-image) - 웹 화면 또는 박스 모델 등의 배경으로 이미지를 삽입할 때 사용 * 배경 이미지 관련 속성 background-image 이미지를 삽입할 경우 사용 background-s..

[CSS] CSS block vs inline, <div> vs <span>

1. block vs inline block 특징 - 가 대표적인 블록을 기본 속성으로 하는 태그 - 콘텐츠 또는 텍스트 등과 관련없이 화면의 너비(줄) 만큼 점유 - 즉, width, height를 주더라도 한 줄을 차지함 - margin, padding, height, width 모두 적용 가능 - 단, width, margin 의 경우 좌/우측은 block의 특성 상 태그가 너비 전체를 차지하므로 특수한 경우를 제외하고는 의미가 없을 수 있음 inline 특징 - 이 대표적인 인라인을 기본 속성으로 하는 태그 - 콘텐츠 또는 텍스트 등의 크기 만큼만 박스의 너비를 점유 - padding 모두 가능 - margin은 좌/우만 가능 - width, height 모두 적용 불가능 inline-block ..

[CSS] CSS 박스 모델, border, padding, margin

1. CSS 박스 모델 - 모든 HTML 요소는 박스(box) 모양으로 구성된 박스 모델을 기본으로 함 - 박스 모델은 HTML 요소를 테두리(border), 패딩(padding), 마진(margin) 등을 갖음 박스 모델 용어 content(내용) 텍스트나 이미지 등 박스 내의 실제 내용 border(테두리) 박스의 테두리(내용과 패딩이 안에 포함) padding(패딩) content와 border 사이의 간격(안쪽 여백) margin(마진) border 밖의 여백으로, 주로 이웃 요소와의 간격(여백)으로 사용 박스 모델 기본 속성 width 박스의 넓이(default: display 속성에 의해 결정) height 박스의 높이(default: 일반적으로 콘텐츠의 높이) background 박스의 배경..

[CSS] CSS 배경(background), 글자 색상(color)

1. 배경(background) 스타일 https://tadaktadak-it.tistory.com/69?category=1024176 [CSS] background(배경) 1. 배경색(background-color) - HTML 요소의 배경색을 설정 color : white(색깔명) = #ffffff(16진수) = rgb(255,255,255)(RGB코드) background-color: 색깔명 혹은 RGB코드; 2. 배경 이미지(background-image) -.. tadaktadak-it.tistory.com - HTML의 모든 태그에 배경 색상 또는 이미지를 설정할 수 있는 속성 background-color HTML 요소의 배경색을 설정함. background-image HTML 요소의 배경 ..