피그마
Figma: the collaborative interface design tool.
Build better products as a team. Design, prototype, and gather feedback all in one place with Figma.
www.figma.com
*new design file-ㅁ-place image/video 사진 선택
*rectangle 사용하여 가로, 세로 길이 측정
*단축키 i 사용해 색상 뽑기
HTML, CSS
1. html 홈페이지 제작 규칙 단추기
| html5 | 누르면 한번에 완성 |
| ! | 더 빠르게 완성 |
2. 수평선 그리기
| <hr> | body에 사용, 닫는 태그 없음 |
3. class 이름 선택자
| <p class="p1"></p1> | 문단마다 스타일 다르게 적용해야 할 때 별명 붙여줄 것 |
| .p1{ } | 스타일에서는 별명 붙여준 것들에 .붙여줄 것 |
| <hr class="hr1"> | 구분선마다 스타일 다르게 적용해야 할 때 별명 붙여줄 것 |
| .hr1{ } | 스타일에서는 별명 붙여준 것들에 .붙여줄 것 |
4. 글자 효과와 관련된 태그
| <strong></strong> | 글자 강조 하고 싶을때 |
| <u></u> | 글자 밑에 밑줄 |
| <em></em> | 글자 15도 기울이게 |
| <strike></strike> | 글자 위에 취소선 |
| <sub></sub> | 아래첨자 |
| <suf></suf> | 윗첨자 |
=> body 안에 넣는 태그들임
5. 스타일 시트 디자인(css)
| font-family | 글꼴 이름 |
| font-size | 글자 크기 |
| color: # | 글자 색 |
| text-align:left,right,center,justify | 텍스트 정렬 왼쪽, 오른쪽, 가운데, 양쪽 |
| width:크기px | 가로크기(w숫자 누르면 더 간편) |
| height:크기px | 세로크기(h숫자 누르면 더 간편) |
| background: # | 배경색 |
구분선과class
절대반지는? 반지 세 개는 하늘 아래 요정왕들을 위한 것, 일곱 개는 돌의 전당에 있는 난쟁이 군주들을 위한 것, 아홉 개는 죽은 운명의 인간을 위한 것, 하나는 암흑의 왕좌에 앉은 암흑 제왕을
chu03125.dothome.co.kr
실습 결과물1
welcome
이수정의 홈페이지에 오신 것을 환영합니다. 멋진 홈페이지가 되도록 노력하겠습니다. 부디 저의 홈페이지에서 좋은 시간 가지시기 바랍니다. 가실 때에 따뜻한 글한마디 남겨주시면 감사하겠
chu03125.dothome.co.kr
실습 결과물2
반응형