![[EWD2014]CLASS05](https://cdn.slidesharecdn.com/ss_thumbnails/ewdclass05-140403222450-phpapp02-thumbnail.jpg?width=560&fit=bounds)
More Related Content
Similar to HTML과 CSS (20)
HTML과 CSS
- 1. 북 리뷰 Head First HTML and CSS, 처음부터 다시 배우는 HTML5 & CSS3 : 반응형 웹 표준 사이트 제작까지 (전면개 정판) 원광석 2016년 11월 29일
- 2. 웹의 작동 절차 사용자(클라이언트)가 웹 브라우저를 통해서 웹 서버로 접속(요청 을 보냄) -> 웹 서버가 요청을 분석해서 가지고 있는 웹 페이지를 사용자에 게 보냄 -> 웹 서버로부터 받은 웹 페이지를 사용자의 웹 브라우저에서 해 석(파싱)한 뒤 렌더링 하여 보여줌
- 3. 웹 페이지의 모습 • HTML로 정의된 태그와 내용의 모음으로 이루어져 있다. <와 >가 감싸고 있는 요소가 HTML의 태그. • CSS와 JavaScript처럼 HTML이 아닌 언어를 같이 쓸 수 있다. HyperText Markup Language Cascading Style Sheets
- 4. HTML 태그 • 여는 태그와 닫는 태그에 내용을 넣는 방식으로 활용하며 닫는 태그가 없이 단독 으로 쓰이는 빈 요소도 있다. • 블록 요소와 인라인 요소, 그 밖의 요소로 이루어져 있다. 블록 요소의 앞, 뒤에는 줄 넘김(Line break)이 발생하고 인라인 요소는 줄 넘김 없 이 내용이 계속 이어진다. • 일반적으로 <태그이름 속성=“속성으로 지정할 값“>태그를 적용할 내용</닫는 태 그>와 같은 형태로 이루어져 있다. 예) <a href=“top10.html”>최고의 영화</a>
- 5. 구조와 디자인의 분리 • HTML 3.2 이하의 스펙이 적용된 페이지에서는 HTML의 태그에서 글 꼴이나 글자색 등 디자인 요소까지 같이 작성하였다. • 이후 CSS를 본격적으로 도입하여 HTML은 웹 페이지의 구조를 잡는 것에, CSS는 잡혀 있는 구조를 효과적으로 표현할 수 있도록 분업화 하였다. • 구조와 디자인을 이루는 코드가 서로에 대해 영향을 주지 않게 되어 개발효율을 높이고 변경 사항에 유연하게 대처할 수 있게 되었다.
- 6. 스타일시트 • HTML의 <style> 요소 안 쪽에서 사용하거나 별도의 CSS 파일에 내용을 저장해서 <link> 요소로 해당 웹 페이지에 적용할 스타일 시트를 연결하여 사용할 수 있다. • 선택할 요소 이름 { 적용할 속성: 속성값; }의 형태로 이루어져 있다. • 예) p { color: maroon; } -> <p> 요소가 감싸고 있는 글씨의 색을 maroon으로 바꾼다.
- 7. 웹 표준 • 똑같은 웹 페이지를 보여주기 위해서 서로 다른 웹 브라우저의 특성 에 따라 반복작업을 하거나 핵을 작성하는 등의 낭비를 표준화를 통 해서 줄이자는 공감대 형성 • 웹을 이용하는 여러 가지 환경, 신체적인 특징을 극복하기 위해 웹 접 근성을 높이려는 시도가 이루어지고 있다. • HTML 태그의 title이나 alt 속성 등을 이용하여 웹 접근성을 확보할 수 있다.
- 8. HTML5 • 구조와 디자인의 분리를 HTML 태그 수준에서 기본적으로 지원 한다. • 플랫폼 독립적인 기능을 추가하여 웹 표준을 따를 수 있도록 했 다. • 새롭게 추가된 태그를 통해 같은 기능을 구현하려는 수고를 줄이 고 성능을 강화할 수 있다. 예) <video>와 <audio>