<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <meta http-equiv=\"Content-Type\" content=\"application/xhtml+xml; charset=utf-8\" />
<style>

.text
{
         relative;
        margin:1.5em;

        font-size: 14pt;
        font-weight: bold;

        color: #0000ff;
}

.image
{
         relative;
        margin: 0 1.5em 1.5em 1.5em;
}

.image img
{
        cursor: move;
}

.setButton
{
         relative;
        margin: 0 1.5em 1.5em 1.5em;
}

.typeA
{
        background: yellow;
        height: 30px;
}

.typeB
{
        cursor: pointer;

        background: red;
        color:white;

        height: 30px;

        border-width: 5px;
        border-color: #FF99CC;
}
        
</style>

 </HEAD>

 <BODY>

 <!--타이틀 (학번, 이름) 출력-->
<div id=\"title\" class=\"text\">
        학번 : 1234567890, 성명 : 홍길동
</div>

<!-- 이미지 출력 -->
<div id=\"img\" class=\"image\">
        <img src=\"이미지 경로\" alt=\"대학교로고\">
</div>

<!-- 버튼 출력 -->
<div id=\"button\" class=\"setButton\">
        <input type=\"button\" class=\"typeA\" value=\"색상버튼\">
        <input type=\"button\" class=\"typeB\" value=\"색상버튼\">
<div>

 </BODY>
</HTML>


===============================

첨부파일로 올려놨고,
붉은 버튼 테두리에 분홍색 말인데, 그거랑 똑같이 출력 해야 하는거면 버튼 쪽 코드 새로 수정해야 할거야

그리고 니가 짠 HMTL / CSS 코드에서 오류 같은거 집어 주자면





<img src=\"?.jpg\" width=\"100\" height=\"100\" vertical-align:bottom cursor-move>


여기에서 vertical-align 은 style 속성이기 때문에 저렇게 바로 쓰면 안됨

style 따로 빼서 클래스로 지정안하고 엘리먼트에 바로 적용할때는 


style=\"\"


이라고 해 줘서 저 큰 따옴표 안에 스타일 지정해 줘야 하고, 각 스타일 속성 정의가 끝나면 세미콜론(;) 으로 종결 표시를 해줘야함.

즉,


<img src=\"?.jpg\" width=\"100\" height=\"100\" style = \"vertical-align:bottom; cursor-move\">


이렇게 되 줘야 맞는 표현이고, 끝에 쓴 cursor-move 는 이렇게 쓰는게 아니라


cursor:move 이렇게 써줘야 함. cursor 라는 style 속성을 move 로 주는거란 뜻 ㅇㅇ


결론적으로 <img src=\"?.jpg\" width=\"100\" height=\"100\" style = \"vertical-align:bottom; cursor:move;\">


이게 맞는 표현임 ㅇㅇ 


<br>
<STYLE TYPE=\"text/css\">
   <!--
   .MY{
    BORDER-STYLE:SOLID;
    BORDER-WIDTH:6PX;
    BORDER-COLOR:red;
    BACKGROUND-COLOR:YELLOW;
    

    ABSOLUTE;

    TOP:60PX;LEFT:50PX;
    

    z-index:1;
   }

</STYLE>


여기서 내가 의문점이 든건, 왜 absolute 를 썼냐는건데,

결과물 보고 글 내용 보니까 모르고 쓴거 같아서.


position 은 엘리먼트의 위치를 잡아 주는건데, 여기에 relative, absolut.. 또 뭐 있던가 에이 몰라 여튼 이 2개를 쓰는데

relative 는 다른 엘리먼트들과의 상대적인 위치를 뜻하고, absolute 는 절대적 위치를 뜻함.


relative를 썼을 때 쓸수 있는 속성이 있고, absolute 를 썼을 때 쓸수 있는 속성이 있으니까 이건 상황에 맞게 적절하게 써 줘야함.

아까 그랬지? 이렇게 하니까 버튼이 이미지랑 겹친다고.

absolute 속성을 주고, top: 60px, left: 50px 을 주니까
절대적 위치로 위에서 60px, 왼쪽에서 50px ( 좌표 : 60, 50 ) 에 엘리먼트가 뜨게 되는거야.

여기서 포지션을 쓰고 싶으면 (꼭 쓸 필요 없이 <br /> 태그 만으로도 가능할거 같지만.) absolute가 아니라 relative를 주는게 맞다고 생각함 ㅇㅇ