kimyws

■ css 적용방법 ◎ html에서 연결방법 ) div > .클래스명 {} div내부에 있는 클래스인데 div의 바로 아래있는 클래스만 선택해 준다. 인접 형제 선택자 (+) div h1+h2 {} div > h1+h2 {} div내부에 있는 자손 h1의 바로 밑의 형제 h2를 선택해 준다 div바로 아래 있는 h1의 바로 밑의 형제 h2를 선택해 준다 그룹 선택자 (,) .클래스1, .클래스2 {} 클래스 1과 클래스 2를 모두 선택해 준다. 속성 선택자([]) [target] {} a[target] {} a [target] {} [target="_blank"] {} [class^="list"] {} 그외 추가적으로 속성이 target이 있는 것을 선택 a태그의 속성 target이 있는 a태그 자손중에..

■ 서체와 글 스타일 기본 ○ 기본체와 동일한 경우 서체 불러오는 방법 body { font-family:'돋움',dotum, helvetica, sans-serif } '돋움' = 서체값이 두단어 이상이거나 영어가 아닌 경우 따옴표 dotum = 영문윈도우 기반 helvetica = 맥 os기반의 컴퓨터 대비 ○ 웹에 올려 연결하는 방법 @font-face를 지원한다. @font-face{ font-family: '폰트명'; src: url(폰트경로); } ○ 구글 폰트 사이트 (http://www.fonts.google.com) html head와 head사이에 넣어야 한다. font-fmily : "xx", sans-seif; CSS에 넣어 줘야 한다. @import url(''); CSS에 넣어 ..

■ HTML 기본 템플릿 생성 ! 태크 추가 div*3 자식요소 태그 추가 div>div*3 순서대로 태그 생성 div+p+span 태그에 클래스 넣어서 만들기 div.itme*3 태그에 속성 넣어서 새로 만들기 div[class]*3 태그에 클래스 넣어서 번호매기기 div.item$@*3 태그에 아이디 넣어서 번호매기기 div#item$@*3 태그에 내용 넣어서 번호매기기 div{안녕$@}*3 안녕1 안녕2 안녕3 역순으로 넣어만들기 div{안녕$@-}*3 안녕3 안녕2 안녕1 아이디, 클래스 가진 div 태그 생성 #a$@*3 .a$@*3 ■ CSS w10 width: 10px; h10 height: 10px; m10 margin: 10px; p10 padding: 10px; t10 top: 10px..

■ CSS 란? CSS의 역할 ○ CSS (Cascading Style Sheets) - Cascading : 계단식 위에서 흐르는 - Style : 양식 - Sheets : 판, 한장 - 계단식으로 스타일을 정의하는 문서 - HTML 문서에 스타일을 더해준다. HTML은 계단식 구조를 지니고 있다. ○ CSS 기본문법 - 선택자 : 어떤 요소에 스타일을 적용할지 정보 - {중괄호} : 선택한 요소에 적용할 스타일을 정의 하는 구간 - 속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보 - 속성값 : 어느정도의 수치에 맞게 정의하고 싶은지에 대한 정보 ○ html에서 연결방법 ○ CSS주석처리 p{ background-color: blue; /* p태그에 파랑 넣기 */ } ○ HTML에 CSS를 더해..

보호되어 있는 글입니다.

■ HTML이란? ○ HTML : HyperText Markup Language - HyperText : 하이퍼 링크(참조)를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트 - Markup : 표시 (콘텐츠를) - Language : 언어 > 하이퍼 텍스트와 콘텐츠를 표시해주는 언어 > 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어 ○ HTML은 콘텐츠를 정의 - 개발자는 HTML 코드로 웹페이지에 어떤 내용이 표시될 지를 정의함 - 완성된 HTML코드를 웹브라우저에 로딩하면 웹페이지가 만들어진다. - HTML코드가 웹브라우저를 통해 해석되고 표현되는 과정을 렌더링이라 한다. ○ HTML 문서 : 확장자가 HTML - 텍스트 편집기 : Brackets, VScode ..

■ EMMET 약어 태그  ■ Webstroyboy ■ HTML기초 - 링크 ■ CSS기초 - 링크 - Flex Froggy : 기본 플렉스 문제- Flex Defense : 플렉스 심화 문제- Flex Playground : 플렉스 전반적인 내용 ■ Layout ■ image 태그■ 메뉴바 - 2차시험 결과형식  ■ 3차 웹페이지 구성 ■ JQuery - 형태■

Webstoryboy Site - CSS■ CSS 란? CSS의 역할○ CSS (Cascading Style Sheets)- Cascading : 계단식 위에서 흐르는- Style : 양식- Sheets : 판, 한장- 계단식으로 스타일을 정의하는 문서- HTML 문서에 스타일을 더해준다. HTML은 계단식 구조를 지니고 있다.  ○ CSS 기본문법- 선택자 : 어떤 요소에 스타일을 적용할지 정보- {중괄호} : 선택한 요소에 적용할 스타일을 정의 하는 구간- 속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보- 속성값 : 어느정도의 수치에 맞게 정의하고 싶은지에 대한 정보 ○ html에서 연결방법 ○ CSS주석처리p{ background-color: blue; /* p태그에 파랑 넣기 */..

■ HTML이란?○ HTML : HyperText Markup Language- HyperText : 하이퍼 링크(참조)를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트- Markup : 표시 (콘텐츠를)- Language : 언어> 하이퍼 텍스트와 콘텐츠를 표시해주는 언어> 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어 ○ HTML은 콘텐츠를 정의- 개발자는 HTML 코드로 웹페이지에 어떤 내용이 표시될 지를 정의함- 완성된 HTML코드를 웹브라우저에 로딩하면 웹페이지가 만들어진다.- HTML코드가 웹브라우저를 통해 해석되고 표현되는 과정을 렌더링이라 한다. ○ HTML 문서 : 확장자가 HTML- 텍스트 편집기 : Brackets, VScode- 웹 브라우저 : ..

보호되어 있는 글입니다.