포지션을 이용한 레이아웃 때때로 우리는 플로트로 할 수 있는 것보다 더 정밀하게 레이아웃을 짜야 할 때가 있다. 이느 포지셔닝을 이용하면 가능하다. 말하자면 divB를 원래 위치를 기준으로 일정 거리로 이동시키려면 아래 CSS규칙을 추가하면 된다 position: relative; top: 50px; left: 100px; 위 코드는 divB를 아래로 50픽셀, 오른쪽으로 100픽셀 이동시킨다. 위 코드에 대한 결과값 아래로 50픽셀 오른쪽으로 100픽셀 이동시킨 그림이다 top과 left는 기준점이 된다. 그렇다면 top과 left를 음수 값(즉 -50px)으로 코딩을 수정하면 어떻게 될까? 반대쪽인 왼쪽과 위쪽으로 이동하게 된다. 즉 position; relative를 이용하면 원래 위치와 비교해서 ..

이제 CSS를 이용하여 레이아웃을 짜보자 float: right; 지금까지는 모든 구성요소가 순서대로 앞선 구성요소의 아래에 위치했지만 플로트를 이용하여 이를 바꿀 수 있다. 박스안의 css규칙을 .divA 규칙에 추가한다. 위코딩에 대한 결과값 순서대로라면 빨간 박스가 왼쪽에 먼저 나타나야 하지만 플로트를 오른쪽으로 지정하니 위치가 오른쪽으로 변했다.

크기변경하기 div의 폭과 너비를 바꾸기 위해 width와 height 를 사용한다. 페이지의 CSS코드를 아래 내용으로 바꿔라. .divA { background-color: red; width: 200px; height: 200px; } .divB { background-color: blue; width: 50%; } divA 클래스는 배경색을 빨간색, 너비는 200픽셀, 높이도 200픽셀로 출력하라는 의미이고 클래스 divB는 배경을 파란색, 너비는 페이지 너비의 50%를 차지하게 하라는 의미이다 위의 코드를 적용한 코딩의 결과값 위 코딩의 결과값입니다

