- Javascript로 html 조작하기 글씨, 색, 사이즈 등 html, style, class등 필요한거 모두 찾아서 바꿀 수 있다. 안녕하세요 김지원 입니다. - UI만드는 단계 1.HTML/CSS로 미리 디자인 원하는 UI를 만들고 none으로 해놓음(alert의경우) 2.이벤트가 발생할경우(버튼클릭등) UI를 보여달라고 자바스크립트 코드 짜기 알림창 UI보이기 닫기 .alert-box { background-color: skyblue; padding:20px; color:white; border-radius: 5px; display: none; /* 평소에는 숨겨두기 */ /* 보여줄때는 display:block; */ }

- 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..

- 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같은 경우는 다르게 정렬된다. - ..

- form 입력에 사용하는 태그 여러가지가 있지만 필요한거 검색해서 사용하자. 옵션1 - input 속성 placeholder는 배경 글자, value는 입력된 값 (미리), name 은 백엔드 개발할때 필요한 인풋 이름 그리고 HTML속성으로 CSS셀렉터로 사용가능하다. input[type=email] { color : grey } 그리고 아래와 같이 submit 타입을줘서 "폼태그안에서" 사용가능하다. 전송 - 셀렉터사용시 여러개 한번에 가능 /* 여러태그에 한번에 속성주는법 .class도 가능*/ div,input,textarea{ box-sizing: border-box; } - 재사용가능하게 class만들기 기존의 클래스 사용한다음 추가적으로 클래스 추가해서 사용이 가능하다. Message -..

- 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..

- 배경 이미지삽입하기 (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;..

- 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..

- float을 이용한 레이아웃 만들기 이와같은 레이아웃을 만들기위해 먼저 크게 Container를 만들어준다. 그리고 그안에 순서대로 header, left-menu, right, footer를 만들어주는데 div를 사용하게되면 기본 display:block 속성이기때문에 원하는대로 만들 수 없음 이때 float을 사용한다.float을 사용해 중간에 좌측 메뉴바, 우측 content 공간을 만들어주고 최종적으로 footer쪽은 clear:both를 이용해 float의 영향을 받지 않은체 레이아웃을 만들 수 있다. .container{ width: 800px; } .header{ width: 100%; /* 부모 태그 width의 100% */ height: 100px; background:aquamar..