[3] HTML로 작성한 페이지에 Style을 적용해보자
- 2021.08.26 -
- 2023.05.05 -
기존 개발블로그에서 작성했었던 내용물들을 통합하고자 옮겨 적었다
지난 학습한걸로 우리는 CSS를 선언하는 방법. 그리고 내외부 스타일 시트에 대해 배우고
폰트와 관련댄 스타일들에 대해 학습했다.
오늘은 이걸 이용해서 기존에 html로 작성해놓은 페이지에 스타일을 적용하려고 한다.
작성해두었듯 스타일이 적용되지않아 심심해 보인다.
하이퍼링크가 적용된 경복궁은 밑줄이 쳐져있다.
나는 여기에서 지난번에 학습한 내용들 중 외부스타일 시트를 이용해 html로 작성한 페이지에 스타일을 적용해보려고 한다.
2021.08.25 - [WEB/Web 공통] - [CSS] (4) 개념과 선언하기
외부 스타일 시트에 대한 선언방법에 관한글은 눌러보면 바로 갈 수 있다.
기존에 작성했던 코드중 외부 스타일 시트를 적용하기위해 head 태그 안에서 title태그 밑에다 link태그를 작성해준다.
<link rel="stylesheet" type="text/css" href="">는 자동완성으로도 나오지만 반드시 외워둘 필요가 있다.
나는 저기 herf="" 항목에 따로 만든 css파일의 경로를 입력했다.
나는 기존에 html폴더가 있는 경로에서 style 폴더를 따로 만들어 그 안에 travel.css를 만들었다.
그래서 href=""에 그 파일이 있는 경로를 지정해주었다.
이제 부터 travel.css파일에 작성하여 travel.html을 꾸며줄 수 있다
사진2를 보면 가장 마지막 줄에 <h1>한국여행일정</h1>을 볼 수 있는데 기존의 두꺼운 글씨체를 조금 조정하는 코드를 작성해 본다.
font-size, font-weight, color, line-height를 사용했고 각각
글씨체 크기는 18px, 글씨체 굵기, 글씨체 색상을 정의한다.
글씨 색상을 계산하는 방법은 나중에 추가로 더 공부해서 올려봐야겠다.
주석을 통해 메모해두었지만 min이 100, max가 900이다. 보통 100단위로 증감하고 50단위로는 잘 사용하지 않는다.
아무튼 위 코드를 입력하고 보니 아래와 같이 변경되었다.
글씨체는 굵어졌지만 폰트사이즈는 줄었다.
이런식으로 내가 효과를 넣고 싶은 글씨에 태그를 선언하고 필요한만큼 변경했다.
주석을 달 수 있기에 원하는대로 내가 혹은 나중에 헷갈릴 수 있을 만한 곳에 메모를 함으로써 다시한번 이해할 수 있었다.
결과
마 치 며
CSS는 신기했다.
오히려 다른 언어들과는 다르게 내가 적용하고 싶은 태그만 선언하고 내가 원하는대로 선언한 내용을 만들 수 있어서 좋았던것 같다.
또 /**/을 이용해 주석을 달 수 있어서 다음에 헷갈릴만한 곳에서 내가 다시 공부를 할 수 있는게 좋았다.
img는 사이즈 가로세로중 한곳만 정의를 한다면 정의를 한 쪽을 기준으로 자동으로 비율이 조정되는것도 신기했다.
일일이 다 조정해야하는 줄 알았는데 심지어 auto라는 것도 있으니 간편하게 조작을 할 수 있었다.
p.s. 근데 html에는 주석기능이 없나..
'Develope > CSS' 카테고리의 다른 글
| [4] CSS셀렉터의 종류 및 설명(조합,상태,특성 선택자) (0) | 2023.05.05 |
|---|---|
| [2] 글자와 관련된 스타일 (0) | 2023.05.05 |
| [1] 개념과 선언하기 (0) | 2023.05.05 |