프로그래밍 536

생활코딩 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

생활코딩 css 정리 - 12. 캐스캐이딩

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

프로그래밍/CSS 2017.10.13

생활코딩 css 정리 - 11. 웹폰트

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

프로그래밍/CSS 2017.10.13

안드로이드 - 프로젝트2. 액티비티 화면 전환

예제 출처 : https://www.inflearn.com/course 예제 소스 : https://github.com/GaKaRi/gakari_android/tree/master/Proj_Manager_v2 프로젝트1. 애플리케이션 화면 디자인 이번에는 인텐트를 이용해서 액티비티간 화면 전환을 합니다. RegisterActivity.java package com.example.kch.proj_manager_v2; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.widget.Button; import android.widget.EditText; public class RegisterActivi..

반응형