1편 - [Web Programming] - CSS 속성 1편 ( 단위 + 박스 속성 )
2편 - [Web Programming] - CSS 속성 2편 ( display + 배경 속성 )
3편 - [Web Programming] - CSS속성 3편 ( 글자 + 위치 속성 )
4편 - [Web Programming] - CSS 속성 4편 마지막 ( float + 그림자 + 그레이디언트 속성 )
지난 4편에 걸처 CSS 속성을 포스팅 해봤다.
크게 어렵지는 않지만 내용이 많아 길게 느껴졌던 것 같다.
이어서 CSS 응용과 레이아웃 편을 적을려 했지만 그전에 먼저 로그인 화면과 회원가입 화면을 만든 것이 있어서
이를 예제로 복습겸 다른 추가사항들이 있어 공부해본 것들을 포스팅 해보겠다. : )
우선 만들어본 화면이다. 세로로 길게 찍어서 앱 화면 같지만 웹으로 구현한 화면이다. 😅
아직 막 걸음마를 땐 단계라 버튼의 멋진 애니메이션 부분은 "css 버튼 효과"라고 검색을 해서 가져온 코드다.
css만으로도 다양한 버튼 효과를 구현 할 수 있다는 것을 알았다.
이제 코드를 분석하면서 공부 해보자. 👍
첫번째로 로그인 화면을 먼저 살펴보겠다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <title> SIGN IN FORM </title> <link rel="stylesheet" type="text/css" href="Login_CSS.css"> </head> <body> <center> <div id="loginForm"> <div> <img id="logo" src="logo.png"/> </div> <div> <label id="label"> P L I T </label> </div> <div> <label> You can stick the post-it on place ! </label> </div> <br> <table> <tr> <td colspan="2"> <input id="id" type="text"/> </td> </tr> <tr> <td colspan="2"> <input id="pw" type="password"/> </td> </tr> <tr> <td> <div class="wrap"> <a href="../Sign up/Sign up.html" class="button"> SIGN UP </a></td> <td> <div class="wrap"> <a href="#" class="button"> SIGN IN </a> </td> </tr> </table> </div> </center> </body> </html> | cs |
스타일 시트는 외부로 작성 했다.
이전 html 포스팅으로 공부했던 내용만을 사용해서 크게 어려운 부분은 없다.
단지 CSS 효과 버튼을 찾아보면서 신기한게 아니지만 신기 했던 것은 버튼 대신 anchor 태그를 사용해서
하이퍼링크를 응용해서도 버튼 모양을 만들면 된다는 것이다. ( 21, 22 줄 )
아래는 위의 로그인.html의 스타일 시트 ( CSS ) 부분이다.
아마 이전에 배운 CSS 속성들이 많이 보일 것이다. 처음 보는 속성만 한번 알아 보겠다.
( 20 라인 ) input 태그에 포커스를 두면 ( 클릭을 해보면 ) 아래와 같이 파란색 태두리가 생기는 것을 볼 수 있을 것이다.
이선이 바로 outline 이다. 간단히 말하면 border와 비슷한 친구로 border의 바깥 외곽선이다.
border 지정시 아마 레이아웃이 조금씩 움직이는 현상을 볼 수 있는데 outline은 레이아웃에 관여 없이 선만 적용이 된다.
어찌 됐든, input태그의 파란색 선을 없애고 싶을 때 outline: none; 을 사용하면 된다.
그리고 처음 보는 친구가 59 ~ 63번째 줄이었다.
CSS로 애니메이션을 어떻게 주지? 라는 의문점을 가졌었는데 트랜지션 이라는 멋진 친구가 해주는 듯 하다.
참고: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
참고: http://html5around.com/wordpress/tutorials/css3-transition/
위의 참고 사이트를 읽으면 자세히 설명이 되어 있다 ! 👍
나의 코드에서 59 ~ 63번째 속성명만 다르지 키워드는 다 똑같은데 -webkit, -moz-transition 이런 친구들은 뭐지? 했더니
각 브라우저에 맞는 벤더 프리픽스라고 한다.
이제 다음으로 회원가입 쪽을 살펴 보겠다.
로그인과 크게 다를 것 없다. 다만 로그인에서는 하이퍼링크로 버튼을 흉내내 주었고
아래에서는 <button> 태그를 사용했다.
아직 JS를 공부해보지 않아서 둘의 차이점을 크게 모르겠다.
CSS 연습이라 생각하고 사용해봤다. 😅
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html> <html> <head> <title> SIGN UP FORM </title> <link rel="stylesheet" type="text/css" href="SignUp_CSS.css"> </head> <body> <center> <div id="signUpForm"> <div id="context"> SIGN UP WITH PLIT </div> <div> <label> You can stick the post-it on place ! </label> </div> <div> <label> Let's play XD </label> </div> <br> <table> <tr> <td> <input id="birth" type="text" placeholder="yyyymmdd"></input> </td> </tr> <tr> <td> <input id="id" type="text" placeholder="choose your id"></input> </td> </tr> <tr> <td> <input id="pw" type="password" placeholder="password" /> </td> </tr> <tr> <td> <input id="check" type="password" placeholder="check the password" /> </td> </tr> </table> <button> SIGN UP </button> </div> </center> </body> </html> | cs |
맨 위에 첨부한 완성 gif를 보시면 input 태그에 처음에는 글이 적혀있다가 클릭(포커스)을 하고 글을 적으면
기존의 글이 지워진다. 그리고 다시 다 지우면 기존을 글이 다시 나타나게 된다.
이를 구현하고 싶어서 찾아보니 placeholder라는 멋진 녀석이 있었다.
이 친구는 '짧은 힌트'를 나타내는 역할을 한다.
위의 사용처럼 input태그에 사용자가 어떤 데이터를 입력해야하는지에 대한 힌트를 제공한다.
나머지 부분을 모두 다룬 내용이니 스타일 시트 부분으로 넘어가보자.
여기서도 마찬가지로 input태그에 ouline: none;으로 설정해 주었다.
그리고 61번째 줄을 보면 또 처음 보는 속성이 하나 있다.
속성 cursor은 해당 태그에 마우스 커서를 대면 커서의 모양을 바꿔주는 친구다.
https://ofcourse.kr/css-course/cursor-%EC%86%8D%EC%84%B1
해당 사이트에서 키워드를 참조하면 된다. : )
그리고 또 처음보는 친구가 befor, after 선택자다.
참고 사이트: http://www.nextree.co.kr/p8468/
가상 엘리먼트 선택자라 불린다.
::befor - 요소의 시작 지점에 생성된 요소를 선택
::after - 요소의 끝 지점에 생성된 요소를 선택 한다.
원하는 것을 찾으면서 해보니 공부하면서 쓴 포스팅 글이 정말 극 일부분인것 같다. 😓
이어서 CSS 응용과 레이아웃을 계속 해보겠다.
'웹 프로그래밍' 카테고리의 다른 글
| Java Script 2편 + 자바스크립트 문서 객체 모델 (0) | 2018.05.15 |
|---|---|
| JAVA Script 1편 + 자바스크립트 기본 (0) | 2018.05.15 |
| CSS 속성 4편 마지막 ( float + 그림자 + 그레이디언트 속성 ) (0) | 2018.05.10 |
| CSS속성 3편 ( 글자 + 위치 속성 ) (0) | 2018.05.10 |
| CSS 속성 2편 ( display + 배경 속성 ) (1) | 2018.05.09 |