오늘은 레이아웃에 대해 배우게 되었다. 1. 레이아웃 관련 태그 2. 레이아웃 예제 그리고 오늘 배운 내용을 알아보기 쉽게 이미지로 만들어 보았다. margin태그를 이용하여 선을 넣어줬다! 그리고 이거는 background-color태그를 이용하여 레이아웃에 배경색을 추가 시켰다! 그럼 오늘 배운건 여기까지 ! ※여기에 나온 모든 이미지는 작성자가 만든 것 입니다
오늘은 저번에 배운걸 바탕으로 절대배치와 float배치에 대해 연습해보았다. css에 대해 더 배우기 위해서 검색을 해봤는데 그림을 이용하여 설명하는 게 있었다. 그림을 이용해서 코드를 보니깐 이해하는게 편했고 나도 한 번 그림으로 만들어봐야겠다! 라는 생각이 들었다! 처음 만들어서 미숙한 부분이 있지만 확실히 한눈에 더 알아보기가 편해 진것 같다 1. 절대배치 절대 배치는 절대 위치에 배치할 수 있다. 절대 위치는 left, right, top, bottom 프로퍼티 값으로 지정하며 이 값들은 부모 태그 안에서의 상대 좌표이다 2. float 배치 float 프로퍼티를 이용해 유동 배치를 할 수 있다. 보통 마우스로 브라우저 크기를 변경하면 텍스트나 이미지가 다음 줄로 내려가는 등 위치가 변한다. 이 ..
오늘은 블록박스와 인라인 박스에 대해 개념부터 자세히 알아보는 시간을 가졌다! 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..
시험기간 때문에 한 2주정도 HTML수업을 못 들었던 것 같다. 그래서 오늘은 전에 했던 것을 복습하는 시간을 가졌다. 기억이 돌아올듯 하면서 긴가 민가 했다. 조금씩 더 하다보니 기억이 돌아 올 것 같다! 오늘 복습시간에는 버스표 예매 페이지와 회원가입 양식 페이지를 만들었다! 1. 버스표 예메 페이지 만들기 1-1) 결과 1-2) 코드 버스표 예매 구분 출발 도착 출발시간 소요시간 완행 서울 광주 09:00 03:00 직행 서울 대구 10:00 03:30 직행 서울 부산 11:00 04:10 table 안에 tr을 넣고 th를 하여 맨 위에 있는 구분 출발 도착 출발시간 소요시간을 정해주었다 구분 출발 도착 출발시간 소요시간 위와 같은 코드를 작성하고 id 선택자를 추가하여 테두리를 굵게 표시해주었다..
1. 로그인 폼 1-1) 결과 1-2) 코드 Member Login Id PW 로그인 회원가입 아이디/비밀번호찾기 2. 회원가입 양식 만들기 2-1) 결과 2-2) 코드 가입 양식 아이디 : 비밀번호 : 비밀번호 확인 : 이름 : 성별 : 여성 남성 휴대전화 : 010 011 017 - - 이메일 : @ 선택 naver.com hanmail.net gmail.com 취미 : 음악감상 독서 등산 자기소개 : 파일 첨부 : * 2MB까지 가능
오늘은 테이블에 대해 자세히 배우게 되었다. 테이블 경계선 넣기와 배경서식하는 방법등을 알게 되었다 1. KTX 열차표 예매 페이지 만들기 1-1) 결과 1-2) 코드 KTX열차표 예매 열차번호 출발 도착 특실 일반실 소요시간 175 서울 21:00 부산 23:44 02:44 177 서울 21:30 부산 00:08 02:38 179 서울 22:00 부산 00:42 02:42 2. 영어 교재 안내 페이지 만들기 2-1) 결과 2-2) 코드 영어 교재 안내 수강레벨 코스 A 코스 B 수강기간 세부내용 보기 레벨1 Side by Side 1 American Headway 1 1개월 레벨2 Side by Side 2 American Headway 2 1개월 레벨3 Exploring English 1 2개월 레벨..
오늘은 박스와 경계선 그리기 등등에 관해 배웠다!! 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태그를 이용하여 배경색..
