🍁transition transition은 객체의 속성(상태) 값이 변화되는 과정을 시간 순서대로 보여주는 애니메이션 속성이다. 이 작업은 본래 JavaScript에서나 할 수 있는 것이었다. 하지만 지금은 CSS에서 간단하게 구현할 수 있다. transition의 사용 상자 body { padding-bottom: 500px; /* body의 영역을 넓힘 (margin은 객체의 영역이 아니므로 padding을 사용) */ } #box { border: 10px solid black; width: 200px; height: 200px; background-color: gold; margin: 100px; transition-property: width; transition-duration: 1s; } b..
🍁transform transform에는 위치, 배율, 회전, 왜곡 변형까지 4가지 변형을 할 수 있다. translate, scale, rotate를 주로 사용한다. 기본 코드 상자1 상자2 상자3 .box { border: 1px solid black; width: 200px; height: 200px; margin: 30px; } #box1 { background-color: tomato; } #box2 { background-color: gold; } #box3 { background-color: cornflowerblue; } 위 코드를 이용하여 transform을 구현해 보도록 하자. 1. translate() translate는 위치 변형(이동)을 한다. 이동을 하더라도 기존의 공간이 남아있..
🍁IT/과학 헤드라인 뉴스 네이버 뉴스의 IT/과학 헤드라인 뉴스를 직접 만들어보도록 하자. HTML 작성 가장 바깥쪽의 큰 상자 main을 만들어준다. 그리고 header와 content로 구분해 주었고, 각각의 뉴스는 반복되므로 class로 묶어주었다. 헤드라인 뉴스 자급제·유심 이동 단말도 긴급 구조시 정밀위치 제공 측위 앱 탑재…방통위 "긴급통화 때만 정보 제공하는 아이폰도 개선 노력" 방송통신위원회는 긴급구조 시 정밀위치가 제공되지 않던 자급제·유심 이동 단말기 … 연합뉴스 e게임 '롤무대' 등장한 뉴진스…'LoL 월드 챔피언십' 주제곡 부른다 걸그룹 뉴진스가 세계 최대 규모의 e스포츠 대회인 '리그오브레전드(LoL) 월드 챔피언십'(롤드컵) 주제가를 부른다. 라이엇게임즈와 하이브(352820)..
🍁다단 구조 다단 구조 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga quas labore est. Provident neque recusandae laborum impedit vel rerum, nulla, exercitationem vitae non quas molestias praesentium fugiat voluptatem? Iusto quis pariatur quia sint officiis, nobis, assumenda maiores minus, architecto vero eum inventore aliquid dignissimos itaque doloribus ratione odio enim aut rem eaque. N..
🍁background 1. background-color 2. background-image 3. background-repeat 4. background-position 5. background-attachment 6. background-size background-size: width height; #box { border: 1px solid black; width: 400px; height: 400px; margin: 50px; background-image: url(../../asset/images/cat05.jpg); background-size: 400px 400px; } 외부에서 CSS 작업을 하여 background image를 출력하였다. 가로 세로 비율의 원본 비율 유지 backgro..
🍁outline 테두리 서식을 부여할 때 border 대신 outline을 줄 수 있다. border와 outline의 차이점 상자1 상자2 상자3 border와 달리 outline은 요소들을 밀어내지 않는다는 특징이 있다. border는 객체의 크기에 반영이 되기 때문에 점점 밀어내는 현상이 생기고, outline은 객체의 크기에 반영이 되지 않기 때문에 겹치는 현상이 생기게 된다. outline의 활용 다른 내용... border는 객체 크기에 영향을 주기 때문에 indicator를 focus로 주었을 때, 텍스트 박스를 클릭하게 되면 화면이 흔들리게 된다. 이때 outline을 이용하면 안정감이 있으면서 테두리를 줄 수 있게 된다. 보편적으로 border를 많이 사용하긴 하지만, 이와 같은 경우에서..
🍁모서리 둥글기 모서리 둥글기는 border-radius 속성을 사용한다. px, %를 사용하여 구현하며, px와 %를 사용할 때 각각의 정책이 다르다. px 단위 사용 Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse voluptas ipsum impedit, quis nam repudiandae ea praesentium repellat architecto dolor soluta porro cupiditate quam! Sapiente commodi animi voluptas expedita! Laudantium. Facilis, sunt vel? Dolorem praesentium saepe atque neque at. Est, porro..
🍁배경 이미지 배경 이미지의 특징 네이버를 보면 마우스 오른쪽 클릭을 했을 때 어떤 건 '다른 이름으로 이미지 저장'이 아니라 '다른 이름으로 링크 저장'이 뜬다. 이는 배경 이미지로 넣은 것과 이미지로 넣은 것의 차이이다. 배경 이미지는 이미지가 아니기 때문에 마우스 오른쪽 클릭을 했을 때 '다른 이름으로 이미지 저장'이 뜨지 않는다. 왜 배경 이미지로 이미지를 넣은 걸까? 하나의 이미지에 장면별로 구성된 것을 sprite image라고 한다. 이 기법은 디자이너와 조직이 갖춰져 있을 때 좋은 방식이다. sprite image의 특징 업무 상 장점 디자이너가 이미지를 개발자에게 전달하는데, 파일을 개별적으로 관리하면 이미지 이름을 정하는 것부터 어렵다. 또한 일부 이미지가 바뀌면 전체 이미지를 바꿔야 ..
