CSS
Problem Solving
[CSS] Requirements Q10: Clock
Hour Min Sec source code transform(rotate) + transform-origin + transition 시계침을 돌리시오. Hour Min Sec
Problem Solving
[CSS] Requirements Q05: Scroll
transition Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione corrupti earum quo ut aperiam, quas itaque voluptate consequuntur dolore perferendis vel, molestiae dolores illo et, dolorem qui. Beatae, cumque eum? Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto nemo autem earum quia assumenda, dignissimos possimus eum iusto tempora nos..
Problem Solving
[CSS] Requirements Q01: Table design
Member list Table Design No Name Age ID Description 01 Lorem 21 Lorem Lorem ipsum dolor sit amet 02 Magni 22 Facere Obcaecati accusamus perspiciatis nesciunt corporis 03 Nam 23 Laudantium Ipsa nam molestiae ea obcaecati 04 Beatae 24 Esse Repellat expedita dolorum autem architecto 05 Placeat 25 Itaque Soluta eaque nam nemo enim 06 Eligendi 26 Velit Dolores, unde ratione Ab, natus 07 Labore 27 Dol..
Programming/CSS
[CSS] Responsive Web (반응형 웹)
🍁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로 하면 인쇄장치에만 적용이 된다. 미디어 ..
Programming/CSS
[CSS] display: grid (레이아웃)
🍁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..
