분류 전체보기219 06-02. 미디어 쿼리 1. 미디어 쿼리란? 미디어 쿼리는 반응형 웹사이트 스타일을 수정하는 방법이다. 예를 들어 모바일이랑 웹의 화면 크기가 다르니 메뉴등을 보여주거나 숨기고 없앨수 있도록 도와주는 것이다. 미디어쿼리를 사용 하는 방법은 @media로 시작하며 괄호 안에 미디어 기능을 넣을 수 있다. 예시1) 최소 min, 최대 max 사용 Home Learn More About Contact Sing Up Media Queries body { font-family: 'Open Sans', sans-serif; } h1 { font-size:6em; text-align: center; } nav { font-size:1.5em; } ul,li { display: inline; margin:0; padding:0; } /*최소.. 2023. 1. 4. 06-01. Flexbox 1. Flexbox란? 페이지의 콘텐츠 상자 안에 아이템을 배치할때 사용하는것이다. 컨테이너를 만들고 그안에서 배분을 하는것. 예시 FlexBox app.css 파일 body { font-family:'Open Sans', sans-serif; } h1 { text-align: center; } #container { background-color: #003311; width: 90%; height: 500px; margin: 0 auto; border: 5px solid #003311; } #container div { width: 200px; height:200px; } 출력내용 이지만 Flexbox를 이용시 안에 넣을 수 있다. #container { background-color: #003311;.. 2023. 1. 4. 05-02. css 전환 transition: 으로 애니매이션 효과를 적용 할 수 있다. 예시로 가로 세로 200px 인 네모 상자 위에 커서를 둘경우 3초에 걸쳐 동그라미로 변하게 되고 커서를 내릴경우에 다시 네모로 변하게 된다. 추가로 알면 좋은 것들 transition-timing-function: linear 일정한 속도로 변화한다. transition-timing-function: ease-in 천천히 시작하다 빨라지며 변화한다 transition-timing-function: steps(6,end) 6단계에 걸쳐 변한다. transition-timing-function: cubic-bezier 앞뒤로 움직이는것처럼 변한다. 관련사이트! https://easings.net/ Easing Functions Cheat Sh.. 2022. 12. 30. 05-01. css3 테두리와 투명도 border-width: 1px; 여기서 px 단위로 많이 사용 하는 이유는 얇고 웬만해선 규격이 바뀌지 않아 많이 사용한다고 한다. box-sizing: border-box 좌우의 테두리로 요소의 크기가 결정된다. (내부공간이 줄어든다.) opacity: 0.6(범위) 투명도와 불투명도 범위는 0~1이며 1에 가까울 수록 불투명해진다. 만약에 배경만 투명하게 할려면 background-color: rgba(255.255.255.0.2) 형식처럼 쓰면 되고 내부에 있는 글처럼 모두를 투명하게 할경우 back-ground: blue; 를 쓴후 아래에 opacity:0.2 로 쓰면 된다. 2022. 12. 26. [HTML5] placehorder 와 required 속성 에 대해 알아보자 placehorder 속성 아이디나 패스워드를 입력하려고 보면 흐릿한 글씨로 "입력하세요"로 나와 있는 경우가 있습니다. 이때 사용하는것이 placehorder 입니다. form 형식에서 placehorder="아이디를 입력하세요" 을 사용했을 경우 사용자가 뭔가를 입력 하기 전까지 입력이라는 글이 나오게 됩니다. required 속성 회원 가입시 사용자의 이름 비밀번호등을 입력 받는데 이는 꼭 입력해야 합니다. 이를 required 속성을 이용해서 빈칸이 되는것을 방지할수 있습니다. 또한 required 는 조건에 맞지 않으면 제출이 안되게 할수도 있습니다. 예시로 나이가 18세 이상 60세 미만 일 경우만 작성하게 하고 이보다 작거나 클경우는 입력이 막히게 됩니다. 나이: 2022. 12. 22. [HTML5] Emmet 으로 작업흐름을 개선해보자 Emmet이란 HTML 과 CSS를 빠르고 효율적으로 작성하기위해 코드를 단축시켜 특정 단축키를 통해 확장하여 완전한 코드로 변환시켜주는 것 입니다. 아래에서 예시들 몇개를 보겠습니다. Child: > 부모와 자식 요소간의 관계를 나타냅니다. nav>ul>li 입력 후 Tab 또는 enter를 누르게 되면 로 바뀌게 되는것을 알 수 있습니다. Multiplication: * 요소를 반복하는데 사용합니다. ul>li*5 입력 후 Tab 또는 enter를 누르게 되면 * 옆에 숫자수 만큼 list가 만들어지는 것을 알 수 있습니다. Sibling: + 형제요소를 나타냅니다. div+p+bq 입력 후 Tab 또는 enter를 누르게 되면 div+p+bq 가 되는것을 알수 있습니다. TIP) 더 많은예시들은 아.. 2022. 12. 20. 이전 1 ··· 31 32 33 34 35 36 37 다음
