🍁Responsive Web 해상도에 따라 다른 화면을 구현하는 CSS 기술이다. 해상도에 반응하여 다른 CSS를 적용한다고 해서 반응형 웹이라고 한다. max-width: 1000px이 들어간 부분은 해상도의 조건이다. max-width는 너비가 최대 1000px 일 때까지는 서식을 적용해 달라는 의미이다. 전체 화면일 때에는 화면의 배경색이 gold지만, 1000px 아래로는 cornflowerblue로 배경색이 바뀐다. 미디어 유형 1. all: 모든 유형 2. screen: 컴퓨터(스마트폰) > 기본값 3. print: 인쇄 장치 4. tv 5. projection 6. 기타 등등 미디어 유형을 print로 변경 @media 뒤의 screen을 print로 하면 인쇄장치에만 적용이 된다. 미디어 ..
🍁display: grid grid는 표의 다른 말이라고 봐도 된다. 아래는 grid에 대한 예시이다. https://www.printablee.com/post_10-by-10-grids-printable_402493/ 10 Best 10 By 10 Grids Printable - printablee.com What is a Number Grid? Number grids are square grids worksheets that have rows and columns with numbers arranged in them. Well, all the numbers in the row and column have a relationship with each other. So, actually, the main..
🍁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..
