IT업계 종사자의 블로그

[Project H4C] 18. CSS 실습 1 본격적으로 CSS 실습을 시작해보자. UI 모델링으로 그려본 사이트 디자인을 CSS를 활용하여 만들어보자. 우선 빨간 박스부터 시작하다. 제일 위 제목의 JavaScript 는 JavaScript 로 표현할 수 있다. 그리고 CSS로 디자인 해야되는 요소는 하단 테두리, 적절한 여백을 주어서 UI모델링과 비슷한 디자인으로 완성시켜보자 우선 JavaScript는 header 부분에 해당한다. style을 추가하여 header 밑에 아래 테두리 추가하기 content와 border 사이의 간격을 padding으로 조절해보자 padding:20px; 추가하기 이제 왼쪽 메뉴바에 있는 nav 부분을 만들어보자. 와 , 로 html은 구성된다. 디자인적 요소의 CS..

[Project H4C] 17. CSS float 우선 새 파일 ex_css_3.html 을 만들고 긴 글 아무거나 body안에 붙여넣기 한다. body 안에 추가하기 이제 저 이미지에 테두리를 적용해 보자. 안에 이라고 추가한다. 글들을 이미지 오른쪽의 여백으로 끌어올리고 싶다면 img태그에 float:left; 추가한다. float:right;로 바꿔주면 이미지가 오른쪽으로 옮겨지게 된다.

[Project H4C] 16. CSS 박스 모델 위 태그를 htdocs > css > ex_css_2.html 경로에 저장하고 시작해보자. head에 style 태그를 넣고 태그에 빨간색 테두리 넣기 css에만 빨간색 테두리 넣어보자. css를 사용하고 head에 li를 #selected로 바꿔주면 된다. css의 빨간 테두리와 css글자 사이의 간격을 수정하고 싶다면 padding:30px 을 추가한다. javascript글자에 파란색 테두리를 적용하고 싶다면 id="extra"로 정의 후 border:blue 1px solid;를 추가한다. css와 javascript 박스 사이의 간격을 띄우고 싶다면 margin:50px; 추가한다. -margin: 태그와 태그 사이의 간격 박스모델 정리 bord..

[Project H4C] 15. CSS이론 심화 학습 (14. CSS 기본 문법에서 이어짐) h1에 폰트사이즈 추가하기 CSS에서 h1에 적용된 이 두 요소를 "속성"이라고 한다. 속성과 속성을 구분하는 기호는 세미콜론(;)이다. 이렇게 줄 바꿔서 작성 가능하다. ,h2 를 추가하면 h2도 똑같이 적용된다. 이렇게 하면 h2에 밑줄이 표시된다 h1에 header 추가하고 header밑에 있는 h1 코드에만 스타일을 적용하고 싶다면 header h1 { }을 쓰면 된다.

[Project H4C] 14. CSS이론 기본 문법 웹 사이트를 아름답게 표현하는 언어. CSS. CSS는 HTML과는 완전히 다른 독립된 언어이다. 하지만 CSS는 HTML을 떠나서 살 수 없다. 왜냐하면 CSS가 고안된 기본적인 목표가 HTML을 디자인하기 위해서 고안된 것이기 때문이다. 두 언어의 공존을 위해 태그가 나오면 '아, 이제 CSS 문법 끝났으니깐 다시 HTML 문법을 따라야겠네..' 라고 생각하면 된다. 오늘의 문법 선택자: 누구에게 적용시킬 것인가. 서술: 어떤 효과를 선택자에게 줄 것인가.

개발도구에 대해 생각해보자. 버전 관리 시스템이란? 코드들이 변화했던 히스토리를 기록하는 관리 시스템 (문제가 어디에서 발생했는지, 누구에게 발생했는지 등을 파악할 수 있다) 작업한 결과물을 서버에 저장해주기도 한다. (백업용) 생활코딩피셜: 버전관리 시스템은 꼭 익혀두어야 한다 버전관리 시스템에는 SVN, Mecurial, GIT 등이 있는데 GIT 을 많이 사용한다. 생활코딩 GIT강의 http://opentutorials.org/course/1492 GIT-SourceTree (새수업으로 대체) - 생활코딩 이 수업은 GITn 시리즈로 완전히 대체 되었습니다. GITn은 보다 많은 내용을 작은 단위로 쪼개서 선택적으로 공부하실 수 있도록 제작된 수업입니다. 아래 주소를 통해서 GITn 을 접할 수 ..

[Project H4C] 12. 사이트 완성 index.html 대문 페이지라고 약속되어 있다. => 해당 홈페이지의 정보를 담고 있는 파일이라는 암묵적인 약속..! e.g.) 위 예시 페이지에서 큰 메뉴인 JavaScript, 그리고 각 리스트에 있는 1번 JavaScript란?, 2번 변수와 상수, 3번 연산자에 링크를 추가한다. - 큰 메뉴인 JavaScript에 링크 추가하기 JavaScript (이 때 어떤 페이지에 들어가서도 대메뉴 JavaScript를 클릭하면 첫 화면으로 들어올 수 있게 위 태그를 모든 html 문서에 추가하여 저장한다.) - 리스트 1번 JavaScript란? 에 링크 추가하기 JavaScript란? (이 때 1번 "JavaScript란?" 메뉴를 클릭했을 때 뜰 내용이 ..

[Project H4C] 11. 의미론적인 웹(Semantic Web) HTML에서 정보의 의미를 더 잘 드러내는 태그들을 살펴보자. navigation을 뜻하는 가 추가 됨. 여기서 는 어떤 기능이나 의미가 있는 것은 아니지만, 라는 약속된 태그를 통해서 안에 있는 내용들이 웹사이트를 탐색하는데 사용되는 정보인 것을 표시한다.  마찬가지로 를 사용하면 안의 내용들이 간판과 같은 존재라는 것을 표시할 수 있다. 또다른 예로 로 감싸게 되면 안의 부분이 본문이라는 의미를 내포하게 된다. 이처럼 특정 태그들은 사용해서 HTML 정보의 의미를 더 잘 전달할 수 있다.

[Project H4C] 10. 모델링을 HTML로 만들기 웹사이트를 만들려면 구상한 사이트를 정보의 형태(HTML)로 바꿔줘야 한다. 위 UI 모델링을 함께 HTML로 만들어 보자. JavaScript JavaScrip란? 변수와 상수 연산자 변수와 상수 변수란 변하는 값 x=10일 때 왼쪽항…

[Project H4C] 9. HTML 정리 HTML이 어떻게 변화하고 있는지 살펴보자. 만든이: 팀 버너스리 관리하는 국제기구: w3c http://dev.w3.org/html5/html-author/ HTML5 Reference The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whos dev.w3.org ..