HtmlCss/CSS20 CSS - Position 1번영역 2번영역 3번영역 -요소의 출력 위치를 지정하는 방법 top, left, right, bottom을 이용하여 요소의 출력 위치를 지정할 수 있는데 이 속성들은 position의 영향을 받는다. top : 위쪽에서부터 떨어진 거리(y축좌표) left : 왼쪽에서부터 떨어진 거리(x축좌표) right : 오른쪽에서부터 떨어진 거리( bottom : 아래쪽에서부터 떨어진 거리 position 좌표를 지정하는 기준을 설정한다. static :기본적인 흐름에 맞게 위치가 결정된다.(기본값이고 출력 위치를 임의로 변경할 수 없다.) relative :정상적으로 출력될 위치를 기준으로상대적인 위치를 설정할 수 있다. absolute : 컨테이너의 원점을 기준으로 위치를 설정한다.(컨테이너 => 자신을 포함하.. 2019. 5. 25. Css- border border 연습 none dotted dashed solid double groove ridge inset outset border-radius : 둥근 테두리선 box-shadow : box의 그림자효과 text-align : 글씨를 좌우로 정렬해준다. display : 출력 영역의 성지를 변경한다. border-width : 테두리선의 두께 border-color : 테두리선의 색깔 border-style : 테두리선의 종류 Css div를 display:teble-cell;로 만들어서 table을 만들어주는 사람도 있다. 그 이유는 레이아웃이 편해서이다. 이때 안에 있는 내용을 중앙으로 정렬하기 위해서는 vertical-align:middle; 설정을 해주면 된다. 2019. 5. 25. Css - background 배경 이미지 설정하기 backgorund-image: url('경로명/그림파일명.확장자'); -CSS에서 경로를 상대경로로 설정할 때 기준위치(현재위치) 인라인CSS, 내부CSS ==> HTML문서의 저장 위치 외부CSS ==> 외부CSS 파일의 저장 위치 -배경 이미지의 반복 여부 설정 repeat (상하좌우 반복) -> 기본값 no-repeat(반복하지 않는다.) repeat-x, repeat-y (x축, y축 방향으로만 반복) background-position top, center, bottom -> 상하 left, center, right -> 좌우 background-size: 가로, 세로 배경이미지의 크기. background-attachment local,scroll (배경과 내용이 같이 .. 2019. 5. 25. Css- Block요소,Display h1태그의 영역입니다. p태그의 영역입니다. div태그의 영역입니다. pre태그의 영역입니다 em태그의 영역입니다. span태그의 영역입니다. a태그의 영역 inline-block은 줄바꿈이 없는 inline성질과 크기를 지정할 수 있는 block요소의 성질을 갖는다. display inline요소와 block요소의 성질을 변경할 수 있다. none : 요소를 출력하지 않습니다. block : block요소로 출력합니다. inline : inline 요소로 출력합니다. inline-block : 줄바꿈이 없는 block요소로 나타낸다. table-cell :table의 cell과 같은 성질의 요소로 나타낸다. table : table과 같은 성질의 요소로 나타낸다. 블록요소 자동 줄바꿈 기능이 있다. 가.. 2019. 5. 25. 이전 1 2 3 4 5 다음
