HTML & CSS (36) 썸네일형 리스트형 font 적용하는 방법 온라인 폰트) CSS - import 설정 /*css*/ @import url('https://fonts.googleapis.com/css2?family=Macondo&display=swap'); h1:nth-of-type(4){font-family: 'Macondo',serif;} 온라인 폰트) html에 적용할 때 /*css*/ #fonftext {font-family: 'Jeju Gothic', sans-serif;} 다운받은 font 적용할 때 ) CSS - file 설정 @font-face { font-family: 'hala'; src: url(06day-main/font/Hallasan.woff) format('woff'); } h1:nth-of-type(3){font-family: 'hal.. Grid Layout- 그리드2 (grid-template-areas) grid-template-areas 영역이름을 참조(grid-area)해 템플릿 생성 - .마침표를 사용하거나 임의로 준 이름을 입력해 빈 영역을 설정할 수 있음 -> Grid Container에게 적용 grid-area 그리드 영역 이름 지정 -> Grid item에게 적용 ▼ 적용 예제 1 1 2 3 4 5 6 7 HTML 삽입 미리보기할 수 없는 소스 ▼ 적용 예제 2 header mainbanner content footer HTML 삽입 미리보기할 수 없는 소스 ▼ 적용 예제 3 ( repeat(반복횟수,비율), minmax(최소값,최대값), min-content, auto-fill, auto-fit 참고) 2 3 5 6 *grid-template-columns: repeat(auto-fill,.. Grid Layout- 그리드1 Grid -flex처럼 레이아웃에 유용하게 쓰임. -flex는 1차원(가로 or 세로)적인 것에 반면, grid는 2차원 두방향(가로, 세로)이 가능하다. -때문에 복잡한 레이아웃 표현이 가능하다. Container (부모요소) 속성 display : grid || inline-grid grid-template-columns :세로줄나누기 grid-template-rows :가로줄나누기 grid grid-column-gap(column-gap) :세로 간격 설정 grid-row-gap(row-gap) :가로 간격 설정 grid-gap :세로 가로 간격 축약 justify-items :가로정렬 align-items :세로정렬 justify-content :아이템 그룹 가로 정렬 align-content :.. 미디어쿼리 반응형 적용 *max-width와 min-width -max-width: 최대값, 이하/큰 값부터 내려오게 적기 -min-width: 최소값, 이상/작은 값부터 올라가게 적기 @media screen and (max-width:1200px){ body{background-color: red;} }/* screen :기기/ 최대넓이가 1200px /1200이하까지적용/ and양 옆 꼭 띄어주기*/ @media screen and (max-width:980px) { body{background-color: green;} } @media screen and (max-width:600px) { body{background-color: green;} } @media screen and (min-width:600px){ }/*.. 절대값과 상대값 절대값:고정된 값 -px 상대값: 고정되지 않고 유동적으로 바뀌는 값 : %, em, rem, vw, vh, vmin, vmax 1. px px(픽셀)단위는 화소 1개의 크기를 의미. 고정된 단위에 사용 2. % -백분율 단위의 상대단위 ex)14px *200%(2)=28px -해상도에 따른 %크기 구하기 >1920안에 1280이너로 있으면 해상도가 1280인거나 마찬가지로 봄 >만약네모width가 221px이면 221/1280= 0.17265625 0.17265625*100=17.265625 3. em -배수 단위의 상대 단위 -상위요소(상속이나 기본값)에 따라 1em이 지정 -M사이즈랑 같은 사이즈/ equal to M약자 -font-size가 30이면 30em -상위요소 폰트사이즈를 따라 1em됨 .. text-align 속성 text-align : 텍스트를 수평으로 정렬할때 사용 속성값 text-align:left; 왼쪽 정렬 text-align:right; 오른쪽 정렬 text-align:center; 가운데 정렬 text-align:justify; 왼쪽에서 오른쪽에 맞추어 양쪽 정렬 주의사항 1. block 요소에만 text-align 속성 적용 가능 2. block 요소 안에 있는 inline 요소(text, img...)만 정렬되는 것이 가능함. form 사용하기 -id -password -file -email -text -radio(1개 선택 박스, 원모양) -checkbox(여러개 체크박스, 네모모양) -수량선택, 분류선택 -submit 제출, reset 취소, button -textarea(여러줄 입력칸) CODE 회원가입정보 아이디 비밀번호 이메일 신청과목 수학 영어 국어 관심분야 영화 음악 독서 게임 선택 수량선택 10개 20개 30개 40개 50개 수학 과학 생물 국어 영어 논술 버튼 실행 화면 ▼ 여러개로 구성된 하나의 이미지 중 원하는 영역 배경이미지 사용(spritecow 이미지 좌표 확인 사이트) *참고 사이트 http://www.spritecow.com/ Sprite Cow - Generate CSS for sprite sheets Sorry, it isn't working out between us It's not you, I just can't get along with your browser. Maybe if things change in the future... maybe if you bring Chrome, Firefox, Opera or even IE10 to the party... not promising anything, but give me a call. www.spritecow.com *이용 방법 -사이트에 들어가 'open image'를 누른다. -해당 영역을 클릭하면 아래에.. 이전 1 2 3 4 5 다음
