웹개발/[인프런] 실전 HTML & CSS (14) 썸네일형 리스트형 14강. 웹페이지 실전 1 ※ 다음 강좌를 수강하고 내용을 정리한 것입니다. https://www.inflearn.com/course/html-css-강좌# 실전 HTML & CSS 강좌 - 인프런 Web을구성하고있는HTML5 과 CSS3 를 다루는 강좌 입니다. 입문 웹 개발 HTML/CSS 웹 퍼블리싱 온라인 강의 css 강좌 www.inflearn.com 14-1 웹 페이지 개요 우리는 다양한 웹사이트를 경험하고 있습니다. 하지만, 수많은 웹사이트의 레이아웃도 전체적으로 거의 비슷한 레이아웃을 가지고 있습니다. 14-2 http://www.yahoo.com의 의 전체적인 레이아웃 http://www.yahoo.com를 통해서 서 전체적인 레이아웃을 만들어 봅니다. github.com/HoYoungChun/piro14/tree.. 13강. CSS 속성 4 ※ 다음 강좌를 수강하고 내용을 정리한 것입니다. https://www.inflearn.com/course/html-css-강좌# 실전 HTML & CSS 강좌 - 인프런 Web을구성하고있는HTML5 과 CSS3 를 다루는 강좌 입니다. 입문 웹 개발 HTML/CSS 웹 퍼블리싱 온라인 강의 css 강좌 www.inflearn.com 13-1 float 속성 ★ position 속성과 함께 요소의 위치를 설정하기 위한 속성입니다. 공간이 있다면 그 전에 사용했던 태그 왼쪽에 붙거나 오른쪽에 붙게 할 수 있습니다. float 속성 있는 태그를 감싸는 태그에는 반드시 overflow:hidden을 줘야 합니다. 13-2 gradient 속성 2가지 이상의 색(그라데이션)을 표현할 때 사용되는 속성입니다. h.. 12강. CSS 속성 3 ※ 다음 강좌를 수강하고 내용을 정리한 것입니다. https://www.inflearn.com/course/html-css-강좌# 실전 HTML & CSS 강좌 - 인프런 Web을구성하고있는HTML5 과 CSS3 를 다루는 강좌 입니다. 입문 웹 개발 HTML/CSS 웹 퍼블리싱 온라인 강의 css 강좌 www.inflearn.com 12-1 font-family, font-size 속성 글꼴 및 폰트 사이즈 관련 속성을 살펴봅니다. font-family:에 인자를 여러 가지 주면 앞의 글꼴을 지원하지 않을 때 뒤의 글꼴을 이용합니다. 12-2 font-style, font-weight, line-height 속성 글꼴 및 폰트 사이즈 관련 속성을 살펴봅니다. line-height로 행간격을 조절합니다... 11강. CSS 속성 2 ※ 다음 강좌를 수강하고 내용을 정리한 것입니다. https://www.inflearn.com/course/html-css-강좌# 실전 HTML & CSS 강좌 - 인프런 Web을구성하고있는HTML5 과 CSS3 를 다루는 강좌 입니다. 입문 웹 개발 HTML/CSS 웹 퍼블리싱 온라인 강의 css 강좌 www.inflearn.com ★이번 강의 매우 중요 11-1 margin 및 padding 속성 margin 및 padding 속성은 아주 중요한 속성으로 정확한 속성의 의미를 알아야 합니다. margin은 background바깥에 여백이 생기고, padding은 background자체가 확장됩니다. margin은 시계방향 순서로 적습니다. 모든 방향 같으면 값 하나만 줘도 됩니다. 값 두 개 주면 첫.. 10강. CSS 속성 1 ※ 다음 강좌를 수강하고 내용을 정리한 것입니다. https://www.inflearn.com/course/html-css-강좌# 실전 HTML & CSS 강좌 - 인프런 Web을구성하고있는HTML5 과 CSS3 를 다루는 강좌 입니다. 입문 웹 개발 HTML/CSS 웹 퍼블리싱 온라인 강의 css 강좌 www.inflearn.com 10-1 CSS3 단위 CSS3에서 자주 사용되는 단위들에 대해서 살펴봅니다. px, %, em을 주로 사용하고, 2em은 2배를 의미합니다. 구조선택자를 사용한 p:nth-child(2n)은 짝수번째를 선택합니다. display:block;을 하면 인라인레벨요소를 블록레벨요소로 변경할 수 있습니다. 10-2 url() Background-img 속성의 속성값으로 많이 사용.. 9강. CSS 기본 4 ※ 다음 강좌를 수강하고 내용을 정리한 것입니다. https://www.inflearn.com/course/html-css-강좌# 실전 HTML & CSS 강좌 - 인프런 Web을구성하고있는HTML5 과 CSS3 를 다루는 강좌 입니다. 입문 웹 개발 HTML/CSS 웹 퍼블리싱 온라인 강의 css 강좌 www.inflearn.com 9-1 문자 선택자 특정 문자 또는 문자열을 선택하여 CSS속성을 설정할 수 있습니다. #history2:first-letter{}하면 첫번째 문자를 선택하고, #history2:first-line{}하면 첫번째 줄을 선택합니다. margin: 0 auto하면 가운데 정렬됩니다. :와 ::의 혼용 최신 브라우저에서 문제가 없지만, 차이를 알아야 합니다. cf) brunch... 8강. CSS 기본 3 ※ 다음 강좌를 수강하고 내용을 정리한 것입니다. https://www.inflearn.com/course/html-css-강좌# 실전 HTML & CSS 강좌 - 인프런 Web을구성하고있는HTML5 과 CSS3 를 다루는 강좌 입니다. 입문 웹 개발 HTML/CSS 웹 퍼블리싱 온라인 강의 css 강좌 www.inflearn.com 8-1 반응 선택자 마우스의 반응에 따른 속성을 설정할 수 있습니다. li:hover로 마우스 올렸을때 색상을 변경할 수 있습니다. margin: 100 200 300 400하면 순서대로 top,right,bottom,left(시계방향) 각각의 margin 설정 margin: 100하면 모든 부분의 margin에 적용 margin: 0 auto하면 가운데 정렬할 수 있다.(.. 7강. CSS 기본 2 ※ 다음 강좌를 수강하고 내용을 정리한 것입니다. https://www.inflearn.com/course/html-css-강좌# 실전 HTML & CSS 강좌 - 인프런 Web을구성하고있는HTML5 과 CSS3 를 다루는 강좌 입니다. 입문 웹 개발 HTML/CSS 웹 퍼블리싱 온라인 강의 css 강좌 www.inflearn.com 7-1 id(#)와 class(.) id는 유일하고, class는 유일하지 않습니다. id를 선택할 때는 #으로, class를 선택할 때는 .으로 합니다. float:left주고 바깥에 overflow:hidden주면 div태그여도 옆으로 붙습니다. clear:both로 내려오는 float정렬 제거 font-size에서 2em은 2배라는 의미입니다. 7-2 tag, id, .. 이전 1 2 다음