프로그래밍/CSS 22

생활코딩 css 정리 - 22. 다단(multi column)

25. 다단(multi column) 다단(multi column)은 아래 신문처럼 화면을 분활해서 좀 더 읽기 쉽도록 만든 레이아웃을 의미합니다. CSS에서는 이러한 레이아웃을 쉽게 구현할 수 있는 기능을 제공합니다. 먼저 column-count 속성을 2로 주게되면? multi-column.html .column text-align: justify; column-count:2; /* column-width: 200px;*/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et eius nostrum adipisci in ad sed vel, illo quibus-dam quas perspiciatis aliquam magnam consectetu..

프로그래밍/CSS 2018.01.15

생활코딩 css 정리 - 21. Float

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

프로그래밍/CSS 2017.12.18

생활코딩 css 정리 - 20. media query

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 실행화면 다음과 같이 넓이에 따라 배경색이 바뀌게 됩니다. 여기서 유의할 것은 캐스케이드 룰 때..

프로그래밍/CSS 2017.12.10

생활코딩 css 정리 - 19. flex

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

프로그래밍/CSS 2017.12.02

생활코딩 css 정리 - 18.포지션(Position)

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

프로그래밍/CSS 2017.12.01

생활코딩 css 정리 - 20.마진 겹침 현상

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

프로그래밍/CSS 2017.11.20

생활코딩 css 정리 - 19. box-sizing

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 실행화..

프로그래밍/CSS 2017.11.19

생활코딩 css 정리 - 18. 박스 모델

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 값이 적용되지..

프로그래밍/CSS 2017.11.15

생활코딩 css 정리 - 14. 레이아웃 인라인 vs 블럭레벨

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

프로그래밍/CSS 2017.10.15

생활코딩 css 정리 - 13. bracket 도구사용법

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

프로그래밍/CSS 2017.10.14
반응형