🍁display: flex flex 속성 하나만으로도 다른 속성 여러 개를 합쳐 놓은 정도로 분량이 크다. flex는 flex box 또는 flexiable box라고도 부른다. 레이아웃을 작성할 때, 즉 내부의 요소를 어떻게 배치할지를 결정할 때 사용한다. flex는 float와 position, maingin, padding을 합친 느낌이 든다. [CSS] display: 인라인 요소의 개행, float 🍁display [CSS] overflow, visibility, display 🍁오버플로우 (overflow) 박스에 담을 수 있는 내용을 초과하면 초과한 내용이 박스를 빠져나간다. 하지만 height: auto; 값을 주면 그만큼 박스가 커지기 때문에 isaac-christian.tistory.c..
🍁animation CSS 객체의 움직임을 단순하게 표현할 때에는 transition을 사용한다. animation은 그보다 더 나아가 움직임을 세밀하게 통제할 수 있는 옵션이 존재한다. [CSS] transition (전환) 🍁transition transition은 객체의 속성(상태) 값이 변화되는 과정을 시간 순서대로 보여주는 애니메이션 속성이다. 이 작업은 본래 JavaScript에서나 할 수 있는 것이었다. 하지만 지금은 CSS에서 간단하 isaac-christian.tistory.com transition에 대해서는 위 글을 참고하도록 하자. 🍁animation의 사용 animation-name: 프레임(움직임)을 정의 animation-duration: 소요 시간 animaiton-fill-..
🍁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를 많이 사용하긴 하지만, 이와 같은 경우에서..
