가카리의 공부방

21 Float Float는 편집 디자인에서 이미지를 삽화로 삽입할 때 사용하는 기법입니다. 또한 레이아웃을 잡을 때도 사용하는 기능이기 때문에 꽤 중요합니다. 1) Float효과란? Float가 어떤 효과인지 확인하기 위해서 다음 예제를 봅시다. float.html img width:300px; float:left; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis voluptas possimus enim fuga nostrum as-sumenda cum sunt, iste quibusdam maxime, sequi, recusandae aut quisquam ab nisi nobis! Est voluptatem cum-que, n..

20.Media Query 1) 소개 media query는 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능입니다. 특히 최근의 트랜드인 반응형 디자인의 핵심 기술이라고 할 수 있습니다. media-query.html @media (min-width:601px) body background-color: blue; @media (max-width:600px) body background-color: green; @media (max-width:500px) body background-color: red; 500px 이하 : red 501~600px : green 601px 이상 : blue 실행화면 다음과 같이 넓이에 따라 배경색이 바뀌게 됩니다. 여기서 유의할 것은 캐스케이드 룰 때..

22.flex CSS의 flex는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구입니다. 지금까지 레이아웃과 관련된 다양한 속성들이 있었지만 그리 효과적이지 않았습니다. flex를 이용하면 레이아웃을 매우 효과적으로 표현할 수 있습니다. 아래 영상에서는 flex가 도입된 배경을 설명합니다. 이 기술을 현재 사용해도 좋을지는 아래 페이지를 참고하셔요. http://caniuse.com/#search=flex 1) flex의 기본 flex를 사용하기 위해서는 컨테이너 태그에 display:flex 속성을 부여해야 합니다. 또한 flex-direction을 이용해서 정렬방향을 바꿀 수 있습니다. 기본은 row입니다. 아래 영상은 flex의 기본적인 사용법을 알려드립니다. flex-basic1.html (doct..

18．포지션 엘리먼트의 위치를 지정하는 4가지 방법이 있습니다. - static : 기본값으로 위치정보를 임의로 설정해줄 수 없습니다.. - relative : 상대위치로, static 위치 사용 시 있던 위치를 기준으로 이동합니다. - absolute : 절대위치로, 문서 최좌측 상단을 기준으로 위치 정보를 설정하며 스크롤시 이동합니다. - fixed : 위치 고정으로 스크롤과 상관없이 항상 문서 최좌측 상단을 기준으로 좌표가 설정됩니다. 이 4가지 방법을 정확하게 이해하고 사용하는 것이 css를 자유자재로 이용하는데 중요합니다. 엘리먼트의 위치를 정하는 속성 position 속성 값 4가지 1. static(기본값) : 움직이지 않고 정적인 상태 2. relative : 부모 엘리먼트를 기준으로 상대..

20.마진 겹침 현상 마진겹침(margin-collapsing) 현상은 상하마진값이 어떤 상황에서 사라지는 현상을 의미합 니다. 이 현상은 초심자에게는 중요한 내용이 아니기 때문에 지나치시길 바랍니다. 하지만 이것을 이해하지 못하면 실무를 할 때 이해 할 수 없는 CSS의 동작으로 인해서 깊은 화남이 생길 수 있으니까 언젠가는 보시는게 좋겠습니다. 1) 마진 겹침 현상 1번째 다음과 같이 소스를 작성한 뒤 실행해보고 크롬 개발자 도구를 이용해서 margin 값을 살펴봅시다. margin-collapsing.html DOCTYPE html> h1 border:1px solid red; margin:100px; hello world hello world 실행화면 아래와 같이 실행 되었습니다. 하지만 자세히 ..

19. box-sizing box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성입니다. width와 height는 엘리먼트의 컨텐츠의 크기를 지정합니다. 따라서 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵습니다. box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정 할 수 있기 때문에 예측하기가 더 쉽습니다. 최근엔 모든 엘리먼트에 이 값을 지정하는 경우가 늘고 있습니다. box_sizing.html DOCTYPE html> div margin: 10px; width: 150px; #small border: 10px solid black; #large border: 30px solid black; Hello Hello 실행화..

18. 박스 모델 박스모델은 아래에서 보면 margin-top, margin-left, width, padding-left 등 왠만한 요소들이 모두 박스모델과 관련이 있다. box.html DOCTYPE html> p, a border:10px solid red; padding: 20px; margin: 40px; width: 120px; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, nostrum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, nostrum! 안녕하세요네이버입니다. 실행화면 a태그는 인라인 방식으로 width와 height 값이 적용되지..

14. 레이아웃 인라인 vs 블럭레벨 html 엘리먼트들은 크게 두 가지로 구분됩니다. 1) 화면 전체를 사용하는 태그 => block element 2) 화면의 일부를 차지하는 태그 => inline level element 이번 시간에는 인라인 엘리먼트와 블럭 레벨 엘리먼트의 차이점을 다룹니다. 그 과정에서display라는 중요한 속성에 대해서도 배우게 됩니다. block1.html DOCTYPE html> h1, aborder: 1px solid red; hello world 안녕하세요. 생활코딩입니다. 실행화면 아래에서 h1태그는 한 줄을 다 쓰고 a태그는 해당하는 컨텐츠만 쓰고 있습니다. 즉, h1태그는 블록 엘리먼트이고 a 태그는 인라인 레벨 엘리먼트입니다. 만약 style에서 display ..

13. bracket 도구사용법 지금부터 수업에서 bracket을 사용하려고 합니다. bracket는 adobe에서 만든 오픈소스 에디터로 html, css 코딩을 하는데 최적화된 좋은 도구입니다. 하지만 이 도구는 코딩을 편리하게 해줄뿐 우리 수업의 내용과는 직접적인 연관은 없기 때문에 보셔도 좋고 안보셔도 전혀 문제되지 않습니다. brackets.io 홈피에 가면 다음과 같이 툴을 다운 받을 수 있습니다. 이 프로그램의 킬러 콘텐츠는 빠른 편집입니다. body 태그에서 위와 같이 오른쪽 마우스 버튼을 누르고 빠른 편집을 누르면 아래와 같이 body 태그에 적용된 css를 바로수정 할 수 있습니다. 그 다음 오른쪽에 레고 블럭 같은 아이콘을 클릭한 뒤 아래와 같이emmet을 검색하고 설치해봅시다. 그 ..

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