CSS44 사이트 유형 - 이미지 유형2 사이트 유형 | 이미지유형2 모바일 사용자가 폭발적으로 증가하면서 반응형 디자인이 어쩌면 필수적으로 적용되고 있는 지금, 이미지 디자인은 웹과 모바일 모두 화면크기에 맞게 최적화되는 모듈식 UI패턴입니다. 1.HTML 코드 코드 보기 펭귄 사진 여러분은 엄청 귀여운 펭귄를 보실 수 있는 기회가 지금 생겼습니다. 펭귄 사진 자세히보기 펭귄 사진 자세히보기 펭귄 사진 자세히보기 2.CSS 코드 코드 보기 /* fonts */ @import url('https://webfontworld.github.io/gmarket/GmarketSans.css'); .gmarket { font-family: 'GmarketSans'; font-weight: 400; } /* reset */ * { margin: 0; pad.. 2022. 8. 17. 사이트 유형 - 이미지 유형 사이트 유형 | 이미지유형1 모바일 사용자가 폭발적으로 증가하면서 반응형 디자인이 어쩌면 필수적으로 적용되고 있는 지금, 이미지 디자인은 웹과 모바일 모두 화면크기에 맞게 최적화되는 모듈식 UI패턴입니다. 1.HTML 코드 코드 보기 여우 사진 여러분은 엄청 귀여운 여우를 보실 수 있는 기회가 지금 생겼습니다. 여우는 귀엽다. 여우는 옛날부 사람을 홀린다고 하였다. 그래서 너무 귀여운 것 같다고 한다. 여러분은 지금 자고 있는 여우사진을 보고 있습니다. 자세히보기 여우는 귀엽다. 여우는 옛날부 사람을 홀린다고 하였다. 그래서 너무 귀여운 것 같다고 한다. 여러분은 지금 자고 있는 여우사진을 보고 있습니다. 자세히보기 2.CSS 코드 코드 보기 /* fonts */ @import url('https://w.. 2022. 8. 17. 검색 이펙트 첫 번째 검색 이펙트 html 태그, css 속성, javascript 의 메서드 를 검색하여 찾아볼수있습니다. 원본 소스 보기 1.HTML 코드 HTML에서 js를 동작하기위한 class이름과 input등을 적절히 사용하여 사용자가 알아보기쉽게 표현해야합니다. 코드 보기 indexOf()를 이용하여 CSS 속성 검색하기 CSS 속성 검색하기 검색하기 속성 갯수 : 0 accent-color : 특정 요소에 색상을 지정할 때 사용됩니다. align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. all : 요소의 속성을 초기화 또는 상속을 설.. 2022. 8. 16. 미디어쿼리 미디어 쿼리(media query) 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법 최소 가로폭이 1000px, 즉 1000px 보다 넓은 해상도일 때에 style_pc.css를 연결한다는 뜻입니다. 태블릿이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbar를 누르면 기기마다의 해상도도 확인할 수 있고 기기 모델도 추가할 수 있습니다. 또한 다음 트로이 (http://troy.labs.daum.net/)에서는 기기별 해상도를 제공하고 실제 작동 화면을 확인할 수 있는 VIEW를 제공합니다. 모바일 기기 가로 세로 iPhone X 375 812 iPhone 6,7,8 375 667 iPhone 6,.. 2022. 8. 15. CSS 기본문법 CSS 기본 문법 CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 실제로는 외부 스타일시트를 주로 사용합니다. 인라인 스타일시트는 대체로 거의 사용하지 않으나, 우선순위가 가장 높기 때문에 필요한 경우에는 편리하게 사용할 수 있습니다. 참고로, CSS에서의 주석은 /* */로 표현합니다. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 우리가 기쁘게 하는것들 결과보기 우리가 기쁘게 하는것들 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *.css 확장자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용하여 선언.. 2022. 8. 15. 사이트유형 | 카드유형03 사이트 유형 | 카드유형3 모바일 사용자가 폭발적으로 증가하면서 반응형 디자인이 어쩌면 필수적으로 적용되고 있는 지금, 카드형 디자인은 웹과 모바일 모두 화면크기에 맞게 최적화되는 모듈식 UI패턴입니다. 1.HTML 코드 코드 보기 귀여운 토끼 Tag 너무나도 귀엽고 사랑스러운 토끼 사진 이 여기있습니다 얼른 와서 보시는게 제일좋아요! 빨리와야해요! 여러분은 귀여운 토끼 사진을 보실수 있는 기회가 생겼습니다. 진짜귀여운토끼를 함께 보세요! 행복할수있어요 우리다함께 행복해요! 토끼를 보시면 행복할수있습니다! 오늘하루도맑은 하늘 9 seconds ago Tag 너무나도 귀엽고 사랑스러운 토끼 사진 이 여기있습니다 얼른 와서 보시는게 제일좋아요! 빨리와야해요! 여러분은 귀여운 토끼 사진을 보실수 있는 기회가 .. 2022. 8. 10. 이전 1 ··· 3 4 5 6 7 8 다음 728x90 반응형
