본문 바로가기

IT공부/HTML & CSS

(36)
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
06. 웹 표준 사이트 만들기(2019) 06. 웹 표준 사이트 만들기(2019) 실제 사이트 만들 때는 서버에 들어가서 작업한다. 보통 다른 강사들은 로컬에서 작업을 한다. 서버에서 작업하는 것과 로컬에서 작업하는 것은 거의 흡사하지만 서버는 약간의 스킬이 필요하다. 여기서는 서버에서 작업을 할 것이다. "06. layout06.html" 파일을 만든다. 전체소스 header banner contents footer
05. 웹 표준 사이트 만들기(2019) 05. 웹 표준 사이트 만들기(2019) 1 ~ 4 레이아웃은 2000년대 레이아웃이다. 지금부터는 전체 배경이 들어간 사이트의 레이아웃을 배운다. 디비컷 사이트를 참고한다. 현대 백화점 사이트를 가보자. (https://www.ehyundai.com/newPortal/index.do) 1 ~ 4까지 배운 레이아웃으로는 하단의 전체영역을 표현하기가 힘들다. 가운데 부분을 '컨테이너'라고 말하고, 하단의 전체영역을 '전체영역'이라고 말할 것이다. 아래 그림을 보면 전체영역안에 컨테이너가 있는 것을 확인할 수 있다. 요즘에는 전체영역이 다 있다. 이번에 만들 레이아웃 구조이다. 전체영역이 있다. 해상도가 줄어도 전체영역과 컨테이너가 살아있다. "05. layout05.html"을 만든다. 전체소스 heade..