본문 바로가기

IT공부/HTML & CSS

 (36)
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..
14. 웹 표준 사이트 만들기(2019) - 전체 메뉴 수정 14. 웹 표준 사이트 만들기(2019) - 전체 메뉴 수정 전체소스 index.html ... 전체 메뉴 HTML Reference HTML 태그(Tag) 블록 요소/인라인 요소 DTD 선언 언어 속성 설정 HTML HTML 특수문자 하이퍼 링크 HTML HTML HTML HTML HTML HTML CSS Reference CSS 선택자 CSS 단위 CSS 색상 CSS 선언 방법 상대주소와 절대주소 CSS float 이미지 표현 방법 이미지 스프라이트 IR 효과 이미지 최적화 background-color border-style font-size text-align Webstandard 웹..
13. 웹 표준 사이트 만들기(2019) - 헤더 아이콘 수정 13. 웹 표준 사이트 만들기(2019) - 헤더 아이콘 수정 사이트를 만들때 이미지를 표현하는 부분이 중요하다. 크롬에서 아래 앱을 설치한다. 작성한 css의 유효성 검사를 해준다. 전체소스 index.html ... ... Desinger Publisher Youtube Professional Publisher & Designer nanci.tistory.com icon1 icon2 icon3 icon4 style.css ... .header .header-icon {text-align: center; margin-top: 30px;} /* 이미지 영역을 설정하기 위해 block을 주었고 일렬로 만들고 가운데로 오게 하기 위해 inline 속성을 주었다. img 태그를 사용하면 하나하나 가져와야 하는..

티스토리툴바