전체 글
-
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() 웹 요소를 ..
-
복잡계 세상에서의 투자일상/독서 2022. 9. 17. 12:44
이 책에서는 과거에서 현재까지 단순계에서 복잡계로의 이동 배경과 앞으로 복잡한 환경에서 투자자적 사고방법, 세상에 대응하는 방식에 대해 자세히 설명해준다. 과거에는 단순히 경제 순환의 구조에 따라 호황이 지나가면 불황이 찾아오고 불황이 지나가면 호황이 찾아오는 경제 사이클이라는 개념이 지배적이었다. 경제 사이클이 발생하는 원인은 재고의 증감에서 부터 시작된다. 재고의 증감에 따라 가격이 변하고 다시 가격은 수요와 공급에 영향을 미치게되며 이는 경기의 확장 혹은 후퇴는 초례한다. 이 시점이 되면 국가는 적절한 금리 재정정책으로 대응함에 따라 경기가 안정을 되찾게된다. 이러한 과정에서 사이클을 형성하게 된다. 경제 순환의 과정은 원인과 결과가 확실하고 명확하여 앞으로의 예측이 가능하였다. 사이클을 바탕으로 ..
-
시맨틱 태그프로그래밍/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-..
-
다단 레이아웃프로그래밍/HTML&CSS 2022. 9. 14. 19:55
다단 레이아웃은 신문의 양식과 비슷하게 신문을 보면 제목 헤드라인이 있고 그 밑으로 2~3개 정도의 단으로 구분한 모습이다. 다단 레이아웃의 모양을 먼저 이미지로 구현해보았다. 위 이미지와 같이 본인이 구현하고자하는 웹 문서의 모양을 미리 구현해봄으로써 시각화 된 이미지를 활용하여 더 쉽게 CSS 스타일을 구현할 수 있을 것이다. 이제 HTML 부문을 작성하여 레이아웃의 틀을 구현해준다. 다단 레이아웃 Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto ... Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto ... Lorem ipsum dolor sit amet consectetu..