Programming/html5 & css3 (21) 썸네일형 리스트형 css3 / 구글폰트 웹 폰트 적용하기 - 구글폰트(크롬으로 들어가기) https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 마음에 드는 폰트를 주황색+버튼을 누르면, 사진과 같이 오른쪽에 작은 창이 뜬다. 코드를 복사하고 link href=뒤에 붙여넣기. (참고로 여러 폰트를 +한 뒤(장바구니 담듯) 한꺼번에 코드를 복사한다) 그리고 복사했던 코드 밑에 Specify in CSS 코드가 하나더 있는데 이것도 복사해서 style 시트 선택자 속성에 붙여넣기. Lorem Cillum aliqua do aliqua duis qui adipisicing com.. css3 / 초기화코드 모든 html 페이지의 첫 번째 스타일시트는 초기화코드로 시작한다. 초기화 코드는 모든 웹 브라우저에서 동일한 출력 결과를 만들기 위해 사용. 마진과 패딩을 모두 0로 지정, 폰트 강제 지정, 폰트 크기, 입력 양식의 사이즈 통일 등을 동일하게 맞춰주기 초기화 코드 링크 1. Eric Meyer's Reset CSS : 모든 것을 초기화함.(조금 안해주는 것도 있긴함..그런건 직접) http://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line he.. css3 / 레이아웃(3) - clear: both, flex 속성 4. clear: both(=overflow: hidden) - float속성+clear속성을 사용한 레이아웃 구성 방법. - clear: both 입력. 또는 - 자식에 width, float을 주고 부모태그에 after, clear:both; content: ' '; display:block 입력. (참고로, 자식태그(aside, section)를 따로 감싸주는 부모태그(container)가 없어도 됨) Header /*clear란 막을 사용해서 overflow된것처럼 보이나, 자식을 못알아봄. 막 때문에 못 파고든것. clear를 쓸 땐 부모태그(container) 자체가 필요없음. 서로 못알아보는데 있어서 뭐해.. */ Aside Velit ad esse deserunt mollit ea exer.. css3 / 레이아웃(2) - float 속성을 사용한 수평정렬 3. float 속성을 사용한 수평정렬. "자식에 width, float을 주고 부모에 overflow: hidden" 레이아웃 기본 : 수평정렬(가로로 자를 수 있는 부분(header/navigation/content/footer)이 하나하나 태그가 됨)을 기준으로 함.) 그 다음 내부에서 세로로 자를 수 있는 부분(content-aside/section)은 그 내부의 자식요소로 구성하게 됨. float 속성을 사용하면 aside, section 부분을 수평으로 정렬할 수 있다. Header Navigation (부모) (자식) Non et consectetur elit dolor irure eu ullamco. Deserunt et qui velit nostrud. Cillum esse dolore .. css3 / 레이아웃(1) - float 속성, 중앙정렬 1. float 속성의 기본 : 그림을 글자 위에 띄우기 위해 만들어진 스타일속성. 실제론 기본적인 것으로 활용하진 않고 특이하게 사용많이 함. 레이아웃 구성할 때. float: left - 태그를 왼쪽에 붙인다. float: right - 태그를 오른쪽에 붙인다. Excepteur consectetur exercitation ea id cillum eiusmod eu dolor minim deserunt nulla ipsum. In labore pariatur proident laborum tempor occaecat reprehenderit elit esse irure Lorem. Voluptate qui laboris commodo magna nisi qui. Quis sint eu tempor e.. css3 / 위치속성 - 상하좌우, position: absolute, relative, height, z-index, overflow Hello (부모) Ut adipisicing exercitation quis sit laboris et laborum sit nisi irure ad proident. Reprehenderit et et incididunt officia. Ipsum laborum cillum veniam elit id nisi ullamco cupidatat sunt irure. Esse pariatur tempor excepteur pariatur dolore. Reprehenderit anim est aliquip est consequat officia officia minim irure irure deserunt nostrud eiusmod. Excepteur sunt tempor occaecat consecte.. css3 / font 속성 Hello Worlda> Ad labore anim minim do pariatur mollit voluptate. Commodo do qui quis duis ullamco ea dolore tempor labore deserunt nulla sit. Incididunt ex incididunt quis dolore ad officia magna irure. Lorem nisi pariatur sunt laborum ex esse id minim veniam minim amet consequat. Sint dolore incididunt exercitation Lorem Lorem voluptate excepteur. Adipisicing consequat quis et eu. Veniam occaec.. css3 / 배경background 속성 Document body { background-image: url(img.jpg); /*외부파일의 경로를 css로 지정할 때 url 함수 사용 */ background-size: contain; /*너비, 높이. "크기단위"의 값을 입력해주거나 "cover" "contain" 등의 키워드 100% 또는 cover 입력하면 '너비'를 꽉채우게 됨. (반복됨) contain은 body내부에 있는 요소에 높이가 맞춰지게 됨. (반복됨) 이전에 body태그 내부에 뭔가가 있어야함.(높이 지정) = 이미지의 높이가 정확하게 내용물(h1)과 일치.(contain은 잘 안쓰임) 반복이 가능한 패턴을 가진 배경을 사용할 때 background-size 속성과 함께 많이 사용.*/ background-repeat: n.. 이전 1 2 3 다음
