반응형 HTML,CSS31 HTML, CSS pseudo-class, class작명 - pseudo-class :를사용해 원래클래스의 스타일 변화를 줄 수있는 셀렉터 그리고 hover > focus > active순으로 사용해야 정상 작동한다. input과 link(클릭 전후)태그에도 사용이 가능하다. /* pseudo-class 수도클래스 순서 hover > focus > active 로 사용해야 정상작동*/ .btn:hover{ background-color: chocolate; } .btn:focus{ /* 커서 찍혀있을 때 */ background-color: grey; } .btn:active{ /* 누르고 있는 상태일 때 */ background-color: brown; border:2px solid black; } .input-test{ font-size:20px; } .i.. 2023. 4. 22. HTML, CSS Table태그 (colspan, nth-child) - table 태그 구성 내용 내용 row, col로 구성되어있는데 tr은 row, td는 col이다. 즉 tr안에 td를 넣어서 table만들면되는데 보통 만들어진 템플릿을 사용한다. thead와 tbody는 그냥 헤드부분 영역 구분용으로 사용하는거고 기능상 차이는 없다. th는 td의 글씨를 굵게 처리한다. - 테이블 셀 내에서 상하정렬 vertical-align 사용 테이블에서는 top, bottom, middle사용가능하다. td, th { vertical-align : middle; } 아래와같이 글씨크기가 차이가 나는경우에도 vertical-align을 사용해 정렬할 수있다. 김지원 입니다 -------- 김지원 입니다 아래에 vertical-align:top같은 경우는 다르게 정렬된다. - .. 2023. 4. 22. HTML, CSS form&input - form 입력에 사용하는 태그 여러가지가 있지만 필요한거 검색해서 사용하자. 옵션1 - input 속성 placeholder는 배경 글자, value는 입력된 값 (미리), name 은 백엔드 개발할때 필요한 인풋 이름 그리고 HTML속성으로 CSS셀렉터로 사용가능하다. input[type=email] { color : grey } 그리고 아래와 같이 submit 타입을줘서 "폼태그안에서" 사용가능하다. 전송 - 셀렉터사용시 여러개 한번에 가능 /* 여러태그에 한번에 속성주는법 .class도 가능*/ div,input,textarea{ box-sizing: border-box; } - 재사용가능하게 class만들기 기존의 클래스 사용한다음 추가적으로 클래스 추가해서 사용이 가능하다. Message -.. 2023. 4. 21. HTML, CSS z-index, witdh, box-sizing - z-inex (높을 수록 앞에 온다) 여러 오소중에 위에 오고싶은게 다르다면 z-index값을 바꿔가면서 넣어보면 된다. .explain-box{ width: 400px; margin:auto; padding:20px; text-align: center; background-color: #eee; /* 붕띄우면되지 */ position:relative; top:-40px; z-index:100; } - max-width (최대폭 지정, 반응형 같은데서 쓰기 좋다) min-width,, min-height, max-height 등... 다만 이런 속성은 content영역의 너비를 의미하고, border, padding등과는 상관없다. 즉 padding등에 따라 maxwidth보다커질 수 도 있음 - b.. 2023. 4. 21. HTML, CSS 배경관련, margin collapse, position - 배경 이미지삽입하기 (background-image) - margin collapse (테두리가 겹쳐질 때 div margin이 합쳐지는 현상) ->하나의 혹은 바깥 div에 padding 1px라도 주면됨 - 박스가 붙어 있을 때도 마찬가지(위아래로) 이럴때는 margin collapse가 합쳐지는게 아니라, 더 큰 margin을 따라가게 된다. (우측 그림처럼) - 배경관련 CSS속성 .main-background { background-image : url(../img/shoes.jpg); background-size : cover; background-repeat : no-repeat; background-position : center; background-attachment : fixed;.. 2023. 4. 21. HTML, CSS 셀렉터, Navbar만들기 - clear:both 사용팁 float속성때문에 div에서 clear:both를 사용하는경우 빈 div태그를 하나 더만들어서 그곳에 사용해 주는것 이렇게 하면 추후 사용하는 div태그에서 margin을 사용하기 편하다. ...... 블로그 글 블로그 글 내용 본문 ......... - CSS 셀렉터 .클래스명 태그 : 해당 클래스 바로밑에 있는 해당태그 .클래스명>태그 : 해당 클래스 밑에있는 모든 해당태그 .navbar li{ /* 셀렉터 문법 .navbar안에있는 li태그 */ /* >는 안에있는 모든자식 ex)밑에있는 모든 li */ display: inline-block; width: 60px; text-align: center; background: #eee; padding:10px; bord.. 2023. 4. 21. 이전 1 2 3 4 ··· 6 다음 반응형
