본문 바로가기
728x90
300x250
SMALL

Front-end/HTML78

가상요소로 불렛 코딩 추가하기 옛날 같으면 불렛을 넣으려면 이미지로 백그라운드해서 넣었지만이제는 일일이 이미지 잘라줄 필요 없이 가상요소로 넣어주면 된다. 123456 첫번째 항목 두번째 항목 위와같이 리스트를 만들었다면 12345678910111213141516.txt_list ul li { position: relative; padding-left: 8px;}.txt_list li:before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: #12a47f; position: absolute; left: 0; top: 10px;}cs 이런식으로 before 가상요소를 사용하여불렛을 추가해준다. 이런식으로 불렛이 추가된것을 확인할 수 있다. 이번에는 하이.. 2019. 1. 3.
시맨틱 태그 시맨틱 태그는 태그 자체에 의미가 있는 태그를 말한다 12345678910 section : 콘텐츠를 주제별로 묶을때article : 독립적인 콘텐츠 항목, 독립적으로 때어내서 배포하거나 재분배 하더라도 완전히 하나의 콘텐츠가 되는것section :이 아티클 바깥에 갈수도 있고 안에 갈수도 있으며 하나만 쓸수도있고 둘다 같이 쓸수도 있다.aside : 본문 이외의 내용표시 필수요소가 아니므로 광고나 링크모음등 문서 메인 내용에 영향을 미치지 않는 내용들을 넣을때 사용한다. 중요도가 떨어지는내용으로 보통 오른쪽에 배치하지만 하단에 배치시킬 수도 있다. 2019. 1. 2.
input placeholder 색상 바꾸는 방법 placeholder 색상 다르게 하는 방법 input[type=text]{color:red} input[type=text]::-webkit-input-placehoder{color:black}input[type=text]::-moz-placeholder{color:black} ex) .calendar_area input::-webkit-input-placeholder{color:#f2f2f2;} 2019. 1. 1.
박스사이즈 통일 만약 전체사이즈가 300width인데 패딩 10px 보더 1px 주면 322px이 된다 이럴때 전체사이즈를 300으로 하고 싶다면 box-sizing: border-box; css 에 박스사이징을 보더박스로 입력해주면된다. 2018. 12. 31.
728x90
반응형
LIST