오늘의 주제
오늘은 코딩애플 강의 초급모듈 마무리 부분에 있는 pseudo-class, 그리고 중급모듈 시작부분에 있는 html, css 웹폰트 추가하는 방법, flexbox, head 태그에 대해서 알아보도록 하겠다.
pseudo class
css에서 pseudo class란 우리가 style 하려는 html요소의 특별한 상태를 명시할 때 사용한다.
대표적인 예시
우리가 웹사이트에서 버튼을 누를 때를 생각하면, 마우스 포인터를 버튼에 올려둘 때, 버튼을 눌렀을 때, 누르고 난 후의 버튼 색과 모양이 달라지는걸 볼 수 있다.
또 하이퍼링크를 눌렀을때, 원래는 파란색이지만 누르고 난 후에는 보라색으로 바뀌는 것을 볼수 있다. 이런 속성을 바꾸고 싶을 때 pseudo class를 사용한다.
간단하게 버튼, 하이퍼 링크를 pseudo class를 사용해 꾸미는 방법을 알아보자
.btn:hover {
background-color: chocolate;
}
.btn:focus {
background-color: chocolate;
}
.btn:active {
background-color: chocolate;
}여기서 btn은 button의 class 명이다.
hover 같은 경우는 우리가 button위에 마우스 포인터를 올려두었을 때의 상태를 의미한다. focus 같은 경우 버튼을 누른 뒤의 상태, active 같은 경우 내가 이 button을 누르고 떼기 전까지의 상태를 의미한다.
a:link {
color: red;
}
a:visited {
color: black;
}여기서 a는 a태그를 의미힌다. 여기서 link는 방문 전 링크를 나타내고, visited는 방문 후, 그러니까 클릭 후 링크를 나타낸다.
이렇게 pseudo-class를 이용해서 상태에 따른 style을 조정할 수 있다.
웹폰트 추가하는 방법
일단 기본적으로, 시스템에 설치가 되어있는 폰트를 적용하는 방법은 다음과 같다.
body {
font-family : 'gulim';
}
하지만 컴퓨터에 설치되지 않은 폰트를 이용하고 싶은 경우가 발생하기도 한다. 이 경우 다음과 같이 적용하면 된다.
@font-face {
font-family : 'fontname';
src : url(nanumsquare.ttf)
}위에 있는 nanumsquare 폰트 파일을 다운받아, 내가 지금 html, css 작업하고 있는 폴더로 이동해 준 다음 폴더 경로를 url에 작성해주면 내가 정해준 이름으로 폰트를 적용할 수 있다.
flexbox에 대해서
우리가 그동안 div 박스들을 옆에 정렬을 할때, float 을 사용했는데 이번에는 정렬할때 사용하는 다른 방법에 대해서 알아보겠다.
.flex-container {
display : flex;
}
.box{
width: 100px;
height: 100px;
background-color: black;
}가로 정렬로 정렬하고 싶은 div들을 하나의 큰 div로 감싸고, 여기에 display: flex를 적용하면 가능하다.
display: flex 속성을 적용하면 사용할 수 있는 세부 속성에 대해서도 알아보자.
justify-content: center 좌우 정렬 하는 속성
align-items : center 상하 정렬을 하는 속성
flex-direction: column 세로 정렬을 하는 속성
flex-wrap: wrap 가로 정렬때 폭을 넘는 요소를 wrap 처리 하는 속성
flex-grow: 2 해당 div 박스의 폭이 상대적으로 몇배 큰지를 나타내는 속성
align-content: space-between container 안의 박스가 여러줄일 떄 박스들의 상하 배치를 조절할 수 있는 속성이다.
head 태그에는 어떤 내용이 들어가야 할까
그동안 우리가 작성한 모든 태그들은 보통 body 태그 안에 들어가는 내용들이다. 그렇다면 head 태그에는 어떤 내용이 들어가야 할까?
각종 css 파일들
<head>
<link href="css/main.css" rel="stylesheet">
</head>css 파일을 html에 첨부할 때 링크태그를 head에 넣어서 사용한다.
사이트 제목
<head>
<title>사이트입니다</title>
</head>여러가지 메타 태그
<head>
<meta charset="UTF-8">
<meta name = "description" content="룰루랄라">
<meta name = "keywords" content="lalala">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
</head>charset 같은 경우는 사이트의 인코딩 형식을 지정한다
사이트 검색 결과 화면에 뜨는 글귀를 수정하고 싶다면 description, 그리고 content를 수정하면 된다.
keyword는 검색에 도움을 주는 키워드이다.
마지막으로 사이트가 처음 시작할 때 모바일 기기의 실제 폭으로 렌더링 해달라는 키워드이다.
아직은 잘 모르겠으니 일단 메타 태그는 알아만 두고 넘어가도록 하자
fabicon
우리가 웹사이트를 접속해서 보다보면 탭 위에 작은 아이콘들이 있는 것을 알 수 있다. 이를 추가하려면 다음과 같이 head 태그에 추가해 주면 된다.
<head>
<link rel="icon" href="icon.co" type="image/x-icon>
</head>ico 대신 png 파일도 가능하며, 브라우저 상단 탭에 있는 작은 아이콘을 설정하는 태그이다.
마무리
오늘은 반응형 레이아웃 배우기 전 pseudo-class, 폰트, flexbox, head 태그에 대해 알아보았다. 다음에는 이제 반응형 레이아웃을 만들기를 실습해보려 한다.
