HTML & CSS & JS (75) 썸네일형 리스트형 hover effect 주는 기능. 홍익대학교 .btn:hover{ color:white; background-color: #000000; } 이렇게 해주면 btn div에 마우스 올릴 때 hover에서 지정된 옵션으로 바뀜. div 중앙정렬 div 중앙 정렬 position: absolute -> browser 전체(비례) 좌표로 움직임 positon: relative -> div안에서만 width와 height를 가지고 있어야 % 적용 가능. left : %로 주면 고정값이 아니고 지정한 영역에서 화면 size에 비례해서 움직임 width 150px height 150px left와 top을 50%로 준 상태에서 (왼쪽 위 꼭지점 기준으로 위치됨) margin: -75px 0 0 -75px 하면 정중앙 위치 left right top bottom 은 position 옵션 지정 후에 가능. layout 1 이미지 사이즈를 모든 해상도에 맞게 fit하는 방법 background-size: cover; text-align은 div내부 텍스트 뿐만 아니라 img까지 정렬 가능. 이미지 사이 공백 발생시 float로 겹치는 것이 좋음. 이미지 이어붙힌 길이가 850px라면 이미지들이 들어있는 div의 사이즈를 이미지 사이즈로 맞춘뒤에 margin-left , margin-right auto로 지정 margin, padding은 클래스 단위로 걸림 같은 div에서 두개의 이미지가 margin으로 간격을 주고 싶다면 두개의 이미지에 각각 class를 부여하고 줘야 함. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31.. 정렬 text -align 텍스트 정렬 기법 text-align: center; left ,right 각각 지정 가능 CSS float 객체 정렬 (div등) background 배경 이미지 넣기 css 파일에 background-image: url("../frame.png"); css파일 기준 image 파일 넣고 이렇게 되면 반복 이미지로 생성되는데 이것을 방지하기 위해서 css에서 옵션. background-repeat: no-repeat; background-size: cover; ->화면에 가득차게 background-position: center; -> 화면 중앙정렬 -> 한줄 띄우기 이것을 이용해서 스크롤 생성 background-attachment: fixed; ->스크롤 내려도 화면고정 기법 div로 영역지정 후에 배경이미지 삽입하고 그안에 내용을 담고나서 div위 아래로 br을 마구뿌려주면 스크롤이 생기면서 스크롤이 지정되는 부분만 배경이 보임. 노란색 스크롤에.. margin , padding 가로 세로값 지정 border지정하고 -> 사이즈 가늠하는데 사용. border: 5px solid rgb(116,20,20); //solid 필수 width height로 지정 margin , padding 바깥쪽 여백 -> margin 안쪽 여백-> padding body 안에서 div가 정의 되었을 때 div의 외부영역은 body padding: 100px 20px 30px 50px; 순서대로 위 오 아래 왼 web font 웹폰트 - google font 검색 1) -원하는 폰트 import코드 따와서 css에서 import -구글 font에서 제공하는 Specify in CSS 코드 원하는 부분에 지정. 2) -스탠다드 코드 따와서 html 헤더 타이틀 밑에 지정. - Specify in CSS 코드 원하는 부분에 지정. 선택자 style을 주기 위해서는 class또는 id값을 줘야함(선택자) css에 div{ }로 지정하면 모든 html에서 모든 div에 걸림 ->따라서 class, id를 지정 class는 .으로 -> 여러 군데에서 쓸 때 id는 #으로 -> 딱 한번만 들어갈 공간에 쓰는 것 html의 id, class는 css에서 같아야 함. 이전 1 ··· 6 7 8 9 10 다음
