화면 설계 작업하면서
아이디와 비밀번호를 입력하는 인풋 창이 텍스트 바로 옆이나 아래가 아니라 동일한 간격을 가지고 띄어 만들어져야 했다. 일일이 이걸 저장하려고 처음에는 p 태그를 썼는데, 알고보니 p태그는 자체로 한 줄(문단 > paragraph)을 차지하기 때문에 인풋 창이 반드시 아래로 내려갔다. 게다가 자체 마진 때문에 더 복잡해졌고.a태그로 바꾸니 폰트 사이즈는 지정이 되는데, 이번에는 width와 height를 인풋창과 동일하게 맞출 수가 없었다. 결국 검색해서 해결.
원래는 이것도 a태그가 아니라 span 태그로 작업하는게 맞는 것 같다.(특별히 하이퍼링크를 거는게 아니고.) 나중에 수정하도록 하자..
초급이라 css가 많이 필요하다고 한다. 배워야지.
<form>
<a style="font-size:10pt; display:inline-block; width: 60px">아이디</a> <input type="text" style="height:15px;font-size:10pt; width: 200px"><br/>
<a style="font-size:10pt; display:inline-block; width: 60px">패스워드</a> <input type="password" style="height:15px;font-size:10pt; width: 200px"><br/>
</form>
그래도 이것저것 찾아보던 김에 a태그에 대해 알게 된 것 하나를 추가한다.
a태그는 기본적으로 css 를 추가할 수 없다.(블록 설정이 되어있지 않음) 그렇지만 스타일에서 display를 지정한 뒤 block(한 줄 전부 차지) 혹은 inline block(라인 내에 포함되는 블록) 을 설정하면 width와 hetight 속성이 지정 가능하다
덧글