본문 바로가기
반응형

분류 전체보기340

[Web] CSS(Cascade Style Sheet) - 2 CSS(Cascade Style Sheet) - 2 박스 모델 CSS로 태그들의 부피 위치 등을 지정해주는 것이다.위의 그림을 보면 쉽게 이해가 될 것이다.CONTENT를 기점으로 넓이와 높이, 내부공간에 대한 Padding, 아웃라인인 Border그리고 다른 컨텐츠 사이의 간격인 Margin을 통해 content를 배치한다.CSS는 이러한 위치, 부피에 박스 모델을 적용한다. 우선 3개의 리스트를 작성했다.리스트마다 효과를 다르게 주기 위하여 내부에 ID를 부여한다.CSS에서 아이디는 #ID로 구분할 수 있다.먼저 2번째 리스트에 border라인과 padding, margin이 적용되었다.여기서 내부공간과 다른 태그와의 간격이 어떻게 변경되었는지 확인해보자. 구글의 경우 웹페이지에서 우측클릭 -> 검사.. 2017. 4. 18.
[Web] CSS(Cascade Style Sheet) - 1 CSS(Cascade Style Sheet) - 1 HTML을 설명하는데 있어서 뗄레야 뗄수 없는 관계 바로 CSS이다CSS는 HTML과 다른 독립적 언어임에도 불구하고, 개별적으로 사용되기 어렵다.이유는 CSS가 HTML을 디자인하기 위해 제작되었기 때문이다.초기에는 HTML에도 디자인을 담당하는 태그가 있었으나 현재는 CSS에 흡수 되었다.쉽게 말해 웹페이지에서 HTML은 정보를, CSS는 디자인을 담당한다고 할 수 있다. 이러한 CSS를 HTML문 내에서 구분할수 있게 만드는 것은 이 나올 때 까지이다. 내부의 문법은 다음과 같다.먼저 선택자는 누구에게 스타일을 적용할 것 인가를 나타낸다.서술은 어떤효과를 적용할것인가를 나타낸다.마지막으로 이를 통틀어 속성이라고 부른다. 간단한 예제를 통해 CSS를.. 2017. 4. 18.
[Web] ATOM 에디터 ATOM 에디터 HTML은 메모장에서 돌아갈 정도로 가볍지만, 이 경우 가독성과 생산성이 그리 좋지 않다따라서 ATOM이나 sublime text등과 같은 여러 툴들이 생겨나게 되었다.이러한 텍스트 에디터의 장점으로는 코드 하이라이터로 가독성이 좋고,자동완성 기능으로 생산성이 비약적으로 향상된다는 것이 있다.또한, 플러그인등의 설치로 확장성도 높아진다. 오늘은 이러한 텍스트 에디터 중 ATOM에 대한 설치와 사용법에 대해 알아보자 ATOM은 git재단에서 지원하는 무료 에디터 이다.공식 홈페이지는 다음과 같다.https://atom.io/ 홈페이지에 접속하여 ATOM을 다운받는다윈도우나 맥 둘다 설치과정이 그리 어렵지 않으니, 방법은 생략한다.설치가 완료 되었으면 ATOM을 실행시킨다. 1. 폴더 지정 .. 2017. 4. 18.
[Web] HTML(Hypertext Mark-up Language) HTML(Hypertext Mark-up Language) 1. HTML이란? HTML을 설명하기 앞서 먼저 우리가 사용하는 웹페이지의 동작과정에 대해 알아보도록 하자우선, 웹은 크게 클라이언트와 서버의 두파트로 나뉘어진다. 클라이언트는 우리가 흔히 사용하는 PC이다. 이 PC에서 웹 서버로 요청을 보내게 되는 것이다. 서버에서는 이러한 요청을 받아 페이지를 찾고, 응답하게 된다.이런 일련의 과정을 통하여 우리가 보는 웹페이지가 브라우저에 뜨게 되는것이다. HTML은 Hypertext Mark-up Language의 약자이다.이것이 뜻하는 바가 무엇인지 알아보면 HTML에 대한 이해가 더 쉬울것이다.. - Hypertext : 쉽게 말해 문서 사이의 링크라고 할수 있다.우리가 네이버 등에서 텍스트를 클릭.. 2017. 4. 18.
반응형

티스토리툴바