본문 바로가기

IT공부

 (120)
22. 웹 표준 사이트 만들기(2019) - 마우스 오버효과2 22. 웹 표준 사이트 만들기(2019) - 마우스 오버효과2 전체소스 index.html ... ... ... ... 아이콘Notice 가장 웹 페이지에서 기본이 되는 게시판 유형입니다. ... Mouse Hover 바로가기 HTML 바로가기 CSS 바로가기 jQuery ... style.css ... /* 마우스 오버효과2 */ .notice_hover2 {} .notice_hover2 ul {overflow: hidden;} .notice_hover2 li {float: left; width: 93px; text-align: center; margin-right: 5px;} .notice_hover2 li.last {margin-right: 0;} .notice_hover2 li a span {po..
21. 웹 표준 사이트 만들기(2019) - 마우스 오버효과1 21. 웹 표준 사이트 만들기(2019) - 마우스 오버효과1 마우스를 이미지 위에 올리면 더보기라고 바뀐다. 전체소스 index.html ... ... ... ... 아이콘Notice 가장 웹 페이지에서 기본이 되는 게시판 유형입니다. Mouse Hover 바로가기 와이어 프레임 바로가기 스케치 작업 바로가기 UI 디자인 ... style.css ... /* 마우스 오버효과1 */ .notice_hover h4 {font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold;} .notice_hover ul {overflow: hidden;} /* 바로가기 글씨가 가운데 오게 하기 위해 text-align: center를 줌(li는 블록..
20. 웹 표준 사이트 만들기(2019) - 게시판3 20. 웹 표준 사이트 만들기(2019) - 게시판3 전체소스 index.html ... ... ... ... 아이콘Notice 가장 웹 페이지에서 기본이 되는 게시판 유형입니다. Html Reference [HTML] table table 태그는 표를 만들 때 사용합니다. [HTML] div div 태그는 문서의 섹션을 만들거나 영역을 나눌 때 사용합니다. [HTML] dl dl 태그는 용어를 설명하는 목록형 태그입니다. [HTML] em em 태그는 텍스트를 강조할 때 사용합니다. 더보기 ... ... style.css ... /* 게시판3 */ .notice3 {position: relative;} .notice3 h4 {font-size: 14px; color: #0093bd; padding-bo..
19. 웹 표준 사이트 만들기(2019) - 게시판2 19. 웹 표준 사이트 만들기(2019) - 게시판2 전체소스 index.html ... ... ... 아이콘Notice 가장 웹 페이지에서 기본이 되는 게시판 유형입니다. ... Web Desinger Notice JPG, PNG, GIF의 차이점이 무엇인가요?2018.11.16 UI 디자인과 UX 디자인의 차이점을 설명하세요.2018.11.16 인터랙션 디자인의 핵심은 무엇이라고 생각하나요?2018.11.16 포트폴리오를 하면서 가장 잘 했다고 생각하는 부분은 무엇인가요?2018.11.16 웹 디자인과 모바일 디자인의 차이가 무엇이라고 생각하나요?2018.11.16 더보기 ... ... style.css ... /* 게시판2 */ .notice2 {position: relative; margin-to..
18. 웹 표준 사이트 만들기(2019) - 게시판 18. 웹 표준 사이트 만들기(2019) - 게시판 전체소스 index.html ... ... ... 아이콘Notice 가장 웹 페이지에서 기본이 되는 게시판 유형입니다. Web Pulisher Notice display:inline과 display:block의 차이점은 무엇인가요? HTML 태그 중에 dl,dd,ul,ol,li의 차이점이 무엇인가요? HTML 태그 중에 strong과 em 태그의 차이점은 무엇인가요? 컨텐츠 요소를 가운데로 오게 하는 방법을 알려주세요! 독타입을 선언하는 이유에 대해서 설명하세요. 더보기 ... ... style.css ... .cont .column .icon_desc {padding-left: 70px; border-bottom: 1px solid #d0d0d0; p..
17. 웹 표준 사이트 만들기(2019) - 컨텐츠 레이아웃 17. 웹 표준 사이트 만들기(2019) - 컨텐츠 레이아웃 전체소스 index.html ... ... ... 아이콘Notice 가장 웹 페이지에서 기본이 되는 게시판 유형입니다. 아이콘Notice 가장 웹 페이지에서 기본이 되는 게시판 유형입니다. 아이콘Notice 가장 웹 페이지에서 기본이 되는 게시판 유형입니다. 아이콘Notice 가장 웹 페이지에서 기본이 되는 게시판 유형입니다. 아이콘Notice 가장 웹 페이지에서 기본이 되는 게시판 유형입니다. 아이콘Notice 가장 웹 페이지에서 기본이 되는 게시판 유형입니다. ... style.css ... /* 컨텐츠 */ /* .cont { margin-top: 30px;} 을 주면 부모 태그인 cont_cont에 적용했던 색상이 적용되지 않는다. 그래..
16. 웹 표준 사이트 만들기(2019) - 전체 타이틀 16. 웹 표준 사이트 만들기(2019) - 전체 타이틀 전체소스 index.html ... ... ... 이전 이미지 다음 이미지 ... style.css ... /* 배너 */ /* .ban a.prev와 .ban a.next 위치의 기준을 정해준다. img(.ban ul li img)태그는 인라인 구조이기 때문에 아래 부분에 빈공간이 생긴다. 블록 속성으로 변경해서 빈공간을 없애야 하지만 text-align이 안먹히기 때문에 아래와 같이 padding값에 차이를 둔다. */ .ban {position:relative; padding: 24px 0 20px;} /* 원래는 부모부터 순차적으로 내려와서 지정을 해야한다. 이름이 겹칠 수 있으므로 . position: absolute는 기준점에 따라서 위..
15. 웹 표준 사이트 만들기(2019) - 전체 타이틀 15. 웹 표준 사이트 만들기(2019) - 전체 타이틀 구글 폰트 사용하기 전체소스 index.html ... ... ... "나는 퍼블리셔다." 전체메뉴 ... .... style.css ... /* 타이틀 */ /* 전체메뉴(.btn)라는 테스트가 .tit .btn {position: absolute; top: 0; right: 0;}으로 인해서 브라우저 기준으로 위치가 잡혀 부모 태그에 position: relative라고 설정한다(기준점 역할을 한다.). */ .tit {position: relative;} /* letter-spacing 글자와 글자사이 간격. */ .tit h2 {font-size: 40px; text-align: center; padding: 5px 0; letter-spa..

티스토리툴바