안녕하세요! 오늘은 DOM 객체로 HTML 요소의 속성 바꾸는 법에 대해 공부하고자 합니다. 여기서 잠시!! 이 글을 읽기 DOM객체에 관련된 글을 읽고 와주세요!! 그럼 이제 DOM 객체로 HTML 요소의 속성을 바꾸는 법에 대해 알아보겠습니다!! 텍스 필드의 값 다루기 1. 텍스트 필드의 값 가져오기 값 가져오기 function getValue() { var textField = document.getElementById('myTextField'); var textFieldValue = textField.value; alert('텍스트 필드의 값: ' + textFieldValue); } 사용자가 입력한 텍스트 필드의 값을 가져오기 위해 getElementById로 해당 텍스트 필드를 찾고, 그 값은..
오늘은 블록박스와 인라인 박스에 대해 개념부터 자세히 알아보는 시간을 가졌다! HTML 태그는 인라인 태그와 블록 태그로 나누고 인라인 태그는 인라인 박스, 블록 태그는 블록 박스로 출력하게 된다 1. 블록 박스 블록 박스 블록 박스는 새 라인에서 시작, 왼쪽에서 오른쪽 끝까지 통째 점유 1-1) 예제 코드 Block Span과 Block Span입니다. 결과 2. 인라인 박스 인라인 박스 인라인 박스는 블록안에 배치 옆에 다른 태그 배치 가능 2-1) 예제1 코드 DIV1 DIV2 DIV3 결과 2-2) 예제2 코드 DIV1 DIV2 DIV3 결과 2-3) 예제3 코드 html코드 나는 div(none)입니다. 나는 div(inline)입니다. 나는 div(inline-block)입니다. 나는 divs..
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수업을 들은지 1~2차 되는 날이다. 처음에는 기초적인 것만 알고 언어가 어색했는데 지금은 꽤 익숙해진거 같다. 물론 2번밖에 안했지만..ㅎ 그래서 지금까지 배운것을 정리면서 복습을 하는 의미로 열심히 끄적여 보도록 하겠다! 1. 링크이동 안녕하세요🥰 네이버로 이동 네이버 이동을 누르면 짠 이렇게 네이버로 이동하게 된다! 2. 문자크기 문서제목 문서제목 문서제목 문서제목 문서제목 문서제목 이걸 보고 원하는 크기에 맞춰 써보자 ! 3. 띄어쓰기 ㄴ0ㄱ 이렇게 된다 4. 단락 튤립 튤립은 여러 종류의 품종으로 나누어져 있어 각기 아름다운 꽃을 감상할 수 있다. 햇볕이 잘 들고 배수가 잘 되는 토양에 심는 것이 적합하며 화분은 구근의 2~3배 정도 크기가 적당하다. 5. 순서없는 목록 식물원..
