생활코딩 7

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

생활코딩 Javascript 정리 - 자바스크립트 개념 및 HTML에서 자바스크립트 로드하기

1. 웹브라우저와 Javascript Javascript 여기서 onclick 부분에서 클릭이 되면 클래스이름을 dark로 하라는 의미이다. 클릭 후 결과 2. HTML에서 JAVA Script 로드하기 1) inline 방법 inline 방식은 태그에 직접 자바스크립트를 기술하는 방식이다. 장점은 태그에 연관된 스크립트가 분명하게 드러난다는 점이다. 하지만 정보와 제어가 섞여 있기 때문에 정보로서의 가치가 떨어진다. ex_1.html onclick은 HTML 문법 alert는 자바스크립트 문법임 2) script 태그 방법 ex_2.html 3) 외부 파일로 분리 js를 별도의 파일로 분리할 수도 있다. 장점은 보다 엄격하게 정보와 제어를 분리할 수 있다. 하나의 js 파일을 여러 웹페이지에서 로드함으..

생활코딩 Git 정리 – 한개만 커밋해보기

4. 한개만 커밋해보기아래에서 readme.txt앞쪽 노란색 ...은 이미 커밋이 된 파일중에 수정된 파일을 의미하고?은 아직 커밋이 되지 않은 파일을 의미한다. 파일을 클릭하면 위와 같이 수정된 부분이 출력된다. 만약 다음과 같이 2개만 선택 후 커밋을 하면 다음과 같이 된다. 그러면 다음과 같이 나머지는 커밋되지 않은 상태로 바뀐다. 여기서 Unstaged fileds에서 파일을 선택하는 것을 working copy라고 하고 Unstaged files에서 staged files로 옮기는 것을 add라고 한다. 그리고 다음의 공간을 repository(저장소)라고 부른다. readme.txt를 add한 상태에서 수정을 하게되면 다음과 같이 readme.txt가 두 곳에 존재한다.이 상태에서 커밋하면 s..

프로그래밍/Git 2017.02.07

생활코딩 Git 정리 – 버전 만들기(commit)

3. 버전 만들기(commit) stage all버튼을 눌러서 수정된 작업을 위로 올리고 commit을 누른다 tool에서 options로 가면 다음과 같은 화면이 있다. Full name과 이메일 주소가 커밋하는 자신의 이름과 이메일주소이다. 다음과 같이 뜨는것이 바로 commit 작업이다. 만약 소스를 수정하는 작업을 했다면 다음과 같이 uncommited changes라는 내용이 뜬다. 다음과 같이 수정된 파일이 나온다. 그럼 다시 commit을 해보자. 다음 버튼을 눌러서 staged files로 올리고 File Status 탭을 누르고 글을 써준 뒤 commit 버튼을 눌러보자 그럼 다음과 같이 또하나의 버전이 생긴 것을 볼 수 있다. 또 한번 반복하면 다음과 같이 3개가 된다. 출처 : htt..

프로그래밍/Git 2017.02.07
반응형