CSS로 웹 꾸미기

이전에 news.html을 생성하여 웹 서버로 전송한 적이 있습니다.

https://integin1212.tistory.com/41

HTML Web 만들기

 

CSS코드로 가운데 정렬 및 이미지의 색상, 그림자 등을 추가하면 가독성이 더 높아질 것으로 기대됩니다. 따라서 단순 HTML문서에 CSS 코드를 추가하여 가독성을 높이도록 하겠습니다. 

CSS 코드를 적용하는 방법에는 인라인 스타일, 내부 스타일, 외부 스타일로 총 3가지가 있습니다. 3가지 중에서 외부 스타일을 이용하여 CSS 코드를 적용하겠습니다.

 

이전의 코드에서 내용을 보기 좋게 적절히 문단 태그를 활용하겠습니다. CSS 코드로 추가될 내용은 다음과 같습니다.

1. 제목의 폰트를 시각적으로 돋부이게 '속초바다 돋움체'로 변경해보겠습니다. 또 그림자를 넣어서 강조해보겠습니다. 마지막으로 굳건성을 위해 가운데 정렬까지 적용해보겠습니다.

2. news 속에 3개의 이미지가 존재합니다. 이 이미지들이 모두 왼쪽으로 치우쳐 있어 가운데 정렬을 해보도록 하겠습니다.

3. 마지막으로 출처의 하이퍼링크를 마우스로 클릭하기 전 단어 위에 올린 경우와 마우스로 클릭할 때를 css로 기능을 추가해보겠습니다. 마우스로 클릭하기 전에 '출처' 단어에 밑줄과 함께 민트색 색상을 띄도록 하고 마우스로 클릭할 때는 '출처' 단어에 여전히 밑줄을 치게 하고 색상은 진한오렌지색으로 바꾸어보겠습니다.

https://noonnu.cc/font_page/1339

눈누

폰트는 위의 링크에서 확인 가능합니다.

 

css 코드, html 코드 순으로 나열하겠습니다.

css 코드

 

html 코드

 

마우스를 출처 단어 위에 올린 경우

마우스로 클릭한 경우

위의 웹 주소는 아래와 같습니다.

http://integin1212.dothome.co.kr/news.html

Economy News..Regarding High Interest

 

 

css 코드를 추가로 적용하였더니 뉴스를 읽기 더 수월해졌습니다.