본문 바로가기

전체 글

(121)
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 태그를 사용하면 하나하나 가져와야 하는..
12. 웹 표준 사이트 만들기(2019) - 헤더 타이틀 & 웹 폰트 12. 웹 표준 사이트 만들기(2019) - 헤더 타이틀 & 웹 폰트 전체소스 index.html 전체 메뉴 바로가기 배너 영역 바로가기 컨텐 영역 바로가기 Desinger Publisher Youtube Professional Publisher & Designer nanci.tistory.com cont_nav cont_tit cont_ban cont_cont header style.css /* 스타일도 언어설정을 해줘야 한다. 한글이 깨지지 않게 */ @charset "utf-8"; /* 스킵 내비게이션 */ /* skip은 기준점이 되어야 하기 때문에 relative를 사용한다. */ #skip {position: relative;} /*position: absolute는 위치가 절대적이다라는 의미..
11. 웹 표준 사이트 만들기(2019) - 헤더 배경 & 메뉴 11. 웹 표준 사이트 만들기(2019) - 헤더 배경 & 메뉴 첨부파일 안에 이미지를 사용하여 배경화면을 만든다. 첨부파일에서 이미지를 복사하여 아래와 같이 붙여넣는다. 전체소스 style.css /* 스타일도 언어설정을 해줘야 한다. 한글이 깨지지 않게 */ @charset "utf-8"; /* 스킵 내비게이션 */ /* skip은 기준점이 되어야 하기 때문에 relative를 사용한다. */ #skip {position: relative;} /*position: absolute는 위치가 절대적이다라는 의미이다. 위치를 마음대로 옮길 수 있지만 영역이 사라진다는 문제점이 있다. 그래서 약간 붕 떠있는 느낌이 난다.left나 top이런 속성으로 조절할 수 있다. 평소에는 top:-35px로 안보이게 한..
10. 웹 표준 사이트 만들기(2019) - 스킵메뉴 10. 웹 표준 사이트 만들기(2019) - 스킵메뉴 웹 접근성이란, 장애인뿐만 아니라 모든 사람이 정보통신 기기나 서비스를 손쉽게 활용할 수 있게 하는 것이다. 쉽게 말하면 시각 장애인을 위해서 웹에 대한 접근을 좋게 해주기 위해 작업을 하는 것이라고 생각하면 된다. 웹 접근성이 좋게 html을 작성하기 위한 지침서들이 있다. 웹 표준은 장애인차별금지법에 따라서 생겼다. 우리나라는 2013년 웹접근성 의무화가 되어 사이트 만들 때 웹 접근성에 맞춰서 코딩을 해야 한다. 따라서 웹 접근성에 맞춰서 스킵메뉴를 만들어야 한다. 스킵메뉴란 시각, 지체 장애인들이 메뉴가 많다보니 탭을 눌러서 이동하기 불편한데 한 번에 이동할 수 있게 하는 것이다. 전체소스 index.html 전체 메뉴 바로가기 배너 영역 바로..
09. 웹 표준 사이트 만들기(2019) - 레이아웃2 09. 웹 표준 사이트 만들기(2019) - 레이아웃2 전체소스 index.html header cont_nav cont_tit cont_ban cont_cont header style.css /* 스타일도 언어설정을 해줘야 한다. 한글이 깨지지 않게 */ @charset "utf-8"; /* 레이아웃 */ #wrap {} #header {height: 325px; background: #111;} #contents {height: 800px; background: #222;} #footer {height: 200px; background: #333;} /* 컨텐츠 레이아웃 */ /* 영역이 잡힌 다음에는 항상 백그라운드로 영역이 잡혔는지 확인하는 것이 중요하다. */ #cont_nav {height: ..
08. 웹 표준 사이트 만들기(2019) - 레이아웃1 08. 웹 표준 사이트 만들기(2019) - 레이아웃1 html 폴더 안에 아래와 같은 구조의 폴더와 파일들을 만든다. 최종소스 index.html reset.css @charset "utf-8"; /* 여백 초기화 */ body, div, ul, li, dl, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table, th, td, tr, textarea, button, form {margin: 0; padding: 0;} style.css /* 스타일도 언어설정을 해줘야 한다. 한글이 깨지지 않게 */ @charset "utf-8"; /* 레이아웃 */ #wrap {} #header {height: 325px; backgrou..
07. 웹 표준 사이트 만들기(2019) 07. 웹 표준 사이트 만들기(2019) 06번 레이아웃은 사실 아래와 같이 더 세분화 되어 있다. header가 2개로 나누어져 있으며 contents는 3개, footer는 ㅈ개로 나누어졌다. "07. layout07.html" 파일을 만든다. 레이아웃 속에 또 레이아웃이 들어갈 수 도 있다. 주석 표시를 깔금하게 한다. 전체적으로 틀 잡을 때는 id를 많이 사용하고 세부적으로 반복되는 부분을 class를 많이 사용한다. 전체소스 header-top header-nav banner-nav content1 content2 content3 footer-nav footer-info