웹 사이트의 정보와 디자인 9 - CSS 주요 속성

이제 1주차의 마지막 학습이 될 것 같다. 이 내용은 강의가 조금 긴데 책을 먼저 학습할지 고민이 되었다.  어제 온라인 학습을 먼저 진행하다  책으로 학습을 먼저 하는 것이 좋을 것 같아 이후에 진행해본다. 여기서는 CSS의 기본 속성에 대해서 학습하게 된다.

---

 

 

 

이론 9 - CSS 주요 속성

 

 

특정 영역의 공간을 설정할 때 사용한다. 고정값이 px이고 가변값을 %로 표현한다.

 

 

 

 

 

여러 개의 폰트를 쓰는 것이 좋다. 굵기는 100 단위로 올라가며 사용한다.

 

 

 

 

 

 

작성 순서는 상관 없다.

 

 

 

 

 

 

---

 

 

 

실습 10 - CSS 주요 속성 1 

 

 

---

 

 

 

기본 내용 실습해보기

 

배경과 글자색 변경하기

 

 

 

체크박스를 해제하면 해체된 결과값을 화면으로 확인할 수 있다. 하지만 이는 브라우저 상에서만 적용된다.

---

 

 

배경색 크기 조절

전체 브라우저 크기로 확대하고 싶을 때는 px에서 %로 변경하면 된다.  %는 부모를 기준으로 설정된다. 이 스타일은 body 태그 안에 소속되어 있기 때문이다.

 

 

---

 

텍스트 스타일 변경하기

 

 

---

 

 

 

문제 풀어보기

 

 

 

문제를 잘 풀었다. 이제 다음 문제도 풀어보기로 하자!

---

 

 

 

 

실습 11 - CSS 주요 속성 2

 

 

---

 

 

기본 학습 실습해보기

 

테두리 만들기

 

 

 

 

배경 이미지 가져오기

 

 

 

배경 속성은 공간을 모두 채우려는 속성이 있기에 이를 제어하기 위해서 반복을 제거하거나 수정해준다.

---

 

 

본 문제 풀어보기

 

 

 

 

이렇게 엘리스 로고가 중앙에 잘 출력되었다. 이 코드를 생략하여 한 줄로 줄일 수도 있다. 코드를 줄이는 이유는 용량을 감소시켜 사이트에 접속하는 사용자가 더 순조롭게 웹사이트에 접속하기 위함이다. 실무에서는 한 줄로 작성하는 경우가 많다고 한다.

 

 

정말 많은 것들을 실습을 통해서 배울 수 있었다. 직접 코드를 쳐보며 실습해보니 더 기억에 남고 좋았다.

---

 

 

 

퀴즈 9 - CSS 주요 속성

 

 

 

퀴즈 문제도 잘 풀었다~

 

---

 

 

 

학습을 마치고

여기까지 해서 CSS 속성에 대한 학습을 모두 마쳤다. 분량이 좀 많아서 단원 정리는 다음 포스트에서 이어서 하려고 한다. 원래 오늘 아침까지 여기까지 다 하려고 했는데 오후가 훌쩍 지나서야 끝마쳐간다. 

아직도 공부해야 할 것들이 좀더 남아있다.