본문 바로가기

css9

div와 inline div는 컨텐츠박스를 의미한다 ✔️ padding= 박스 경계 안 ✔️ margin= 박스 경계 밖 ✔️ border= 경계 📌 박스 옆으로 박스가 올 수 없다 이것을 block이라고 한다. ㄴ 'header' 'p' 도 블럭이다 . 📌 다른요소가 올 수 있는것을 inline이라 한다. ㄴ span, image, a block 아닌것을 기억하는게 훨씬 쉽다. block과 inline을 서로 바꾸는것은 가능하다 이것을 display속성이라한다. display: inline; -> 디폴트값 📌 인라인을 블럭으로 바꾸기 display: block; 하지만 div를 inline 으로 바꾸면 사라진다. 왜냐하면 inline은 높이와 너비를 가질 수 없기 때문이다. 그러므로 div는 높이와 너비를 가질 수 있다는 .. 2020. 12. 8.
image속성 이미지를 삽입하는데 두가지 방법이 있다. 1. 태그로 이미지 넣기 링크주소복사하여 src에 입력 VS내에서 이미지만 따로 넣는 파일 생성시 이미지를 넣은후 html내에서 아래 코드를 작성한다 2. background- image로 이미지넣기 html내에서뿐만 아니라 css내에서도 작성이 가능하다! 일단 html 내에서 div를 생성한다 배경 css내에서 클래스 스타일을 지정해준다 .apple { background-color: red; background-image: url ("링크주소"); } color는 배경색을 추가하고 image는 배경 이미지를 추가하는 것이다. 여기서 가로로는 빨간색이 화면 크기만큼 길게 나오고(block요소) 세로는 '배경' 이라는 텍스트 높이 만큼 나온다. 여기서 알 수 있는.. 2020. 12. 8.
1. html와 css import방법 html 와 css 파일들을 많이 생성하게 되면 따로 관리하는것이 편하다. 여기서 import하는 방법이 있는데 새로운 상위 파일을 생성한후 css파일들을 html과 연결하는 작업을 한다. style 상위파일 생성한후 @import "파일명.css"; 방식으로 작성한 css파일들은 전부 import 해준다. 그다음, html으로 넘어가 head에서 link rel을 걸어준다. link rel 에서 rel의 속성은 문서와 외부에서 불러올 연결관계를 설정한다. 그러므로 link rel="stylesheet" 은 스타일시트로써 연결을 하겠다는 속성이다. ./ -> 해당파일 ../ -> 상위로가기 2020. 12. 7.