가카리의 공부방

12. 캐스캐이딩 캐스케이드는 폭포라는 의미가 있습니다. 처음html이등장했을 때는CSS가 없었습니다. 웹의 사용자들은 곧 디자인을 요구하기 시작합니다. 웹의고안자들은html을 꾸며주는 언어의 필요성에 공감하기 시작합니다. 그렇게해서 등장한 것이CSS입니다. CSS는Cascading Style Sheet의 약자입니다. Cascading은CSS의 첫 번째 글자로 등장 할만큼 가장 중요한 기능 다시 말해 철학이라는 의미가 있습니다. Cascading을 사전에서 찾아보면 폭포라는 의미가 있습니다. 즉 웹페이지의 디자인이 웹브라우저의 기본 디자인과 브라우저 사용자의 디자인 그리고 웹페이지 저자의 디자인이 결합될 수 있다는 점에 착안하고 있다고 할 수 있을 것 같습니다. 즉 웹브라우저, 사용자, 컨텐츠 생산자의 ..

12. 웹폰트 웹폰트란? 웹폰트는 사용자가 가지고 있지않은 폰트를 웹페이지에서 사용할 수 있는 방법입니다. 폰트를 서버에서 다운로드하는 방식이라고 할 수 있습니다. 본 수업에서는 구글에서 제공하는 무료 웹폰트 서비스인 google fonts를 이용해서 웹폰트를 설명합니다. 구글 폰트 사이트에서 다음과 같이 선택하면 link주소와 font-family 적용법이 나옵니다. web_font.html Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis lacus eu ex rhoncus pretium. Sed vestibulum risus pharetra, consequat nibh ac, ornare nunc. Nunc eu dui..

11. 서체 1) 고정폭과 가변폭 서체는 크게 두가지 방법으로 구분할 수 있습니다. 고정폭(monospaced)과 가변폭입니다. 아래는 두가지 방식의 차이를 보여주는 이미지 입니다. 2) serif vs sans serif serif는 글꼴에서 사용하는 장식을 의미합니다. sans는 부정의 표현입니다. 즉 sans serif는 serif가 아니다는 뜻입니다. 출처: http://www.w3schools.com/css/css_font.asp 3) 폰트 랭킹 많이 사용하는 폰트의 랭킹을 알려주는 사이트가 있습니다. 이 사이트를 통해서 가장 많이 사용하는 폰트는 무엇인지를 알아보는 것도 재미있을 것 같습니다. http://www.fontreach.com/#top 4) 국내폰트 네이버에서 운영하는 국내 자료실입..

10. font 1) font-family font-family는 서체를 지정하는 속성입니다. 아래와 같은 방법으로 합니다. h1{ font-family: "Times New Roman", Times, serif; } 위 코드의 의미는 h1 태그를 Times New Roman을 지정합니다. 그런데 사용자의 컴퓨터에 폰트가 없으면 Times를 사용하게 됩니다. 이때 마지막 폰트는 포괄적인 폰트로 지정합니다. 아래와 같은 것이 있습니다. serif (장식이있는폰트) sans-serif cursive (흘림체) fantasy monospace (고정폭) 출처 : http://matchwebdesign.com/Daily-Thoughts/why-typographically-thinking-ruins-your-si..

8. color 문자 컬러를 설정할 때 사용한다. color.html Hello world 9. text-align text-align의값으로올수있는값은아래와같습니다. left : 왼쪽정렬 right : 오른쪽정렬 center : 가운데정렬 justify : 균등정렬 text_align.html Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan iaculis tristique. Pellentesque eu erat mattis est semper condimentum. Nunc sed facilisis turpis. Mauris vulputate, purus in suscipit accumsan, dolor lorem eleme..

