웹꾸미기

AfterSchool/html 방과후

CSS: 박스와 경계선(0414)

오늘은 박스와 경계선 그리기 등등에 관해 배웠다!! 1. 박스 1-1) 예제1 width: 500px; height: 200px width는 너비(가로길이) height는 높이를 나타낸다. border: solid 5px #b2dfdb; border는 경계선이고 dotted는 점선이다 1-2) 예제 2 width: 1200px; border: solid 2px #b2dfdb; 위의 border태그를 사용하여 박스 선을 얇게 하였다. 1-2) 예제3 padding: 10px; => margin과 다르게 똑같은 크기로 여백을 줌 margin: 20px 40px 60px 80px; => 위 오른쪽 아래 왼쪽 2. 테두리 태그 정리 속성 속성 값의 예 설명 border solid 1px #ff0000 박스의 상..

AfterSchool/html 방과후

CSS: 배경 색상&이미지 삽입(0412)

오늘은 이미지 배경에 색상을 넣고 이미지 삽입하는 법을 배웠다 배운 내용을 표로 정리해보면서 복습해보았다! 1. 태그 정리 속성 설명 background-color 배경 색상 지정 background-image 배경 이미지 삽입 background-repeat 이미지 반복 background-positon 이미지 위치 list-style-type 리스트 모양 바꾸기 list-style-image 리스트 사진으로 바꾸기 이걸 웹꾸미기에 적응해보도록 하겠다. 2. 배경 색상 지정&이미지 삽입 결과 코드 풀이 위의 코드에 대해 자세히 알아보도록 하겠다! 먼저 웹 전체를 꾸미기 위해서는 스타일 안에 body 태그를 이용해야 한다. background-color background-color태그를 이용하여 배경색..

AfterSchool/html 방과후

CSS : 웹페이지 꾸미기(0405)

저번까지 html을 배우고 CSS를 배웠다 오늘은 페이지 꾸미기에 관련된 것에 대해 배우게 되었는데, 헷갈리는 부분이 너무 많았다ㅠㅠ 그래도 내가 코드를 입력할 때마다 웹페이지가 이쁘게 꾸며지는 걸 보니 재미있었고, 더욱 열심히 공부해야 겠다는 생각이 들었다! 그리고 저번글에 나온 명령어들을 표로 만들어 보았다. 다른 분들도 필요하시면 참고해주세요☺️ 1. CSS속성 태그 속성 속성값 설명 font-family 한글 글꼴 : 굴림,돋움, 맑은 고딕 등 영문 글꼴 : Times New Roman, Arial, Georgia 등 한글 또는영문의 글꼴 지정 font-size 12px,20px, 30px 등 글자의 크기 지정 color 색상 이름 : red, blue, green, purple, black, w..

노 코딩 노 라이프
'웹꾸미기' 태그의 글 목록