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

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는 #..

5-1. div를 이용한 layout div 태그를 이용하여 구분해주는 레이아웃이다. div 태그의 특성대로 밑으로 차곡차곡 쌓이는 형태이다. My Homepage menu1 menu2 menu3 menu4 menu5 What is HTML5? HTML5 is goooooooooooooooood! xxx주식회사 서울시 oo구 oo동 5-2. 시멘틱을 이용한 layout My Homepage menu1 menu2 menu3 menu4 menu5 What is HTML5? HTML5 is goooooooooood! xxx주식회사 서울시 oo구 oo동 출처 https://www.inflearn.com/course/html-css-%EA%B0%95%EC%A2%8C# 인프런 실전 HTML & CSS 강좌

4-1. 동영상을 출력하는 태그 - video 웹사이트에서 비디오를 출력해주는 태그이다. - video 태그의 속성 src : 사운드 파일이 저장되어 있는 경로의 주소를 넣어준다. autoplay : 자동 재생 여부 설정 loop : 반복 재생 여부 설정 controls : 컨트롤러 추가 여부 설정 하지만.. video 태그보다는 iframe 태그를 이용한 youtube 영상 업로드를 더 많이 쓸듯하다.. - iframe 태그 : 웹페이지 안에 다른 웹페이지를 표출하는 태그 유튜브 동영상에서 우클릭하고 '소스 코드 복사' 클릭 4-2. 폼 태그 - form, input, label 중요!! 회원가입과 같은 사용자의 입력을 필요로 할 때 사용된다. form 태그 - form 태그의 속성 action : 폼..

3-1. 리스트 태그 - ul, ol, li 리스트를 표현하는 가장 많이 사용되고 있는 태그 수평 구조일 때도 ol 태그와 ul 태그 사용이 가능하다. - ul 태그 : unordered list, 번호없이 리스트를 나열한다. - ol 태그 : ordered list, 번호를 붙여서 리스트를 나열한다. - li 태그 : list의 항목 각각을 나타낸다. menu1 menu2 menu3 menu4 menu5 서울 경기 충청 전라 경상 강원 3-2. 표를 나타내는 태그 - table 표 형식의 레이아웃을 만드는 태그이다. 현재는 잘 사용하지 않는다고 한다. 다음과 같이 사용한다. 1행1열 1행2열 1행3열 1행4열 2행2열 2행3열 2행4열 3행1열 3행3열 3행4열 3-3. 이미지를 나타내는 태그 - im..