[웹 개발 기초] 웹 개발 3일차 (유용한 Extension, 다양한 색상 지정 방법, 앵커 태그 <a>와 href, 글로
https://dash758.tistory.com/7, , CSS로 폰트 변경, 글자 중앙 정렬, 색상 바꾸" data-og-description="지난번에는 메모장을 이용하여 소스 코드를 작성한 후 웹 사이트를 만들어 보았습니다. 이제부터는 편한 작
dash758.tistory.com
지난 시간에는 Visual Studio Code의 유용한 확장 프로그램을 통하여 가독성을 높이고, 앵커 태그 <a>와 글로벌 CCSS 스타일 지정, HTML의 전체 뼈대와 주석 처리 방법을 알아보았습니다.
이번 시간에는 하이퍼링크의 스타일을 바꿔주는 :hover, 외부 CSS파일 참조하기, ID 선택자, 폰트 굵기, 크기, 모양 변경, 꺾쇠 기호 출력에 대하여 알아보겠습니다.
하이퍼링크 스타일 바꾸기
만들었던 웹 페이지를 보았을 때 하이퍼링크에 밑줄이 그어져있고, 색상도 마음에 들지 않았습니다. 이를 CSS를 이용하여 스타일을 바꾸어 보겠습니다.
a {
color: #12782f;
text-decoration: none;
}
색상을 진한 녹색으로 바꾸어주고, text-decoration: none을 통해 밑줄을 제거하였습니다.
이를 지난시간에 만들었던 <head>태그 안 <style> 태그에 넣으시면 됩니다. 앞으로 앵커 태그를 사용하는 모든 내용에서 위와 같은 스타일 정의에 따를 것입니다.
보통 나무위키 들어가서 문서를 읽어보면 파란 글씨로 하이퍼링크 되어있는 부분에다가 커서를 올려두면 그 부분에 밑줄이 그어지는 것을 확인할 수 있습니다. 이 기능 역시 구현해보겠습니다.
이 기능은 가상 선택자에 의하여 구현할 수 있습니다. 가상 선택자란 다른 상태일 때의 요소를 선택할 수 있다는 의미인데, 마우스 커서가 올라간 것과 같은 상태일 때 특정한 스타일을 지정할 수 있습니다.
a:hover {
text-decoration: underline;
}
위에 만들었던 코드가 아닌 새로운 스타일을 지정하는데, 마찬가지로 모든 <a> 태그에 위와 같은 사항이 적용될 것입니다. 그러나 a태그 옆에 :hover라는 키워드가 있습니다. :hover 키워드는 마우스 커서가 올라갔을 때 동작합니다.
text-decoration: underline을 적용해 줌으로써 앞으로 하이퍼링크에 마우스 커서를 댔을 때 밑줄이 생기도록 바꾸었습니다.
외부 CSS파일 참조하기
이렇게 코드를 작성하다보니 CSS 스타일을 지정한 코드가 너무 길어졌습니다. 많은 코드들이 index.html이라는 파일 하나에 전부 들어가 있으므로 가독성 면에서 좋지도 않습니다. 그렇기 때문에 CSS 코드만 따로 빼서 같은 폴더 안에 있는 외부 파일로 새로 하나 만든 후 저장합니다.
#styles.css
h1 {
font-family: sans-serif;
text-align: center;
color: red
}
p {
font-family: sans-serif;
text-align: center;
color: #534b4b;
}
a {
color: #12782f;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
앞으로 첫 번째 줄에 있는 #내용은 현재 작업하고 있는 파일의 이름입니다.
같은 폴더 안에 styles.css라는 파일을 새로 만든 후 지금까지 만들었던 CSS 코드를 붙여넣기 합니다. 그 후 원래 파일이던 index.html에서 <head>태그 안에 있는 <style>태그를 모두 지웁니다.
이후 index.html이 외부 파일을 참조할 수 있도록 <link>태그를 통해 참조를 시킵니다. <link>태그의 특징은 닫는 태그가 없다는 점입니다.
#index.html
<head>
<link href="styles.css" rel="stylesheet">
<title>Challnge Helper</title>
</head>
<link href="styles.css" rel="stylesheet">에서 href를 통해 파일 이름을 정의해줌으로써 외부 파일을 참조하도록 명령하였습니다. 그 옆에 rel이라는 키워드가 있습니다. rel은 만든 링크의 유형을 정의하는 속성입니다. href는 파일의 확장자만 갖고 이 파일이 어떤 파일인지 판별할 수 없습니다. 그렇기 때문에 rel="stylesheet"이라는 코드를 추가함으로써 style.css 파일이 CSS 파일이라는 것을 알려줍니다.
ID 선택자
지금까지 알아보았던 CSS 지정자는 해당 태그를 쓰고 있다면 그들이 전부 그 스타일에 따라야 했습니다. <p> 태그에 대한 스타일을 정의했다면 <p> 태그를 쓰는 모든 단락들이 해당 스타일을 따라야 했다는 의미입니다. 어떤 특정한 단락에는 새로운 스타일을 지정하고 싶을 때도 있습니다. 그럴때 쓰는 방법이 ID입니다.
HTML의 모든 요소에는 고유의 ID 값을 부여할 수 있습니다. ID값은 모두 소문자이며 공백이 없어야 합니다. 공백을 없애는 방법으로 대쉬(-) 혹은 하이픈을 사용합니다. 그래야 브라우저가 이를 올바르게 분석할 수 있습니다. 아래는 예시입니다.
#index.html
<p id="today-challange">
Learn about the basics of web devolopment - specifically dive into HTML &
CSS
</p>
저는 해당 단락의 ID를 today-challange로 정의했습니다. 이처럼 ID는 마음대로 지정할 수 있습니다.
특정 단락만 스타일을 바꾸는 방법으로는 html 태그에서 스타일을 추가하는 방법도 있지만, 이는 덧씌워진 스타일이기도 하고, 그럴거면 외부 CSS 스타일을 참조할 의미도 없죠. 가독성도 나빠지기도 하고, 그렇기 때문에 CSS 파일에서 #ID를 통하여 스타일을 지정할 수 있습니다.
#styles.css
#today-challange {
}
이렇게 해서 스타일을 정의하고, 중괄호 안에 내용을 채워넣을 수 있습니다.
폰트 스타일 변경하기
이제 today-challange의 내용을 꾸며보도록 하겠습니다.
#styles.css
#today-challange {
color: #e82761;
font-weight: bold;
font-size: 52px;
}
색상은 붉은 계열의 16진수 코드로 적용하였습니다. font-weight라는 키워드를 통해 글자의 무게감, 굵기를 표현할 수 있습니다. Visual Studio Code 편집기에서 작성할 경우 100, 200과 같은 숫자들로 제안사항이 출력되기도 합니다. 숫자로 하셔도 되지만, 저는 bold 키워드로 하였습니다. 또한 글자의 크기는 font-size로 변경이 가능합니다.
지금까지 사용하고 있던 폰트인 sans-serif도 충분히 훌륭하고 깔금한 폰트지만, 웹 페이지를 만들면서 하나의 폰트만 쓰는 것은 어려운 일입니다. 그렇기 때문에 https://fonts.google.com/
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
구글 폰트 사이트에서 원하는 폰트를 찾은 후 이를 HTML 코드화하여 변경할 수 있습니다. 여기서 폰트를 무작정 많이 코드화 한다면, 이 코드들은 전부 사용자 PC에서 다운로드 되기 때문에, 페이지가 로드되는 속도가 느려지는 현상을 초래할 수 있습니다. 저는 <h1> 태그에 쓸 Oswald 폰트 700px와 <p> 태그에 쓸 Fira sans 폰트 Regular 400px, 700px를 코드화 하였습니다. 복사한 코드는 다음과 같습니다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&family=Oswald:wght@700&display=swap" rel="stylesheet">
이 코드를 index.html의 <head> 태그 안에 붙여넣기 하시면 됩니다.
#styles.css
h1 {
font-family: 'Oswald', sans-serif;
text-align: center;
color: red
}
p {
font-family: 'Fira Sans', sans-serif;
text-align: center;
color: #534b4b;
}
앞서 index.html에서는 폰트를 불러오기만 했습니다. 위 코드에는 코드를 사용한다고 명령하는 코드입니다. 코드를 보시면 Oswald 옆에 sans-serif 폰트가 하나 더 있습니다. 이는 만약에 구글 폰트 서버가 오프라인이 되거나 사용할 수 없는 상태가 되었을 때 옆에 있는 sans-serif 폰트로 대체하겠다는 의미입니다.
꺾쇠 기호 출력
HTML에서 꺾쇠 기호(<, >)는 특별한 의미를 갖는 문자입니다. 이를 출력하기 위해 편집기에서 마구잡이로 꺾쇠 기호를 입력할 경우 그 문자가 딱 봐도 위험해보이게 붉은색으로 처리합니다.
꺾쇠 기호는 다음과 같이 출력할 수 있습니다.
> - >
< - <
4일차 완성본
