본문 바로가기

분류 전체보기

 (248)
HTML emmet 활용 emmet은 html이나 css 등을 작성할 때 시간을 단축시켜주는 확장 플러그인이며, vscode에 기본적으로 적용되어 있다. ! + tab : 기본폼 생성 태그이름 + tab : 태그 틀 생성 link + tab : 스타일시트 코드 완성 태그이름.클래스이름 + tab : class 포함해서 태그 생성 (태그이름 생략하면 div로) 태그이름#아이디이름 + tab : id 포함해서 태그 생성 (태그이름 생략하면 div로) li*5 + tab : li태그 5줄 한번에 생성 div>span + tab : 부모태그 내에 자식태그로 태그 생성 div+div + tab : 같은 단계에 태그 생성 p{hello} : p태그안에 hello넣어져서 태그 생성 ( )를 통해 묶을 수 있다. cf) velog.io/@xe..
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하면 가운데 정렬할 수 있다.(..

티스토리툴바