7. font-size 글꼴의 크기를 지정합니다. 주요 단위로는 px, em, rem이 있습니다. rem html 태그에 적용된 font-size의 영향을 받습니다. html 태그의 폰트 크기에 따라서 상대적으로 크기가 결정되기 때문에 이해하기 쉽습니다. 가장 바람직한 단위입니다. 이것을 사용하세요. px 모니터 상의 화소 하나의 크기에 대응되는 단위입니다. 고정된 값이기 때문에 이해하기 쉽습니다만, 사용자가 글꼴의 크기를 조정할 수 없기 때문에 가급적 사용을 하지 않는 것이 좋습니다. em 부모 태그의 영향을 받는 상대적인 크기입니다. 부모의 크기에 영향을 받기 때문에 파악하기가 어렵습니다. rem이 등장하면서 이 단위 역시 사용이 권장되지 않습니다. 예제. font_size.html PX REM 실행..

6. 속성을 공부하는 방법 중요한 속성들 CSS의 효과 다른 말로 속성(property)는 약 250개 정도입니다. 일상 생활에서 사용하는 자연어의 어휘에 비하면 몇개 되지 않지만, 이것들을 하나씩 열거해서 공부하는 것은 뇌를 혹사시는 일입니다.우리 수업에서 제시하는 공부방법은 가장 빈도수가 높은 CSS의 속성 순으로 공부하고, 빈도가 낮은 것들은 그런 것이 있다는 정도만 확인하고 필요할 때 검색, 질문 등을 이용하는 것입니다. 속성에 대한 통계 과학적인 방법으로 빈도수를 조사하기 위해서 마이크로소프트에서 검색엔진 bing.com을 통해서 수집한 전세계 웹페이지의 통계 자료를 인용하겠습니다. https://developer.microsoft.com/en-us/microsoft-edge/platform/u..

5. 가상 클래스 선택자 1. 소개 가상(pseudo) 클래스 선택자는 클래스 선택자는 아니지만 엘리먼트들의 상태에 따라서 마치 클래스 선택자처럼 여러 엘리먼트를 선택할 수 있다는 점에서 붙은 이름입니다. 여기서는 주요 클래스 선택자를 알아봅니다. ex_css_5.html 방문함 방문안함 실행 화면 마우스를 갖다대면 다음과 같이 노란색이 됩니다. 탭을 눌러서 포커스를 주면 다음과 같이 하얀색 박스처리가 됩니다. 이러한 처리를 하는 것을 가상 클래스 선택자라고 합니다. 링크와 관련된 가상 클래스 선택자 - :link - 방문한 적이 없는 링크 - :visited - 방문한 적이 있는 링크 - :hover - 마우스를 롤오버 했을 때 - :active - 마우스를 클릭했을 때 위의 선택자는 순서대로 지정하는..

4. 부모 자식 선택자 어떤 태그의 하위에 있는 태그를 선택하고 싶을 때는 좀 더 복합적인 선택자를 사용하게 됩니다. 여기서는 부모 태그 아래에 있는 자식 태그를 선택하는 몇가지 방법을 알아보겠습니다. 1) 조상 자손 선택자 아래의 태그는 ul 밑에 있는 모든 li 태그를 선택합니다. ul li color:red; 2) 부모 자식 선택자 아래 선택자는 #lecture 바로 밑에 있는 li만을 선택합니다. #lecture>li border:1px solid red; 3) 친구 선택자 (이런 용어는 없습니다) 아래 코드는 ul과 ol을 동시에 선택합니다. ul,ol background-color: powderblue; 예제 - parent_selector_selector_1.html HTML CSS Java..

3. 선택자의 종류 선택자의 타입들 이번 수업에서는 다양한 형태의 선택자를 알아봅니다. 태그 선택자 클래스 선택자 아이디 선택자 3가지의 선택자를 알아볼 것인데 여러분은 이미 1가지 선택자를 알고 계시고 2개만 더 배우면 됩니다. 1) 태그 선택자 태그를 선택합니다. 아래 코드는 이 문서의 모든 li 태그라는 뜻입니다. li{color:red} 2) 아이디 선택자 아이디 속성의 값에 해당하는 태그를 선택하는 선택자입니다. 아래의 코드는 이 문서에서 id값이 select인 태그라는 뜻입니다. #select{font-color:50px;} selector_1.htmlHTMLCSSJavaScript 실행 화면다음과 같이 id가 select인 값만 font-size 가 적용됨을 알 수 있다. 3) 클래스 선택자..