44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
이메일/이벤트 실습 예제 파일
안녕하세요! 강의 잘 듣고 있습니다. 다름이 아니라 이메일/이벤트 실습에서 사용되는 예제 파일이 따로 있을런지요? 카페에서도 찾아봤지만 사용할 수 있는 이미지 등의 예제를 찾지 못해 질문 드립니다. 감사합니다!
- 해결됨퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
마크업 실습 관련 질문입니다.
안녕하세요! 다름이 아니라 마크업 실습 강의를 들으며 작성해봤는데 작성 후 검사해보니 이 오류가 계속 나와서요 ㅠㅠ 혹시 이건 어떤 부분을 고치면 되는 것일지 조언을 구하고 싶어 마크업한 내용 첨부합니다! 위 내용 이외에도 조언해주실 부분이 있다면 감사히 듣겠습니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>웹 접근성 개요 | 웹 접근성 연구소</title> </head> <body> <dl id="skip-top"> <dt><strong>바로가기 메뉴</strong></dt> <dd><a href="#contents">본문 바로가기</a></dd> </dl> <hr> <div id="wrap"> <!-- header --> <header> <h1><a href="#"><img src="img2/logo.gif" alt="웹 접근성 연구소"></a></h1> <dl> <dt><strong>유틸메뉴</strong></dt> <dd><a href="#">로그인</a></dd> <dd><a href="#">회원가입</a></dd> <dd><a href="#">사이트</a></dd> </dl> <form action="#" method="get"> <fieldset> <legend>검색 영역</legend> <label for="search">검색어 입력</label> <input type="search" id="search" name="search" value="" placeholder="검색어를 입력하세요."> <!-- <input type="submit" value="검색"> --> <input type="image" src="img2/btn_search.gif" alt="검색하기"> </fieldset> </form> <h2>메인 메뉴</h2> <ul> <li><a href="#">웹 접근성이란</a> <ul> <li><a href="#">웹 접근성 개요</a></li> <li><a href="#">법. 제도</a></li> <li><a href="#">장애인의 웹사이트 이용 이해</a></li> <li><a href="#">웹 접근성 품질인증</a></li> <li><a href="#">관련사이트</a></li> </ul> </li> <li><a href="#">진단 및 컨설팅</a> <ul> <li><a href="#">웹 접근성 개선지원 사업</a></li> </ul> </li> <li><a href="#">교육마당</a> <ul> <li><a href="#">정보 접근성 전문 교육</a></li> <li><a href="#">세미나</a></li> </ul> </li> <li><a href="#">지식마당</a> <ul> <li><a href="#">개발자아카이브</a></li> </ul> </li> <li><a href="#">정보마당</a> <ul> <li><a href="#">공지사항</a></li> <li><a href="#">자료실</a></li> </ul> </li> <li><a href="#">기관 소개</a> <ul> <li><a href="#">기관장 인사말</a></li> <li><a href="#">한국지능정보사회진흥원 소개</a></li> <li><a href="#">정보접근성 주요사업</a></li> <li><a href="#">찾아오시는길</a></li> </ul> </li> </ul> </header> <!-- //header --> <hr> <!-- container --> <div id="container"> <!-- sub --> <div id="snb"> <h2>웹 접근성이란</h2> <ul> <li><a href="#">웹 접근성 개요</a></li> <li><a href="#">법. 제도</a></li> <li><a href="#">장애인의 웹사이트 이용 이해</a></li> <li><a href="#">웹 접근성 품질인증</a></li> <li><a href="#">관련사이트</a></li> </ul> </div> <!-- //snb --> <!-- contents --> <section id="contents"> <h2>웹 접근성 개요</h2> <div> <span>HOME</span>> <span>웹 접근성이란</span>> <strong>웹 접근성 개요</strong> </div> <h3>웹 접근성이란?</h3> <p><strong>장애에 구애 없이</strong> 모든 사람들이 손쉽게 정보를 공유할 수 있는 인터넷 공간 만들기</p> <p>월드 와이드 웹 (World Wide Web)을 창시한 <a href="https://www.w3.org/People/Berners-Lee/">팀 버너스 리(Tim Berners-Lee)</a>는 웹이란 '장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며, 웹 콘텐츠를 제작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다. 이렇듯 웹 창시자가 웹의 기본적 철학에서 웹 접근성 부문을 강조함에도 불구하고, 웹 접근성을 바라보는 입장에 따라 다르게 정의하고 있다.</p> <p>하지만, 접근에 대한 개념의 다양성으로 인한 인식의 부족보다는 접근성에 대한 개념을 잘못 이해하고 있는 것이 더욱 문제이다. 즉, 접근성을 단지 장애인에게 국한된 문제라고 잘못 이해하고 있는 경우가 대부분이라는 것이다. 비록 접근성 준수가 장애인에게 가장 혜택이 많이 돌아가는 것은 사실이지만, 접근성이란 장애인뿐만 아니라 모든 사람이 정보통신 기기나 서비스를 손쉽게 활용할 수 있도록 만드는 것을 말하는 것이다. 예를 들자면 장애인과 노인들을 위해 개발된 리모콘, 전화, 자동문 등의 제품들이 널리 보급되면서 궁극적으로는 모든 사람들이 편리하게 활용하게 된 것을 들 수 있다. 이러한 접근성 개념은 정보통신 분야에서 다양한 제품 및 서비스 간의 호환성 문제, 이동 정보통신 기기 등으로 그 필요성 및 중요성이 더욱 증대되고 있다.</p> <p><a href="https://www.w3.org/">월드 와이드 웹 컨소시엄(W3C: World Wide Web Consortium)</a><a href="https://www.w3.org/WAI/">웹 접근성 이니셔티브(WAI: Web Accessibility Initiative)</a>와 짐 대처 (Jim. Thatcher)는 웹 접근성에 대해 매우 현실적으로 정의하고 있다. 즉, 장애를 가진 사람들이 웹 콘텐츠를 인지하고, 편리하게 사용할 수 있으며, 그 내용이 이해하기 쉬워야 하며, 견고성을 지녀야 웹 접근성이 있다고 보는 관점이다. 인터넷 전자도서관인 <a href="https://en.wikipedia.org/wiki/Web_accessibility">Wikipedi</a>a 는 웹 접근성의 개념을 웹 콘텐츠 뿐만 아니라 인터넷을 통하여 전달될 수 있는 모든 콘텐츠로 확대하고 있다.</p> <h3>웹 접근성 및 정보통신 접근성에 대한 주요 정의</h3> <table> <caption>웹 접근성 및 정보통신 접근성에 대한 주요 정의에 관한 표</caption> <thead> <th scope="col">구분</th> <th scope="col">정의</th> </thead> <tbody> <tr> <td><strong>장애인·노인 등의 정보통신 접근성 향상을 위한 권장지침</strong></td> <td>정보통신 제품과 서비스를 활용하고자 하는 사람에게 이의 활용 가능성이 제공되는 것</td> </tr> <tr> <td><strong>웹 접근성 이니셔티브</strong><br><a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/">(WAI: Web Accessibility Initiative)</a></td> <td>장애를 가진 사람들도 웹을 이용할 수 있도록 보장하는 것으로, 장애를 가진 사람들이 웹 콘텐츠를 <strong>인지하고(Perceivable), 운영하고(Operable), 이해하고(Understandable),</strong> 기술에 상관없이 이용할 수 있도록 견고한(Robust)하게 웹콘텐츠를 만드는 것</td> </tr> <tr> <td><strong><a href="https://en.wikipedia.org/wiki/Web_accessibility">Wikipedia</a></strong></td> <td>표준 브라우저 뿐만 아니라 다양한 사용자 에이전트(User Agent)를 사용하는 사람들이 웹 페이지에 접근하기 쉽게 만드는 것으로, 이를 통해 장애인들도 웹을 사용할 수 있도록 보장하는 것</td> </tr> <tr> <td><strong><a href="https://www.nia.or.kr/site/nia_kor/main.do">한국지능정보사회진흥원</a></strong></td> <td><strong>어떠한 사용자(장애인, 노인 등),</strong> 어떠한 기술환경에서도 사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것</td> </tr> </tbody> </table> <hr> <blockquote> <p>웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.<br> <em>(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)</em></p> <footer>팀 버너스 리 경 - <cite>웹의 창시자 (Tim Berners - Lee , W3C Director and inventor of the World Wide Web)</cite></footer> </blockquote> <p><a href="#skip-top">위로가기</a></p> </section> <!-- //contents --> </div> <!-- //container --> <hr> <!-- footer --> <footer> <p><a href="https://www.nia.or.kr/site/nia_kor/main.do" title="한국정보화진흥원 홈페이지 바로가기"><img src="img2/nia.png" alt="NIA 한국지능정보사회진흥원"></a></p> <dl> <dt><strong>바닥메뉴</strong></dt> <dd><a href="#">한국지능정보사회진흥원 소개</a> |</dd> <dd><a href="#">웹 접근성 정책</a> |</dd> <dd><strong><a href="#">개인정보처리방침</a></strong> |</dd> <dd><a href="#">이메일무단수집거부</a> |</dd> <dd><a href="#">찾아오시는 길</a></dd> </dl> <address>대구광역시 동구 첨단로 53 (41068) 한국지능정보사회진흥원 디지털포용본부 ☎ 053-230-1388</address> <p>Copyright © 2017 National Information Society Agency</p> <p><a href="http://www.kwacc.or.kr/CertificationSite/WA/1150/Detail?page=1" title="웹와치 인증현황 바로가기"><img src="img2/WA품질인증마크_한국웹접근성평가센터.jpg" alt="WA품질인증"></a></p> <img src="img2/btm_banner.gif" alt="손말이음센터"> </footer> <!-- //footer --> </div> </body> </html>
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
이미지를 안쓰고도 만들 수 있을거 같은데 이미지로 써서 만들때 어떤 장점이 있나요 ??
요즘에도 이미지로 만들어서 작업하기도 하나요 ??
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
category를 top: 50% 했을 때 이동되는 위치들이 잘 이해가 안가네요ㅠ
gallery__img-box 높이가 정해져 있지 않아서 이미지 크기에 따라서 .garlley__itme-tag의 top:50% 위치가 조절되는거 같은데 gallery__img-box가 .garlley__itme-tag 보다 작아서 어떤 기준으로 움직이는지 이해가 잘안되네요 ㅠ 그리고 margin-top 을 line-height 반만큼 - 해서 올리는것도 ... 어렵네요 ㅠ HTML CSS
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
css 하다가 궁금한게 있어서 질문드립니다 !
안녕하세요! class 명을 어떻게 지으면 좋을지 생각해 보다 BEM 이라는것을 알게 됬는데 BEM 형식을 실전에서도 많이 사용하나요 ??
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
<li class ="m1" > 을 m2 m3으로 나눠서 해야되는 이유가 있을까요 ??
선생님 ! m1 , m2 , m3 스타일이 다 같은데 굳이 나누신 이유가 있을까요 ?? 나눠서 하니깐 css 코드량만 늘어나는거 같은데 중요한 이유가 아니면 <li class ="menu" > 통일해서 쓰고 만약 나눠쓸 필요가 있을때 <li class ="menu m1" > 이렇게 쓰는게 더 좋은방법이 아닐까요 ?? 조언 부탁드립니다.
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
cover 의미 질문있습니다. !
cover 로 주면 박스 크기가 세로로 길면 이미지를 세로에 맞추고 가로로 길면 이미지를 가로에 맞춰주는건가요 ??? 좀 헷갈려서 질문드렸습니다. !
- 해결됨퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
탭 / 쉬프트 탭으로 들여쓰기와 들여쓰기 삭제하기
안녕하세요 선생님! 강의를 들으며 옆에 서브라임텍스트를 켜놓고 따라하며 듣고 있는데요. 1. 파일을 저장하지 않은 상태에서 !, 혹은 !+탭키를 눌러도 반응하지 않는 것은 아직 html로 저장하지 않아서가 맞을까요? 2. !+탭으로 기본 구조를 생성한 뒤 다른 코드 등을 만들며 테스트 하다가 탭키를 눌렀을 때, 들여쓰기가 아닌 다른 태그로 넘어가기만 하는 경우가 있는데 이건 혹시 왜 그런걸까요? 쉬프트 탭도 동일하게 다른 태그로 넘어가기만 합니다. (파일을 새로 만들면 정상적으로 들여쓰기가 됨) 확인하시게 되면 답변 부탁드립니다. 감사합니다!
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
섹션닝으로 작성해봤는데 지적해주실만한 내용 있을까요 ?
(사진)
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
섹셔닝하는 것에 대해서..
섹션닝으로 안하신 이유가 html4에서 제대로 작동 안할 수 있어서라고 하셨던거 같은데 그럼 섹셔닝 페이지도 따로 만들어서 관리 하나요 ? 요즘 웹페이지들은 섹션닝으로 작업 하는 추세인가요 ?
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
footer에 전화번호도 추가 됬는데 address에 같이 포함 시키면 되나요 ?
footer에 전화번호도 추가 됬는데 address에 같이 포함 시키면 되나요 ?
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
tab이 안 먹어요~
탭을 눌러도 자동완성이 안됩니다. 그리고 edit plus같은 툴 사용해도 되나요? - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서탭비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
실무에서 이벤트 페이지를 작업할 때 이렇게 만드나요??
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 최근에 제가 실무에서 이벤트 페이지를 만들었는데 일일이 코딩을해서 작업을 했었습니다. 그런데 이렇게 사진으로 하면 편하긴 할 것 같은데 실무에서도 실제도 이렇게 작업을 하는건가요?? 반응형으로 만들 때에도 이렇게 해도 작업을 해도 반응형으로 작업이 되나요?..
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
border 겹침은 어떻게 해결하나요?
자세히 보시면 공지사항과 보도자료 보도자료와 해명자료 사이에 border가 겹쳐서 두껍게 표시되는데요 margin-right:-1px하면 겹처지는게 사라지는데 이방법 아니면 .tab_lis li.m1 >a , .tab_lis li.m2 >a, .tab_lis li.m3 >a 마다 border 설정을 해줘야 하는 건가요? .tab_list li.m1 > a, .tab_list li.m2 > a, .tab_list li.m3 > a { display: block; /* float: left; */ position: absolute; left: 0; top: 0; /* padding: 0 30px; */ width: 80px; text-align: center; border: 1px solid #aaa; border-bottom: 1px; background-color: #eee; color: #666; margin-right: -1px; font-size: 13px; line-height: 35px; text-decoration: none; }
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
이메일 페이지라는게 이해가 잘 안되는데 ..
쉽게말해서 이메일로 보낼수 있는 코딩을 하는건가요? 메일을 보낼때 이미지를 보내는게 아니라 코딩한거를 보내는 셈인가요? 뭔가 쉽게 이해가 잘 안됩니다.. 감사합니다!!
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
css backgrond 관련 질문입니다..!
선생님 저는 css에서 p 태그에 background 를 지정하고 안에 내용물이 background의 크기보다 초과하면은 배경을 넘어서 글이 써지는데 선생님은 background내에서 자체적으로 줄바꿈이 되서 배경안에서 글이 잘 써지네요.. 혹시 이게 왜 차이가 있는걸까요?? 감사합니다..!!
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
선생님 공부 순서는 어떻게 하는게 좋을까요?
html ->css-> javascript-> jsp 이렇게 한단계씩 밟아올라가는게 좋을까요 아니면 단계별로 병행해서 (javascript+jsp) 같이 공부하는게 좋을까요? 그리고 jsp배우기전에는 java를 선행하는게 필수일까요?
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
속성을 닫을때 작은따옴표로 쓰면 안될까요?
예를들어서 'utf-8' 이렇게요..! 나중에 차질이 있을까요? 감사합니다!
- 미해결퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
선생님 !! 질문있습니다.
선생님은 화살표 아이콘 좌우 간격을 따로 조정 안하신거 같은데 저는 화살표 간격이 너무 글씨에 붙어서 이상하게 나오네요 왜그런걸까요 ?? 이런 부분은 포지션으로 위치를 잡아주면 될까요??
- 해결됨퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
선생님 !! button, input 버튼이 깨지는데 왜그런건가요??
(사진)