$$config title: HTML문서에 CSS(디자인) 첨가하기 keywords: - Semantic 태그 HTML - CSS $$ # CSS(디자인) 적용 *HTML5 시맨틱 태그가 적용된 웹 표준 문서 (after_semantic.html)에 CSS 적용하기* ## 고양이 홈페이지 ### layout.css ~~~html body { font-family: "맑은 고딕", "고딕", "굴림"; } header { width: 80%; margin-right: auto; margin-left: auto; background-color: #069; padding: 10px; overflow: hidden; } header h1 { width: 40%; float: left; color: #ffffff; } header nav { width: 60%; float: right; } nav ul { list-style-type: none; } nav ul li { display: inline; float: left; margin: 15px; } nav ul li a { color: white; text-decoration: none; } p { font-size: 15px; line-height: 20px; } h1 { font-size: 2em; } section { width: 80%; margin-right: auto; margin-left: auto; border: 5pc solid #333; padding: 5px; overflow: hidden; } section article { width: 30%; float: left; margin: 5px; padding: 5px; border: 1px dotted #333; } aside { clear: both; height: auto; padding: 10px; background-color: #99cc33; } footer { clear: both; width: 80%; margin-right: auto; margin-left: auto; margin-top: 0; padding: 10px; background-color: #333; color: white; text-align: center; } ~~~ --- ### after_semantic.html + layout.css ~~~html 고양이 돌보기 (시맨틱 태그 적용 후)

고양이 종류

장모종 고양이

페르시안

하얗고 털이 긴 장모종 고양이

노르웨이 숲 고양이

털이 긴 장모종 고양이

단모종 고양이

러시안 블루

회색빛깔의 단모종 고양이

~~~ --- **고양이 홈페이지** ![img](https://github.com/miruy/vsc/blob/master/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202022-01-07%20%EC%98%A4%ED%9B%84%208.36.41.png?raw=true) --- ## 제주도 요안도라 홈페이지 ~~~html 요안도라

Joandora

가장 제주다운 수산리집

이용 안내

■ 요안도라 올레로 들어서면

입실은 오후 3시, 퇴실은 오전 11시 입니다.

이곳은 관광지가 아닌, 귤농사를 짓는 중산간 마을입니다.

바베큐, 야외식사 등 바깥채, 외부 앞뜰에서의 활동은 밤 11시 이전까지 마쳐 주셔야 합니다.
바깥채 내부의 소등은 자유롭게 하시되,
자정 이후로 음주나 소란스러운 대화를 자제해 주시면 고맙겠습니다.

우도, 성산일출봉, 섭지코지, 김영갑 갤러리, 용눈이 오름 등
주변 관광지와 한라산 동쪽 등산로로 오가실 경우
요안도라에서 콜택시를 이용하실 수 있습니다.

요안도라는, 농사하시는 마을 삼촌들의 생활 환경과 제주의 자연 환경을 존중합니다.

~~~ --- **제주도 요안도라 홈페이지** ![img](https://github.com/miruy/vsc/blob/master/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202022-01-07%20%EC%98%A4%ED%9B%84%209.43.33.png?raw=true)