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 안에 만들어 놓고 문장에서 태그를 이용해..