오늘은 박스와 경계선 그리기 등등에 관해 배웠다!! 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 박스의 상..
오늘은 이미지 배경에 색상을 넣고 이미지 삽입하는 법을 배웠다 배운 내용을 표로 정리해보면서 복습해보았다! 1. 태그 정리 속성 설명 background-color 배경 색상 지정 background-image 배경 이미지 삽입 background-repeat 이미지 반복 background-positon 이미지 위치 list-style-type 리스트 모양 바꾸기 list-style-image 리스트 사진으로 바꾸기 이걸 웹꾸미기에 적응해보도록 하겠다. 2. 배경 색상 지정&이미지 삽입 결과 코드 풀이 위의 코드에 대해 자세히 알아보도록 하겠다! 먼저 웹 전체를 꾸미기 위해서는 스타일 안에 body 태그를 이용해야 한다. background-color background-color태그를 이용하여 배경색..
CSS배운지 한 3일차?되는날이다. 아직도 어려운게 많지만 블로그에 글을 쓰다보니 공부도 되고 보람찬 것 같다! 1. 클래스 선택자 코드 난초 난초의 특징 난초는 외떡잎식물 중에서 가장 친화한 식물이며 아름답고 향기로운 꽃이 피는 관엽식물로 애호가가 많다. 난초의 종류 동양란과 서양란으로 구별되며, 동양란에는 보춘화, 한란, 석곡, 풍란등이 있다. 서양란에는 카틀레아, 심비듐, 덴드로듐, 팔레노프시스등이 있다. 결과 1-1) class 선택자 사용법 html에 class 태그를 걸었을 경우 css에 다음과 같이 작성하면 된다! 내용 .클래스 이름 { 내용 } 1-3) 예제1(class 선택자) 결과 코드 제1회 봄빛 수목원 여름꽃 축제 수련•수국•무궁화•원추리 아름다운 여름꽃과 시원한 바다를 경험할 수 ..
저번까지 html을 배우고 CSS를 배웠다 오늘은 페이지 꾸미기에 관련된 것에 대해 배우게 되었는데, 헷갈리는 부분이 너무 많았다ㅠㅠ 그래도 내가 코드를 입력할 때마다 웹페이지가 이쁘게 꾸며지는 걸 보니 재미있었고, 더욱 열심히 공부해야 겠다는 생각이 들었다! 그리고 저번글에 나온 명령어들을 표로 만들어 보았다. 다른 분들도 필요하시면 참고해주세요☺️ 1. CSS속성 태그 속성 속성값 설명 font-family 한글 글꼴 : 굴림,돋움, 맑은 고딕 등 영문 글꼴 : Times New Roman, Arial, Georgia 등 한글 또는영문의 글꼴 지정 font-size 12px,20px, 30px 등 글자의 크기 지정 color 색상 이름 : red, blue, green, purple, black, w..
오늘은 html배운지 6일차되는날... 오늘 굉장히 어려운 것을 배웠다 바로 css이다 역시 모든지 처음은 다 어려운것 같다 하지만 처음의 시작이 반이라는 말이 있는 듯이 도전을 두려워하면 안될것 같다!! 1. 인라인 스타일 결과 코드 제목입니다 color: 색깔 ☞글자색깔 font-size : 숫자px; ☞글자크기 저 사진과 같이 글씨에 색을 넣을 수 있다 2. 내부 스타일 시트 결과 코드 제목입니다 외부스타일 제목입니다. 외부스타일은 CSS 새로운 파일을 만들고 h5{ color: pink; font-size: 28px; } 이때 !! 파일을 저장할때 파일명.css로 저장해야한다. 그다음 css파일과 html과 연결하기 위해 아래와 같은 코드를 작성하면 된다! 3. 예제 마지막으로는 이것저것 적혀있는..
오늘은 html배운지 5일되는날 오늘 아주 재밌는걸 배웠다 바로 회원 가입 양식이다 코드 이름 : 나이 : id : 비밀번호 : 개인정보 : 공개 비공개 성별 : 여자 남자 취미 : 댄스 독서 영화감상 드라마보기 이메일 : @ 선택 naver.com e-mirim.hs.kr gmail.com 자기소개 : 검색 확인 다시 쓰기 파일 첨부 : 2MB까지 가능 색상 선택 : 날짜 시간 선택 : 숫자 선택 : 슬라이더값선택 : 시간선택 : 년도 주 선택 : 짜잔! 두번째는 테스트로 혼자서 만들어 보았다 뭔가 적을게 많다 보니깐 헷갈리고 틀리는 부분이 많았지만 앞에 배운 것을 보고 계속 하다보니깐 원하는 결과가 나오긴 했다! 나중에는 보지 않고 외워서 하는 날이 오면 좋겠다 ㅎㅎ 그럼 열심히 복습을 하러 ~! 코..
html 배우다보니 재밌는것 같다 오늘도 그럼 배운것을 복습해보도록 하겠당! 1. 무비(영상넣기) HTML 삽입 미리보기할 수 없는 소스 2. 표 2-1) 태그의 속성 속성 설명 table 테이블 전체를 만들 때 사용 tr 행을 나타날 때 사용 td 열을 나타날 때 사용 HTML 삽입 미리보기할 수 없는 소스 마지막은 과제! 휴 혼자서 하니깐 어려운게 많다.. 분명 샘이랑 할 때는 뭐든지 다 할 수 있는 기분이였는데 분발해야겠다는 생각이 든다 파이팅~!! 오늘은 여기까지 테이블 태그가 헷갈린다.. 연습을 좀 더 많이 해봐야될 것 같다!!
오늘은 html 수업을 들은지 3일째 되는날... 역시 어렵다 하핳 그런의미로 복습차 다시 끄적여보도록 하겠다잉 다른 분들도 도움이 되시길! 1. 이미지 태그 금계국 금계국은 북아메리카 원산이며 관상요으로 화단에서 재배한다. 6월~8월에 지금 2.5~5cm 노란 꽃이 줄기와 가지 끝에 한 송이씩 핀다. 물 빠짐이 좋은 모래흙이나 마사토에서 잘 자란다. 1-1) 태그의 속성 속성 설명 src 삽입하는 이미지 파일의 이름(경로 포함) 지정 width 이미지의 너비 지정 height 이미지의 높이 지정 title 마우스 포인터를 갖다 댔을 때 나타나는 이미지 설명 지정 2. 오디오 2-1) 태그의 속성 속성 설명 src 삽입하는 오디오 파일의 이름(경로 포함) 지정 controls 화면에 플레이어 표시여부 지..