컬러코드 지금까지는 컬러를 지정할때 이름을 사용했다. 하지만 실제로 적용할 때는 보다 세부적으로 색을 골라야 할 경우가 있다. 이제 컬러 코드를 사용해 보자. 컬러에 대한 HTML엔티티(특수문자나 기호의 고유코드를 모아 놓은 것)와 같다. 각 코드는 특정색을 나타낸다. 아래 규칙을 시험해 보자. .divA { background-color: #765481; } .divB ( background-color: #F7E1A2; } 해시기호 #은 브라우저에게 색을 지정하기 위해 숫자를 사용한다고 알려준다. 이후 원하는 색을 지정하기 위한 알파벳과 숫자로 이루어진 6자리 코드가 이어진다. 이 경우에는 자주색과 오렌지색이다. 모든 코드를 암기할 필요는 없다. http://html-color-codes.info/같은..

DIV는 분할의 줄임말이다. (division) 이를 이용해 코드를 여러 부분으로 나눌 수 있다. 각 부분으로 나누어 스타일을 지정할 수 있다. div로 실제 할 수 있는 일이 별로 없을 것 같아 보이지만 실제 스타일을 적용할 때 많은 도움이 된다. 문단에 컬러를 넣는 것부터 해보자. 배경컬러 스타일 태그에서 모든 CSS코드를 삭제하고 아래 코드로 대체한다. div ( background-color: grey; ) 그리고 부분은 아래 사진처럼 수정한다. 다시 말씀드리지만 코딩을 보고 대략적인 알고리즘 즉 코딩의 의미와 흐름을 파악할 줄 알아야 합니다. html은 코딩의 가장 기초부분입니다. 익숙해질때까지 반복해서 보시고 연습해 보세요. 전체코딩모습 보기 위 코딩 결과물 보기 ※ 코딩은 반드시 직접 해보셔..

아이디란 무엇인가 아이디는 클래스와 유사하다. 하지만 이는 웹페이지의 한가지 구성요소에만 적용된다. 헤더, 푸터, 제목처럼 한가지 구성요소에만 나타난다. 클래스와 정확히 똑같은 방법으로 추가할 수 있다. 이제 '12345' 문단에 'pink' 아이디를 삽입하자. 12345 이제 스타일 부분에 아래 CSS를 넣자. #pink { color:pink; } 주의 : 여기서는 해시 기호 #을 사용한다. 이는 아이디를 나타낸다. 그래서 CSS에서 구두점 .은 클래스 , #은 아이디를 나타내는 기호이다. 여기서도 12345 문단에 'pink' 규칙과 'p'규칙이 중복 적용된다. 하지만 클래스와 마찬가지로 아이디규칙이 우선한다. 항상 구성요소와 관련된 다른 규칙에 우선하여 아이디와 클래스 내용이 적용된다.

일부 문단은 파란색으로 다른 문단은 빨간색으로 지정하려면 어떻게 할 것인가? 유형으로만 지정하는 것보다는 좀 더 세부적으로 구성요소를 선택할 수 있는 방법이 필요하다. 클래스 구성요소에 클래스 어트리뷰트를 추가하는 것은 간단하다. 첫번째 문단의 코드를 다음과 같이 바꿔라 I love HTML. 이제 우리는 해당 문단에 'red'클래스를 적용했다. 이제 아래 코드를 웹페이지의 스타일 부분에 추가하라. .red { color: red; } 주의 : 'red'앞의 구두점(.)은 브라우저에게 우리가 클래스를 찾고 있다는 것을 말해준다. 구두점은 CSS의 클래스를 이르는 약칭이다. 12345 abc 왼편코드의 결과값 코딩이 해석이 되시나요? red 라는 클래스를 style 안에 만들어 놓고 문장에서 태그를 이용해..

내부 CSS란 무엇인가 내부 CSS는 HTML문서의 시작 부분에 모든 CSS를 모아 놓은 경우를 말한다. 부분을 잘 살펴보면 새로운 구성요소인 이 보인다. css를 담고 있다. 스타일부분의 내용은 다음과 같다 p { color: blue; } 기본적으로 '모든 구성요소를 찾고 텍스트 컬러를 파란색으로 바꿔라'는 내용이다. 중괄호 { 와 } 사이에 p 구성요소에 적용하고 싶은 모든 규칙을 담는다 그리고 세미콜론으로 종결한다. 이제 전체 문단을 파란색에서 녹색으로 바꾸고 싶다면 css만 변경하면 된다. HTML 근처에도 갈 필요도 없다. 내부CSS로 텍스트색 바꾸기 css의 color가 blue 였는데 green으로 바뀌면 텍스트 전체의 색깔이 green으로 바뀌는 것을 볼 수 있다. 이렇게 CSS의 정의를..

HTML이 웹페이지에 들어 가는 여러형태의 구성요소를 만드는 것이라면 CSS는 구성요소의 스타일을 정하는 방법이다. CSS가 무엇이고 어떻게 사용하는지 클래스와 아이디를 사용하여 구성요소를 어떻게 조회하는지 웹페이지를 재구성하기 위해 DIV를 사용하는 법, 테두리와 포지셔닝, 컬러와 폰트, 텍스트와 링크 포맷을 조정하기 위해 CSS를 사용하는 법을 배운다. CSS란 무엇인가 HTML로 웹페이지에 구성요소를 추가할 수는 있지만 이들의 위치, 색깔, 폰트 또는 스타일을 조절하기는 쉽지 않다. 스타일 정보를 페이지 내용과 별도로 저장하여 내용에 영향을 주지 않고 쉽게 스타일을 조정하자는 것이 주된 생각이었다. 실제로 HTML은 전혀 손대지 않고 CSS만 변경하여 웹페이지의 모습과 레이아웃을 바꿀 수 있다. 왜..

추천사이트 https://codepen.io/pen/?editors=1000 지금 블로깅하고 있는 책의 유명한 저자 '롭 퍼시발' 만든 홈페이지입니다. 구글아이디로 가입하고 쉽게 html coding을 실행하고 연습해 볼 수 있습니다. 그리고 이를 @techedrob 로 트윗하면 저자의 피드백도 받을 수 있습니다. 내 코딩소스 올리는 방법 이제까지 배운 코딩연습으로 간단한 내 홈페이지를 만든후 코드를 붙여넣기 하세요. 화면의 아래쪽에서 자신의 웹페이지를 볼수 있어야 합니다. 이를 저장하면 url주소를 생성해 소셜 미디어에서 공유할 수 있습니다. 이것을 @techedrob으로 트윗하면 저자의 피드백을 받아 볼 수 있습니다. 이 코드펜 홈페이지는 월 8달러 서비스이지만 여기서 소개한 것은 이메일만 인증하고 ..