웹개발 한 번 해보겠습니다..

13-1. float 속성 float 속성은 요소의 위치를 설정해주는 속성이다. block type의 태그를 왼쪽으로 붙일 때 float: left를 많이 사용한다. float: left 속성을 감싸는 태그에 overflow: hidden 을 주면 float를 사용함으로 나타나는 부유하는 현상과 넘치는 현상을 잡아줄 수 있다. 떠내려 온 빙하에서 깨어난 공룡, 죠르디 빛나는 과거를 뒤로한 채 지금은 취업을 꿈꾸며 하루하루 열심히 삽니다. 이번에는 기본적인 홈페이지 레이아웃을 예시로 보자. HEADER NAVIGATION menu1 menu2 menu3 menu4 menu5 CONTENT BANNER FOOTER float: left 속성이 부여된 태그를 감싸는 태그에는 overflow: hidden이 부..

12-1. font-family, font-size 속성 글꼴 및 폰트 사이즈 관련 속성이다. font-family : 글꼴을 정해준다. font-size : 폰트의 사이즈를 정해준다. font-family는 여러개의 글꼴을 나열해주고 먼저 명시한 것부터 우선순위를 갖게 된다. font-size는 앞에서도 많이 사용했던 속성이므로 생략한다. 12-2. font-style, font-weight, line-height 속성 font-style은 글자 모양을 적용하는 속성으로 주로 italic (기울임)을 많이 사용한다. font-weight는 글자 굵기를 적용하는 속성으로 주로 bold (굵게)를 많이 사용한다. line-height는 줄 높이를 정하는 속성이다. 1.0일때 위아랫줄이 딱 붙게 되고 커질수..

11-1. margin 및 padding 속성 중요!! margin 및 padding 속성은 여러 번의 실습을 통해 익숙하게 해주어야 한다! margin은 공간의 밖에, padding은 공간의 안에 적용된다고 생각하면 된다. 8강에서 다뤘던 margin 사용법에 대해 보자. (padding도 규칙은 같다.) style 태그 안의 div에 주는 CSS 속성에서 margin: 30px 0 0 30px에 주목해보자. 여백을 위에는 30px, 오른쪽에는 0px, 아래에는 0px, 왼쪽에는 30px 준다는 의미이다. 위부터 시계방향으로 회전하여 위, 오른쪽, 아래, 왼쪽 순서로 명시해주면 된다. margin: 30px 20px 10px 의 경우에는 여백을 위에는 30px, 오른쪽에는 20px, 아래에는 10px,..

10-1. CSS3 단위 CSS3에서는 px, %, em과 같은 단위를 사용한다. px : 픽셀, 모니터에 따라 상대적인 크기를 가진다. % : 퍼센트, 기본글꼴의 크기를 기준으로 상대적인 크기를 가진다. (100%가 기본) em : 해당 글꼴의 기본 크기에 따라 상대적으로 커진다. (1.0em이 기본) 서울산업진흥원은 서울특별시에 소재하고 있는 중소기업에 대한 종합적이고 체계적인 지원사업을 통하여 중소기업의 경영여건 개선과 경쟁력강화에 기여함을 목적으로 지역균형개발 및 지방중소기업육성에 관한 법률 제49조와 동법 시행령 제63조, 민법 제3장 및 서울산업진흥원 설립운영조례에 따라 설립되었습니다. (2006년 7월 19일 개정) 서울산업진흥원은 서울특별시에 소재하고 있는 중소기업에 대한 종합적이고 체계적..

9-1. 문자 선택자 특정 문자 또는 문자열을 선택하여 CSS속성을 부여할 수 있다. first-letter : 첫 글자에 속성을 부여한다. first-line : 첫 줄에 속성을 부여한다. selection : 드래그되어 있는 문자들에 속성을 부여한다. 사용은 특정 태그 뒤에 :: 를 붙이고 문자 선택자를 붙여준다 #content p:first-child::selection #history2::first-letter, #history1::first-letter #history2::first-line, #history1::first-line 새 포스팅 포스팅의 내용이다. 포스팅의 내용이다. 포스팅의 내용이다. 포스팅의 내용이다. 포스팅의 내용이다. 포스팅의 내용이다. 포스팅의 내용이다. 포스팅의 내용이다..

8-1. 반응 선택자 - hover hover는 마우스를 특정 태그 위에 올렸을 때 반응하는 속성을 설정해준다. li:hover { 속성 } 과 같이 사용한다. menu1 menu2 menu3 menu4 menu5 +α 로 알아가기 : margin 사용법 style 태그 안의 div에 주는 CSS 속성에서 margin: 30px 0 0 30px에 주목해보자. 여백을 위에는 30px, 오른쪽에는 0px, 아래에는 0px, 왼쪽에는 30px 준다는 의미이다. 위부터 시계방향으로 회전하여 위, 오른쪽, 아래, 왼쪽 순서로 명시해주면 된다. margin: 30px 20px 10px 의 경우에는 여백을 위에는 30px, 오른쪽에는 20px, 아래에는 10px, 왼쪽에는 20px 준다는 의미이다. 오른쪽과 왼쪽에 ..

7-1. id(#)와 class(.) 태그의 id와 class를 이용하여 CSS 속성을 설정할 수 있다. id는 #을 이용해 선택하고, class는 . 을 이용해 선택한다. 감이 잘 오지 않는다면 아래 코드를 차근차근 봐보자. header menu1 menu2 menu3 menu4 menu5 footer div의 id가 header인 것에 CSS 속성을 적용하기 위해 #header 라고 명시해주었다. 이처럼 id값에 따른 선택은 id값 앞에 #을 붙여준다. ul 태그 안에 있는 li 태그의 class 이름은 menu1, menu2, ... 등으로 되어있다. 이를 선택하기 위해서는 .menu1, .menu2 의 형태를 사용하면 된다. 이처럼 class값에 따른 선택은 class값 앞에 . 을 붙여준다. d..

6-1. 선택자란? 특정 태그를 선택하여 해당 태그의 속성을 변경할 때 사용한다. 보통 style 태그 안에서 선택자에 속성을 부여한다. 선택자의 자세한 사용법은 다음에 나온다. 6-2. tag 선택자 특정 태그를 선택하여 CSS 속성을 적용한다. 제목 입니다. 본문 입니다. 제목 입니다. 본문 입니다. 또 하나의 DIV 입니다. style 태그 내부를 보면 div 태그의 background-color가 #eeee33 으로 설정되고 border는 5px solid #ffd800으로설정된다. 여기서 border 속성에는 테두리의 두께, 종류, 색상을 명시해주면 된다. 위의 예시에서는 div의 테두리 두께가 5px인 #ffd800의 색을 가진 실선이 적용된다. h1 태그의 background-color는 #..