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

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

1-1. Web이란? 사전적인 의미는 거미줄이고 IT에서는 WWW (World Wide Web)의 줄임말로 사용한다. 목적은 전 세계의 컴퓨터들을 연결하여 정보 공유를 하는데에 있다. 여러 컴퓨터들이 연결되어 있는 상태를 네트워크에 연결되어 있다고 한다. 보통은 1개 이상의 사이트가 연결되어있는 인터넷 서비스의 한가지 형태를 말한다. 인터넷이란 1개 이상의 네트워크가 연결되어 있는 형태이다. 관련용어 -프로토콜(Protocol) : 네트워크상에서 약속한 통신규약 (Http, FTP, SMTP, POP, DHCP) -IP : 네트워크상에서 컴퓨터를 식별할 수 있는 주소 -DNS : IP주소를 인간이 쉽게 외우도록 맵핑한 문자열 -Port : 해당컴퓨터의 구동되고 있는 프로그램을 구분할 수 있는 번호 1-2..

이번 겨울 방학에 피로그래밍이라는 웹개발 동아리에서 활동을 하게 되었다. 복습도 할 겸 블로그에 정리를 해봐야겠다. 1주차에는 인프런 강좌를 들으며 HTML과 CSS에 대해 배웠다. 인프런 강좌 링크 : https://www.inflearn.com/course/html-css-%EA%B0%95%EC%A2%8C# 실전 HTML & CSS 강좌