1. 웹 요소에 이미지 삽입: background-image 웹 요소에 배경 이미지로 넣을 파일의 경로를 url로 지정해주는 방법이다. 경로는 https://로 시작하는 절대 경로로도, 현재 웹 문서를 기준으로하는 상대 경로로도 작성할 수 있다. background-image: url('이미지 파일 경로'); 이미지 파일은 *.jpg, *.gif, *.png 파일을 사용한다. (*.확장자명 = 확장자를 가진 모든 파일을 지칭하는 기호) 요소의 크기보다 이미지의 크기가 작으면 가로로도 세로로도 이미지가 반복되어 붙는다. 예제 1. ↓ 2. 배경 이미지 반복 방법 지정: background-repeat 1번에서처럼 이미지를 가로로도 세로로도 반복할 수 있지만, 어떤 방향으로 반복할지 지정할 수도 있고, 반복..

1. 배경색 지정: background-color 이 스타일은 이미...ㅋㅋㅋㅋㅋ 어디선가 보고 쓰고 있었던 기술이다...ㅎㅎㅎ 말 그대로 배경 색을 지정하는 데 쓰는 속성인데, 웹 문서 전체에 쓰기도 하고, 텍스트, 목록 등 특정한 요소에도 지정할 수 있는 것이 특징이다! 속성 ─ 표 제목 줄에 쓰는 속성 ─ 에만 배경색을 입히는 데에도 쓸 수 있다. 색상을 표현하는 방법은 사용자가 선택하기 나름이다. hsl, rgb, 16진수 코드(예, #000000), 영문명 색상, 그리고 투명도를 조절할 수 있는 hsla, rgba도 모두 사용할 수 있다. 색상에 대한 자세한 내용은 이~~~~전 포스팅에 다룬 적이 있다. https://from-ms-to-developer.tistory.com/entry/DAY-..

흐음.. 총 17장(章)으로 이뤄진 책에서 오늘로써 8장까지 마무리됐다! 장이 끝날때마다 마무리문제는 항상 있었는데, 개별적으로 풀기는 했지만 포스팅으로 남겨두지는 않았었다. (진짜 했다!!! 진짜로!!) 점점 배워가는 게 많아질수록 기록해두는 게 훨씬 더 낫다는 판단에서, 이번 장에서부터는 마무리 문제도 기록해두려고 한다. 마무리 문제 1. 그래서, 안에 img의 스타일을 문제에서 지시한대로 ① 1px의 #ccc색 실선, ②둥근 이미지, ③ 그림자 가로 세로로는 5px씩, 흐림 30px, 번짐 2px, 그림자 색 #000 요로케 지정해 주었다. 결과는!! 성공^ ─ ^ 마무리 문제 2. 이~~렇게나 긴 문제의 내용에 다음의 것을 추가하라는 주문이었다. ① article 요소 플로팅, 너비 350px, ..

1. 웹 요소 위치 지정: top, right, bottom, left 웹 문서에서 요소를 원하는 곳에 갖다 놓기 위해 위치를 지정하는 속성이다. 아래 2.에서 다룰 position으로 기준 위치를 정한 뒤, 요소 위치를 top, right, bottom, left로 지정하면 된다. 속성값 설명 top 기준 위치 - 요소 간에 위쪽으로 얼마나 떨어져 있는지 지정. right 기준 위치 - 요소 간에 오른쪽으로 얼마나 떨어져 있는지 지정. bottom 기준 위치 - 요소 간에 아래쪽으로 얼마나 떨어져 있는지 지정. left 기준 위치 - 요소 간에 왼쪽으로 얼마나 떨어져 있는지 지정. 예제 1. Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris es..

1. 배치 방법 결정: display display 속성을 이용하면 블록 레벨 요소 → 인라인 레벨 요소 인라인 레벨 요소 → 블록 레벨 요소 로 자유롭게 전환할 수 있다. display는 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 수도 있다. 속성값 설명 block 인라인 레벨 요소 → 블록 레벨 요소 전환. inline 블록 레벨 요소 → 인라인 레벨 요소 전환. inline-block 인라인 레벨 요소, 블록 레벨 요소 속성을 모두 갖고 있고, 마진과 패딩 지정 가능. none 해당 요소를 화면에 표시 × 예제. CSS 복수 선택자의 역할을 확인해보기 위해서 예제를 약간 변형했다. menu 1 menu 2 menu 3 menu 4 men..