[웹 개발 기초] 웹 개발 4일차(링크 스타일 :hover, 외부 CSS파일 참조하기, ID 선택자, 폰트 굵기, 크
https://dash758.tistory.com/8와 href, 글로" data-og-description="https://dash758.tistory.com/7, , CSS로 폰트 변경, 글자 중앙 정렬, 색상 바꾸" data-og-description="지난번에는 메모장을 이용하여 소스 코드를 작성한 후
dash758.tistory.com
지난 시간에는 하이퍼링크의 스타일을 바꿔주는 :hover, 외부 CSS파일 참조하기, ID 선택자, 폰트 굵기, 크기, 구글 폰트를 통한 폰트 변경, 꺾쇠 기호(<, >) 출력에 대하여 알아보았습니다.
이번 시간에는 이미지를 삽입하는 <img> 태그와 이미지 스타일링, 배경 스타일링, 홈 페이지 완성 및 두 번째 페이지 만들고, 공유 CSS 파일과 상대 경로 지정하는 방법에 대해 알아보겠습니다.
이미지 삽입 및 스타일링
지금까지 만들었던 웹 사이트에는 글만 있기 때문에 시각적인 요소가 없어 답답합니다. 이를 해결하기 위하여 이미지를 삽입하겠습니다. 이미지는 <img>라는 태그로 넣을 수 있습니다. 저는 트로피 사진을 넣겠습니다.
<img> 태그는 <link> 태그와 같이 닫는 태그가 없는 빈 요소입니다. 때문에 <img src="URL">과 같은 형태로 코드를 짜줍니다. 사진은 눈에 보이는 요소이기 때문에 <body> 태그 안에 넣어줍니다.
#index.html
<img src="challenges-trophy.jpg" alt="Trophy">
옆에 alt는 만약 이미지가 정상적으로 로드가 되지 않았을 때 출력하는 비상용 문자입니다.
이미지의 크기를 조절하고 네모난 이미지를 둥글게 바꾸어 보고, 이를 중앙에 정렬해 보겠습니다. 먼저 이미지의 크기를 조절하고, 모양을 바꾸는 것은 쉽습니다. CSS파일에서 다음과 같이 코드를 작성해줍니다.
#styles.css
img {
width: 200px;
height: 200px;
border-radius: 100px;
}
이미지의 너비와 높이를 지정해주고, border-radius를 통해 이미지의 테두리의 모양을 원형으로 지정해줍니다. 이렇게 하면 앞으로 <img> 태그가 들어가는 모든 이미지들은 전부 위와 같은 코드의 규칙에 따를 것입니다.
이제 이미지를 중앙으로 정렬해 보겠습니다. 이미지를 중앙으로 정렬하는 것은 살짝 까다롭습니다. 위에 있는 이미지 태그 안에 text-align: center;를 입력하면 될 것 같지만, 그렇지 않습니다.
text-align은 사실 텍스트를 정렬하는 명령어가 아닌 태그 안에 있는 컨텐츠를 정렬하는 명령어 였습니다. 닫는 태그가 없는 빈 요소인 <img> 태그는 컨텐츠가 없기 때문에 text-align의 영향을 받지 않습니다. <img> 태그는 <body>에 속한 컨텐츠입니다. 그렇기 때문에 CSS의 <body>안에 있는 요소를 대상으로 하는 text-align 속성을 추가해야 합니다.
#styles.css
body {
text-align: center;
}
이 코드를 추가함으로써 <body> 안에 있는 모든 요소들은 전부 중앙 정렬이 될 것입니다. 따라서, 기존에 <h1> 태그와 <p> 태그에 있던 text-align: center; 코드를 전부 제거해줍니다.
#styles.css
h1 {
font-family: 'Oswald', sans-serif;
color: red
}
p {
font-family: 'Fira Sans', sans-serif;
color: #534b4b;
}
배경 스타일링
지금까지의 웹 페이지는 배경이 흰 색이라 재미도 없고, 방금 넣은 이미지가 너무 위에 붙어있어서 답답한 느낌을 주었습니다. 이를 해결하기 위해 배경 색상과, 이미지와 글 사이의 간격을 넓혀 보겠습니다.
시각적으로 보이는 전체 요소에 적용해야 하므로 <body> 태그에서 작성하겠습니다. 그리고, 스타일을 담당하기 때문에 CSS 파일에서 작성하면 되겠네요.
#styles.css
body {
text-align: center;
background-color: #f8fabe;
margin: 50px;
}
CSS 파일의 body 요소를 위와 같이 바꿔주시면 됩니다. 배경 색상을 바꾸는 것은 background-color를 통해 변경이 가능합니다. 저는 따스한 색상을 위해 노란빛으로 바꿔주겠습니다. 이미지와 텍스트 사이의 간격을 넓히기 위해서 margin 명령어를 사용합니다. 이는 각 요소의 상하좌우 간격을 50px로 바꾸겠다는 의미입니다.
이것으로 목표를 이루기 위한 웹 페이지의 '홈' 페이지가 완성되었습니다. 이제 한 주간의 남은 과제를 보여주는 두 번째 페이지를 만들어 보겠습니다.
두 번째 웹 페이지 만들기
웹 페이지를 만들고 있는 폴더 안에서 index.html과 다른 이름을 가진 새로운 html 파일을 만들어줍니다. 저는 한 주간의 남은 과제를 보여준다는 의미에서 remain.html이라고 이름을 지었습니다.
새로운 파일을 만들었으니 html의 기본 뼈대를 만들어야죠. 그러나 Visual Studio Code의 html파일을 처음 열고, 백지 화면일때 느낌표(!) 하나만 입력해주고, 엔터를 누르면 알아서 기본 뼈대를 만들어줍니다.
#remain.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
위 코드가 전체 뼈대인데, 지금까지 봤던 뼈대와는 몇가지 차이가 있습니다. 그 전에 우선 <title> 태그 안에 있는 페이지 제목을 Upcoming Challanges라고 하겠습니다.
우선 4번째 줄에 <html> 옆에 lang="en"이라고 쓰여저 있습니다. 이는 브라우저에서 '이 페이지는 영어로 쓰인다.' 라고 지시하는 것과 같습니다.
그 다음에 <meta> 태그는 추후에 다룰 예정인데, <meta charset="UTF-8">은 UTF-8의 문자 집합을 사용하겠다는 의미입니다. 이 코드는 글자가 깨지지 않도록 도와주기 때문에 index.html 파일에도 추가해줍니다. 사실 추가하건 말건 상관없긴 하지만요.
만약 문자 집합이 무엇인지 궁금하신 분들은 이 글의
2.2 0과 1로 문자를 표현하는 방법
항목을 참고해주시길 바랍니다. 안 궁금하셔도 참고해주시길 바랍니다.
혼자 공부하는 컴퓨터 구조 + 운영체제 1주차 (컴퓨터 구조, 데이터, 명령어, 진수, 스택과 큐)
포너블을 공부하면서 어셈블리 코드 실행 흐름과 그에 따른 바이너리의 메모리 할당 변화를 분석하는데에 큰 어려움을 겪어 메모리 구조를 공부하고, 나아가 컴퓨터 구조까지 배울 생각으로 이
dash758.tistory.com
그 다음 줄에 있는 코드인 <meta name="viewport" content="width=\, initial-scale=1.0">은 모바일과 같은 PC환경이 아닌 다른 플랫폼으로 보았을 때의 화면 설정을 도와주는 명령어입니다. 지금은 어차피 PC 환경에서만 작업할 것이기 때문에 이 코드는 지워줍니다.
그렇다면 두 번째 페이지의 최종적인 기본 뼈대는 다음과 같습니다.
#remain.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Upcoming Challanges</title>
</head>
<body>
</body>
</html>
이제 만든 웹 페이지를 홈페이지와 연결해 보겠습니다. 그 전에 index.html의 단락을 조금 바꾸겠습니다.
#index.html
<p>
I ll achieve this goal by diving into
<a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element">
more learning resources.
</a>
</p>
이렇게 위와 같이 되어있던 코드를 아래와 같이 바꾸겠습니다.
#index.html
<p>
Explore the<a href="remain.html"> full week</a>
</p>
이렇게 되면 웹 페이지를 로드했을 때 full week를 누른다면 두 번째 페이지인 Upcoming Challanges로 이동할 것입니다.
두 번째 페이지 꾸미기
이제 Upcoming Challanges의 내용을 추가하고 꾸며보겠습니다. 이 내용은 마음대로 하셔도 좋습니다. 우선 저는 index.html 페이지와 다른 스타일을 꾸미기 위하여
- remain.html만의 스타일인 remain.css라는 별도의 파일
- Oswald와 Fira Sans 폰트 사용
- 그 페이지의 제목
- 홈페이지로 돌아갈 수 있는 버튼
- 금주의 도전 과제 여러가지
를 작성해보도록 하겠습니다.
우선 별도의 CSS 파일부터 만들겠습니다.
#remain.css
body {
background-color: #ffbaba;
margin: 50px;
text-align: center;
color: #280d3b;
}
h1 {
font-family: 'Oswald', sans-serif;
}
p {
font-family: 'Fira Sans', sans-serif;
}
a {
font-family: 'Fira Sans', sans-serif;
color: #b402f5;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}배경색은 긴박함을 연출하기 위하여 붉은색 계열로, 그 페이지의 모든 요소가 중앙정렬 되도록 하였습니다. 또한 제목과 단락의 폰트와 색상을 설정하였고, 하이퍼링크가 들어갈만한 태그의 스타일 역시 지정하였습니다.
이후 폰트를 지정하는 것, 홈페이지 버튼, 금주의 과제 등 역시 하고싶은 대로 설정합니다. 완성 결과는 이번 글의 맨 아래에 첨부하겠습니다. 저는 HTML과 CSS를 복습하고, 이들을 연습해보며, 심화 탐구하여 더 복잡한 웹 페이지를 만들어 보는것을 목표로 하였습니다.
공유 CSS 파일
앞으로 점점 더 많은 페이지를 만들 예정입니다. 그럴때마다 각 페이지당 하나씩 CSS 파일을 만드는 것은 낭비가 클 것입니다. 이를 방지하기 위하여 모든 페이지에 CSS 규칙을 적용할 파일 하나를 만들겠습니다. 파일 이름은 shared.css로 하겠습니다.
#shared.css
body {
background-color: #ffbaba;
margin: 50px;
text-align: center;
color: #280d3b;
}
h1 {
font-family: 'Oswald', sans-serif;
}
p {
font-family: 'Fira Sans', sans-serif;
}
a {
font-family: 'Fira Sans', sans-serif;
color: #b402f5;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}보시면 remain.css 코드 전체를 그대로 옮겼음을 알 수 있습니다. 색상이야 그렇다 치더라도 <body>의 규칙이나 폰트는 전부 같은 폰트를 사용하고, 하이퍼링크에 대한 규칙 역시 모든 페이지에 그대로 사용할 예정이기 때문에 위와 같이 코드를 붙여넣기 하였습니다. remain.css 파일의 모든 내용은 제거하되 파일은 삭제하지 마세요.
이제 모든 html 파일에 이를 적용하기 위해 <head> 태그 안에 다음과 같이 코드를 입력합니다.
#index.html
<link href="shared.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
공유 CSS 파일을 사용하기 위해서는 순서가 중요합니다. shared.css에서 스타일을 정의하였지만, 중복되는 부분은 styles.css에서 덮어씌우기 때문입니다. 즉, styles.css에서 정의되지 않은 스타일들은 shared.css에서 적용한다고 보시면 됩니다. 두 번째 페이지에도 똑같이 적용하여 줍니다.
파일 정리
CSS 파일과 이미지 파일이 점점 더 많아짐에 따라 현재 작업하고 있는 폴더는 더더욱 보기에 난잡해질 것입니다. 이를 방지하기 위하여 새로운 하위 폴더를 만들어 이들을 정리하겠습니다. 우선 하위 폴더로 images와 styles 폴더를 만듭니다. 이후 이미지 파일은 images 폴더로, CSS파일들은 styles 폴더로 이동시켜줍니다.
하지만 이 상태로 웹 사이트를 실행한다면 경로가 바뀌었기 때문에 브라우저가 이미지 파일과 CSS 파일의 위치를 찾을 수 없습니다. 이들을 상대경로로 지정해주면 해결될 문제입니다.
지금까지 다른 파일들을 참조하고 있던 코드들을 전부 상대경로 형식으로 바꾸어줍니다.
#index.html
<link href="styles/shared.css" rel="stylesheet" />
<link href="styles/styles.css" rel="stylesheet" />
이런식으로 이미지 파일과 두 번째 페이지의 형식도 모두 바꿔줍니다.
홈페이지
두 번째 페이지(Upcoming Challanges)
