탭 메뉴 하단 [검색+포럼작성 영역]
이 영역의 배경은 각각 진회색, 오렌지색의 사다리꼴 사각형으로 이루어져 있다.
CANVAS 요소를 이용해 사다리꼴을 2개 그릴 수는 있는데,
이걸 배경으로 놓고 그 위에 SELECT나 INPUT 등의 요소를 올릴 수 있는 지는 모르겠다.
물론 방법이 있지만 그냥 깔끔하게
[직사각형 + 삼각형+ 삼각형+ 직사각형]으로 1개의 사다리꼴 배경을 만들어봤다.
(* 아래 소스에서 input 등의 소스 및 직사각형 스타일은 다 생략했음)
<head>
/* 삼각형의 위치를 잡아줄 기준점 지정. 기타 스타일 생략 */
.box1, .box1{position:relative}
/* 첫번째 삼각형 위치 지정 */
#my-canvas{position:absolute;right:-60px;top:0}
/* 두번째 삼각형 위치 지정 */
#my-canvas2{position:absolute;left:-60px;top:0}
</head
<!--box1 클래스를 가진 진회색 직사각형은 CSS로 스타일을 따로 잡아줬음. position 값은 relative로-->
<div class="box1">
<!--캔버스가 출력되는 영역. position 값을 absolute로 놓아 box1직사각형 우측에 위치할 수 있게 함-->
<canvas id="my-canvas" width="60" height="60"></canvas>
<script>
var ctx = document.getElementById("my-canvas").getContext("2d"); // 변수선언
ctx.beginPath(); //스따뚜
ctx.moveTo(00,00); //x,y좌표 각각 0에서 출발. 단위는 픽셀
ctx.lineTo(60,00); //x값 60지점을 향해 직선으로 선을 그음
ctx.lineTo(00,60); //x값 0, y값 60지점을 향해 직선을 그림. 삼각형의 가장 긴 변이 생겨남
ctx.closePath(); //출발지점으로 마지막 직선을 그림
ctx.fillStyle="#62666d"; //삼각형의 색깔을 지정해줌
ctx.fill();
</script>
</div>
<!--box2 클래스를 가진 오렌지색 직사각형은 CSS로 스타일을 따로 잡아줬음. position 값은 relative로-->
<div class="box2">
<!--캔버스가 출력되는 영역. position 값을 absolute로 놓아 box2직사각형 좌측에 위치할 수 있게 함-->
<canvas id="my-canvas2" width="60" height="60"></canvas>
<script>
var ctx = document.getElementById("my-canvas2").getContext("2d");
ctx.beginPath();
ctx.moveTo(60,00);
ctx.lineTo(60,60);
ctx.lineTo(00,60);
ctx.closePath();
ctx.fillStyle="#e85e09";
ctx.fill();
</script>
<button type="button" id="write_forum">글작성하기</button>
</div>
'HTML' 카테고리의 다른 글
| [html] input 포커스(focus) 됐을 때 placeholder 활성화 / 비활성화 (0) | 2018.01.18 |
|---|