오늘은 레이아웃에 대해 배우게 되었다. 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..
오늘은 박스와 경계선 그리기 등등에 관해 배웠다!! 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태그를 이용하여 배경색..
저번까지 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. 예제 마지막으로는 이것저것 적혀있는..
