프로그래밍/HTML&CSS
-
text-overflow프로그래밍/HTML&CSS 2022. 9. 21. 19:31
웹 문서에서 정해진 공간 안에 텍스트의 양이 많을 경우 텍스트를 중간에 끊고 뒤에 ‘…’ 으로 마무리 지어버리는 것을 본 적이 있을 것이다. 이러한 세부적인 텍스트 스타일에 대해 다뤄볼 것이다. 이와 관련한 속성으로 overflow, text-overflow, white-space가 있다. text-overflow 택스트가 기준선(상자)을 벗어나 넘칠 경우 넘치는 텍스트를 어떻게 처리할지 설정한다. 속성값으로는 clip과 ellipsis가 있다. clip은 기본값으로 넘칠 부분을 중간에 자르는 속성값이고 ellipsis는 clip으로 자른 부분 뒤에 ‘…‘를 붙이는 속성값이다. text-overflow를 사용하기 위해서는 두가지의 조건에 충족해야한다. overflow가 hidden, scroll, aut..
-
animation프로그래밍/HTML&CSS 2022. 9. 20. 19:26
animation은 transition보다 더 쉽게 애니메이션 효과를 만들 수 있는 속성이다. animation은 연속적인 장면들(변화하는 지점)을 만드는 방법을 사용하며 이 연속된 지점들을 키프레임을 통해 지정할 수 있다. 먼저 @keyframes를 지정해주고 animation 속성으로 애니메이션 시간, 반복, 순방향 역방향 등을 정한다. @keyframes 애니메이션의 장면들을 순서와 함께 지정하고 모아놓은 집합체라고 볼 수 있다. @keyframes { { } } @keyframes moving { from { width: 200px; background-color: gold; opacity: 0.5; /*투명도*/ transform: scale(0.5) rotate(30deg); } to { wi..
-
transition프로그래밍/HTML&CSS 2022. 9. 19. 22:49
transform 속성은 단순히 이동, 회전, 확대, 축소 등을 변환하는 방법이라면 transition은 하나의 스타일을 완전히 다른 스타일로 바꾸는 방법이다. 스타일을 바꾸는 동안의 시간을 조절하여 애니메이션 효과를 줄 수 있다. transition 구성 transition: property timing-function duration delay 종류 설명 property 요소에 추가할 전환 효과를 설정 timing-function 전환 효과의 값을 설정 duration 시간동안 전환 효과를 나타냄 delay 시간만큼 대기하다가 전환효과를 나타냄 timing-function 속성값 종류 설명 linear 처음부터 끝까지 일정한 속도 ease-in 느리게 시작 ease-out 느리게 마무리 ease-in..
-
벤더 프리픽스(vender prefix)프로그래밍/HTML&CSS 2022. 9. 18. 11:05
벤더 프리픽스는 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사를 의미한다. 아직 CSS 권고안에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자할때 사용한다. 벤더 프리픽스의 중요한 특징 중 하나로 순서에 유의해야한다. 1. 속성을 지원하지 않는 브라우저를 위한 코드 background: red; 2. 접두어 사용 가능 브라우저를 위한 코드 background : -webkit-linear-gradient(right, yellow, blue); 3. 브라우저 오페라를 위한 코드 background : -o-linear-gradient(right, yellow, blue); 4. 브..
-
transform프로그래밍/HTML&CSS 2022. 9. 18. 10:00
transform 속성을 사용하면 물체를 크기나 형태의 위치, 모양 등을 바꿀 수 있다. 대표적인 속성 종류로는 이동(translate), 확대축소(scale), 회전(rotate), 경사(skew)가 있다. translate() x축이나 y축 또는 양쪽 방향으로 이동할 거리를 지정하면 해당 요소가 지정한 크기만큼 이동한다. 구분 설명 translate(x, y) (0, 0)를 기준으로 (x, y)만큼 이동한다. translate(x, y, z) (0, 0, 0)를 기준으로 (x, y, z)만큼이동한다. translateX(x) x축을 기준으로 x만큼 이동한다. translateY(y) y축을 기준으로 y만큼 이동한다. translateZ(z) z축을 기준으로 z만큼 이동한다. scale() 웹 요소를 ..
-
시맨틱 태그프로그래밍/HTML&CSS 2022. 9. 17. 09:51
시맨틱 태그란 브라우저나 개발자들에게 의미를 전달 할 수 있는 태그로서 문장 구조를 파악하는데 중요한 역할을 하는 태그를 의미한다. 일반적인 div 나 span 태그는 이름만으론 태그 내 어떤 내용이 있는지 알 수 없지만 시맨틱 태그를 사용하면 간략하게 이 태그가 어떤 의미를 지니고 있는지 알 수 있다. 시맨틱 태그는 위에 설명한 것처럼 태그의 내용을 유추할 수 있는 기능 외에 다른 기능들이 있다. 우선 검색 포털에서 시맨틱 태그는 검색 키워드로써 기능을 수행하여 검색에 용이하게 한다. 또 웹 접근성 측면에서 시작 장애인이 사용하는 스크린 리더기를 통해 웹 페이지의 구조를 알기 쉽게 한다. - 머리말 영역으로 제목, 로고, 이름, 검색창, 사이트 메뉴 등을 포함한다. - header의 위치에 따라 문서의..
-
반응형 웹프로그래밍/HTML&CSS 2022. 9. 16. 15:19
최근 전자기기의 다양성으로 인해 PC와 테블릿, 모바일 등 여러 크기의 화면에서 웹 문서를 보기위해서는 그때마다 웹 문서를 각각 제작해야하는 수고스러움이 있을 수 있었다. 이 점을 고려하여 전자기기의 화면 크기에 반응하여 웹 문서 크기를 자동 바뀌는 반응형 웹 개념이 등장한다. 반응형 웹 디자인이란 PC와 테블릿, 모바일 등 브라우저 환경이 다양하게 바뀌는데 그때마다 웹 사이트의 화면에 맞게 재배치하고 각 요소의 표시방법만 바꾸어 웹문서를 구현하는 것이다. 반응형 웹 디자인을 위해서는 먼저 뷰포트의 개념을 알아야한다. 예로 PC에 맞게 제작한 웹 문서를 모바일 기기에서 접속해서 보면 모든 내용이 작게 표시된다. 그 이유는 PC 화면과 모바일 화면에서 표시되는 픽셀 차이 때문으로 여기서 뷰포트를 지정하면 ..
-
플렉스 박스 레이아웃(flex box layout)프로그래밍/HTML&CSS 2022. 9. 15. 20:25
대부분의 웹 사이트는 수직으로 구성되어있어 수직으로는 쉽게 구성할 수 있으나, 그에 비해 수평으로의 구성은 구현 하기 쉽진 않다. 과거에는 수평 구성을 table, float, inline-block 으로 구성하였고 플렉스 박스 레이아웃 개념의 등장으로 수평 구성의 구현이 쉬워졌다. display 플렉스 박스 레이아웃을 만들기 위해서는 웹 컨텐츠를 플렉스 컨테이너로 묶어주는 작업이 필요하다. 즉, 배치할 웹 요소가 있다면 그 요소를 감싸는 부모 요소를 만들고, 그 부모 요소를 플렉스 컨테이너로 만들어 감싸주는 것이다. 이때 display 속성을 사용하면 된다. 종류 설명 flex 컨테이너 안의 플렉스 항목을 블록 요소로 배치 inline-flex 컨테이너 안의 플렉스 항목을 인라인 요소로 배치 flex-..