반응형 frontend4 CSS border 속성 사용하는 방법 border는 div,table,p 등등 여러 태그들에 테투리를 표시하는 속성이다. border 속성은 아래와 같다. 1. border 태그의 동서남북 4면에 테두리를 표시한다. border: width style color; 로 사용한다. (예시: border:1px solid black) 속성 설명) - width 속성값 설명 medium 2px 굵기로 표시, 기본설정값 thin 1px 굵기로 표시 thick 5px 굵기로 표시 length 입력된 수치로 굵기를 표시(cm, mm, in, px, pt, pc 단위로 입력) initial 기본설정값으로 굵기를 표시(medium) - style 속성값 설명 none 기본값, 테두리 표시 안함. hidden none과 같음 dotted 점 선으로 테두리 표.. 2018. 4. 21. 배경화면이 적용된 div 위에 div 배치하기 배경화면이 적용될 div의 css 속성을 아래와 같이 지정하였다. background-image:url('url 경로'); background-repeat : no-repeat; background-size: 100% 100%; 그 후 아래와 같이 div 위에 배경화면 안에 배치될 div를 코딩했다. 톰캣을 실행 결과 화면에 div가 나오지 않는다. component div의 크기가 있더라도 background div의 width와 height를 지정해주지 않았기 때문이다. 그래서 width, height를 주려고 했으나 %는 적용이 되지 않았다. 그렇다고 px값을 입력하면 반응형 웹을 만들기에는 부적절하기 때문에 고민 끝에 padding을 통해 상하 %를 입력하여 원하는 형태의 이미지 배치를 얻을 수 .. 2018. 2. 18. 이미지의 특정영역에 마우스 이벤트를 발생시켜야 할 때 프론트엔드 개발을 하다 보면 이미지의 특정영역에 마우스를 over, leave, click등의 이벤트를 발생시켜야 하는 경우가 있다. 이 때, 이미지를 div 태그 안에 img 태그를 사용하여 이미지를 띠우고 해당 div를 position: relative로 지정한다. 그리고 이벤트를 발생시킬 영역을 div로 만든다. 이 때, 안 쪽에 배치되는 div의 style은 이다. 위의 그림에서 보면 검은 박스가 이미지를 넣는 div 태그이며, 빨간색 박스는 이벤트를 발생시키기 위해 배치하는 div이다. 2번 div는 1 번 div 영역을 벗어날 수 있다. 하지만 좌표 위치는 바깥 div의 시작좌표와 동일하다. 이제 div의 배치를 지정해줘야 한다. absolute로 position을 지정하면 아래의 css 속성.. 2018. 2. 9. 반응형 페이지 만들 때 css 1. div로 각각의 영역을 지정한다. 2. width는 %로 지정하고, height의 경우 margin, padding으로 지정한다. div로 다른 태그들을 감싸고 있다면 padding과 margin을 추가하기가 수월하다. 3. ul, li 태그의 경우 div태그 안에 넣는다. ex) 단, li 태그의 경우 height가 원하는 대로 지정이 안될 때가 있다. 그 때는 li태그에 display:inline-block을 이용하여 높이를 지정하면 된다. 4. display:inline-block은 유용한 속성이긴 하지만 남발하면 나중에 괴로워질수 있다. 2018. 2. 5. 이전 1 다음 반응형
