HTML&CSS20 CSS: after, before (가상선택자) css에서는 가상선택자로 컨텐츠의 앞이나 뒤에 내용을 추가할 수 있다. 가상영역의 기준이 꼭 있어야 하며, left/right/top/bottom으로 위치를 지정할 수 있다. .menu li { position: relrative; //기준 } .menu li:after { content:""; //필수 position: absolute; left: 0; top: 0; } after, before는 가상이기 때문에, width와 height를 지정해주고 background색상을 줘야 눈으로 볼 수 있다. .menu li:after { content:""; //필수 position: absolute; left: 0; top: 0; width: 20px; height: 1px; background-color.. 2020. 7. 14. HTML&CSS: input, label, form A B C D type => radio / checkboox / ... value => 전송되는 값 id => label for과 맞춰주어야 글자를 눌러도 선택이 가능하다. name => 다른 input들과 맞춰줘야 하나만 선택 가능 전송되는 내용을 작성할 경우 form태그에 작성해준다. 2020. 7. 5. CSS: 자주쓰이는 font 속성 font는 구글웹폰트에서 가져올수 있다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com ul li a { font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: italic; font-weight: bold; font: normal bold 14px/54px 'Open Sans', sans-serif; /* 폰트속성 한번에 쓸경우 */ font: normal 14px/1 'Open Sans', sans-serif; /* line-height 기본 */ color:.. 2020. 7. 3. CSS: background 속성 활용 1. 이미지를 특정영역에 유연하게 채우고 싶을 경우 먼저 높이를 주고, 아래와 같이 작성한다. header { background: url(../images/....) no-repeat 50% 0 / cover; /* 순서대로 url repeat position / size cover -> 너비는 다채우고, 높이는 커버 */ background: url(../images/....) no-repeat center top; /* 이렇게도 쓴다. */ } 높이를 100vh로 주면 다른 디바이스들에서 화면의 높이를 100%로 인식한다. 2. 이미지를 전체화면에 유연하게 채우면서, 줄여도 늘려도 가운데는 꼭 보이게 하고싶은 경우 js또는 jquery로 resize이벤트 설정 (if문을 이용해 사용자의 화면에 따른.. 2020. 7. 2. 이전 1 2 3 4 5 다음
